Docs: Simplified imports in material browser.

docs/scenes/material-browser.html

@@ -26,97 +26,65 @@
 		<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
 
 		<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,
-				TorusKnotGeometry,
-				WebGLRenderer
-			} from "../../build/three.module.js";
-
-			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+
+			import * as THREE from '../../build/three.module.js';
+			import * as DAT from '../../examples/jsm/libs/dat.gui.module.js';
 
 			const constants = {
 
 				combine: {
 
-					'THREE.MultiplyOperation': MultiplyOperation,
-					'THREE.MixOperation': MixOperation,
-					'THREE.AddOperation': AddOperation
+					'THREE.MultiplyOperation': THREE.MultiplyOperation,
+					'THREE.MixOperation': THREE.MixOperation,
+					'THREE.AddOperation': THREE.AddOperation
 
 				},
 
 				side: {
 
-					'THREE.FrontSide': FrontSide,
-					'THREE.BackSide': BackSide,
-					'THREE.DoubleSide': DoubleSide
+					'THREE.FrontSide': THREE.FrontSide,
+					'THREE.BackSide': THREE.BackSide,
+					'THREE.DoubleSide': THREE.DoubleSide
 
 				},
 
 				blendingMode: {
 
-					'THREE.NoBlending': NoBlending,
-					'THREE.NormalBlending': NormalBlending,
-					'THREE.AdditiveBlending': AdditiveBlending,
-					'THREE.SubtractiveBlending': SubtractiveBlending,
-					'THREE.MultiplyBlending': MultiplyBlending,
-					'THREE.CustomBlending': CustomBlending
+					'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': AddEquation,
-					'THREE.SubtractEquation': SubtractEquation,
-					'THREE.ReverseSubtractEquation': ReverseSubtractEquation
+					'THREE.AddEquation': THREE.AddEquation,
+					'THREE.SubtractEquation': THREE.SubtractEquation,
+					'THREE.ReverseSubtractEquation': THREE.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
+					'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': DstColorFactor,
-					'THREE.OneMinusDstColorFactor': OneMinusDstColorFactor,
-					'THREE.SrcAlphaSaturateFactor': SrcAlphaSaturateFactor
+					'THREE.DstColorFactor': THREE.DstColorFactor,
+					'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
+					'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
 
 				}
 
@@ -140,8 +108,8 @@
 
 			}
 
-			const textureLoader = new TextureLoader();
-			const cubeTextureLoader = new CubeTextureLoader();
+			const textureLoader = new THREE.TextureLoader();
+			const cubeTextureLoader = new THREE.CubeTextureLoader();
 
 			const envMaps = ( function () {
 
@@ -154,11 +122,11 @@
 				];
 
 				const reflectionCube = cubeTextureLoader.load( urls );
-				reflectionCube.format = RGBFormat;
+				reflectionCube.format = THREE.RGBFormat;
 
 				const refractionCube = cubeTextureLoader.load( urls );
-				refractionCube.mapping = CubeRefractionMapping;
-				refractionCube.format = RGBFormat;
+				refractionCube.mapping = THREE.CubeRefractionMapping;
+				refractionCube.format = THREE.RGBFormat;
 
 				return {
 					none: null,
@@ -171,8 +139,8 @@
 			const diffuseMaps = ( function () {
 
 				const bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
-				bricks.wrapS = RepeatWrapping;
-				bricks.wrapT = RepeatWrapping;
+				bricks.wrapS = THREE.RepeatWrapping;
+				bricks.wrapT = THREE.RepeatWrapping;
 				bricks.repeat.set( 9, 1 );
 
 				return {
@@ -185,8 +153,8 @@
 			const roughnessMaps = ( function () {
 
 				const bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
-				bricks.wrapT = RepeatWrapping;
-				bricks.wrapS = RepeatWrapping;
+				bricks.wrapT = THREE.RepeatWrapping;
+				bricks.wrapS = THREE.RepeatWrapping;
 				bricks.repeat.set( 9, 1 );
 
 				return {
@@ -208,8 +176,8 @@
 			const alphaMaps = ( function () {
 
 				const fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
-				fibers.wrapT = RepeatWrapping;
-				fibers.wrapS = RepeatWrapping;
+				fibers.wrapT = THREE.RepeatWrapping;
+				fibers.wrapS = THREE.RepeatWrapping;
 				fibers.repeat.set( 9, 1 );
 
 				return {
@@ -222,12 +190,12 @@
 			const gradientMaps = ( function () {
 
 				const threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
-				threeTone.minFilter = NearestFilter;
-				threeTone.magFilter = NearestFilter;
+				threeTone.minFilter = THREE.NearestFilter;
+				threeTone.magFilter = THREE.NearestFilter;
 
 				const fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
-				fiveTone.minFilter = NearestFilter;
-				fiveTone.magFilter = NearestFilter;
+				fiveTone.minFilter = THREE.NearestFilter;
+				fiveTone.magFilter = THREE.NearestFilter;
 
 				return {
 					none: null,
@@ -249,7 +217,7 @@
 				const positionAttribute = geometry.attributes.position;
 
 				const colors = [];
-				const color = new Color();
+				const color = new THREE.Color();
 
 				for ( let i = 0, il = positionAttribute.count; i < il; i ++ ) {
 
@@ -258,7 +226,7 @@
 
 				}
 
-				geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 			}
 
@@ -334,7 +302,7 @@
 
 				const fogFolder = folder.addFolder( 'scene.fog' );
 
-				const fog = new Fog( 0x3f7b9d, 0, 60 );
+				const fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
 
 				const data = {
 					fog: {
@@ -623,7 +591,7 @@
 
 					case 'MeshBasicMaterial' :
 
-						material = new MeshBasicMaterial( { color: 0x2194CE } );
+						material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshBasicMaterial( gui, mesh, material, geometry );
 
@@ -633,7 +601,7 @@
 
 					case 'MeshLambertMaterial' :
 
-						material = new MeshLambertMaterial( { color: 0x2194CE } );
+						material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshLambertMaterial( gui, mesh, material, geometry );
 
@@ -643,7 +611,7 @@
 
 					case 'MeshMatcapMaterial' :
 
-						material = new MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
+						material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshMatcapMaterial( gui, mesh, material, geometry );
 
@@ -653,7 +621,7 @@
 
 					case 'MeshPhongMaterial' :
 
-						material = new MeshPhongMaterial( { color: 0x2194CE } );
+						material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshPhongMaterial( gui, mesh, material, geometry );
 
@@ -663,7 +631,7 @@
 
 					case 'MeshToonMaterial' :
 
-						material = new MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
+						material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshToonMaterial( gui, mesh, material, geometry );
 
@@ -678,7 +646,7 @@
 
 					case 'MeshStandardMaterial' :
 
-						material = new MeshStandardMaterial( { color: 0x2194CE } );
+						material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshStandardMaterial( gui, mesh, material, geometry );
 
@@ -688,7 +656,7 @@
 
 					case 'MeshPhysicalMaterial' :
 
-						material = new MeshPhysicalMaterial( { color: 0x2194CE } );
+						material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshPhysicalMaterial( gui, mesh, material, geometry );
 
@@ -698,7 +666,7 @@
 
 					case 'MeshDepthMaterial' :
 
-						material = new MeshDepthMaterial();
+						material = new THREE.MeshDepthMaterial();
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshDepthMaterial( gui, mesh, material, geometry );
 
@@ -708,7 +676,7 @@
 
 					case 'MeshNormalMaterial' :
 
-						material = new MeshNormalMaterial();
+						material = new THREE.MeshNormalMaterial();
 						guiMaterial( gui, mesh, material, geometry );
 						guiMeshNormalMaterial( gui, mesh, material, geometry );
 
@@ -718,7 +686,7 @@
 
 					case 'LineBasicMaterial' :
 
-						material = new LineBasicMaterial( { color: 0x2194CE } );
+						material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
 						guiMaterial( gui, mesh, material, geometry );
 						guiLineBasicMaterial( gui, mesh, material, geometry );
 
@@ -734,26 +702,26 @@
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
-			const gui = new GUI();
+			const gui = new DAT.GUI();
 
-			const scene = new Scene();
-			scene.background = new Color( 0x444444 );
+			const scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x444444 );
 
-			const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
+			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			camera.position.z = 30;
 
-			const renderer = new WebGLRenderer( { antialias: true } );
+			const renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
 
-			const ambientLight = new AmbientLight( 0x000000 );
+			const ambientLight = new THREE.AmbientLight( 0x000000 );
 			scene.add( ambientLight );
 
 			const lights = [];
-			lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
-			lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
-			lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
+			lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
 
 			lights[ 0 ].position.set( 0, 200, 0 );
 			lights[ 1 ].position.set( 100, 200, 100 );
@@ -765,12 +733,12 @@
 
 			guiScene( gui, scene, camera );
 
-			let geometry = new TorusKnotGeometry( 10, 3, 100, 16 );
+			let geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
 			geometry = geometry.toNonIndexed();
 
 			generateVertexColors( geometry );
 
-			const mesh = new Mesh( geometry );
+			const mesh = new THREE.Mesh( geometry );
 			mesh.material = chooseFromHash( gui, mesh, geometry );
 
 			scene.add( mesh );