Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
material-browser.html 23.1 KB
Newer Older
M
Clean up.  
Mr.doob 已提交
1 
<!DOCTYPE html>
G
Material browser - added texture maps  
Greg Tatum 已提交
2 
<html lang="en">
G
Documentation material browser  
Greg Tatum 已提交
3 
	<head>
G
Material browser - added texture maps  
Greg Tatum 已提交
4 5 
		<meta charset="utf-8">
		<title>Three.js Material Browser</title>
M
Docs: Clean up  
Mugen87 已提交
6 7 
		<link rel="shortcut icon" href="../../files/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../files/main.css">
G
Documentation material browser  
Greg Tatum 已提交
8 
		<style>
M
Docs: Fixed more scrollbars.  
Mr.doob 已提交
9 10 11 12 13 
			canvas {
				display: block;
				width: 100%;
				height: 100%;
			}
M
Docs: Improved viewer.  
Mr.doob 已提交
14
G
Material browser - added texture maps  
Greg Tatum 已提交
15 
			#newWindow {
M
Docs: Removed scrollbars from material browser.  
Mr.doob 已提交
16 17 18 19 20 
				display: block;
				position: absolute;
				bottom: 0.3em;
				left: 0.5em;
				color: #fff;
G
Material browser - added texture maps  
Greg Tatum 已提交
21 
			}
G
Documentation material browser  
Greg Tatum 已提交
22 23 24 
		</style>
	</head>
	<body>
M
Docs: Improved viewer.  
Mr.doob 已提交
25
G
Material browser - added texture maps  
Greg Tatum 已提交
26 
		<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
M
Docs: Improved viewer.  
Mr.doob 已提交
27
M
Docs: Convert browsers to modules.  
Mugen87 已提交
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 
		<script type="module">
			import {
				AdditiveBlending, CustomBlending, MultiplyBlending, NormalBlending, NoBlending, SubtractiveBlending,
				AddEquation, ReverseSubtractEquation, SubtractEquation,
				AddOperation, MixOperation, MultiplyOperation,
				AmbientLight,
				Color,
				CubeTextureLoader,
				CubeRefractionMapping,
				DoubleSide, FrontSide, BackSide,
				DstAlphaFactor, DstColorFactor, OneFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, ZeroFactor,
				Float32BufferAttribute,
				Fog,
				LineBasicMaterial,
				Mesh,
				MeshBasicMaterial,
				MeshDepthMaterial,
				MeshLambertMaterial,
				MeshMatcapMaterial,
				MeshNormalMaterial,
				MeshPhongMaterial,
				MeshPhysicalMaterial,
				MeshStandardMaterial,
				MeshToonMaterial,
				NearestFilter,
				PerspectiveCamera,
				PointLight,
				RepeatWrapping,
				RGBFormat,
				Scene,
				TextureLoader,
M
Refactor geometry generators.  
Mugen87 已提交
59 
				TorusKnotGeometry,
M
Docs: Convert browsers to modules.  
Mugen87 已提交
60 61 62 63 64 
				WebGLRenderer
			} from "../../build/three.module.js";

			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
M
Docs: Move to let/const.  
Mugen87 已提交
65 
			const constants = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 

				combine: {

					'THREE.MultiplyOperation': MultiplyOperation,
					'THREE.MixOperation': MixOperation,
					'THREE.AddOperation': AddOperation

				},

				side: {

					'THREE.FrontSide': FrontSide,
					'THREE.BackSide': BackSide,
					'THREE.DoubleSide': DoubleSide

				},

				blendingMode: {

					'THREE.NoBlending': NoBlending,
					'THREE.NormalBlending': NormalBlending,
					'THREE.AdditiveBlending': AdditiveBlending,
					'THREE.SubtractiveBlending': SubtractiveBlending,
					'THREE.MultiplyBlending': MultiplyBlending,
					'THREE.CustomBlending': CustomBlending

				},

				equations: {

					'THREE.AddEquation': AddEquation,
					'THREE.SubtractEquation': SubtractEquation,
					'THREE.ReverseSubtractEquation': ReverseSubtractEquation

				},

				destinationFactors: {

					'THREE.ZeroFactor': ZeroFactor,
					'THREE.OneFactor': OneFactor,
					'THREE.SrcColorFactor': SrcColorFactor,
					'THREE.OneMinusSrcColorFactor': OneMinusSrcColorFactor,
					'THREE.SrcAlphaFactor': SrcAlphaFactor,
					'THREE.OneMinusSrcAlphaFactor': OneMinusSrcAlphaFactor,
					'THREE.DstAlphaFactor': DstAlphaFactor,
					'THREE.OneMinusDstAlphaFactor': OneMinusDstAlphaFactor

				},

				sourceFactors: {

					'THREE.DstColorFactor': DstColorFactor,
					'THREE.OneMinusDstColorFactor': OneMinusDstColorFactor,
					'THREE.SrcAlphaSaturateFactor': SrcAlphaSaturateFactor
M
Docs: Improved viewer.  
Mr.doob 已提交
120
M
Docs: Convert browsers to modules.  
Mugen87 已提交
121 122 123 124 125 126 
				}

			};

			function getObjectsKeys( obj ) {
M
Docs: Move to let/const.  
Mugen87 已提交
127 
				const keys = [];
M
Docs: Convert browsers to modules.  
Mugen87 已提交
128
M
Docs: Move to let/const.  
Mugen87 已提交
129 
				for ( const key in obj ) {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
130 131 132 133 134 135 136 137 138 139 140 141 142 

					if ( obj.hasOwnProperty( key ) ) {

						keys.push( key );

					}

				}

				return keys;

			}
M
Docs: Move to let/const.  
Mugen87 已提交
143 144 
			const textureLoader = new TextureLoader();
			const cubeTextureLoader = new CubeTextureLoader();
M
Docs: Convert browsers to modules.  
Mugen87 已提交
145
M
Docs: Move to let/const.  
Mugen87 已提交
146 
			const envMaps = ( function () {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
147
M
Docs: Move to let/const.  
Mugen87 已提交
148 149 150 
				const path = '../../examples/textures/cube/SwedishRoyalCastle/';
				const format = '.jpg';
				const urls = [
M
Docs: Convert browsers to modules.  
Mugen87 已提交
151 152 153 154 155 
					path + 'px' + format, path + 'nx' + format,
					path + 'py' + format, path + 'ny' + format,
					path + 'pz' + format, path + 'nz' + format
				];
M
Docs: Move to let/const.  
Mugen87 已提交
156 
				const reflectionCube = cubeTextureLoader.load( urls );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
157 158 
				reflectionCube.format = RGBFormat;
M
Docs: Move to let/const.  
Mugen87 已提交
159 
				const refractionCube = cubeTextureLoader.load( urls );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
160 161 162 163 164 165 166 167 168 169 170 
				refractionCube.mapping = CubeRefractionMapping;
				refractionCube.format = RGBFormat;

				return {
					none: null,
					reflection: reflectionCube,
					refraction: refractionCube
				};

			} )();
M
Docs: Move to let/const.  
Mugen87 已提交
171 
			const diffuseMaps = ( function () {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
172
M
Docs: Move to let/const.  
Mugen87 已提交
173 
				const bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
174 175 176 177 178 179 180 181 182 183 184 
				bricks.wrapS = RepeatWrapping;
				bricks.wrapT = RepeatWrapping;
				bricks.repeat.set( 9, 1 );

				return {
					none: null,
					bricks: bricks
				};

			} )();
M
Docs: Move to let/const.  
Mugen87 已提交
185 
			const roughnessMaps = ( function () {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
186
M
Docs: Move to let/const.  
Mugen87 已提交
187 
				const bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
188 189 190 191 192 193 194 195 196 197 198 
				bricks.wrapT = RepeatWrapping;
				bricks.wrapS = RepeatWrapping;
				bricks.repeat.set( 9, 1 );

				return {
					none: null,
					bricks: bricks
				};

			} )();
M
Docs: Move to let/const.  
Mugen87 已提交
199 
			const matcaps = ( function () {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
200 201 202 203 204 205 206 207 

				return {
					none: null,
					porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
				};

			} )();
M
Docs: Move to let/const.  
Mugen87 已提交
208 
			const alphaMaps = ( function () {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
209
M
Docs: Move to let/const.  
Mugen87 已提交
210 
				const fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
211 212 213 214 215 216 217 218 219 220 221 
				fibers.wrapT = RepeatWrapping;
				fibers.wrapS = RepeatWrapping;
				fibers.repeat.set( 9, 1 );

				return {
					none: null,
					fibers: fibers
				};

			} )();
M
Docs: Move to let/const.  
Mugen87 已提交
222 
			const gradientMaps = ( function () {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
223
M
Docs: Move to let/const.  
Mugen87 已提交
224 
				const threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
225 226 227 
				threeTone.minFilter = NearestFilter;
				threeTone.magFilter = NearestFilter;
M
Docs: Move to let/const.  
Mugen87 已提交
228 
				const fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
229 230 231 232 233 234 235 236 237 238 239 
				fiveTone.minFilter = NearestFilter;
				fiveTone.magFilter = NearestFilter;

				return {
					none: null,
					threeTone: threeTone,
					fiveTone: fiveTone
				};

			} )();
M
Docs: Move to let/const.  
Mugen87 已提交
240 241 242 243 244 245 
			const envMapKeys = getObjectsKeys( envMaps );
			const diffuseMapKeys = getObjectsKeys( diffuseMaps );
			const roughnessMapKeys = getObjectsKeys( roughnessMaps );
			const matcapKeys = getObjectsKeys( matcaps );
			const alphaMapKeys = getObjectsKeys( alphaMaps );
			const gradientMapKeys = getObjectsKeys( gradientMaps );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
246 247 248 

			function generateVertexColors( geometry ) {
M
Docs: Move to let/const.  
Mugen87 已提交
249 
				const positionAttribute = geometry.attributes.position;
M
Docs: Convert browsers to modules.  
Mugen87 已提交
250
M
Docs: Move to let/const.  
Mugen87 已提交
251 252 
				const colors = [];
				const color = new Color();
M
Docs: Convert browsers to modules.  
Mugen87 已提交
253
M
Docs: Move to let/const.  
Mugen87 已提交
254 
				for ( let i = 0, il = positionAttribute.count; i < il; i ++ ) {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
255 256 257 258 259 260 

					color.setHSL( i / il * Math.random(), 0.5, 0.5 );
					colors.push( color.r, color.g, color.b );

				}
M
BufferGeometry: Introduce .setAttribute() and .deleteAttribute().  
Mugen87 已提交
261 
				geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 

			}

			function handleColorChange( color ) {

				return function ( value ) {

					if ( typeof value === 'string' ) {

						value = value.replace( '#', '0x' );

					}

					color.setHex( value );

				};

			}

			function needsUpdate( material, geometry ) {

				return function () {
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
285 
					material.vertexColors = material.vertexColors;
M
Docs: Convert browsers to modules.  
Mugen87 已提交
286 287 288 289 290 291 292 293 294 295 
					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;

				};

			}
N
docs material-browser: bugfix 'combine' values change + add values to MeshPhongMaterial  
Nicolas Lelong 已提交
296 297 
			function updateCombine( material ) {
M
MeshToonMaterial: Removed shininess and specular/specularMap  
Mr.doob 已提交
298 
				return function ( combine ) {
N
docs material-browser: bugfix 'combine' values change + add values to MeshPhongMaterial  
Nicolas Lelong 已提交
299 300 301 302 303 304 305 306 

					material.combine = parseInt( combine );
					material.needsUpdate = true;

				};

			}
M
Docs: Convert browsers to modules.  
Mugen87 已提交
307 308 309 310 311 312 313 314 315 316 317 318 319 
			function updateTexture( material, materialKey, textures ) {

				return function ( key ) {

					material[ materialKey ] = textures[ key ];
					material.needsUpdate = true;

				};

			}

			function guiScene( gui, scene ) {
M
Docs: Move to let/const.  
Mugen87 已提交
320 
				const folder = gui.addFolder( 'Scene' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
321
M
Docs: Move to let/const.  
Mugen87 已提交
322 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
323 324 325 326 327 328 329 330 331 332 333 334 
					background: '#000000',
					'ambient light': ambientLight.color.getHex()
				};

				folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );

				guiSceneFog( folder, scene );

			}

			function guiSceneFog( folder, scene ) {
M
Docs: Move to let/const.  
Mugen87 已提交
335 
				const fogFolder = folder.addFolder( 'scene.fog' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
336
M
Docs: Move to let/const.  
Mugen87 已提交
337 
				const fog = new Fog( 0x3f7b9d, 0, 60 );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
338
M
Docs: Move to let/const.  
Mugen87 已提交
339 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 
					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 ) {
M
Docs: Move to let/const.  
Mugen87 已提交
366 
				const folder = gui.addFolder( 'THREE.Material' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 

				folder.add( material, 'transparent' );
				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 ) {
M
Docs: Move to let/const.  
Mugen87 已提交
387 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
388 389 390 391 392 393 
					color: material.color.getHex(),
					envMaps: envMapKeys[ 0 ],
					map: diffuseMapKeys[ 0 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
394 
				const folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
395 396 397 398 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				folder.add( material, 'wireframe' );
				folder.add( material, 'wireframeLinewidth', 0, 10 );
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
399 
				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
400 401 402 403 404 
				folder.add( material, 'fog' );

				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 ) );
N
docs material-browser: bugfix 'combine' values change + add values to MeshPhongMaterial  
Nicolas Lelong 已提交
405 
				folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
406 407 408 409 410 411 412 
				folder.add( material, 'reflectivity', 0, 1 );
				folder.add( material, 'refractionRatio', 0, 1 );

			}

			function guiMeshDepthMaterial( gui, mesh, material ) {
M
Docs: Move to let/const.  
Mugen87 已提交
413 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
414 415 416 
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
417 
				const folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
418 419 420 421 422 423 424 425 426 427 

				folder.add( material, 'wireframe' );
				folder.add( material, 'wireframeLinewidth', 0, 10 );

				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );

			}

			function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
M
Docs: Move to let/const.  
Mugen87 已提交
428 
				const folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
429 430 431 432 433 434 435 436 437 

				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
				folder.add( material, 'wireframe' );
				folder.add( material, 'wireframeLinewidth', 0, 10 );

			}

			function guiLineBasicMaterial( gui, mesh, material, geometry ) {
M
Docs: Move to let/const.  
Mugen87 已提交
438 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
439 440 441 
					color: material.color.getHex()
				};
M
Docs: Move to let/const.  
Mugen87 已提交
442 
				const folder = gui.addFolder( 'THREE.LineBasicMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
443 444 445 446 447 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				folder.add( material, 'linewidth', 0, 10 );
				folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
				folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
448 
				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
449 450 451 452 453 454 
				folder.add( material, 'fog' );

			}

			function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
M
Docs: Move to let/const.  
Mugen87 已提交
455 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
456 457 458 459 460 461 462 
					color: material.color.getHex(),
					emissive: material.emissive.getHex(),
					envMaps: envMapKeys[ 0 ],
					map: diffuseMapKeys[ 0 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
463 
				const folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
464 465 466 467 468 469 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );

				folder.add( material, 'wireframe' );
				folder.add( material, 'wireframeLinewidth', 0, 10 );
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
470 
				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
471 472 473 474 475 
				folder.add( material, 'fog' );

				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 ) );
N
docs material-browser: bugfix 'combine' values change + add values to MeshPhongMaterial  
Nicolas Lelong 已提交
476 
				folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
477 478 479 480 481 482 483 
				folder.add( material, 'reflectivity', 0, 1 );
				folder.add( material, 'refractionRatio', 0, 1 );

			}

			function guiMeshMatcapMaterial( gui, mesh, material ) {
M
Docs: Move to let/const.  
Mugen87 已提交
484 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
485 486 487 488 489 
					color: material.color.getHex(),
					matcap: matcapKeys[ 1 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
490 
				const folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
491 492 493 494 495 496 497 498 499 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				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 ) {
M
Docs: Move to let/const.  
Mugen87 已提交
500 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
501 502 503 504 505 506 507 508 
					color: material.color.getHex(),
					emissive: material.emissive.getHex(),
					specular: material.specular.getHex(),
					envMaps: envMapKeys[ 0 ],
					map: diffuseMapKeys[ 0 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
509 
				const folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
510 511 512 513 514 515 516 517 518 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
				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, 'wireframeLinewidth', 0, 10 );
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
519 
				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
520 521 522 523 
				folder.add( material, 'fog' );
				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 ) );
N
docs material-browser: bugfix 'combine' values change + add values to MeshPhongMaterial  
Nicolas Lelong 已提交
524 525 526 
				folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
				folder.add( material, 'reflectivity', 0, 1 );
				folder.add( material, 'refractionRatio', 0, 1 );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
527 528 529 530 531 

			}

			function guiMeshToonMaterial( gui, mesh, material ) {
M
Docs: Move to let/const.  
Mugen87 已提交
532 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
533 534 535 536 537 538 
					color: material.color.getHex(),
					map: diffuseMapKeys[ 0 ],
					gradientMap: gradientMapKeys[ 1 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
539 
				const folder = gui.addFolder( 'THREE.MeshToonMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
540 541 542 543 544 545 546 547 548 549 550 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );

				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 ) {
M
Docs: Move to let/const.  
Mugen87 已提交
551 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
552 553 554 555 556 557 558 559 
					color: material.color.getHex(),
					emissive: material.emissive.getHex(),
					envMaps: envMapKeys[ 0 ],
					map: diffuseMapKeys[ 0 ],
					roughnessMap: roughnessMapKeys[ 0 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
560 
				const folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
561 562 563 564 565 566 567 568 569 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );

				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, 'wireframeLinewidth', 0, 10 );
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
570 
				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
571 572 573 574 575 576 577 578 579 580 581 582 
				folder.add( material, 'fog' );
				folder.add( data, 'envMaps', envMapKeys ).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 ) {
M
Docs: Move to let/const.  
Mugen87 已提交
583 
				const data = {
M
Docs: Convert browsers to modules.  
Mugen87 已提交
584 585 586 587 588 589 590 591 
					color: material.color.getHex(),
					emissive: material.emissive.getHex(),
					envMaps: envMapKeys[ 0 ],
					map: diffuseMapKeys[ 0 ],
					roughnessMap: roughnessMapKeys[ 0 ],
					alphaMap: alphaMapKeys[ 0 ]
				};
M
Docs: Move to let/const.  
Mugen87 已提交
592 
				const folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
593 594 595 596 597 598 599 

				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );

				folder.add( material, 'roughness', 0, 1 );
				folder.add( material, 'metalness', 0, 1 );
				folder.add( material, 'reflectivity', 0, 1 );
M
MeshPhysicalMaterial: Renamed clearCoat* to clearcoat*.  
Mr.doob 已提交
600 601 
				folder.add( material, 'clearcoat', 0, 1 ).step( 0.01 );
				folder.add( material, 'clearcoatRoughness', 0, 1 ).step( 0.01 );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
602 603 604 
				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
				folder.add( material, 'wireframe' );
				folder.add( material, 'wireframeLinewidth', 0, 10 );
M
Material: Make .vertexColors a boolean.  
Mugen87 已提交
605 
				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
M
Docs: Convert browsers to modules.  
Mugen87 已提交
606 607 608 609 610 611 612 613 614 615 616 617 
				folder.add( material, 'fog' );
				folder.add( data, 'envMaps', envMapKeys ).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 ) {
M
Docs: Move to let/const.  
Mugen87 已提交
618 619 
				const selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
				let material;
M
Docs: Convert browsers to modules.  
Mugen87 已提交
620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 

				switch ( selectedMaterial ) {

					case 'MeshBasicMaterial' :

						material = new MeshBasicMaterial( { color: 0x2194CE } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshBasicMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshLambertMaterial' :

						material = new MeshLambertMaterial( { color: 0x2194CE } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshLambertMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshMatcapMaterial' :

						material = new MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshMatcapMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshPhongMaterial' :

						material = new MeshPhongMaterial( { color: 0x2194CE } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshPhongMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshToonMaterial' :

						material = new MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshToonMaterial( gui, mesh, material, geometry );

						// only use a single point light

						lights[ 0 ].visible = false;
						lights[ 2 ].visible = false;

						return material;

						break;

					case 'MeshStandardMaterial' :

						material = new MeshStandardMaterial( { color: 0x2194CE } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshStandardMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshPhysicalMaterial' :

						material = new MeshPhysicalMaterial( { color: 0x2194CE } );
						guiMaterial( gui, mesh, material, geometry );
						guiMeshPhysicalMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshDepthMaterial' :

						material = new MeshDepthMaterial();
						guiMaterial( gui, mesh, material, geometry );
						guiMeshDepthMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'MeshNormalMaterial' :

						material = new MeshNormalMaterial();
						guiMaterial( gui, mesh, material, geometry );
						guiMeshNormalMaterial( gui, mesh, material, geometry );

						return material;

						break;

					case 'LineBasicMaterial' :

						material = new LineBasicMaterial( { color: 0x2194CE } );
						guiMaterial( gui, mesh, material, geometry );
						guiLineBasicMaterial( gui, mesh, material, geometry );

						return material;

						break;

				}

			}

			//
M
Docs: Improved viewer.  
Mr.doob 已提交
733
M
Clean up.  
Mr.doob 已提交
734 
			document.getElementById( 'newWindow' ).href += window.location.hash;
M
Docs: Improved viewer.  
Mr.doob 已提交
735
M
Docs: Move to let/const.  
Mugen87 已提交
736 
			const gui = new GUI();
M
Design update  
Mr.doob 已提交
737
M
Docs: Move to let/const.  
Mugen87 已提交
738 
			const scene = new Scene();
M
Docs: Convert browsers to modules.  
Mugen87 已提交
739 
			scene.background = new Color( 0x444444 );
M
Design update  
Mr.doob 已提交
740
M
Docs: Move to let/const.  
Mugen87 已提交
741 
			const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
742 
			camera.position.z = 30;
M
Docs: Improved viewer.  
Mr.doob 已提交
743
M
Docs: Move to let/const.  
Mugen87 已提交
744 
			const renderer = new WebGLRenderer( { antialias: true } );
M
Docs: Improved viewer.  
Mr.doob 已提交
745 
			renderer.setPixelRatio( window.devicePixelRatio );
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
746 747 
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
G
Documentation material browser  
Greg Tatum 已提交
748
M
Docs: Move to let/const.  
Mugen87 已提交
749 
			const ambientLight = new AmbientLight( 0x000000 );
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
750 
			scene.add( ambientLight );
G
Documentation material browser  
Greg Tatum 已提交
751
M
Docs: Move to let/const.  
Mugen87 已提交
752 
			const lights = [];
M
Docs: Convert browsers to modules.  
Mugen87 已提交
753 754 755 
			lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
			lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
			lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
M
Docs: Improved viewer.  
Mr.doob 已提交
756
M
Clean up.  
Mr.doob 已提交
757 758 759 
			lights[ 0 ].position.set( 0, 200, 0 );
			lights[ 1 ].position.set( 100, 200, 100 );
			lights[ 2 ].position.set( - 100, - 200, - 100 );
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
760
M
Clean up.  
Mr.doob 已提交
761 762 763 
			scene.add( lights[ 0 ] );
			scene.add( lights[ 1 ] );
			scene.add( lights[ 2 ] );
G
Documentation material browser  
Greg Tatum 已提交
764
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
765 766 
			guiScene( gui, scene, camera );
M
Refactor geometry generators.  
Mugen87 已提交
767 
			let geometry = new TorusKnotGeometry( 10, 3, 100, 16 );
M
Docs: Move material browser to BufferGeometry.  
Mugen87 已提交
768 
			geometry = geometry.toNonIndexed();
M
Docs: Improved viewer.  
Mr.doob 已提交
769
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
770 
			generateVertexColors( geometry );
M
Docs: Improved viewer.  
Mr.doob 已提交
771
M
Docs: Move to let/const.  
Mugen87 已提交
772 
			const mesh = new Mesh( geometry );
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
773 774 775 
			mesh.material = chooseFromHash( gui, mesh, geometry );

			scene.add( mesh );
M
Docs: Improved viewer.  
Mr.doob 已提交
776
M
Docs: Move to let/const.  
Mugen87 已提交
777 
			let prevFog = false;
M
Docs: Improved viewer.  
Mr.doob 已提交
778
M
Docs: Move to let/const.  
Mugen87 已提交
779 
			function render() {
M
Docs: Improved viewer.  
Mr.doob 已提交
780
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
781 
				requestAnimationFrame( render );
G
Documentation material browser  
Greg Tatum 已提交
782
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
783 784 
				mesh.rotation.x += 0.005;
				mesh.rotation.y += 0.005;
M
Docs: Improved viewer.  
Mr.doob 已提交
785
G
Material browser - added texture maps  
Greg Tatum 已提交
786 
				if ( prevFog !== scene.fog ) {
M
Docs: Improved viewer.  
Mr.doob 已提交
787
G
Added morphs, vertex colors, and face colors  
Greg Tatum 已提交
788 
					mesh.material.needsUpdate = true;
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
789 
					prevFog = scene.fog;
M
Docs: Improved viewer.  
Mr.doob 已提交
790
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
791 
				}
M
Docs: Improved viewer.  
Mr.doob 已提交
792
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
793 
				renderer.render( scene, camera );
M
Docs: Improved viewer.  
Mr.doob 已提交
794
M
Docs: Move to let/const.  
Mugen87 已提交
795 
			}
M
Docs: Improved viewer.  
Mr.doob 已提交
796
G
Material browser - added texture maps  
Greg Tatum 已提交
797 
			window.addEventListener( 'resize', function () {
M
Docs: Improved viewer.  
Mr.doob 已提交
798
G
Documentation material browser  
Greg Tatum 已提交
799 800 801 
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
802 
				renderer.setSize( window.innerWidth, window.innerHeight );
M
Docs: Improved viewer.  
Mr.doob 已提交
803
G
Additional functionality and cleanup for material viewer  
Greg Tatum 已提交
804 
			}, false );
G
Documentation material browser  
Greg Tatum 已提交
805 806 

			render();
M
Docs: Improved viewer.  
Mr.doob 已提交
807
G
Documentation material browser  
Greg Tatum 已提交
808 809 
		</script>
	</body>
M
Docs: Removed scrollbars from material browser.  
Mr.doob 已提交
810 
</html>