You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
813 lines
24 KiB
813 lines
24 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Three.js Material Browser</title>
|
|
<link rel="shortcut icon" href="../../files/favicon.ico" />
|
|
<link rel="stylesheet" type="text/css" href="../../files/main.css">
|
|
<style>
|
|
canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#newWindow {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0.3em;
|
|
left: 0.5em;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Import maps polyfill -->
|
|
<!-- Remove this when import maps will be widely supported -->
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "../../build/three.module.js",
|
|
"three/addons/": "../../examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
|
|
|
|
<script type="module">
|
|
|
|
import * as THREE from 'three';
|
|
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
|
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
|
|
|
|
const constants = {
|
|
|
|
combine: {
|
|
|
|
'THREE.MultiplyOperation': THREE.MultiplyOperation,
|
|
'THREE.MixOperation': THREE.MixOperation,
|
|
'THREE.AddOperation': THREE.AddOperation
|
|
|
|
},
|
|
|
|
side: {
|
|
|
|
'THREE.FrontSide': THREE.FrontSide,
|
|
'THREE.BackSide': THREE.BackSide,
|
|
'THREE.DoubleSide': THREE.DoubleSide
|
|
|
|
},
|
|
|
|
blendingMode: {
|
|
|
|
'THREE.NoBlending': THREE.NoBlending,
|
|
'THREE.NormalBlending': THREE.NormalBlending,
|
|
'THREE.AdditiveBlending': THREE.AdditiveBlending,
|
|
'THREE.SubtractiveBlending': THREE.SubtractiveBlending,
|
|
'THREE.MultiplyBlending': THREE.MultiplyBlending,
|
|
'THREE.CustomBlending': THREE.CustomBlending
|
|
|
|
},
|
|
|
|
equations: {
|
|
|
|
'THREE.AddEquation': THREE.AddEquation,
|
|
'THREE.SubtractEquation': THREE.SubtractEquation,
|
|
'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation
|
|
|
|
},
|
|
|
|
destinationFactors: {
|
|
|
|
'THREE.ZeroFactor': THREE.ZeroFactor,
|
|
'THREE.OneFactor': THREE.OneFactor,
|
|
'THREE.SrcColorFactor': THREE.SrcColorFactor,
|
|
'THREE.OneMinusSrcColorFactor': THREE.OneMinusSrcColorFactor,
|
|
'THREE.SrcAlphaFactor': THREE.SrcAlphaFactor,
|
|
'THREE.OneMinusSrcAlphaFactor': THREE.OneMinusSrcAlphaFactor,
|
|
'THREE.DstAlphaFactor': THREE.DstAlphaFactor,
|
|
'THREE.OneMinusDstAlphaFactor': THREE.OneMinusDstAlphaFactor
|
|
|
|
},
|
|
|
|
sourceFactors: {
|
|
|
|
'THREE.DstColorFactor': THREE.DstColorFactor,
|
|
'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
|
|
'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
|
|
|
|
}
|
|
|
|
};
|
|
|
|
function getObjectsKeys( obj ) {
|
|
|
|
const keys = [];
|
|
|
|
for ( const key in obj ) {
|
|
|
|
if ( obj.hasOwnProperty( key ) ) {
|
|
|
|
keys.push( key );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return keys;
|
|
|
|
}
|
|
|
|
const textureLoader = new THREE.TextureLoader();
|
|
const cubeTextureLoader = new THREE.CubeTextureLoader();
|
|
|
|
const envMaps = ( function () {
|
|
|
|
const path = '../../examples/textures/cube/SwedishRoyalCastle/';
|
|
const format = '.jpg';
|
|
const urls = [
|
|
path + 'px' + format, path + 'nx' + format,
|
|
path + 'py' + format, path + 'ny' + format,
|
|
path + 'pz' + format, path + 'nz' + format
|
|
];
|
|
|
|
const reflectionCube = cubeTextureLoader.load( urls );
|
|
|
|
const refractionCube = cubeTextureLoader.load( urls );
|
|
refractionCube.mapping = THREE.CubeRefractionMapping;
|
|
|
|
return {
|
|
none: null,
|
|
reflection: reflectionCube,
|
|
refraction: refractionCube
|
|
};
|
|
|
|
} )();
|
|
|
|
const diffuseMaps = ( function () {
|
|
|
|
const bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
|
|
bricks.wrapS = THREE.RepeatWrapping;
|
|
bricks.wrapT = THREE.RepeatWrapping;
|
|
bricks.repeat.set( 9, 1 );
|
|
|
|
return {
|
|
none: null,
|
|
bricks: bricks
|
|
};
|
|
|
|
} )();
|
|
|
|
const roughnessMaps = ( function () {
|
|
|
|
const bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
|
|
bricks.wrapT = THREE.RepeatWrapping;
|
|
bricks.wrapS = THREE.RepeatWrapping;
|
|
bricks.repeat.set( 9, 1 );
|
|
|
|
return {
|
|
none: null,
|
|
bricks: bricks
|
|
};
|
|
|
|
} )();
|
|
|
|
const matcaps = ( function () {
|
|
|
|
return {
|
|
none: null,
|
|
porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
|
|
};
|
|
|
|
} )();
|
|
|
|
const alphaMaps = ( function () {
|
|
|
|
const fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
|
|
fibers.wrapT = THREE.RepeatWrapping;
|
|
fibers.wrapS = THREE.RepeatWrapping;
|
|
fibers.repeat.set( 9, 1 );
|
|
|
|
return {
|
|
none: null,
|
|
fibers: fibers
|
|
};
|
|
|
|
} )();
|
|
|
|
const gradientMaps = ( function () {
|
|
|
|
const threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
|
|
threeTone.minFilter = THREE.NearestFilter;
|
|
threeTone.magFilter = THREE.NearestFilter;
|
|
|
|
const fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
|
|
fiveTone.minFilter = THREE.NearestFilter;
|
|
fiveTone.magFilter = THREE.NearestFilter;
|
|
|
|
return {
|
|
none: null,
|
|
threeTone: threeTone,
|
|
fiveTone: fiveTone
|
|
};
|
|
|
|
} )();
|
|
|
|
const envMapKeys = getObjectsKeys( envMaps );
|
|
const envMapKeysPBR = envMapKeys.slice( 0, 2 );
|
|
const diffuseMapKeys = getObjectsKeys( diffuseMaps );
|
|
const roughnessMapKeys = getObjectsKeys( roughnessMaps );
|
|
const matcapKeys = getObjectsKeys( matcaps );
|
|
const alphaMapKeys = getObjectsKeys( alphaMaps );
|
|
const gradientMapKeys = getObjectsKeys( gradientMaps );
|
|
|
|
function generateVertexColors( geometry ) {
|
|
|
|
const positionAttribute = geometry.attributes.position;
|
|
|
|
const colors = [];
|
|
const color = new THREE.Color();
|
|
|
|
for ( let i = 0, il = positionAttribute.count; i < il; i ++ ) {
|
|
|
|
color.setHSL( i / il * Math.random(), 0.5, 0.5 );
|
|
colors.push( color.r, color.g, color.b );
|
|
|
|
}
|
|
|
|
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
|
|
|
|
}
|
|
|
|
function handleColorChange( color, converSRGBToLinear = false ) {
|
|
|
|
return function ( value ) {
|
|
|
|
if ( typeof value === 'string' ) {
|
|
|
|
value = value.replace( '#', '0x' );
|
|
|
|
}
|
|
|
|
color.setHex( value );
|
|
|
|
if ( converSRGBToLinear === true ) color.convertSRGBToLinear();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function needsUpdate( material, geometry ) {
|
|
|
|
return function () {
|
|
|
|
material.side = parseInt( material.side ); //Ensure number
|
|
material.needsUpdate = true;
|
|
geometry.attributes.position.needsUpdate = true;
|
|
geometry.attributes.normal.needsUpdate = true;
|
|
geometry.attributes.color.needsUpdate = true;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function updateCombine( material ) {
|
|
|
|
return function ( combine ) {
|
|
|
|
material.combine = parseInt( combine );
|
|
material.needsUpdate = true;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function updateTexture( material, materialKey, textures ) {
|
|
|
|
return function ( key ) {
|
|
|
|
material[ materialKey ] = textures[ key ];
|
|
material.needsUpdate = true;
|
|
|
|
};
|
|
|
|
}
|
|
|
|
function guiScene( gui, scene ) {
|
|
|
|
const folder = gui.addFolder( 'Scene' );
|
|
|
|
const data = {
|
|
background: '#000000',
|
|
'ambient light': ambientLight.color.getHex()
|
|
};
|
|
|
|
folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color, true ) );
|
|
|
|
guiSceneFog( folder, scene );
|
|
|
|
}
|
|
|
|
function guiSceneFog( folder, scene ) {
|
|
|
|
const fogFolder = folder.addFolder( 'scene.fog' );
|
|
|
|
const fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
|
|
|
|
const data = {
|
|
fog: {
|
|
'THREE.Fog()': false,
|
|
'scene.fog.color': fog.color.getHex()
|
|
}
|
|
};
|
|
|
|
fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
|
|
|
|
if ( useFog ) {
|
|
|
|
scene.fog = fog;
|
|
|
|
} else {
|
|
|
|
scene.fog = null;
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
|
|
|
|
}
|
|
|
|
function guiMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const folder = gui.addFolder( 'THREE.Material' );
|
|
|
|
folder.add( material, 'transparent' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
|
|
// folder.add( material, 'blending', constants.blendingMode );
|
|
// folder.add( material, 'blendSrc', constants.destinationFactors );
|
|
// folder.add( material, 'blendDst', constants.destinationFactors );
|
|
// folder.add( material, 'blendEquation', constants.equations );
|
|
folder.add( material, 'depthTest' );
|
|
folder.add( material, 'depthWrite' );
|
|
// folder.add( material, 'polygonOffset' );
|
|
// folder.add( material, 'polygonOffsetFactor' );
|
|
// folder.add( material, 'polygonOffsetUnits' );
|
|
folder.add( material, 'alphaTest', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'visible' );
|
|
folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
|
|
|
|
}
|
|
|
|
function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
envMaps: envMapKeys[ 0 ],
|
|
map: diffuseMapKeys[ 0 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
|
|
|
|
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
|
|
folder.add( material, 'reflectivity', 0, 1 );
|
|
folder.add( material, 'refractionRatio', 0, 1 );
|
|
|
|
}
|
|
|
|
function guiMeshDepthMaterial( gui, mesh, material ) {
|
|
|
|
const data = {
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
|
|
|
|
folder.add( material, 'wireframe' );
|
|
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
|
|
}
|
|
|
|
function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
|
|
|
|
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
|
|
}
|
|
|
|
function guiLineBasicMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex()
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.LineBasicMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.add( material, 'linewidth', 0, 10 );
|
|
folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
|
|
folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
|
|
folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
|
|
|
|
}
|
|
|
|
function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
emissive: material.emissive.getHex(),
|
|
envMaps: envMapKeys[ 0 ],
|
|
map: diffuseMapKeys[ 0 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
|
|
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
|
|
|
|
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
|
|
folder.add( material, 'reflectivity', 0, 1 );
|
|
folder.add( material, 'refractionRatio', 0, 1 );
|
|
|
|
}
|
|
|
|
function guiMeshMatcapMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
matcap: matcapKeys[ 1 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
|
|
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
|
|
}
|
|
|
|
function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
emissive: material.emissive.getHex(),
|
|
specular: material.specular.getHex(),
|
|
envMaps: envMapKeys[ 0 ],
|
|
map: diffuseMapKeys[ 0 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
|
|
folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
|
|
|
|
folder.add( material, 'shininess', 0, 100 );
|
|
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
|
|
folder.add( material, 'reflectivity', 0, 1 );
|
|
folder.add( material, 'refractionRatio', 0, 1 );
|
|
|
|
}
|
|
|
|
function guiMeshToonMaterial( gui, mesh, material ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
map: diffuseMapKeys[ 0 ],
|
|
gradientMap: gradientMapKeys[ 1 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshToonMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
|
|
folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
|
|
}
|
|
|
|
function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
emissive: material.emissive.getHex(),
|
|
envMaps: envMapKeysPBR[ 0 ],
|
|
map: diffuseMapKeys[ 0 ],
|
|
roughnessMap: roughnessMapKeys[ 0 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
|
|
|
|
folder.add( material, 'roughness', 0, 1 );
|
|
folder.add( material, 'metalness', 0, 1 );
|
|
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( data, 'envMaps', envMapKeysPBR ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
|
|
folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
|
|
// TODO metalnessMap
|
|
|
|
}
|
|
|
|
function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
|
|
|
|
const data = {
|
|
color: material.color.getHex(),
|
|
emissive: material.emissive.getHex(),
|
|
envMaps: envMapKeys[ 0 ],
|
|
map: diffuseMapKeys[ 0 ],
|
|
roughnessMap: roughnessMapKeys[ 0 ],
|
|
alphaMap: alphaMapKeys[ 0 ]
|
|
};
|
|
|
|
const folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
|
|
|
|
folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
|
|
folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
|
|
|
|
folder.add( material, 'roughness', 0, 1 );
|
|
folder.add( material, 'metalness', 0, 1 );
|
|
folder.add( material, 'reflectivity', 0, 1 );
|
|
folder.add( material, 'clearcoat', 0, 1 ).step( 0.01 );
|
|
folder.add( material, 'clearcoatRoughness', 0, 1 ).step( 0.01 );
|
|
folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'wireframe' );
|
|
folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
|
|
folder.add( data, 'envMaps', envMapKeysPBR ).onChange( updateTexture( material, 'envMap', envMaps ) );
|
|
folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
|
|
folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
|
|
folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
|
|
|
|
// TODO metalnessMap
|
|
|
|
}
|
|
|
|
function chooseFromHash( gui, mesh, geometry ) {
|
|
|
|
const selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
|
|
|
|
let material;
|
|
|
|
switch ( selectedMaterial ) {
|
|
|
|
case 'MeshBasicMaterial' :
|
|
|
|
material = new THREE.MeshBasicMaterial( { color: 0x049EF4 } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshBasicMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshLambertMaterial' :
|
|
|
|
material = new THREE.MeshLambertMaterial( { color: 0x049EF4 } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshLambertMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshMatcapMaterial' :
|
|
|
|
material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshMatcapMaterial( gui, mesh, material, geometry );
|
|
|
|
// no need for lights
|
|
|
|
light1.visible = false;
|
|
light2.visible = false;
|
|
light3.visible = false;
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshPhongMaterial' :
|
|
|
|
material = new THREE.MeshPhongMaterial( { color: 0x049EF4 } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshPhongMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshToonMaterial' :
|
|
|
|
material = new THREE.MeshToonMaterial( { color: 0x049EF4, gradientMap: gradientMaps.threeTone } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshToonMaterial( gui, mesh, material );
|
|
|
|
// only use a single point light
|
|
|
|
light1.visible = false;
|
|
light3.visible = false;
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshStandardMaterial' :
|
|
|
|
material = new THREE.MeshStandardMaterial( { color: 0x049EF4 } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshStandardMaterial( gui, mesh, material, geometry );
|
|
|
|
// only use scene environment
|
|
|
|
light1.visible = false;
|
|
light2.visible = false;
|
|
light3.visible = false;
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshPhysicalMaterial' :
|
|
|
|
material = new THREE.MeshPhysicalMaterial( { color: 0x049EF4 } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshPhysicalMaterial( gui, mesh, material, geometry );
|
|
|
|
// only use scene environment
|
|
|
|
light1.visible = false;
|
|
light2.visible = false;
|
|
light3.visible = false;
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshDepthMaterial' :
|
|
|
|
material = new THREE.MeshDepthMaterial();
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshDepthMaterial( gui, mesh, material );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'MeshNormalMaterial' :
|
|
|
|
material = new THREE.MeshNormalMaterial();
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiMeshNormalMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
case 'LineBasicMaterial' :
|
|
|
|
material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
|
|
guiMaterial( gui, mesh, material, geometry );
|
|
guiLineBasicMaterial( gui, mesh, material, geometry );
|
|
|
|
return material;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//
|
|
|
|
const selectedMaterial = window.location.hash.substring( 1 );
|
|
|
|
if ( THREE[ selectedMaterial ] !== undefined ) {
|
|
|
|
document.getElementById( 'newWindow' ).href += '#' + selectedMaterial;
|
|
|
|
}
|
|
|
|
const gui = new GUI();
|
|
|
|
const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
renderer.outputEncoding = THREE.sRGBEncoding;
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
const pmremGenerator = new THREE.PMREMGenerator( renderer );
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color( 0x444444 );
|
|
scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
|
|
|
|
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 10, 100 );
|
|
camera.position.z = 35;
|
|
|
|
const ambientLight = new THREE.AmbientLight( 0x000000 );
|
|
scene.add( ambientLight );
|
|
|
|
const light1 = new THREE.PointLight( 0xffffff, 1, 0 );
|
|
light1.position.set( 0, 200, 0 );
|
|
scene.add( light1 );
|
|
|
|
const light2 = new THREE.PointLight( 0xffffff, 1, 0 );
|
|
light2.position.set( 100, 200, 100 );
|
|
scene.add( light2 );
|
|
|
|
const light3 = new THREE.PointLight( 0xffffff, 1, 0 );
|
|
light3.position.set( - 100, - 200, - 100 );
|
|
scene.add( light3 );
|
|
|
|
guiScene( gui, scene );
|
|
|
|
const geometry = new THREE.TorusKnotGeometry( 10, 3, 200, 32 ).toNonIndexed();
|
|
|
|
generateVertexColors( geometry );
|
|
|
|
const mesh = new THREE.Mesh( geometry );
|
|
mesh.material = chooseFromHash( gui, mesh, geometry );
|
|
|
|
scene.add( mesh );
|
|
|
|
let prevFog = false;
|
|
|
|
function render() {
|
|
|
|
requestAnimationFrame( render );
|
|
|
|
mesh.rotation.x += 0.005;
|
|
mesh.rotation.y += 0.005;
|
|
|
|
if ( prevFog !== scene.fog ) {
|
|
|
|
mesh.material.needsUpdate = true;
|
|
prevFog = scene.fog;
|
|
|
|
}
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
window.addEventListener( 'resize', function () {
|
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
}, false );
|
|
|
|
render();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|