Examples: More module examples.

examples/webgl_loader_x.html

@@ -19,7 +19,6 @@
 
 	<div id="canvase3d"></div>
 
-
 	<script type="module">
 		import {
 			AmbientLight,

examples/webgl_lod.html

@@ -12,27 +12,28 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - level of detail
 		</div>
 
-
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FlyControls.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Clock,
+				DirectionalLight,
+				Fog,
+				IcosahedronBufferGeometry,
+				LOD,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { FlyControls } from './jsm/controls/FlyControls.js';
 
 			var container;
 
 			var camera, scene, renderer;
 
-			var controls, clock = new THREE.Clock();
+			var controls, clock = new Clock();
 
 			init();
 			animate();
@@ -42,46 +43,46 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 1000;
 
-				controls = new THREE.FlyControls( camera );
+				controls = new FlyControls( camera );
 				controls.movementSpeed = 1000;
 				controls.rollSpeed = Math.PI / 10;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
+				scene = new Scene();
+				scene.fog = new Fog( 0x000000, 1, 15000 );
 				scene.autoUpdate = false;
 
-				var light = new THREE.PointLight( 0xff2200 );
+				var light = new PointLight( 0xff2200 );
 				light.position.set( 0, 0, 0 );
 				scene.add( light );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 ).normalize();
 				scene.add( light );
 
 				var geometry = [
 
-					[ new THREE.IcosahedronBufferGeometry( 100, 4 ), 50 ],
-					[ new THREE.IcosahedronBufferGeometry( 100, 3 ), 300 ],
-					[ new THREE.IcosahedronBufferGeometry( 100, 2 ), 1000 ],
-					[ new THREE.IcosahedronBufferGeometry( 100, 1 ), 2000 ],
-					[ new THREE.IcosahedronBufferGeometry( 100, 0 ), 8000 ]
+					[ new IcosahedronBufferGeometry( 100, 4 ), 50 ],
+					[ new IcosahedronBufferGeometry( 100, 3 ), 300 ],
+					[ new IcosahedronBufferGeometry( 100, 2 ), 1000 ],
+					[ new IcosahedronBufferGeometry( 100, 1 ), 2000 ],
+					[ new IcosahedronBufferGeometry( 100, 0 ), 8000 ]
 
 				];
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
+				var material = new MeshLambertMaterial( { color: 0xffffff, wireframe: true } );
 
 				var i, j, mesh, lod;
 
 				for ( j = 0; j < 1000; j ++ ) {
 
-					lod = new THREE.LOD();
+					lod = new LOD();
 
 					for ( i = 0; i < geometry.length; i ++ ) {
 
-						mesh = new THREE.Mesh( geometry[ i ][ 0 ], material );
+						mesh = new Mesh( geometry[ i ][ 0 ], material );
 						mesh.scale.set( 1.5, 1.5, 1.5 );
 						mesh.updateMatrix();
 						mesh.matrixAutoUpdate = false;
@@ -99,7 +100,7 @@
 				}
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -133,7 +134,7 @@
 				scene.updateMatrixWorld();
 				scene.traverse( function ( object ) {
 
-					if ( object instanceof THREE.LOD ) {
+					if ( object instanceof LOD ) {
 
 						object.update( camera );
 

examples/webgl_marchingcubes.html

@@ -16,24 +16,34 @@
 		based on greggman's <a href="https://webglsamples.org/blob/blob.html">blob</a>, original code by Henrik Rydgård
 	</div>
 
-	<script src="../build/three.js"></script>
-
-	<script src="js/controls/OrbitControls.js"></script>
-
-	<script src="js/objects/MarchingCubes.js"></script>
-	<script src="js/shaders/ToonShader.js"></script>
-
-	<script src="js/WebGL.js"></script>
-	<script src="js/libs/stats.min.js"></script>
-	<script src="js/libs/dat.gui.min.js"></script>
-
-
-	<script>
-		if ( WEBGL.isWebGLAvailable() === false ) {
-
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-		}
+	<script type="module">
+		import {
+			AmbientLight,
+			Clock,
+			Color,
+			CubeRefractionMapping,
+			CubeTextureLoader,
+			DirectionalLight,
+			MeshLambertMaterial,
+			MeshPhongMaterial,
+			MeshStandardMaterial,
+			PerspectiveCamera,
+			PointLight,
+			RepeatWrapping,
+			Scene,
+			ShaderMaterial,
+			TextureLoader,
+			UniformsUtils,
+			VertexColors,
+			WebGLRenderer,
+		} from "../build/three.module.js";
+
+		import Stats from './jsm/libs/stats.module.js';
+
+		import { GUI } from './jsm/libs/dat.gui.module.js';
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { MarchingCubes } from './jsm/objects/MarchingCubes.js';
+		import { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted } from './jsm/shaders/ToonShader.js';
 
 		var container, stats;
 
@@ -48,7 +58,7 @@
 		var effectController;
 
 		var time = 0;
-		var clock = new THREE.Clock();
+		var clock = new Clock();
 
 		init();
 		animate();
@@ -59,25 +69,25 @@
 
 			// CAMERA
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+			camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.set( - 500, 500, 1500 );
 
 			// SCENE
 
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0x050505 );
+			scene = new Scene();
+			scene.background = new Color( 0x050505 );
 
 			// LIGHTS
 
-			light = new THREE.DirectionalLight( 0xffffff );
+			light = new DirectionalLight( 0xffffff );
 			light.position.set( 0.5, 0.5, 1 );
 			scene.add( light );
 
-			pointLight = new THREE.PointLight( 0xff3300 );
+			pointLight = new PointLight( 0xff3300 );
 			pointLight.position.set( 0, 0, 100 );
 			scene.add( pointLight );
 
-			ambientLight = new THREE.AmbientLight( 0x080808 );
+			ambientLight = new AmbientLight( 0x080808 );
 			scene.add( ambientLight );
 
 			// MATERIALS
@@ -89,7 +99,7 @@
 
 			resolution = 28;
 
-			effect = new THREE.MarchingCubes( resolution, materials[ current_material ].m, true, true );
+			effect = new MarchingCubes( resolution, materials[ current_material ].m, true, true );
 			effect.position.set( 0, 0, 0 );
 			effect.scale.set( 700, 700, 700 );
 
@@ -100,7 +110,7 @@
 
 			// RENDERER
 
-			renderer = new THREE.WebGLRenderer();
+			renderer = new WebGLRenderer();
 			renderer.gammaOutput = true;
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
@@ -113,7 +123,7 @@
 
 			// CONTROLS
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new OrbitControls( camera, renderer.domElement );
 
 			// STATS
 
@@ -153,67 +163,67 @@
 				path + 'pz' + format, path + 'nz' + format
 			];
 
-			var cubeTextureLoader = new THREE.CubeTextureLoader();
+			var cubeTextureLoader = new CubeTextureLoader();
 
 			var reflectionCube = cubeTextureLoader.load( urls );
 			var refractionCube = cubeTextureLoader.load( urls );
-			refractionCube.mapping = THREE.CubeRefractionMapping;
+			refractionCube.mapping = CubeRefractionMapping;
 
 			// toons
 
-			var toonMaterial1 = createShaderMaterial( THREE.ToonShader1, light, ambientLight );
-			var toonMaterial2 = createShaderMaterial( THREE.ToonShader2, light, ambientLight );
-			var hatchingMaterial = createShaderMaterial( THREE.ToonShaderHatching, light, ambientLight );
-			var dottedMaterial = createShaderMaterial( THREE.ToonShaderDotted, light, ambientLight );
+			var toonMaterial1 = createShaderMaterial( ToonShader1, light, ambientLight );
+			var toonMaterial2 = createShaderMaterial( ToonShader2, light, ambientLight );
+			var hatchingMaterial = createShaderMaterial( ToonShaderHatching, light, ambientLight );
+			var dottedMaterial = createShaderMaterial( ToonShaderDotted, light, ambientLight );
 
-			var texture = new THREE.TextureLoader().load( "textures/UV_Grid_Sm.jpg" );
-			texture.wrapS = THREE.RepeatWrapping;
-			texture.wrapT = THREE.RepeatWrapping;
+			var texture = new TextureLoader().load( "textures/UV_Grid_Sm.jpg" );
+			texture.wrapS = RepeatWrapping;
+			texture.wrapT = RepeatWrapping;
 
 			var materials = {
 
 				"chrome": {
-					m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
+					m: new MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"liquid": {
-					m: new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
+					m: new MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"shiny": {
-					m: new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
+					m: new MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
 					h: 0, s: 0.8, l: 0.2
 				},
 
 				"matte": {
-					m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
+					m: new MeshPhongMaterial( { color: 0x000000, specular: 0x111111, shininess: 1 } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"flat": {
-					m: new THREE.MeshLambertMaterial( { color: 0x000000, flatShading: true } ),
+					m: new MeshLambertMaterial( { color: 0x000000, flatShading: true } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"textured": {
-					m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
+					m: new MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"colors": {
-					m: new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: THREE.VertexColors } ),
+					m: new MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: VertexColors } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"multiColors": {
-					m: new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: THREE.VertexColors } ),
+					m: new MeshPhongMaterial( { shininess: 2, vertexColors: VertexColors } ),
 					h: 0, s: 0, l: 1
 				},
 
 				"plastic": {
-					m: new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
+					m: new MeshPhongMaterial( { color: 0x000000, specular: 0x888888, shininess: 250 } ),
 					h: 0.6, s: 0.8, l: 0.1
 				},
 
@@ -245,12 +255,12 @@
 
 		function createShaderMaterial( shader, light, ambientLight ) {
 
-			var u = THREE.UniformsUtils.clone( shader.uniforms );
+			var u = UniformsUtils.clone( shader.uniforms );
 
 			var vs = shader.vertexShader;
 			var fs = shader.fragmentShader;
 
-			var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
+			var material = new ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
 
 			material.uniforms[ "uDirLightPos" ].value = light.position;
 			material.uniforms[ "uDirLightColor" ].value = light.color;
@@ -321,7 +331,7 @@
 
 			var h, m_h, m_s, m_l;
 
-			var gui = new dat.GUI();
+			var gui = new GUI();
 
 			// material (type)
 
@@ -383,14 +393,14 @@
 
 			var i, ballx, bally, ballz, subtract, strength;
 			var rainbow = [
-					new THREE.Color(0xff0000),
-					new THREE.Color(0xff7f00),
-					new THREE.Color(0xffff00),
-					new THREE.Color(0x00ff00),
-					new THREE.Color(0x0000ff),
-					new THREE.Color(0x4b0082),
-					new THREE.Color(0x9400d3)
-				];
+				new Color( 0xff0000 ),
+				new Color( 0xff7f00 ),
+				new Color( 0xffff00 ),
+				new Color( 0x00ff00 ),
+				new Color( 0x0000ff ),
+				new Color( 0x4b0082 ),
+				new Color( 0x9400d3 )
+			];
 			subtract = 12;
 			strength = 1.2 / ( ( Math.sqrt( numblobs ) - 1 ) / 4 + 1 );
 
@@ -402,7 +412,7 @@
 
 				if ( current_material === 'multiColors' ) {
 
-					object.addBall( ballx, bally, ballz, strength, subtract, rainbow[i % 7] );
+					object.addBall( ballx, bally, ballz, strength, subtract, rainbow[ i % 7 ] );
 
 				} else {
 
@@ -454,7 +464,7 @@
 
 			// materials
 
-			if ( effect.material instanceof THREE.ShaderMaterial ) {
+			if ( effect.material instanceof ShaderMaterial ) {
 
 				effect.material.uniforms[ "uBaseColor" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 

examples/webgl_materials_blending.html

@@ -14,21 +14,28 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AdditiveBlending,
+				CanvasTexture,
+				Mesh,
+				MeshBasicMaterial,
+				MultiplyBlending,
+				NoBlending,
+				NormalBlending,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RepeatWrapping,
+				Scene,
+				SubtractiveBlending,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
 			var camera, scene, renderer;
 			var mapBg;
 
-			var textureLoader = new THREE.TextureLoader();
+			var textureLoader = new TextureLoader();
 
 			init();
 			animate();
@@ -37,12 +44,12 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 600;
 
 				// SCENE
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// BACKGROUND
 
@@ -60,25 +67,31 @@
 				ctx.fillStyle = '#777';
 				ctx.fillRect( 96, 96, 32, 32 );
 
-				mapBg = new THREE.CanvasTexture( canvas );
-				mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
+				mapBg = new CanvasTexture( canvas );
+				mapBg.wrapS = mapBg.wrapT = RepeatWrapping;
 				mapBg.repeat.set( 128, 64 );
 
 				/*
 				var mapBg = textureLoader.load( 'textures/disturb.jpg' );
-				mapBg.wrapS = mapBg.wrapT = THREE.RepeatWrapping;
+				mapBg.wrapS = mapBg.wrapT = RepeatWrapping;
 				mapBg.repeat.set( 8, 4 );
 				*/
 
-				var materialBg = new THREE.MeshBasicMaterial( { map: mapBg } );
+				var materialBg = new MeshBasicMaterial( { map: mapBg } );
 
-				var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
+				var meshBg = new Mesh( new PlaneBufferGeometry( 4000, 2000 ), materialBg );
 				meshBg.position.set( 0, 0, - 1 );
 				scene.add( meshBg );
 
 				// OBJECTS
 
-				var blendings = [ 'NoBlending', 'NormalBlending', 'AdditiveBlending', 'SubtractiveBlending', 'MultiplyBlending' ];
+				var blendings = [
+					{ name: 'No', constant: NoBlending },
+					{ name: 'Normal', constant: NormalBlending },
+					{ name: 'Additive', constant: AdditiveBlending },
+					{ name: 'Subtractive', constant: SubtractiveBlending },
+					{ name: 'Multiply', constant: MultiplyBlending }
+				];
 
 				var map0 = textureLoader.load( 'textures/UV_Grid_Sm.jpg' );
 				var map1 = textureLoader.load( 'textures/sprite0.jpg' );
@@ -86,8 +99,8 @@
 				var map3 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
 				var map4 = textureLoader.load( 'textures/lensflare/lensflare0_alpha.png' );
 
-				var geo1 = new THREE.PlaneBufferGeometry( 100, 100 );
-				var geo2 = new THREE.PlaneBufferGeometry( 100, 25 );
+				var geo1 = new PlaneBufferGeometry( 100, 100 );
+				var geo2 = new PlaneBufferGeometry( 100, 25 );
 
 				addImageRow( map0, 300 );
 				addImageRow( map1, 150 );
@@ -101,19 +114,19 @@
 
 						var blending = blendings[ i ];
 
-						var material = new THREE.MeshBasicMaterial( { map: map } );
+						var material = new MeshBasicMaterial( { map: map } );
 						material.transparent = true;
-						material.blending = THREE[ blending ];
+						material.blending = blending.constant;
 
 						var x = ( i - blendings.length / 2 ) * 110;
 						var z = 0;
 
-						var mesh = new THREE.Mesh( geo1, material );
+						var mesh = new Mesh( geo1, material );
 						mesh.position.set( x, y, z );
 						scene.add( mesh );
 
 
-						var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blending.replace( 'Blending', '' ) ) );
+						var mesh = new Mesh( geo2, generateLabelMaterial( blending.name ) );
 						mesh.position.set( x, y - 75, z );
 						scene.add( mesh );
 
@@ -123,7 +136,7 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -163,9 +176,9 @@
 				ctx.font = '12pt arial bold';
 				ctx.fillText( text, 10, 22 );
 
-				var map = new THREE.CanvasTexture( canvas );
+				var map = new CanvasTexture( canvas );
 
-				var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
+				var material = new MeshBasicMaterial( { map: map, transparent: true } );
 
 				return material;
 

examples/webgl_materials_blending_custom.html

@@ -76,16 +76,35 @@
 			<div class="lbl" id="lbl_dst">Destination</div>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AddEquation,
+				CanvasTexture,
+				CustomBlending,
+				DstAlphaFactor,
+				DstColorFactor,
+				MaxEquation,
+				Mesh,
+				MeshBasicMaterial,
+				MinEquation,
+				OneFactor,
+				OneMinusDstAlphaFactor,
+				OneMinusDstColorFactor,
+				OneMinusSrcAlphaFactor,
+				OneMinusSrcColorFactor,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RepeatWrapping,
+				ReverseSubtractEquation,
+				Scene,
+				SrcAlphaFactor,
+				SrcAlphaSaturateFactor,
+				SrcColorFactor,
+				SubtractEquation,
+				TextureLoader,
+				WebGLRenderer,
+				ZeroFactor
+			} from "../build/three.module.js";
 
 			var camera, scene, renderer;
 
@@ -105,16 +124,16 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 700;
 
 				// SCENE
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// TEXTURE LOADER
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				// BACKGROUND IMAGES
 
@@ -150,39 +169,39 @@
 
 				document.getElementById( 'bg_2' ).appendChild( canvas2 );
 
-				var mapBg0 = new THREE.CanvasTexture( canvas1 );
-				mapBg0.wrapS = mapBg0.wrapT = THREE.RepeatWrapping;
+				var mapBg0 = new CanvasTexture( canvas1 );
+				mapBg0.wrapS = mapBg0.wrapT = RepeatWrapping;
 				mapBg0.repeat.set( 128, 64 );
 
-				var mapBg1 = new THREE.CanvasTexture( canvas2 );
-				mapBg1.wrapS = mapBg1.wrapT = THREE.RepeatWrapping;
+				var mapBg1 = new CanvasTexture( canvas2 );
+				mapBg1.wrapS = mapBg1.wrapT = RepeatWrapping;
 				mapBg1.repeat.set( 128, 64 );
 
 				var mapBg2 = textureLoader.load( 'textures/disturb.jpg' );
-				mapBg2.wrapS = mapBg2.wrapT = THREE.RepeatWrapping;
+				mapBg2.wrapS = mapBg2.wrapT = RepeatWrapping;
 				mapBg2.repeat.set( 8, 4 );
 
 				var mapBg3 = textureLoader.load( 'textures/crate.gif' );
-				mapBg3.wrapS = mapBg3.wrapT = THREE.RepeatWrapping;
+				mapBg3.wrapS = mapBg3.wrapT = RepeatWrapping;
 				mapBg3.repeat.set( 32, 16 );
 
 				var mapBg4 = textureLoader.load( 'textures/lava/lavatile.jpg' );
-				mapBg4.wrapS = mapBg4.wrapT = THREE.RepeatWrapping;
+				mapBg4.wrapS = mapBg4.wrapT = RepeatWrapping;
 				mapBg4.repeat.set( 8, 4 );
 
 				var mapBg5 = textureLoader.load( 'textures/water.jpg' );
-				mapBg5.wrapS = mapBg5.wrapT = THREE.RepeatWrapping;
+				mapBg5.wrapS = mapBg5.wrapT = RepeatWrapping;
 				mapBg5.repeat.set( 8, 4 );
 
 				var mapBg6 = textureLoader.load( 'textures/lava/cloud.png' );
-				mapBg6.wrapS = mapBg6.wrapT = THREE.RepeatWrapping;
+				mapBg6.wrapS = mapBg6.wrapT = RepeatWrapping;
 				mapBg6.repeat.set( 2, 1 );
 
 				// BACKGROUND
 
-				materialBg = new THREE.MeshBasicMaterial( { map: mapBg1 } );
+				materialBg = new MeshBasicMaterial( { map: mapBg1 } );
 
-				var meshBg = new THREE.Mesh( new THREE.PlaneBufferGeometry( 4000, 2000 ), materialBg );
+				var meshBg = new Mesh( new PlaneBufferGeometry( 4000, 2000 ), materialBg );
 				meshBg.position.set( 0, 0, - 1 );
 				scene.add( meshBg );
 
@@ -209,13 +228,35 @@
 				}
 
 				// FOREGROUND OBJECTS
-				var src = [ 'ZeroFactor', 'OneFactor', 'SrcColorFactor', 'OneMinusSrcColorFactor', 'SrcAlphaFactor', 'OneMinusSrcAlphaFactor', 'DstAlphaFactor', 'OneMinusDstAlphaFactor', 'DstColorFactor', 'OneMinusDstColorFactor', 'SrcAlphaSaturateFactor' ];
-				var dst = [ 'ZeroFactor', 'OneFactor', 'SrcColorFactor', 'OneMinusSrcColorFactor', 'SrcAlphaFactor', 'OneMinusSrcAlphaFactor', 'DstAlphaFactor', 'OneMinusDstAlphaFactor', 'DstColorFactor', 'OneMinusDstColorFactor' ];
-
-				var geo1 = new THREE.PlaneBufferGeometry( 100, 100 );
-				var geo2 = new THREE.PlaneBufferGeometry( 100, 25 );
-
-				var blending = 'CustomBlending';
+				var src = [
+					{ name: 'Zero', constant: ZeroFactor },
+					{ name: 'One', constant: OneFactor },
+					{ name: 'SrcColor', constant: SrcColorFactor },
+					{ name: 'OneMinusSrcColor', constant: OneMinusSrcColorFactor },
+					{ name: 'SrcAlpha', constant: SrcAlphaFactor },
+					{ name: 'OneMinusSrcAlpha', constant: OneMinusSrcAlphaFactor },
+					{ name: 'DstAlpha', constant: DstAlphaFactor },
+					{ name: 'OneMinusDstAlpha', constant: OneMinusDstAlphaFactor },
+					{ name: 'DstColor', constant: DstColorFactor },
+					{ name: 'OneMinusDstColor', constant: OneMinusDstColorFactor },
+					{ name: 'SrcAlphaSaturate', constant: SrcAlphaSaturateFactor }
+				];
+
+				var dst = [
+					{ name: 'Zero', constant: ZeroFactor },
+					{ name: 'One', constant: OneFactor },
+					{ name: 'SrcColor', constant: SrcColorFactor },
+					{ name: 'OneMinusSrcColor', constant: OneMinusSrcColorFactor },
+					{ name: 'SrcAlpha', constant: SrcAlphaFactor },
+					{ name: 'OneMinusSrcAlpha', constant: OneMinusSrcAlphaFactor },
+					{ name: 'DstAlpha', constant: DstAlphaFactor },
+					{ name: 'OneMinusDstAlpha', constant: OneMinusDstAlphaFactor },
+					{ name: 'DstColor', constant: DstColorFactor },
+					{ name: 'OneMinusDstColor', constant: OneMinusDstColorFactor }
+				];
+
+				var geo1 = new PlaneBufferGeometry( 100, 100 );
+				var geo2 = new PlaneBufferGeometry( 100, 25 );
 
 				for ( var i = 0; i < dst.length; i ++ ) {
 
@@ -225,19 +266,19 @@
 
 						var blendSrc = src[ j ];
 
-						var material = new THREE.MeshBasicMaterial( { map: currentMaps[ currentIndex ] } );
+						var material = new MeshBasicMaterial( { map: currentMaps[ currentIndex ] } );
 						material.transparent = true;
 
-						material.blending = THREE[ blending ];
-						material.blendSrc = THREE[ blendSrc ];
-						material.blendDst = THREE[ blendDst ];
-						material.blendEquation = THREE.AddEquation;
+						material.blending = CustomBlending;
+						material.blendSrc = blendSrc.constant;
+						material.blendDst = blendDst.constant;
+						material.blendEquation = AddEquation;
 
 						var x = ( j - src.length / 2 ) * 110;
 						var z = 0;
 						var y = ( i - dst.length / 2 ) * 110 + 50;
 
-						var mesh = new THREE.Mesh( geo1, material );
+						var mesh = new Mesh( geo1, material );
 						mesh.position.set( x, - y, z );
 						mesh.matrixAutoUpdate = false;
 						mesh.updateMatrix();
@@ -257,7 +298,7 @@
 					var z = 0;
 					var y = ( 0 - dst.length / 2 ) * 110 + 50;
 
-					var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendSrc.replace( 'Factor', '' ), 'rgba( 0, 150, 0, 1 )' ) );
+					var mesh = new Mesh( geo2, generateLabelMaterial( blendSrc.name, 'rgba( 0, 150, 0, 1 )' ) );
 					mesh.position.set( x, - ( y - 70 ), z );
 					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
@@ -273,7 +314,7 @@
 					var z = 0;
 					var y = ( i - dst.length / 2 ) * 110 + 165;
 
-					var mesh = new THREE.Mesh( geo2, generateLabelMaterial( blendDst.replace( 'Factor', '' ), 'rgba( 150, 0, 0, 1 )' ) );
+					var mesh = new Mesh( geo2, generateLabelMaterial( blendDst.name, 'rgba( 150, 0, 0, 1 )' ) );
 					mesh.position.set( x, - ( y - 120 ), z );
 					mesh.matrixAutoUpdate = false;
 					mesh.updateMatrix();
@@ -283,7 +324,7 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -312,11 +353,11 @@
 				addBgHandler( 'bg_5', mapBg5 );
 				addBgHandler( 'bg_6', mapBg6 );
 
-				addEqHandler( 'btn_add', THREE.AddEquation );
-				addEqHandler( 'btn_sub', THREE.SubtractEquation );
-				addEqHandler( 'btn_rsub', THREE.ReverseSubtractEquation );
-				addEqHandler( 'btn_min', THREE.MinEquation );
-				addEqHandler( 'btn_max', THREE.MaxEquation );
+				addEqHandler( 'btn_add', AddEquation );
+				addEqHandler( 'btn_sub', SubtractEquation );
+				addEqHandler( 'btn_rsub', ReverseSubtractEquation );
+				addEqHandler( 'btn_min', MinEquation );
+				addEqHandler( 'btn_max', MaxEquation );
 
 				addPreHandler( 'btn_pre', mapsPre );
 				addPreHandler( 'btn_nopre', mapsNoPre );
@@ -427,9 +468,9 @@
 				ctx.font = '12pt arial bold';
 				ctx.fillText( text, 8, 22 );
 
-				var map = new THREE.CanvasTexture( canvas );
+				var map = new CanvasTexture( canvas );
 
-				var material = new THREE.MeshBasicMaterial( { map: map, transparent: true } );
+				var material = new MeshBasicMaterial( { map: map, transparent: true } );
 				return material;
 
 			}

examples/webgl_materials_bumpmap.html

@@ -13,19 +13,22 @@
 			<a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				SpotLight,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var statsEnabled = true;
 
@@ -56,17 +59,17 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1200;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x060708 );
+				scene = new Scene();
+				scene.background = new Color( 0x060708 );
 
 				// LIGHTS
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+				scene.add( new HemisphereLight( 0x443333, 0x111122 ) );
 
-				spotLight = new THREE.SpotLight( 0xffffbb, 2 );
+				spotLight = new SpotLight( 0xffffbb, 2 );
 				spotLight.position.set( 0.5, 0, 1 );
 				spotLight.position.multiplyScalar( 700 );
 				scene.add( spotLight );
@@ -85,9 +88,9 @@
 
 				//
 
-				var mapHeight = new THREE.TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
+				var mapHeight = new TextureLoader().load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
-				var material = new THREE.MeshPhongMaterial( {
+				var material = new MeshPhongMaterial( {
 					color: 0x552811,
 					specular: 0x222222,
 					shininess: 25,
@@ -95,14 +98,14 @@
 					bumpScale: 12
 				} );
 
-				loader = new THREE.GLTFLoader();
+				loader = new GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -132,7 +135,7 @@
 
 			function createScene( geometry, scale, material ) {
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.y = - 50;
 				mesh.scale.set( scale, scale, scale );

examples/webgl_materials_bumpmap_skin.html

@@ -13,28 +13,32 @@
 			<a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/SkinShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				DirectionalLight,
+				LinearFilter,
+				Mesh,
+				PerspectiveCamera,
+				RepeatWrapping,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				TextureLoader,
+				UniformsUtils,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+
+			import { SkinShaderBasic, SkinShaderBeckmann } from './jsm/shaders/SkinShader.js';
 
 			var camera, scene, renderer, stats;
 
@@ -62,24 +66,24 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1200;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x242a34 );
+				scene = new Scene();
+				scene.background = new Color( 0x242a34 );
 
 				// LIGHTS
 
-				scene.add( new THREE.AmbientLight( 0x333344 ) );
+				scene.add( new AmbientLight( 0x333344 ) );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( 500, 0, 500 );
 
 				scene.add( directionalLight );
 
 				//
 
-				var loader = new THREE.GLTFLoader();
+				var loader = new GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createScene( gltf.scene.children[ 0 ].geometry, 100 );
@@ -88,7 +92,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -103,13 +107,13 @@
 
 				// BECKMANN
 
-				var effectBeckmann = new THREE.ShaderPass( THREE.SkinShaderBeckmann );
-				var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
+				var effectBeckmann = new ShaderPass( SkinShaderBeckmann );
+				var effectCopy = new ShaderPass( CopyShader );
 
-				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
+				var pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBFormat, stencilBuffer: false };
 				var rtwidth = 512, rtheight = 512;
 
-				composerBeckmann = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				composerBeckmann = new EffectComposer( renderer, new WebGLRenderTarget( rtwidth, rtheight, pars ) );
 				composerBeckmann.addPass( effectBeckmann );
 				composerBeckmann.addPass( effectCopy );
 
@@ -122,32 +126,32 @@
 
 			function createScene( geometry, scale ) {
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				var mapHeight = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
 
 				mapHeight.anisotropy = 4;
-				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
-				mapHeight.format = THREE.RGBFormat;
+				mapHeight.wrapS = mapHeight.wrapT = RepeatWrapping;
+				mapHeight.format = RGBFormat;
 
 				var mapSpecular = textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" );
 
 				mapSpecular.anisotropy = 4;
-				mapSpecular.wrapS = mapSpecular.wrapT = THREE.RepeatWrapping;
-				mapSpecular.format = THREE.RGBFormat;
+				mapSpecular.wrapS = mapSpecular.wrapT = RepeatWrapping;
+				mapSpecular.format = RGBFormat;
 
 				var mapColor = textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" );
 
 				mapColor.anisotropy = 4;
-				mapColor.wrapS = mapColor.wrapT = THREE.RepeatWrapping;
-				mapColor.format = THREE.RGBFormat;
+				mapColor.wrapS = mapColor.wrapT = RepeatWrapping;
+				mapColor.format = RGBFormat;
 
-				var shader = THREE.SkinShaderBasic;
+				var shader = SkinShaderBasic;
 
 				var fragmentShader = shader.fragmentShader;
 				var vertexShader = shader.vertexShader;
 
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				var uniforms = UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "enableBump" ].value = true;
 				uniforms[ "enableSpecular" ].value = true;
@@ -166,10 +170,10 @@
 
 				uniforms[ "bumpScale" ].value = 8;
 
-				var material = new THREE.ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true } );
+				var material = new ShaderMaterial( { fragmentShader: fragmentShader, vertexShader: vertexShader, uniforms: uniforms, lights: true } );
 				material.extensions.derivatives = true;
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.y = - 50;
 				mesh.scale.set( scale, scale, scale );

examples/webgl_materials_cars.html

@@ -29,26 +29,33 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/DRACOLoader.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-
-		<script src="js/misc/CarControls.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Clock,
+				CubeTextureLoader,
+				Fog,
+				GridHelper,
+				Mesh,
+				MeshBasicMaterial,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				ShadowMaterial,
+				TextureLoader,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
+
+			import { CarControls } from './jsm/misc/CarControls.js';
+
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
 			var camera, scene, renderer, stats, carModel, materialsLib, envMap;
 
@@ -58,41 +65,41 @@
 
 			var followCamera = document.getElementById( 'camera-toggle' );
 
-			var clock = new THREE.Clock();
-			var carControls = new THREE.CarControls();
+			var clock = new Clock();
+			var carControls = new CarControls();
 			carControls.turningRadius = 75;
 
 			var carParts = {
 				body: [],
-				rims:[],
+				rims: [],
 				glass: [],
 			};
 
 			var damping = 5.0;
 			var distance = 5;
-			var cameraTarget = new THREE.Vector3();
+			var cameraTarget = new Vector3();
 
 			function init() {
 
 				var container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 200 );
-				camera.position.set( 3.25, 2.0, -5 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 200 );
+				camera.position.set( 3.25, 2.0, - 5 );
 				camera.lookAt( 0, 0.5, 0 );
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.Fog( 0xd7cbb1, 1, 80 );
+				scene = new Scene();
+				scene.fog = new Fog( 0xd7cbb1, 1, 80 );
 
 				var urls = [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ];
-				var loader = new THREE.CubeTextureLoader().setPath( 'textures/cube/skyboxsun25deg/');
+				var loader = new CubeTextureLoader().setPath( 'textures/cube/skyboxsun25deg/' );
 				loader.load( urls, function ( texture ) {
 
 					scene.background = texture;
 
-					var pmremGenerator = new THREE.PMREMGenerator( texture );
+					var pmremGenerator = new PMREMGenerator( texture );
 					pmremGenerator.update( renderer );
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 					pmremCubeUVPacker.update( renderer );
 
 					envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
@@ -108,22 +115,22 @@
 
 				} );
 
-				var ground = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 2400, 2400 ),
-					new THREE.ShadowMaterial( { color: 0x000000, opacity: 0.15, depthWrite: false }
-				) );
+				var ground = new Mesh(
+					new PlaneBufferGeometry( 2400, 2400 ),
+					new ShadowMaterial( { color: 0x000000, opacity: 0.15, depthWrite: false }
+					) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				ground.renderOrder = 1;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 400, 40, 0x000000, 0x000000 );
+				var grid = new GridHelper( 400, 40, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.depthWrite = false;
 				grid.material.transparent = true;
 				scene.add( grid );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.gammaOutput = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -135,7 +142,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				renderer.setAnimationLoop( function() {
+				renderer.setAnimationLoop( function () {
 
 					update();
 
@@ -147,12 +154,12 @@
 
 			function initCar() {
 
-				THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
+				DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
-				var loader = new THREE.GLTFLoader();
-				loader.setDRACOLoader( new THREE.DRACOLoader() );
+				var loader = new GLTFLoader();
+				loader.setDRACOLoader( new DRACOLoader() );
 
-				loader.load( 'models/gltf/ferrari.glb', function( gltf ) {
+				loader.load( 'models/gltf/ferrari.glb', function ( gltf ) {
 
 					carModel = gltf.scene.children[ 0 ];
 
@@ -160,7 +167,7 @@
 
 					carModel.traverse( function ( child ) {
 
-						if ( child.isMesh  ) {
+						if ( child.isMesh ) {
 
 							child.material.envMap = envMap;
 
@@ -169,10 +176,10 @@
 					} );
 
 					// shadow
-					var texture = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );
-					var shadow = new THREE.Mesh(
-						new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ).rotateX( - Math.PI / 2 ),
-						new THREE.MeshBasicMaterial( { map: texture, opacity: 0.8, transparent: true } )
+					var texture = new TextureLoader().load( 'models/gltf/ferrari_ao.png' );
+					var shadow = new Mesh(
+						new PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ).rotateX( - Math.PI / 2 ),
+						new MeshBasicMaterial( { map: texture, opacity: 0.8, transparent: true } )
 					);
 					shadow.renderOrder = 2;
 					carModel.add( shadow );
@@ -196,7 +203,7 @@
 
 					updateMaterials();
 
-				});
+				} );
 
 			}
 
@@ -206,24 +213,24 @@
 
 					main: [
 
-						new THREE.MeshStandardMaterial( { color: 0xff4400, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'orange' } ),
-						new THREE.MeshStandardMaterial( { color: 0x001166, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'blue' } ),
-						new THREE.MeshStandardMaterial( { color: 0x990000, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'red' } ),
-						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'black' } ),
-						new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'white' } ),
-						new THREE.MeshStandardMaterial( { color: 0x555555, envMap: envMap, envMapIntensity: 2.0, metalness: 1.0, roughness: 0.2, name: 'metallic' } ),
+						new MeshStandardMaterial( { color: 0xff4400, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'orange' } ),
+						new MeshStandardMaterial( { color: 0x001166, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'blue' } ),
+						new MeshStandardMaterial( { color: 0x990000, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'red' } ),
+						new MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'black' } ),
+						new MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'white' } ),
+						new MeshStandardMaterial( { color: 0x555555, envMap: envMap, envMapIntensity: 2.0, metalness: 1.0, roughness: 0.2, name: 'metallic' } ),
 
 					],
 
 					glass: [
 
-						new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'clear' } ),
-						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'smoked' } ),
-						new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'blue' } ),
+						new MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'clear' } ),
+						new MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'smoked' } ),
+						new MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'blue' } ),
 
 					],
 
-				}
+				};
 
 			}
 
@@ -238,14 +245,14 @@
 
 				}
 
-				materialsLib.main.forEach( function( material ) {
+				materialsLib.main.forEach( function ( material ) {
 
 					addOption( material.name, bodyMatSelect );
 					addOption( material.name, rimMatSelect );
 
 				} );
 
-				materialsLib.glass.forEach( function( material ) {
+				materialsLib.glass.forEach( function ( material ) {
 
 					addOption( material.name, glassMatSelect );
 
@@ -268,9 +275,9 @@
 				var rimMat = materialsLib.main[ rimMatSelect.selectedIndex ];
 				var glassMat = materialsLib.glass[ glassMatSelect.selectedIndex ];
 
-				carParts.body.forEach( function ( part ) { part.material = bodyMat; } );
-				carParts.rims.forEach( function ( part ) { part.material = rimMat; } );
-				carParts.glass.forEach( function ( part ) { part.material = glassMat; } );
+				carParts.body.forEach( part => part.material = bodyMat );
+				carParts.rims.forEach( part => part.material = rimMat );
+				carParts.glass.forEach( part => part.material = glassMat );
 
 			}
 
@@ -291,8 +298,6 @@
 
 					carControls.update( delta / 3 );
 
-					console.log(   );
-
 					if ( carModel.position.length() > 200 ) {
 
 						carModel.position.set( 0, 0, 0 );
@@ -313,7 +318,7 @@
 						carModel.getWorldPosition( cameraTarget );
 						cameraTarget.y += 0.5;
 
-						camera.position.set( 3.25, 2.0, -5 );
+						camera.position.set( 3.25, 2.0, - 5 );
 
 					}
 

examples/webgl_materials_channels.html

@@ -13,22 +13,32 @@
 			by <a href="https://Clara.io">Ben Houston</a>. ninja head from <a href="http://developer.amd.com/tools-and-sdks/archive/legacy-cpu-gpu-tools/amd-gpu-meshmapper/" target="_blank" rel="noopener">AMD GPU MeshMapper</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BackSide,
+				BasicDepthPacking,
+				DoubleSide,
+				FrontSide,
+				Mesh,
+				MeshDepthMaterial,
+				MeshNormalMaterial,
+				MeshStandardMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PointLight,
+				RGBADepthPacking,
+				Scene,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var stats;
 
@@ -41,9 +51,9 @@
 			};
 
 			var sides = {
-				'front': THREE.FrontSide,
-				'back': THREE.BackSide,
-				'double': THREE.DoubleSide
+				'front': FrontSide,
+				'back': BackSide,
+				'double': DoubleSide
 			};
 
 			var cameraOrtho, cameraPerspective;
@@ -63,7 +73,7 @@
 			// Init gui
 			function initGui() {
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( params, 'material', [ 'standard', 'normal', 'depthBasic', 'depthRGBA' ] );
 				gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
 				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
@@ -75,33 +85,33 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var aspect = window.innerWidth / window.innerHeight;
-				cameraPerspective = new THREE.PerspectiveCamera( 45, aspect, 1000, 2500 );
+				cameraPerspective = new PerspectiveCamera( 45, aspect, 1000, 2500 );
 				cameraPerspective.position.z = 1500;
 				scene.add( cameraPerspective );
 
-				cameraOrtho = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1000, 2500 );
+				cameraOrtho = new OrthographicCamera( - height * aspect, height * aspect, height, - height, 1000, 2500 );
 				cameraOrtho.position.z = 1500;
 				scene.add( cameraOrtho );
 
 				camera = cameraPerspective;
 
-				controlsPerspective = new THREE.OrbitControls( cameraPerspective, renderer.domElement );
+				controlsPerspective = new OrbitControls( cameraPerspective, renderer.domElement );
 				controlsPerspective.minDistance = 1000;
 				controlsPerspective.maxDistance = 2500;
 				controlsPerspective.enablePan = false;
 				controlsPerspective.enableDamping = true;
 
-				controlsOrtho = new THREE.OrbitControls( cameraOrtho, renderer.domElement );
+				controlsOrtho = new OrbitControls( cameraOrtho, renderer.domElement );
 				controlsOrtho.minZoom = 0.5;
 				controlsOrtho.maxZoom = 2;
 				controlsOrtho.enablePan = false;
@@ -109,31 +119,31 @@
 
 				// lights
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.1 );
+				var ambientLight = new AmbientLight( 0xffffff, 0.1 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xff0000, 0.5 );
+				var pointLight = new PointLight( 0xff0000, 0.5 );
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				var pointLight2 = new THREE.PointLight( 0xff6666, 1 );
+				var pointLight2 = new PointLight( 0xff6666, 1 );
 				camera.add( pointLight2 );
 
-				var pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
+				var pointLight3 = new PointLight( 0x0000ff, 0.5 );
 				pointLight3.position.x = - 1000;
 				pointLight3.position.z = 1000;
 				scene.add( pointLight3 );
 
 				// textures
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 				var normalMap = textureLoader.load( "models/obj/ninja/normal.jpg" );
 				var aoMap = textureLoader.load( "models/obj/ninja/ao.jpg" );
 				var displacementMap = textureLoader.load( "models/obj/ninja/displacement.jpg" );
 
 				// material
 
-				materialStandard = new THREE.MeshStandardMaterial( {
+				materialStandard = new MeshStandardMaterial( {
 					color: 0xffffff,
 
 					metalness: 0.5,
@@ -146,56 +156,56 @@
 					aoMap: aoMap,
 
 					normalMap: normalMap,
-					normalScale: new THREE.Vector2( 1, - 1 ),
+					normalScale: new Vector2( 1, - 1 ),
 
 					//flatShading: true,
 
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
-				materialDepthBasic = new THREE.MeshDepthMaterial( {
-					depthPacking: THREE.BasicDepthPacking,
+				materialDepthBasic = new MeshDepthMaterial( {
+					depthPacking: BasicDepthPacking,
 
 					displacementMap: displacementMap,
 					displacementScale: SCALE,
 					displacementBias: BIAS,
 
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
-				materialDepthRGBA = new THREE.MeshDepthMaterial( {
-					depthPacking: THREE.RGBADepthPacking,
+				materialDepthRGBA = new MeshDepthMaterial( {
+					depthPacking: RGBADepthPacking,
 
 					displacementMap: displacementMap,
 					displacementScale: SCALE,
 					displacementBias: BIAS,
 
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
-				materialNormal = new THREE.MeshNormalMaterial( {
+				materialNormal = new MeshNormalMaterial( {
 					displacementMap: displacementMap,
 					displacementScale: SCALE,
 					displacementBias: BIAS,
 
 					normalMap: normalMap,
-					normalScale: new THREE.Vector2( 1, - 1 ),
+					normalScale: new Vector2( 1, - 1 ),
 
 					//flatShading: true,
 
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
 				//
 
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
 
 					var geometry = group.children[ 0 ].geometry;
 					geometry.attributes.uv2 = geometry.attributes.uv;
 					geometry.center();
 
-					mesh = new THREE.Mesh( geometry, materialNormal );
+					mesh = new Mesh( geometry, materialNormal );
 					mesh.scale.multiplyScalar( 25 );
 					scene.add( mesh );
 
@@ -263,9 +273,9 @@
 
 						switch ( params.side ) {
 
-							case 'front': material.side = THREE.FrontSide; break;
-							case 'back': material.side = THREE.BackSide; break;
-							case 'double': material.side = THREE.DoubleSide; break;
+							case 'front': material.side = FrontSide; break;
+							case 'back': material.side = BackSide; break;
+							case 'double': material.side = DoubleSide; break;
 
 						}
 

examples/webgl_materials_cubemap.html

@@ -14,22 +14,24 @@
 			Texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>, Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				CubeTextureLoader,
+				CubeRefractionMapping,
+				MeshLambertMaterial,
+				MixOperation,
+				PerspectiveCamera,
+				PointLight,
+				RGBFormat,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
 			var container, stats;
 
@@ -45,7 +47,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 2000;
 
 				//cubemap
@@ -57,30 +59,30 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
-				reflectionCube.format = THREE.RGBFormat;
+				var reflectionCube = new CubeTextureLoader().load( urls );
+				reflectionCube.format = RGBFormat;
 
-				var refractionCube = new THREE.CubeTextureLoader().load( urls );
-				refractionCube.mapping = THREE.CubeRefractionMapping;
-				refractionCube.format = THREE.RGBFormat;
+				var refractionCube = new CubeTextureLoader().load( urls );
+				refractionCube.mapping = CubeRefractionMapping;
+				refractionCube.format = RGBFormat;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.background = reflectionCube;
 
 				//lights
-				var ambient = new THREE.AmbientLight( 0xffffff );
+				var ambient = new AmbientLight( 0xffffff );
 				scene.add( ambient );
 
-				pointLight = new THREE.PointLight( 0xffffff, 2 );
+				pointLight = new PointLight( 0xffffff, 2 );
 				scene.add( pointLight );
 
 				//materials
-				var cubeMaterial3 = new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
-				var cubeMaterial2 = new THREE.MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
-				var cubeMaterial1 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
+				var cubeMaterial3 = new MeshLambertMaterial( { color: 0xff6600, envMap: reflectionCube, combine: MixOperation, reflectivity: 0.3 } );
+				var cubeMaterial2 = new MeshLambertMaterial( { color: 0xffee00, envMap: refractionCube, refractionRatio: 0.95 } );
+				var cubeMaterial1 = new MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } );
 
 				//models
-				var objLoader = new THREE.OBJLoader();
+				var objLoader = new OBJLoader();
 
 				objLoader.setPath( 'models/obj/walt/' );
 				objLoader.load( 'WaltHead.obj', function ( object ) {
@@ -104,13 +106,13 @@
 				} );
 
 				//renderer
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//controls
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 				controls.enablePan = false;
 				controls.minPolarAngle = Math.PI / 4;

examples/webgl_materials_cubemap_balls_reflection.html

@@ -12,17 +12,16 @@
 			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
 			var container;
 
@@ -46,20 +45,20 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.CubeTextureLoader()
+				scene = new Scene();
+				scene.background = new CubeTextureLoader()
 					.setPath( 'textures/cube/pisa/' )
 					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
+				var geometry = new SphereBufferGeometry( 100, 32, 16 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -75,7 +74,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_materials_cubemap_balls_refraction.html

@@ -12,17 +12,17 @@
 			skybox by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				CubeRefractionMapping,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
 			var container;
 
@@ -45,22 +45,22 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.CubeTextureLoader()
+				scene = new Scene();
+				scene.background = new CubeTextureLoader()
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
+				var geometry = new SphereBufferGeometry( 100, 32, 16 );
 
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
-				material.envMap.mapping = THREE.CubeRefractionMapping;
+				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
+				material.envMap.mapping = CubeRefractionMapping;
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -76,7 +76,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_materials_cubemap_refraction.html

@@ -14,20 +14,24 @@
 			Texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/PLYLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				CubeTextureLoader,
+				CubeRefractionMapping,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { PLYLoader } from './jsm/loaders/PLYLoader.js';
 
 			var container, stats;
 
@@ -48,7 +52,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = - 4000;
 
 				//
@@ -61,37 +65,37 @@
 					r + "pz.jpg", r + "nz.jpg"
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.mapping = THREE.CubeRefractionMapping;
+				var textureCube = new CubeTextureLoader().load( urls );
+				textureCube.mapping = CubeRefractionMapping;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.background = textureCube;
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0xffffff );
+				var ambient = new AmbientLight( 0xffffff );
 				scene.add( ambient );
 
-				pointLight = new THREE.PointLight( 0xffffff, 2 );
+				pointLight = new PointLight( 0xffffff, 2 );
 				scene.add( pointLight );
 
 				// light representation
 
-				var sphere = new THREE.SphereBufferGeometry( 100, 16, 8 );
+				var sphere = new SphereBufferGeometry( 100, 16, 8 );
 
-				var mesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				var mesh = new Mesh( sphere, new MeshBasicMaterial( { color: 0xffffff } ) );
 				mesh.scale.set( 0.05, 0.05, 0.05 );
 				pointLight.add( mesh );
 
 				// material samples
 
-				var cubeMaterial3 = new THREE.MeshPhongMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity: 0.9 } );
-				var cubeMaterial2 = new THREE.MeshPhongMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985 } );
-				var cubeMaterial1 = new THREE.MeshPhongMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } );
+				var cubeMaterial3 = new MeshPhongMaterial( { color: 0xccddff, envMap: textureCube, refractionRatio: 0.98, reflectivity: 0.9 } );
+				var cubeMaterial2 = new MeshPhongMaterial( { color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985 } );
+				var cubeMaterial1 = new MeshPhongMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.98 } );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -99,7 +103,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var loader = new THREE.PLYLoader();
+				var loader = new PLYLoader();
 				loader.load( 'models/ply/binary/Lucy100k.ply', function ( geometry ) {
 
 					createScene( geometry, cubeMaterial1, cubeMaterial2, cubeMaterial3 );
@@ -132,16 +136,16 @@
 
 				var s = 1.5;
 
-				var mesh = new THREE.Mesh( geometry, m1 );
+				var mesh = new Mesh( geometry, m1 );
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry, m2 );
+				var mesh = new Mesh( geometry, m2 );
 				mesh.position.x = - 1500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry, m3 );
+				var mesh = new Mesh( geometry, m3 );
 				mesh.position.x = 1500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
 				scene.add( mesh );

examples/webgl_materials_curvature.html

@@ -14,13 +14,6 @@
 			by <a href="http://codercat.club" target="_blank" rel="noopener">CoderCat</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script id="vertexShaderRaw" type="x-shader/x-vertex">
 
 		attribute float curvature;
@@ -49,13 +42,20 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferAttribute,
+				Mesh,
+				PerspectiveCamera,
+				Scene,
+				ShaderMaterial,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
 			var camera, scene, renderer;
 
@@ -124,22 +124,22 @@
 			//initialize the scene
 			function init() {
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
 				camera.position.x = - 23;
 				camera.position.y = 2;
 				camera.position.z = 24;
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 				//load the obj
 				loader.load( 'models/obj/ninja/ninjaHead_Low.obj', function ( object ) {
 
@@ -157,21 +157,21 @@
 								var array = bufferGeo.attributes.position.array;
 								var normArray = bufferGeo.attributes.normal.array;
 
-								var posA = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
-								var posB = new THREE.Vector3( array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ] );
-								var posC = new THREE.Vector3( array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ] );
+								var posA = new Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
+								var posB = new Vector3( array[ 3 * ( i + 1 ) ], array[ 3 * ( i + 1 ) + 1 ], array[ 3 * ( i + 1 ) + 2 ] );
+								var posC = new Vector3( array[ 3 * ( i + 2 ) ], array[ 3 * ( i + 2 ) + 1 ], array[ 3 * ( i + 2 ) + 2 ] );
 
-								var normA = new THREE.Vector3( normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ] ).normalize();
-								var normB = new THREE.Vector3( normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ] ).normalize();
-								var normC = new THREE.Vector3( normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ] ).normalize();
+								var normA = new Vector3( normArray[ 3 * i ], normArray[ 3 * i + 1 ], normArray[ 3 * i + 2 ] ).normalize();
+								var normB = new Vector3( normArray[ 3 * ( i + 1 ) ], normArray[ 3 * ( i + 1 ) + 1 ], normArray[ 3 * ( i + 1 ) + 2 ] ).normalize();
+								var normC = new Vector3( normArray[ 3 * ( i + 2 ) ], normArray[ 3 * ( i + 2 ) + 1 ], normArray[ 3 * ( i + 2 ) + 2 ] ).normalize();
 
 								var strA = posA.toArray().toString();
 								var strB = posB.toArray().toString();
 								var strC = posC.toArray().toString();
 
-								var posB_A = new THREE.Vector3().subVectors( posB, posA );
-								var posB_C = new THREE.Vector3().subVectors( posB, posC );
-								var posC_A = new THREE.Vector3().subVectors( posC, posA );
+								var posB_A = new Vector3().subVectors( posB, posA );
+								var posB_C = new Vector3().subVectors( posB, posC );
+								var posC_A = new Vector3().subVectors( posC, posA );
 
 								var b2a = normB.dot( posB_A.normalize() );
 								var b2c = normB.dot( posB_C.normalize() );
@@ -265,26 +265,26 @@
 							for ( var i = 0; i < bufferGeo.attributes.position.count; i ++ ) {
 
 								array = bufferGeo.attributes.position.array;
-								var pos = new THREE.Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
+								var pos = new Vector3( array[ 3 * i ], array[ 3 * i + 1 ], array[ 3 * i + 2 ] );
 								var str = pos.toArray().toString();
 								curvatureAttribute[ i ] = curvatureDict[ str ];
 
 							}
 
-							bufferGeo.addAttribute( 'curvature', new THREE.BufferAttribute( curvatureAttribute, 1 ) );
+							bufferGeo.addAttribute( 'curvature', new BufferAttribute( curvatureAttribute, 1 ) );
 
 							//starting filter is to show both concave and convex
 							var curvatureFiltered = new Float32Array( curvatureAttribute );
 							filterBoth( curvatureFiltered );
 
-							var materialRaw = new THREE.ShaderMaterial( {
+							var materialRaw = new ShaderMaterial( {
 
 								vertexShader: document.getElementById( 'vertexShaderRaw' ).textContent,
 								fragmentShader: document.getElementById( 'fragmentShaderRaw' ).textContent
 
 							} );
 
-							ninjaMeshRaw = new THREE.Mesh( bufferGeo, materialRaw );
+							ninjaMeshRaw = new Mesh( bufferGeo, materialRaw );
 
 						}
 
@@ -326,7 +326,7 @@
 					}
 				};
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				var topologyFolder = gui.addFolder( 'Topology' );
 				topologyFolder.add( params, 'filterConvex' );

examples/webgl_materials_displacementmap.html

@@ -20,23 +20,26 @@
 			<div id="vt">displacement mapping requires vertex textures</div>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
-
+		<script type="module">
+			import {
+				AmbientLight,
+				CubeTextureLoader,
+				DoubleSide,
+				Mesh,
+				MeshStandardMaterial,
+				OrthographicCamera,
+				PointLight,
+				Scene,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			var stats;
 
 			var camera, scene, renderer, controls;
@@ -65,7 +68,7 @@
 			// Init gui
 			function initGui() {
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				//var gui = gui.addFolder( "Material" );
 				gui.add( settings, "metalness" ).min( 0 ).max( 1 ).onChange( function ( value ) {
 
@@ -116,7 +119,7 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -126,30 +129,30 @@
 
 				//
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var aspect = window.innerWidth / window.innerHeight;
-				camera = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1, 10000 );
+				camera = new OrthographicCamera( - height * aspect, height * aspect, height, - height, 1, 10000 );
 				camera.position.z = 1500;
 				scene.add( camera );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableZoom = false;
 				controls.enableDamping = true;
 
 				// lights
 
-				ambientLight = new THREE.AmbientLight( 0xffffff, settings.ambientIntensity );
+				ambientLight = new AmbientLight( 0xffffff, settings.ambientIntensity );
 				scene.add( ambientLight );
 
-				pointLight = new THREE.PointLight( 0xff0000, 0.5 );
+				pointLight = new PointLight( 0xff0000, 0.5 );
 				pointLight.position.z = 2500;
 				scene.add( pointLight );
 
-				var pointLight2 = new THREE.PointLight( 0xff6666, 1 );
+				var pointLight2 = new PointLight( 0xff6666, 1 );
 				camera.add( pointLight2 );
 
-				var pointLight3 = new THREE.PointLight( 0x0000ff, 0.5 );
+				var pointLight3 = new PointLight( 0x0000ff, 0.5 );
 				pointLight3.position.x = - 1000;
 				pointLight3.position.z = 1000;
 				scene.add( pointLight3 );
@@ -164,25 +167,25 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
+				var reflectionCube = new CubeTextureLoader().load( urls );
 
 				// textures
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 				var normalMap = textureLoader.load( "models/obj/ninja/normal.jpg" );
 				var aoMap = textureLoader.load( "models/obj/ninja/ao.jpg" );
 				var displacementMap = textureLoader.load( "models/obj/ninja/displacement.jpg" );
 
 				// material
 
-				material = new THREE.MeshStandardMaterial( {
+				material = new MeshStandardMaterial( {
 
 					color: 0x888888,
 					roughness: settings.roughness,
 					metalness: settings.metalness,
 
 					normalMap: normalMap,
-					normalScale: new THREE.Vector2( 1, - 1 ), // why does the normal map require negation in this case?
+					normalScale: new Vector2( 1, - 1 ), // why does the normal map require negation in this case?
 
 					aoMap: aoMap,
 					aoMapIntensity: 1,
@@ -194,20 +197,20 @@
 					envMap: reflectionCube,
 					envMapIntensity: settings.envMapIntensity,
 
-					side: THREE.DoubleSide
+					side: DoubleSide
 
 				} );
 
 				//
 
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 				loader.load( "models/obj/ninja/ninjaHead_Low.obj", function ( group ) {
 
 					var geometry = group.children[ 0 ].geometry;
 					geometry.attributes.uv2 = geometry.attributes.uv;
 					geometry.center();
 
-					mesh = new THREE.Mesh( geometry, material );
+					mesh = new Mesh( geometry, material );
 					mesh.scale.multiplyScalar( 25 );
 					scene.add( mesh );
 

examples/webgl_materials_envmaps.html

@@ -8,17 +8,40 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl environment mapping example<br/>
 			Equirectangular Map by <a href="http://gl.ict.usc.edu/Data/HighResProbes/">University of Southern California</a><br/>
 			Spherical Map by <a href="http://www.pauldebevec.com/Probes/">Paul Debevec</a>
 		</div>
 
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BackSide,
+				BoxBufferGeometry,
+				CubeReflectionMapping,
+				CubeRefractionMapping,
+				CubeTextureLoader,
+				EquirectangularReflectionMapping,
+				EquirectangularRefractionMapping,
+				LinearFilter,
+				LinearMipMapLinearFilter,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				RGBFormat,
+				Scene,
+				ShaderLib,
+				ShaderMaterial,
+				SphericalReflectionMapping,
+				SphereBufferGeometry,
+				sRGBEncoding,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var controls, camera, scene, renderer;
 			var cameraCube, sceneCube;
@@ -33,18 +56,18 @@
 
 				// CAMERAS
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.set( 0, 0, 1000 );
-				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+				cameraCube = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
-				sceneCube = new THREE.Scene();
+				scene = new Scene();
+				sceneCube = new Scene();
 
 				// Lights
 
-				var ambient = new THREE.AmbientLight( 0xffffff );
+				var ambient = new AmbientLight( 0xffffff );
 				scene.add( ambient );
 
 				// Textures
@@ -54,33 +77,33 @@
 							 r + "posy.jpg", r + "negy.jpg",
 							 r + "posz.jpg", r + "negz.jpg" ];
 
-				textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.format = THREE.RGBFormat;
-				textureCube.mapping = THREE.CubeReflectionMapping;
-				textureCube.encoding = THREE.sRGBEncoding;
+				textureCube = new CubeTextureLoader().load( urls );
+				textureCube.format = RGBFormat;
+				textureCube.mapping = CubeReflectionMapping;
+				textureCube.encoding = sRGBEncoding;
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				textureEquirec = textureLoader.load( "textures/2294472375_24a3b8ef46_o.jpg" );
-				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
-				textureEquirec.magFilter = THREE.LinearFilter;
-				textureEquirec.minFilter = THREE.LinearMipMapLinearFilter;
-				textureEquirec.encoding = THREE.sRGBEncoding;
+				textureEquirec.mapping = EquirectangularReflectionMapping;
+				textureEquirec.magFilter = LinearFilter;
+				textureEquirec.minFilter = LinearMipMapLinearFilter;
+				textureEquirec.encoding = sRGBEncoding;
 
 				textureSphere = textureLoader.load( "textures/metal.jpg" );
-				textureSphere.mapping = THREE.SphericalReflectionMapping;
-				textureSphere.encoding = THREE.sRGBEncoding;
+				textureSphere.mapping = SphericalReflectionMapping;
+				textureSphere.encoding = sRGBEncoding;
 
 				// Materials
 
-				var equirectShader = THREE.ShaderLib[ "equirect" ];
+				var equirectShader = ShaderLib[ "equirect" ];
 
-				var equirectMaterial = new THREE.ShaderMaterial( {
+				var equirectMaterial = new ShaderMaterial( {
 					fragmentShader: equirectShader.fragmentShader,
 					vertexShader: equirectShader.vertexShader,
 					uniforms: equirectShader.uniforms,
 					depthWrite: false,
-					side: THREE.BackSide
+					side: BackSide
 				} );
 
 				equirectMaterial.uniforms[ "tEquirect" ].value = textureEquirec;
@@ -95,13 +118,13 @@
 
 				} );
 
-				var cubeShader = THREE.ShaderLib[ "cube" ];
-				var cubeMaterial = new THREE.ShaderMaterial( {
+				var cubeShader = ShaderLib[ "cube" ];
+				var cubeMaterial = new ShaderMaterial( {
 					fragmentShader: cubeShader.fragmentShader,
 					vertexShader: cubeShader.vertexShader,
 					uniforms: cubeShader.uniforms,
 					depthWrite: false,
-					side: THREE.BackSide
+					side: BackSide
 				} );
 
 				cubeMaterial.uniforms[ "tCube" ].value = textureCube;
@@ -117,20 +140,20 @@
 
 				// Skybox
 
-				cubeMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
+				cubeMesh = new Mesh( new BoxBufferGeometry( 100, 100, 100 ), cubeMaterial );
 				sceneCube.add( cubeMesh );
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 400.0, 48, 24 );
-				sphereMaterial = new THREE.MeshLambertMaterial( { envMap: textureCube } );
-				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
+				var geometry = new SphereBufferGeometry( 400.0, 48, 24 );
+				sphereMaterial = new MeshLambertMaterial( { envMap: textureCube } );
+				sphereMesh = new Mesh( geometry, sphereMaterial );
 
 				scene.add( sphereMesh );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -140,7 +163,7 @@
 
 				//
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 500;
 				controls.maxDistance = 2500;
 
@@ -173,7 +196,7 @@
 					Refraction: false
 				};
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( params, 'Cube' );
 				gui.add( params, 'Equirectangular' );
 				gui.add( params, 'Spherical' );
@@ -181,13 +204,13 @@
 
 					if ( value ) {
 
-						textureEquirec.mapping = THREE.EquirectangularRefractionMapping;
-						textureCube.mapping = THREE.CubeRefractionMapping;
+						textureEquirec.mapping = EquirectangularRefractionMapping;
+						textureCube.mapping = CubeRefractionMapping;
 
 					} else {
 
-						textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
-						textureCube.mapping = THREE.CubeReflectionMapping;
+						textureEquirec.mapping = EquirectangularReflectionMapping;
+						textureCube.mapping = CubeReflectionMapping;
 
 					}
 

examples/webgl_materials_envmaps_hdr.html

@@ -14,26 +14,33 @@
 			Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/RGBELoader.js"></script>
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				CubeTextureLoader,
+				LinearFilter,
+				LinearToneMapping,
+				Mesh,
+				MeshBasicMaterial,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RGBAFormat,
+				RGBM16Encoding,
+				Scene,
+				sRGBEncoding,
+				TorusKnotBufferGeometry,
+				UnsignedByteType,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
 			var params = {
 				envMap: 'HDR',
@@ -57,52 +64,52 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 120 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
+				scene = new Scene();
+				scene.background = new Color( 0x000000 );
 
-				renderer = new THREE.WebGLRenderer();
-				renderer.toneMapping = THREE.LinearToneMapping;
+				renderer = new WebGLRenderer();
+				renderer.toneMapping = LinearToneMapping;
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
-				var material = new THREE.MeshStandardMaterial( {
+				var geometry = new TorusKnotBufferGeometry( 18, 8, 150, 20 );
+				var material = new MeshStandardMaterial( {
 					color: 0xffffff,
 					metalness: params.metalness,
 					roughness: params.roughness
 				} );
 
-				torusMesh = new THREE.Mesh( geometry, material );
+				torusMesh = new Mesh( geometry, material );
 				scene.add( torusMesh );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
-				var material = new THREE.MeshBasicMaterial();
+				var geometry = new PlaneBufferGeometry( 200, 200 );
+				var material = new MeshBasicMaterial();
 
-				planeMesh = new THREE.Mesh( geometry, material );
+				planeMesh = new Mesh( geometry, material );
 				planeMesh.position.y = - 50;
 				planeMesh.rotation.x = - Math.PI * 0.5;
 				scene.add( planeMesh );
 
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
 
-				hdrCubeMap = new THREE.HDRCubeTextureLoader()
+				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
-					.setType( THREE.UnsignedByteType )
+					.setType( UnsignedByteType )
 					.load( hdrUrls, function () {
 
-						var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
 						pmremGenerator.update( renderer );
 
-						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 						pmremCubeUVPacker.update( renderer );
 
 						hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-						hdrCubeMap.magFilter = THREE.LinearFilter;
+						hdrCubeMap.magFilter = LinearFilter;
 						hdrCubeMap.needsUpdate = true;
 
 						pmremGenerator.dispose();
@@ -111,16 +118,16 @@
 					} );
 
 				var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
-				ldrCubeMap = new THREE.CubeTextureLoader()
+				ldrCubeMap = new CubeTextureLoader()
 					.setPath( './textures/cube/pisa/' )
 					.load( ldrUrls, function () {
 
-						ldrCubeMap.encoding = THREE.sRGBEncoding;
+						ldrCubeMap.encoding = sRGBEncoding;
 
-						var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
+						var pmremGenerator = new PMREMGenerator( ldrCubeMap );
 						pmremGenerator.update( renderer );
 
-						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 						pmremCubeUVPacker.update( renderer );
 
 						ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
@@ -132,22 +139,22 @@
 
 
 				var rgbmUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
-				rgbmCubeMap = new THREE.CubeTextureLoader()
+				rgbmCubeMap = new CubeTextureLoader()
 					.setPath( './textures/cube/pisaRGBM16/' )
 					.load( rgbmUrls, function () {
 
-						rgbmCubeMap.encoding = THREE.RGBM16Encoding;
-						rgbmCubeMap.format = THREE.RGBAFormat;
+						rgbmCubeMap.encoding = RGBM16Encoding;
+						rgbmCubeMap.format = RGBAFormat;
 
-						var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
+						var pmremGenerator = new PMREMGenerator( rgbmCubeMap );
 						pmremGenerator.update( renderer );
 
-						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 						pmremCubeUVPacker.update( renderer );
 
 						rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-						rgbmCubeMap.magFilter = THREE.LinearFilter;
+						rgbmCubeMap.magFilter = LinearFilter;
 						rgbmCubeMap.needsUpdate = true;
 
 						pmremGenerator.dispose();
@@ -159,19 +166,19 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				//renderer.toneMapping = THREE.ReinhardToneMapping;
+				//renderer.toneMapping = ReinhardToneMapping;
 				renderer.gammaOutput = true;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 300;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );
@@ -225,6 +232,7 @@
 						renderTarget = rgbmCubeRenderTarget;
 						cubeMap = rgbmCubeMap;
 						break;
+
 				}
 
 				var newEnvMap = renderTarget ? renderTarget.texture : null;

examples/webgl_materials_envmaps_parallax.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - box projected cubemap environment mapping</title>
+		<title>js webgl - box projected cubemap environment mapping</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -12,13 +12,29 @@
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - box projected cubemap environment mapping. <br> created by <a href="https://codercat.tk" target="_blank" rel="noopener">codercat</a>
 		</div>
-		<script src="../build/three.js"></script>
-		<script src="js/objects/Reflector.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/lights/RectAreaLightUniformsLib.js"></script>
 
-		<script>
+		<script type="module">
+			import {
+				Color,
+				CubeCamera,
+				CubeReflectionMapping,
+				LinearMipMapLinearFilter,
+				Mesh,
+				MeshPhysicalMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RectAreaLight,
+				RectAreaLightHelper,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { RectAreaLightUniformsLib } from './jsm/lights/RectAreaLightUniformsLib.js';
 
 			// shader injection for box projected cube environment mapping
 			var worldposReplace = `
@@ -262,13 +278,13 @@
 				var container = document.getElementById( 'container' );
 
 				// renderer
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 				container.appendChild( renderer.domElement );
 
 				// gui controls
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				var params = {
 					'box projected': true
 				};
@@ -291,13 +307,13 @@
 				} );
 
 				// scene
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// camera
-				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
+				camera = new PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 				camera.position.set( 280, 106, - 5 );
 
-				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
+				cameraControls = new OrbitControls( camera, renderer.domElement );
 				cameraControls.target.set( 0, - 10, 0 );
 				cameraControls.maxDistance = 400;
 				cameraControls.minDistance = 10;
@@ -305,29 +321,29 @@
 				cameraControls.update();
 
 				// cube camera for environment map
-				cubeCamera = new THREE.CubeCamera( 1, 1000, 512 );
+				cubeCamera = new CubeCamera( 1, 1000, 512 );
 				cubeCamera.renderTarget.texture.generateMipmaps = true;
-				cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
-				cubeCamera.renderTarget.texture.mapping = THREE.CubeReflectionMapping;
+				cubeCamera.renderTarget.texture.minFilter = LinearMipMapLinearFilter;
+				cubeCamera.renderTarget.texture.mapping = CubeReflectionMapping;
 
 				cubeCamera.position.set( 0, - 100, 0 );
 				scene.add( cubeCamera );
 
 				// ground floor ( with box projected environment mapping )
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 				var rMap = loader.load( 'textures/lava/lavatile.jpg' );
-				rMap.wrapS = THREE.RepeatWrapping;
-				rMap.wrapT = THREE.RepeatWrapping;
+				rMap.wrapS = RepeatWrapping;
+				rMap.wrapT = RepeatWrapping;
 				rMap.repeat.set( 2, 1 );
 
-				var defaultMat = new THREE.MeshPhysicalMaterial( {
+				var defaultMat = new MeshPhysicalMaterial( {
 					roughness: 1,
 					envMap: cubeCamera.renderTarget.texture,
 					roughnessMap: rMap
 				} );
 
-				var boxProjectedMat = new THREE.MeshPhysicalMaterial( {
-					color: new THREE.Color( '#ffffff' ),
+				var boxProjectedMat = new MeshPhysicalMaterial( {
+					color: new Color( '#ffffff' ),
 					roughness: 1,
 					envMap: cubeCamera.renderTarget.texture,
 					roughnessMap: rMap
@@ -336,8 +352,8 @@
 				boxProjectedMat.onBeforeCompile = function ( shader ) {
 
 					//these parameters are for the cubeCamera texture
-					shader.uniforms.cubeMapSize = { value: new THREE.Vector3( 200, 200, 100 ) };
-					shader.uniforms.cubeMapPos = { value: new THREE.Vector3( 0, - 50, 0 ) };
+					shader.uniforms.cubeMapSize = { value: new Vector3( 200, 200, 100 ) };
+					shader.uniforms.cubeMapPos = { value: new Vector3( 0, - 50, 0 ) };
 					shader.uniforms.flipEnvMap.value = true;
 
 					//replace shader chunks with box projection chunks
@@ -360,7 +376,7 @@
 
 				};
 
-				groundPlane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 100, 100 ), boxProjectedMat );
+				groundPlane = new Mesh( new PlaneBufferGeometry( 200, 100, 100 ), boxProjectedMat );
 				groundPlane.rotateX( - Math.PI / 2 );
 				groundPlane.position.set( 0, - 49, 0 );
 				scene.add( groundPlane );
@@ -377,42 +393,42 @@
 
 				} );
 
-				wallMat = new THREE.MeshPhysicalMaterial( {
+				wallMat = new MeshPhysicalMaterial( {
 					map: diffuseTex,
 					bumpMap: bumpTex,
 					bumpScale: 0.3,
 				} );
 
-				var planeGeo = new THREE.PlaneBufferGeometry( 100, 100 );
+				var planeGeo = new PlaneBufferGeometry( 100, 100 );
 
-				var planeBack1 = new THREE.Mesh( planeGeo, wallMat );
+				var planeBack1 = new Mesh( planeGeo, wallMat );
 				planeBack1.position.z = - 50;
 				planeBack1.position.x = - 50;
 				scene.add( planeBack1 );
 
-				var planeBack2 = new THREE.Mesh( planeGeo, wallMat );
+				var planeBack2 = new Mesh( planeGeo, wallMat );
 				planeBack2.position.z = - 50;
 				planeBack2.position.x = 50;
 				scene.add( planeBack2 );
 
-				var planeFront1 = new THREE.Mesh( planeGeo, wallMat );
+				var planeFront1 = new Mesh( planeGeo, wallMat );
 				planeFront1.position.z = 50;
 				planeFront1.position.x = - 50;
 				planeFront1.rotateY( Math.PI );
 				scene.add( planeFront1 );
 
-				var planeFront2 = new THREE.Mesh( planeGeo, wallMat );
+				var planeFront2 = new Mesh( planeGeo, wallMat );
 				planeFront2.position.z = 50;
 				planeFront2.position.x = 50;
 				planeFront2.rotateY( Math.PI );
 				scene.add( planeFront2 );
 
-				var planeRight = new THREE.Mesh( planeGeo, wallMat );
+				var planeRight = new Mesh( planeGeo, wallMat );
 				planeRight.position.x = 100;
 				planeRight.rotateY( - Math.PI / 2 );
 				scene.add( planeRight );
 
-				var planeLeft = new THREE.Mesh( planeGeo, wallMat );
+				var planeLeft = new Mesh( planeGeo, wallMat );
 				planeLeft.position.x = - 100;
 				planeLeft.rotateY( Math.PI / 2 );
 				scene.add( planeLeft );
@@ -422,22 +438,22 @@
 				var height = 50;
 				var intensity = 10;
 
-				THREE.RectAreaLightUniformsLib.init();
+				RectAreaLightUniformsLib.init();
 
-				var blueRectLight = new THREE.RectAreaLight( 0xf3aaaa, intensity, width, height );
+				var blueRectLight = new RectAreaLight( 0xf3aaaa, intensity, width, height );
 				blueRectLight.position.set( 99, 5, 0 );
 				blueRectLight.lookAt( 0, 5, 0 );
 				scene.add( blueRectLight );
 
-				var blueRectLightHelper = new THREE.RectAreaLightHelper( blueRectLight, 0xffffff );
+				var blueRectLightHelper = new RectAreaLightHelper( blueRectLight, 0xffffff );
 				blueRectLight.add( blueRectLightHelper );
 
-				var redRectLight = new THREE.RectAreaLight( 0x9aaeff, intensity, width, height );
+				var redRectLight = new RectAreaLight( 0x9aaeff, intensity, width, height );
 				redRectLight.position.set( - 99, 5, 0 );
 				redRectLight.lookAt( 0, 5, 0 );
 				scene.add( redRectLight );
 
-				var redRectLightHelper = new THREE.RectAreaLightHelper( redRectLight, 0xffffff );
+				var redRectLightHelper = new RectAreaLightHelper( redRectLight, 0xffffff );
 				redRectLight.add( redRectLightHelper );
 
 				render();

examples/webgl_materials_grass.html

@@ -8,17 +8,18 @@
 	</head>
 
 	<body>
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CanvasTexture,
+				Color,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
 			var camera, scene, renderer;
 
@@ -27,27 +28,27 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 75, 100 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x003300 );
+				scene = new Scene();
+				scene.background = new Color( 0x003300 );
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
-				var texture = new THREE.CanvasTexture( generateTexture() );
+				var texture = new CanvasTexture( generateTexture() );
 
 				for ( var i = 0; i < 15; i ++ ) {
 
-					var material = new THREE.MeshBasicMaterial( {
-						color: new THREE.Color().setHSL( 0.3, 0.75, ( i / 15 ) * 0.4 + 0.1 ),
+					var material = new MeshBasicMaterial( {
+						color: new Color().setHSL( 0.3, 0.75, ( i / 15 ) * 0.4 + 0.1 ),
 						map: texture,
 						depthTest: false,
 						depthWrite: false,
 						transparent: true
 					} );
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.y = i * 0.25;
 					mesh.rotation.x = - Math.PI / 2;
@@ -58,7 +59,7 @@
 
 				scene.children.reverse();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_materials_lightmap.html

@@ -8,12 +8,6 @@
 	</head>
 
 	<body>
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
 		<script type="x-shader/x-vertex" id="vertexShader">
 
@@ -48,7 +42,23 @@
 
 		</script>
 
-		<script>
+		<script type="module">
+			import {
+				BackSide,
+				Color,
+				DirectionalLight,
+				Mesh,
+				ObjectLoader,
+				PerspectiveCamera,
+				Scene,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
@@ -66,16 +76,16 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.set( 700, 200, - 500 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// LIGHTS
 
-				var light = new THREE.DirectionalLight( 0xaabbff, 0.3 );
+				var light = new DirectionalLight( 0xaabbff, 0.3 );
 				light.position.x = 300;
 				light.position.y = 250;
 				light.position.z = - 500;
@@ -86,27 +96,27 @@
 				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
 				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
 				var uniforms = {
-					topColor: { value: new THREE.Color( 0x0077ff ) },
-					bottomColor: { value: new THREE.Color( 0xffffff ) },
+					topColor: { value: new Color( 0x0077ff ) },
+					bottomColor: { value: new Color( 0xffffff ) },
 					offset: { value: 400 },
 					exponent: { value: 0.6 }
 				};
 				uniforms.topColor.value.copy( light.color );
 
-				var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
-				var skyMat = new THREE.ShaderMaterial( {
+				var skyGeo = new SphereBufferGeometry( 4000, 32, 15 );
+				var skyMat = new ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: vertexShader,
 					fragmentShader: fragmentShader,
-					side: THREE.BackSide
+					side: BackSide
 				} );
 
-				var sky = new THREE.Mesh( skyGeo, skyMat );
+				var sky = new Mesh( skyGeo, skyMat );
 				scene.add( sky );
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
@@ -116,7 +126,7 @@
 
 				// CONTROLS
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = 0.9 * Math.PI / 2;
 				controls.enableZoom = false;
 
@@ -127,7 +137,7 @@
 
 				// MODEL
 
-				var loader = new THREE.ObjectLoader();
+				var loader = new ObjectLoader();
 				loader.load( "models/json/lightmap/lightmap.json", function ( object ) {
 
 					scene.add( object );

examples/webgl_materials_matcap.html

@@ -13,22 +13,22 @@
 			Drag-and-drop alternate MatCap image files<br/>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				LinearToneMapping,
+				LoadingManager,
+				MeshMatcapMaterial,
+				PerspectiveCamera,
+				Scene,
+				sRGBEncoding,
+				Texture,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var mesh, renderer, scene, camera;
 
@@ -44,47 +44,47 @@
 			function init() {
 
 				// renderer
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				// tone mapping
-				renderer.toneMapping = THREE.LinearToneMapping;
+				renderer.toneMapping = LinearToneMapping;
 			 	renderer.toneMappingExposure = API.exposure;
 
 				renderer.gammaOutput = true;
 
 				// scene
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// camera
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 				camera.position.set( 0, 0, 12 );
 
 				// controls
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.enableZoom = false;
 
 				// manager
-				var manager = new THREE.LoadingManager( render );
+				var manager = new LoadingManager( render );
 
 				// matcap
-				var loader = new THREE.TextureLoader( manager );
+				var loader = new TextureLoader( manager );
 
 				var matcap = loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function () {
 
-					matcap.encoding = THREE.sRGBEncoding;
+					matcap.encoding = sRGBEncoding;
 
 				} );
 
 				// model
-				new THREE.GLTFLoader( manager ).load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
+				new GLTFLoader( manager ).load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
 					mesh = gltf.scene.children[ 0 ];
 
-					mesh.material = new THREE.MeshMatcapMaterial( {
+					mesh.material = new MeshMatcapMaterial( {
 
 						color: API.color,
 						matcap: matcap
@@ -96,7 +96,7 @@
 				} );
 
 				// gui
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.addColor( API, 'color' )
 					.listen()
@@ -166,10 +166,10 @@
 
 				}
 
-				mesh.material.matcap = new THREE.Texture( event.target );
+				mesh.material.matcap = new Texture( event.target );
 				mesh.material.matcap.needsUpdate = true;
 
-				mesh.material.matcap.encoding = THREE.sRGBEncoding; // assume it is sRGB
+				mesh.material.matcap.encoding = sRGBEncoding; // assume it is sRGB
 				mesh.material.needsUpdate = true;
 
 				image.src = mesh.material.matcap.image.src; // corner div

examples/webgl_materials_modified.html

@@ -13,20 +13,19 @@
 			<a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
+		<script type="module">
+			import {
+				Mesh,
+				MeshNormalMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var camera, scene, renderer, stats;
 
@@ -37,12 +36,12 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1500;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var material = new THREE.MeshNormalMaterial();
+				var material = new MeshNormalMaterial();
 				material.onBeforeCompile = function ( shader ) {
 
 					shader.uniforms.time = { value: 0 };
@@ -64,22 +63,22 @@
 
 				};
 
-				var loader = new THREE.GLTFLoader();
+				var loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-					var mesh = new THREE.Mesh( gltf.scene.children[ 0 ].geometry, material );
+					var mesh = new Mesh( gltf.scene.children[ 0 ].geometry, material );
 					mesh.position.y = - 50;
 					mesh.scale.setScalar( 100 );
 					scene.add( mesh );
 
 				} );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_materials_normalmap.html

@@ -22,29 +22,30 @@
 			</div>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/shaders/BleachBypassShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				DirectionalLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { BleachBypassShader } from './jsm/shaders/BleachBypassShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { FXAAShader } from './jsm/shaders/FXAAShader.js';
 
 			var container, stats, loader;
 
@@ -73,46 +74,46 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1200;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x111111 );
+				scene = new Scene();
+				scene.background = new Color( 0x111111 );
 
 				// LIGHTS
 
-				ambientLight = new THREE.AmbientLight( 0x444444 );
+				ambientLight = new AmbientLight( 0x444444 );
 				scene.add( ambientLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, 1.25, 1000 );
+				pointLight = new PointLight( 0xffffff, 1.25, 1000 );
 				pointLight.position.set( 0, 0, 600 );
 
 				scene.add( pointLight );
 
-				directionalLight = new THREE.DirectionalLight( 0xffffff );
+				directionalLight = new DirectionalLight( 0xffffff );
 				directionalLight.position.set( 1, - 0.5, - 1 );
 				scene.add( directionalLight );
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
-				var material = new THREE.MeshPhongMaterial( {
+				var material = new MeshPhongMaterial( {
 					color: 0xdddddd,
 					specular: 0x222222,
 					shininess: 35,
 					map: textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
 					specularMap: textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" ),
 					normalMap: textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
-					normalScale: new THREE.Vector2( 0.8, 0.8 )
+					normalScale: new Vector2( 0.8, 0.8 )
 				} );
 
-				loader = new THREE.GLTFLoader();
+				loader = new GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
@@ -131,11 +132,11 @@
 
 				renderer.autoClear = false;
 
-				var renderModel = new THREE.RenderPass( scene, camera );
+				var renderModel = new RenderPass( scene, camera );
 
-				var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader );
-				var effectColor = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
+				var effectBleach = new ShaderPass( BleachBypassShader );
+				var effectColor = new ShaderPass( ColorCorrectionShader );
+				effectFXAA = new ShaderPass( FXAAShader );
 
 				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
 
@@ -144,7 +145,7 @@
 				effectColor.uniforms[ 'powRGB' ].value.set( 1.4, 1.45, 1.45 );
 				effectColor.uniforms[ 'mulRGB' ].value.set( 1.1, 1.1, 1.1 );
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectFXAA );
@@ -160,7 +161,7 @@
 
 			function createScene( geometry, scale, material ) {
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.y = - 50;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;

examples/webgl_materials_normalmap_object_space.html

@@ -15,20 +15,20 @@
 
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Box3,
+				DoubleSide,
+				ObjectSpaceNormalMap,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var renderer, scene, camera;
 
@@ -37,36 +37,36 @@
 			function init() {
 
 				// renderer
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				renderer.gammaOutput = true;
 
 				// scene
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// camera
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( - 10, 0, 23 );
 				scene.add( camera );
 
 				// controls
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 10;
 				controls.maxDistance = 50;
 				controls.enablePan = false;
 
 				// ambient
-				scene.add( new THREE.AmbientLight( 0xffffff, .2 ) );
+				scene.add( new AmbientLight( 0xffffff, .2 ) );
 
 				// light
-				var light = new THREE.PointLight( 0xffffff, 1.5 );
+				var light = new PointLight( 0xffffff, 1.5 );
 				camera.add( light );
 
 				// model
-				new THREE.GLTFLoader().load( 'models/gltf/Nefertiti/Nefertiti.glb', function ( gltf ) {
+				new GLTFLoader().load( 'models/gltf/Nefertiti/Nefertiti.glb', function ( gltf ) {
 
 					gltf.scene.traverse( function ( child ) {
 
@@ -75,7 +75,7 @@
 							// glTF currently supports only tangent-space normal maps.
 							// this model has been modified to demonstrate the use of an object-space normal map.
 
-							child.material.normalMapType = THREE.ObjectSpaceNormalMap;
+							child.material.normalMapType = ObjectSpaceNormalMap;
 
 							// attribute normals are not required with an object-space normal map. remove them.
 
@@ -83,13 +83,13 @@
 
 							//
 
-							child.material.side = THREE.DoubleSide;
+							child.material.side = DoubleSide;
 
 							child.scale.multiplyScalar( 0.5 );
 
 							// recenter
 
-							new THREE.Box3().setFromObject( child ).getCenter( child.position ).multiplyScalar( - 1 );
+							new Box3().setFromObject( child ).getCenter( child.position ).multiplyScalar( - 1 );
 
 							scene.add( child );
 

examples/webgl_materials_parallaxmap.html

@@ -16,22 +16,23 @@
 			Texture by <a href="http://agf81.deviantart.com/">AGF81</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/shaders/ParallaxShader.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Mesh,
+				PerspectiveCamera,
+				Scene,
+				ShaderMaterial,
+				TextureLoader,
+				UniformsUtils,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ParallaxShader } from './jsm/shaders/ParallaxShader.js';
 
 			var camera, scene, material, renderer, stats;
 
@@ -51,14 +52,14 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
 				camera.position.z = 2;
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				var shader = THREE.ParallaxShader;
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				var shader = ParallaxShader;
+				var uniforms = UniformsUtils.clone( shader.uniforms );
 				var parameters = {
 					fragmentShader: shader.fragmentShader,
 					vertexShader: shader.vertexShader,
@@ -67,9 +68,9 @@
 
 				//
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
-				material = new THREE.ShaderMaterial( parameters );
+				material = new ShaderMaterial( parameters );
 				material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
 				material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
 				material.map.anisotropy = 4;
@@ -79,13 +80,13 @@
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0 );
-				var mesh = new THREE.Mesh( geometry, material );
+				var geometry = new BoxBufferGeometry( 1.0, 1.0, 1.0 );
+				var mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -95,7 +96,7 @@
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 
@@ -117,16 +118,16 @@
 				uniforms[ 'parallaxMaxLayers' ].value = effectController.maxLayers;
 
 				material.defines = {};
-				material.defines[ THREE.ParallaxShader.modes[ effectController.mode ] ] = '';
+				material.defines[ ParallaxShader.modes[ effectController.mode ] ] = '';
 				material.needsUpdate = true;
 
 			}
 
 			function initGUI() {
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
-				gui.add( effectController, 'mode', Object.keys( THREE.ParallaxShader.modes ) ).onChange( guiChanged );
+				gui.add( effectController, 'mode', Object.keys( ParallaxShader.modes ) ).onChange( guiChanged );
 				gui.add( effectController, 'scale', 0.0, 0.01, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, 'minLayers', 1.0, 30, 1 ).onChange( guiChanged );
 				gui.add( effectController, 'maxLayers', 1.0, 30, 1 ).onChange( guiChanged );

examples/webgl_materials_reflectivity.html

@@ -14,35 +14,31 @@
 			example by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/RGBELoader.js"></script>
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/shaders/ConvolutionShader.js"></script>
-
-		<script src="js/loaders/OBJLoader.js"></script>
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BackSide,
+				Color,
+				FrontSide,
+				Group,
+				LoadingManager,
+				Mesh,
+				MeshPhysicalMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				UnsignedByteType,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
 			var container, stats;
 			var params = {
@@ -65,58 +61,58 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0.0, - 10, 20 * 3.5 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
+				scene = new Scene();
+				scene.background = new Color( 0x000000 );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 
-				gemBackMaterial = new THREE.MeshPhysicalMaterial( {
+				gemBackMaterial = new MeshPhysicalMaterial( {
 					map: null,
 					color: 0x0000ff,
 					metalness: 1.0,
 					roughness: 0,
 					opacity: 0.5,
-					side: THREE.BackSide,
+					side: BackSide,
 					transparent: true,
 					envMapIntensity: 5,
 					premultipliedAlpha: true
 					// TODO: Add custom blend mode that modulates background color by this materials color.
 				} );
 
-				gemFrontMaterial = new THREE.MeshPhysicalMaterial( {
+				gemFrontMaterial = new MeshPhysicalMaterial( {
 					map: null,
 					color: 0x0000ff,
 					metalness: 0.0,
 					roughness: 0,
 					opacity: 0.15,
-					side: THREE.FrontSide,
+					side: FrontSide,
 					transparent: true,
 					envMapIntensity: 5,
 					premultipliedAlpha: true
 				} );
 
-				var manager = new THREE.LoadingManager();
+				var manager = new LoadingManager();
 				manager.onProgress = function ( item, loaded, total ) {
 
 					console.log( item, loaded, total );
 
 				};
 
-				var loader = new THREE.OBJLoader( manager );
+				var loader = new OBJLoader( manager );
 				loader.load( 'models/obj/emerald.obj', function ( object ) {
 
 					object.traverse( function ( child ) {
 
-						if ( child instanceof THREE.Mesh ) {
+						if ( child instanceof Mesh ) {
 
 							child.material = gemBackMaterial;
 							var second = child.clone();
 							second.material = gemFrontMaterial;
 
-							var parent = new THREE.Group();
+							var parent = new Group();
 							parent.add( second );
 							parent.add( child );
 							scene.add( parent );
@@ -142,46 +138,46 @@
 
 				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
 
-				new THREE.HDRCubeTextureLoader()
-					.setType( THREE.UnsignedByteType )
+				new HDRCubeTextureLoader()
+					.setType( UnsignedByteType )
 					.load( hdrUrls, function ( hdrCubeMap ) {
 
-					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
-					pmremGenerator.update( renderer );
+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
+						pmremGenerator.update( renderer );
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-					pmremCubeUVPacker.update( renderer );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						pmremCubeUVPacker.update( renderer );
 
-					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+						hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget.texture;
-					gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
+						gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget.texture;
+						gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
 
-					hdrCubeMap.dispose();
-					pmremGenerator.dispose();
-					pmremCubeUVPacker.dispose();
+						hdrCubeMap.dispose();
+						pmremGenerator.dispose();
+						pmremCubeUVPacker.dispose();
 
-				} );
+					} );
 
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
-				var pointLight1 = new THREE.PointLight( 0xffffff );
+				var pointLight1 = new PointLight( 0xffffff );
 				pointLight1.position.set( 150, 10, 0 );
 				pointLight1.castShadow = false;
 				scene.add( pointLight1 );
 
-				var pointLight2 = new THREE.PointLight( 0xffffff );
+				var pointLight2 = new PointLight( 0xffffff );
 				pointLight2.position.set( - 150, 0, 0 );
 				scene.add( pointLight2 );
 
-				var pointLight3 = new THREE.PointLight( 0xffffff );
+				var pointLight3 = new PointLight( 0xffffff );
 				pointLight3.position.set( 0, - 10, - 150 );
 				scene.add( pointLight3 );
 
-				var pointLight4 = new THREE.PointLight( 0xffffff );
+				var pointLight4 = new PointLight( 0xffffff );
 				pointLight4.position.set( 0, 0, 150 );
 				scene.add( pointLight4 );
 
@@ -195,11 +191,11 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'reflectivity', 0, 1 );
 				gui.add( params, 'exposure', 0.1, 2 );
@@ -242,11 +238,11 @@
 					var newColor = gemBackMaterial.color;
 					switch ( params.gemColor ) {
 
-						case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
-						case 'Red': newColor = new THREE.Color( 0x880000 ); break;
-						case 'Green': newColor = new THREE.Color( 0x008800 ); break;
-						case 'White': newColor = new THREE.Color( 0x888888 ); break;
-						case 'Black': newColor = new THREE.Color( 0x0f0f0f ); break;
+						case 'Blue': newColor = new Color( 0x000088 ); break;
+						case 'Red': newColor = new Color( 0x880000 ); break;
+						case 'Green': newColor = new Color( 0x008800 ); break;
+						case 'White': newColor = new Color( 0x888888 ); break;
+						case 'Black': newColor = new Color( 0x0f0f0f ); break;
 
 		}
 					gemBackMaterial.color = gemFrontMaterial.color = newColor;

examples/webgl_materials_shaders_fresnel.html

@@ -13,19 +13,20 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl cube Fresnel shader demo.<br/>texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/FresnelShader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Mesh,
+				PerspectiveCamera,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				UniformsUtils,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { FresnelShader } from './jsm/shaders/FresnelShader.js';
 
 			var container;
 
@@ -48,7 +49,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
 				//
@@ -61,22 +62,22 @@
 					path + 'posz' + format, path + 'negz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.format = THREE.RGBFormat;
+				var textureCube = new CubeTextureLoader().load( urls );
+				textureCube.format = RGBFormat;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.background = textureCube;
 
 				//
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
+				var geometry = new SphereBufferGeometry( 100, 32, 16 );
 
-				var shader = THREE.FresnelShader;
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				var shader = FresnelShader;
+				var uniforms = UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "tCube" ].value = textureCube;
 
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: shader.vertexShader,
 					fragmentShader: shader.fragmentShader
@@ -84,7 +85,7 @@
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
@@ -100,7 +101,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_materials_skin.html

@@ -13,31 +13,33 @@
 			<a href="http://graphics.cs.williams.edu/data/meshes.xml#14" target="_blank" rel="noopener">Lee Perry-Smith</a> head.
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/shaders/BleachBypassShader.js"></script>
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/SkinShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/TexturePass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-
-		<script src="js/loaders/GLTFLoader.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				LinearFilter,
+				LinearMipMapLinearFilter,
+				Mesh,
+				PerspectiveCamera,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				TextureLoader,
+				UniformsUtils,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
+			import { TexturePass } from './jsm/postprocessing/TexturePass.js';
+
+			import { SkinShaderAdvanced, SkinShaderBeckmann } from './jsm/shaders/SkinShader.js';
 
 			var statsEnabled = true;
 
@@ -67,19 +69,19 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 900;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
+				scene = new Scene();
+				scene.background = new Color( 0x050505 );
 
 				// LIGHTS
 
-				directionalLight = new THREE.DirectionalLight( 0xffeedd, 1.5 );
+				directionalLight = new DirectionalLight( 0xffeedd, 1.5 );
 				directionalLight.position.set( 1, 0.5, 1 );
 				scene.add( directionalLight );
 
-				directionalLight = new THREE.DirectionalLight( 0xddddff, 0.5 );
+				directionalLight = new DirectionalLight( 0xddddff, 0.5 );
 				directionalLight.position.set( - 1, 0.5, - 1 );
 				scene.add( directionalLight );
 
@@ -87,11 +89,11 @@
 
 				var diffuse = 0xbbbbbb, specular = 0x555555;
 
-				var shader = THREE.SkinShaderAdvanced;
+				var shader = SkinShaderAdvanced;
 
-				var uniformsUV = THREE.UniformsUtils.clone( shader.uniforms );
+				var uniformsUV = UniformsUtils.clone( shader.uniforms );
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				uniformsUV[ "tNormal" ].value = textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 				uniformsUV[ "uNormalScale" ].value = - 1.5;
@@ -107,7 +109,7 @@
 				uniformsUV[ "uSpecularBrightness" ].value = 0.7;
 
 
-				var uniforms = THREE.UniformsUtils.clone( uniformsUV );
+				var uniforms = UniformsUtils.clone( uniformsUV );
 				uniforms[ "tDiffuse" ].value = uniformsUV[ "tDiffuse" ].value;
 				uniforms[ "tNormal" ].value = uniformsUV[ "tNormal" ].value;
 				uniforms[ "passID" ].value = 1;
@@ -116,15 +118,15 @@
 				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
 				var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true };
 
-				var material = new THREE.ShaderMaterial( parameters );
+				var material = new ShaderMaterial( parameters );
 				material.extensions.derivatives = true;
 
-				var materialUV = new THREE.ShaderMaterial( parametersUV );
+				var materialUV = new ShaderMaterial( parametersUV );
 				materialUV.extensions.derivatives = true;
 
 				// LOADER
 
-				loader = new THREE.GLTFLoader();
+				loader = new GLTFLoader();
 				loader.load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 					createScene( gltf.scene.children[ 0 ].geometry, 100, material );
@@ -133,7 +135,7 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
@@ -155,11 +157,11 @@
 
 				// POSTPROCESSING
 
-				var renderModelUV = new THREE.RenderPass( scene, camera, materialUV, new THREE.Color( 0x575757 ) );
+				var renderModelUV = new RenderPass( scene, camera, materialUV, new Color( 0x575757 ) );
 
-				var effectBloom1 = new THREE.BloomPass( 1, 15, 2, 512 );
-				var effectBloom2 = new THREE.BloomPass( 1, 25, 3, 512 );
-				var effectBloom3 = new THREE.BloomPass( 1, 25, 4, 512 );
+				var effectBloom1 = new BloomPass( 1, 15, 2, 512 );
+				var effectBloom2 = new BloomPass( 1, 25, 3, 512 );
+				var effectBloom3 = new BloomPass( 1, 25, 4, 512 );
 
 				effectBloom1.clear = true;
 				effectBloom2.clear = true;
@@ -169,9 +171,9 @@
 
 				var pars = {
 					generateMipmaps: true,
-					minFilter: THREE.LinearMipmapLinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat,
+					minFilter: LinearMipMapLinearFilter,
+					magFilter: LinearFilter,
+					format: RGBFormat,
 					stencilBuffer: false
 				};
 
@@ -180,27 +182,27 @@
 
 				//
 
-				composer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				composer = new EffectComposer( renderer, new WebGLRenderTarget( rtwidth, rtheight, pars ) );
 				composer.addPass( renderModelUV );
 				composer.renderToScreen = false;
 
-				var renderScene = new THREE.TexturePass( composer.renderTarget2.texture );
+				var renderScene = new TexturePass( composer.renderTarget2.texture );
 
 				//
 
-				composerUV1 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				composerUV1 = new EffectComposer( renderer, new WebGLRenderTarget( rtwidth, rtheight, pars ) );
 
 				composerUV1.addPass( renderScene );
 				composerUV1.addPass( effectBloom1 );
 				composerUV1.renderToScreen = false;
 
-				composerUV2 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				composerUV2 = new EffectComposer( renderer, new WebGLRenderTarget( rtwidth, rtheight, pars ) );
 
 				composerUV2.addPass( renderScene );
 				composerUV2.addPass( effectBloom2 );
 				composerUV2.renderToScreen = false;
 
-				composerUV3 = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				composerUV3 = new EffectComposer( renderer, new WebGLRenderTarget( rtwidth, rtheight, pars ) );
 
 				composerUV3.addPass( renderScene );
 				composerUV3.addPass( effectBloom3 );
@@ -208,8 +210,8 @@
 
 				//
 
-				var effectBeckmann = new THREE.ShaderPass( THREE.SkinShaderBeckmann );
-				composerBeckmann = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget( rtwidth, rtheight, pars ) );
+				var effectBeckmann = new ShaderPass( SkinShaderBeckmann );
+				composerBeckmann = new EffectComposer( renderer, new WebGLRenderTarget( rtwidth, rtheight, pars ) );
 				composerBeckmann.addPass( effectBeckmann );
 
 				//
@@ -241,7 +243,7 @@
 
 			function createScene( geometry, scale, material ) {
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				mesh.position.y = - 50;
 				mesh.scale.set( scale, scale, scale );
 

examples/webgl_materials_standard.html

@@ -13,24 +13,29 @@
 			<a href="http://www.polycount.com/forum/showthread.php?t=130641" target="_blank" rel="noopener">Cerberus(FFVII Gun) model</a> by Andrew Maximov.
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				HemisphereLight,
+				LinearFilter,
+				Mesh,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				ReinhardToneMapping,
+				RepeatWrapping,
+				RGBAFormat,
+				RGBM16Encoding,
+				Scene,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
 			var statsEnabled = true;
 
@@ -46,38 +51,38 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
-				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMapping = ReinhardToneMapping;
 				renderer.toneMappingExposure = 3;
 
 				//
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 1000 );
 				camera.position.z = 2;
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				//
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233, 4 ) );
+				scene.add( new HemisphereLight( 0x443333, 0x222233, 4 ) );
 
 				//
 
-				var material = new THREE.MeshStandardMaterial();
+				var material = new MeshStandardMaterial();
 
-				new THREE.OBJLoader()
+				new OBJLoader()
 					.setPath( 'models/obj/cerberus/' )
 					.load( 'Cerberus.obj', function ( group ) {
 
-						var loader = new THREE.TextureLoader()
+						var loader = new TextureLoader()
 							.setPath( 'models/obj/cerberus/' );
 
 						material.roughness = 1; // attenuates roughnessMap
@@ -88,14 +93,14 @@
 						material.metalnessMap = material.roughnessMap = loader.load( 'Cerberus_RM.jpg' );
 						material.normalMap = loader.load( 'Cerberus_N.jpg' );
 
-						material.map.wrapS = THREE.RepeatWrapping;
-						material.roughnessMap.wrapS = THREE.RepeatWrapping;
-						material.metalnessMap.wrapS = THREE.RepeatWrapping;
-						material.normalMap.wrapS = THREE.RepeatWrapping;
+						material.map.wrapS = RepeatWrapping;
+						material.roughnessMap.wrapS = RepeatWrapping;
+						material.metalnessMap.wrapS = RepeatWrapping;
+						material.normalMap.wrapS = RepeatWrapping;
 
 						group.traverse( function ( child ) {
 
-							if ( child instanceof THREE.Mesh ) {
+							if ( child instanceof Mesh ) {
 
 								child.material = material;
 
@@ -109,31 +114,31 @@
 
 					} );
 
-				new THREE.CubeTextureLoader().setPath( './textures/cube/pisaRGBM16/' )
+				new CubeTextureLoader().setPath( './textures/cube/pisaRGBM16/' )
 					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ], function ( rgbmCubeMap ) {
 
-					rgbmCubeMap.encoding = THREE.RGBM16Encoding;
-					rgbmCubeMap.format = THREE.RGBAFormat;
+						rgbmCubeMap.encoding = RGBM16Encoding;
+						rgbmCubeMap.format = RGBAFormat;
 
-					var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
-					pmremGenerator.update( renderer );
+						var pmremGenerator = new PMREMGenerator( rgbmCubeMap );
+						pmremGenerator.update( renderer );
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-					pmremCubeUVPacker.update( renderer );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						pmremCubeUVPacker.update( renderer );
 
-					var rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+						var rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					material.envMap = rgbmCubeRenderTarget.texture;
-					material.needsUpdate = true; // is this needed?
+						material.envMap = rgbmCubeRenderTarget.texture;
+						material.needsUpdate = true; // is this needed?
 
-					rgbmCubeMap.magFilter = THREE.LinearFilter;
-					rgbmCubeMap.needsUpdate = true;
-					scene.background = rgbmCubeMap;
+						rgbmCubeMap.magFilter = LinearFilter;
+						rgbmCubeMap.needsUpdate = true;
+						scene.background = rgbmCubeMap;
 
-					pmremGenerator.dispose();
-					pmremCubeUVPacker.dispose();
+						pmremGenerator.dispose();
+						pmremCubeUVPacker.dispose();
 
-				} );
+					} );
 
 				//