Exampels: More modules examples.

examples/webgl_geometry_text.html

@@ -21,6 +21,7 @@
 		<script type="module">
 			import {
 				BufferGeometry,
+				Cache as _Cache,
 				Color,
 				DirectionalLight,
 				Fog,
@@ -42,7 +43,7 @@
 
 			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
-			Cache.enabled = true;
+			_Cache.enabled = true;
 
 			var container, stats, permalink, hex;
 

examples/webgl_interactive_buffergeometry.html

@@ -11,18 +11,29 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive - buffergeometry</div>
 
-		<script src="../build/three.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,
+				BufferAttribute,
+				BufferGeometry,
+				Color,
+				DirectionalLight,
+				DoubleSide,
+				Fog,
+				Line,
+				LineBasicMaterial,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Raycaster,
+				Scene,
+				Vector2,
+				Vector3,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 
@@ -41,22 +52,22 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
+				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
 				camera.position.z = 2750;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
-				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
+				scene = new Scene();
+				scene.background = new Color( 0x050505 );
+				scene.fog = new Fog( 0x050505, 2000, 3500 );
 
 				//
 
-				scene.add( new THREE.AmbientLight( 0x444444 ) );
+				scene.add( new AmbientLight( 0x444444 ) );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				var light1 = new DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				var light2 = new DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
@@ -64,23 +75,23 @@
 
 				var triangles = 5000;
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 
 				var positions = new Float32Array( triangles * 3 * 3 );
 				var normals = new Float32Array( triangles * 3 * 3 );
 				var colors = new Float32Array( triangles * 3 * 3 );
 
-				var color = new THREE.Color();
+				var color = new Color();
 
 				var n = 800, n2 = n / 2;	// triangles spread in the cube
 				var d = 120, d2 = d / 2;	// individual triangle size
 
-				var pA = new THREE.Vector3();
-				var pB = new THREE.Vector3();
-				var pC = new THREE.Vector3();
+				var pA = new Vector3();
+				var pB = new Vector3();
+				var pC = new Vector3();
 
-				var cb = new THREE.Vector3();
-				var ab = new THREE.Vector3();
+				var cb = new Vector3();
+				var ab = new Vector3();
 
 				for ( var i = 0; i < positions.length; i += 9 ) {
 
@@ -164,37 +175,37 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'normal', new BufferAttribute( normals, 3 ) );
+				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 
-				var material = new THREE.MeshPhongMaterial( {
+				var material = new MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
-					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
+					side: DoubleSide, vertexColors: VertexColors
 				} );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				raycaster = new THREE.Raycaster();
+				raycaster = new Raycaster();
 
-				mouse = new THREE.Vector2();
+				mouse = new Vector2();
 
-				var geometry = new THREE.BufferGeometry();
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( 4 * 3 ), 3 ) );
+				var geometry = new BufferGeometry();
+				geometry.addAttribute( 'position', new BufferAttribute( new Float32Array( 4 * 3 ), 3 ) );
 
-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, transparent: true } );
+				var material = new LineBasicMaterial( { color: 0xffffff, transparent: true } );
 
-				line = new THREE.Line( geometry, material );
+				line = new Line( geometry, material );
 				scene.add( line );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_interactive_cubes.html

@@ -21,16 +21,27 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				Math as _Math,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Raycaster,
+				Scene,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 			var camera, scene, raycaster, renderer;
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
+			var mouse = new Vector2(), INTERSECTED;
 			var radius = 100, theta = 0;
 
 			init();
@@ -41,20 +52,20 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new BoxBufferGeometry( 20, 20, 20 );
 
 				for ( var i = 0; i < 2000; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
@@ -72,9 +83,9 @@
 
 				}
 
-				raycaster = new THREE.Raycaster();
+				raycaster = new Raycaster();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -123,9 +134,9 @@
 
 				theta += 0.1;
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
+				camera.position.x = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.y = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.z = radius * Math.cos( _Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
 				camera.updateMatrixWorld();

examples/webgl_interactive_cubes_gpu.html

@@ -23,21 +23,41 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/utils/BufferGeometryUtils.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Color,
+				Euler,
+				Float32BufferAttribute,
+				Matrix4,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Quaternion,
+				Scene,
+				SpotLight,
+				Vector2,
+				Vector3,
+				VertexColors,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
 			var container, stats;
 			var camera, controls, scene, renderer;
 			var pickingData = [], pickingTexture, pickingScene;
 			var highlightBox;
 
-			var mouse = new THREE.Vector2();
-			var offset = new THREE.Vector3( 10, 10, 10 );
+			var mouse = new Vector2();
+			var offset = new Vector3( 10, 10, 10 );
 
 			init();
 			animate();
@@ -46,23 +66,23 @@
 
 				container = document.getElementById( "container" );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				pickingScene = new THREE.Scene();
-				pickingTexture = new THREE.WebGLRenderTarget( 1, 1 );
+				pickingScene = new Scene();
+				pickingTexture = new WebGLRenderTarget( 1, 1 );
 
-				scene.add( new THREE.AmbientLight( 0x555555 ) );
+				scene.add( new AmbientLight( 0x555555 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				var light = new SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				scene.add( light );
 
-				var pickingMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
-				var defaultMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0	} );
+				var pickingMaterial = new MeshBasicMaterial( { vertexColors: VertexColors } );
+				var defaultMaterial = new MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: VertexColors, shininess: 0	} );
 
 				function applyVertexColors( geometry, color ) {
 
@@ -75,32 +95,32 @@
 
 					}
 
-					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+					geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 				}
 
 				var geometriesDrawn = [];
 				var geometriesPicking = [];
 
-				var matrix = new THREE.Matrix4();
-				var quaternion = new THREE.Quaternion();
-				var color = new THREE.Color();
+				var matrix = new Matrix4();
+				var quaternion = new Quaternion();
+				var color = new Color();
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
-					var geometry = new THREE.BoxBufferGeometry();
+					var geometry = new BoxBufferGeometry();
 
-					var position = new THREE.Vector3();
+					var position = new Vector3();
 					position.x = Math.random() * 10000 - 5000;
 					position.y = Math.random() * 6000 - 3000;
 					position.z = Math.random() * 8000 - 4000;
 
-					var rotation = new THREE.Euler();
+					var rotation = new Euler();
 					rotation.x = Math.random() * 2 * Math.PI;
 					rotation.y = Math.random() * 2 * Math.PI;
 					rotation.z = Math.random() * 2 * Math.PI;
 
-					var scale = new THREE.Vector3();
+					var scale = new Vector3();
 					scale.x = Math.random() * 200 + 100;
 					scale.y = Math.random() * 200 + 100;
 					scale.z = Math.random() * 200 + 100;
@@ -134,23 +154,23 @@
 
 				}
 
-				var objects = new THREE.Mesh( THREE.BufferGeometryUtils.mergeBufferGeometries( geometriesDrawn ), defaultMaterial );
+				var objects = new Mesh( BufferGeometryUtils.mergeBufferGeometries( geometriesDrawn ), defaultMaterial );
 				scene.add( objects );
 
-				pickingScene.add( new THREE.Mesh( THREE.BufferGeometryUtils.mergeBufferGeometries( geometriesPicking ), pickingMaterial ) );
+				pickingScene.add( new Mesh( BufferGeometryUtils.mergeBufferGeometries( geometriesPicking ), pickingMaterial ) );
 
-				highlightBox = new THREE.Mesh(
-					new THREE.BoxBufferGeometry(),
-					new THREE.MeshLambertMaterial( { color: 0xffff00 }
+				highlightBox = new Mesh(
+					new BoxBufferGeometry(),
+					new MeshLambertMaterial( { color: 0xffff00 }
 					) );
 				scene.add( highlightBox );
 
-				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 );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 				controls.rotateSpeed = 1.0;
 				controls.zoomSpeed = 1.2;
 				controls.panSpeed = 0.8;

examples/webgl_interactive_cubes_ortho.html

@@ -21,16 +21,27 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				Math as _Math,
+				Mesh,
+				MeshLambertMaterial,
+				OrthographicCamera,
+				Raycaster,
+				Scene,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 			var camera, scene, raycaster, renderer;
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
+			var mouse = new Vector2(), INTERSECTED;
 			var radius = 500, theta = 0;
 			var frustumSize = 1000;
 
@@ -43,20 +54,20 @@
 				document.body.appendChild( container );
 
 				var aspect = window.innerWidth / window.innerHeight;
-				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
+				camera = new OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new BoxBufferGeometry( 20, 20, 20 );
 
 				for ( var i = 0; i < 2000; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
@@ -74,9 +85,9 @@
 
 				}
 
-				raycaster = new THREE.Raycaster();
+				raycaster = new Raycaster();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -131,9 +142,9 @@
 
 				theta += 0.1;
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
+				camera.position.x = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.y = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.z = radius * Math.cos( _Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
 				camera.updateMatrixWorld();

examples/webgl_interactive_draggablecubes.html

@@ -21,14 +21,24 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - draggable cubes
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/DragControls.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Color,
+				Mesh,
+				MeshLambertMaterial,
+				PCFShadowMap,
+				PerspectiveCamera,
+				Scene,
+				SpotLight,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { DragControls } from './jsm/controls/DragControls.js';
 
 			var container, stats;
 			var camera, controls, scene, renderer;
@@ -42,15 +52,15 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				scene.add( new AmbientLight( 0x505050 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				var light = new SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				light.angle = Math.PI / 9;
 
@@ -62,11 +72,11 @@
 
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 40, 40, 40 );
+				var geometry = new BoxBufferGeometry( 40, 40, 40 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 1000 - 500;
 					object.position.y = Math.random() * 600 - 300;
@@ -89,16 +99,16 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFShadowMap;
+				renderer.shadowMap.type = PCFShadowMap;
 
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 				controls.rotateSpeed = 1.0;
 				controls.zoomSpeed = 1.2;
 				controls.panSpeed = 0.8;
@@ -107,7 +117,7 @@
 				controls.staticMoving = true;
 				controls.dynamicDampingFactor = 0.3;
 
-				var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
+				var dragControls = new DragControls( objects, camera, renderer.domElement );
 				dragControls.addEventListener( 'dragstart', function () {
 
 					controls.enabled = false;

examples/webgl_interactive_instances_gpu.html

@@ -100,10 +100,6 @@
 
 	<div id="container"></div>
 
-	<script src="../build/three.js"></script>
-	<script src="js/controls/TrackballControls.js"></script>
-	<script src="js/libs/stats.min.js"></script>
-
 	<script id="vertMerged" type="x-shader/x-vertex">
 		#define SHADER_NAME vertMerged
 
@@ -305,7 +301,35 @@
 
 	</script>
 
-	<script>
+	<script type="module">
+		import {
+			BoxBufferGeometry,
+			BufferAttribute,
+			BufferGeometry,
+			BufferGeometryLoader,
+			Cache as _Cache,
+			Color,
+			Euler,
+			InstancedBufferAttribute,
+			InstancedBufferGeometry,
+			Matrix4,
+			Mesh,
+			MeshLambertMaterial,
+			NearestFilter,
+			Object3D,
+			PerspectiveCamera,
+			RawShaderMaterial,
+			Quaternion,
+			Scene,
+			Vector2,
+			Vector3,
+			WebGLRenderer,
+			WebGLRenderTarget
+		} from "../build/three.module.js";
+
+		import Stats from './jsm/libs/stats.module.js';
+
+		import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 		var container, stats;
 		var camera, controls, scene, renderer;
@@ -316,11 +340,11 @@
 		var materialList = [];
 		var geometryList = [];
 		var objectCount = 0;
-		var geometrySize = new THREE.Vector3();
-		var mouse = new THREE.Vector2();
+		var geometrySize = new Vector3();
+		var mouse = new Vector2();
 		var scale = 1.03;
 
-		var loader = new THREE.BufferGeometryLoader();
+		var loader = new BufferGeometryLoader();
 
 		//create buffer for reading a single pixel
 		var pixelBuffer = new Uint8Array( 4 );
@@ -403,7 +427,7 @@
 
 		function clean() {
 
-			THREE.Cache.clear();
+			_Cache.clear();
 
 			materialList.forEach( function ( m ) {
 
@@ -417,13 +441,13 @@
 
 			} );
 
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xffffff );
+			scene = new Scene();
+			scene.background = new Color( 0xffffff );
 
 			scene.add( camera );
 			scene.add( highlightBox );
 
-			pickingScene = new THREE.Scene();
+			pickingScene = new Scene();
 			pickingData = {};
 			materialList = [];
 			geometryList = [];
@@ -436,10 +460,10 @@
 
 		var randomizeMatrix = function () {
 
-			var position = new THREE.Vector3();
-			var rotation = new THREE.Euler();
-			var quaternion = new THREE.Quaternion();
-			var scale = new THREE.Vector3();
+			var position = new Vector3();
+			var rotation = new Euler();
+			var quaternion = new Quaternion();
+			var scale = new Vector3();
 
 			return function ( matrix ) {
 
@@ -515,33 +539,33 @@
 			var vert = document.getElementById( 'vertMaterial' ).textContent;
 			var frag = document.getElementById( 'fragMaterial' ).textContent;
 
-			var material = new THREE.RawShaderMaterial( {
+			var material = new RawShaderMaterial( {
 				vertexShader: vert,
 				fragmentShader: frag,
 				uniforms: {
 					color: {
-						value: new THREE.Color()
+						value: new Color()
 					}
 				}
 			} );
 
-			var pickingMaterial = new THREE.RawShaderMaterial( {
+			var pickingMaterial = new RawShaderMaterial( {
 				vertexShader: "#define PICKING\n" + vert,
 				fragmentShader: "#define PICKING\n" + frag,
 				uniforms: {
 					pickingColor: {
-						value: new THREE.Color()
+						value: new Color()
 					}
 				}
 			} );
 
 			// geometry / mesh
 
-			var matrix = new THREE.Matrix4();
+			var matrix = new Matrix4();
 
 			for ( var i = 0; i < instanceCount; i ++ ) {
 
-				var object = new THREE.Mesh( geo, material );
+				var object = new Mesh( geo, material );
 				objectCount ++;
 				randomizeMatrix( matrix );
 				object.applyMatrix( matrix );
@@ -575,23 +599,23 @@
 			var vert = document.getElementById( 'vertMaterial' ).textContent;
 			var frag = document.getElementById( 'fragMaterial' ).textContent;
 
-			var material = new THREE.RawShaderMaterial( {
+			var material = new RawShaderMaterial( {
 				vertexShader: vert,
 				fragmentShader: frag,
 				uniforms: {
 					"color": {
-						value: new THREE.Color()
+						value: new Color()
 					}
 				}
 			} );
 			materialList.push( material );
 
-			var pickingMaterial = new THREE.RawShaderMaterial( {
+			var pickingMaterial = new RawShaderMaterial( {
 				vertexShader: "#define PICKING\n" + vert,
 				fragmentShader: "#define PICKING\n" + frag,
 				uniforms: {
 					"pickingColor": {
-						value: new THREE.Color()
+						value: new Color()
 					}
 				}
 			} );
@@ -607,7 +631,7 @@
 
 			// geometry / mesh
 
-			var matrix = new THREE.Matrix4();
+			var matrix = new Matrix4();
 
 			function onBeforeRender( renderer, scene, camera, geometry, material ) {
 
@@ -654,7 +678,7 @@
 
 			for ( var i = 0; i < instanceCount; i ++ ) {
 
-				var object = new THREE.Mesh( geo, material );
+				var object = new Mesh( geo, material );
 				objectCount ++;
 				randomizeMatrix( matrix );
 				object.applyMatrix( matrix );
@@ -699,13 +723,13 @@
 			var vert = document.getElementById( 'vertMerged' ).textContent;
 			var frag = document.getElementById( 'fragMerged' ).textContent;
 
-			var material = new THREE.RawShaderMaterial( {
+			var material = new RawShaderMaterial( {
 				vertexShader: vert,
 				fragmentShader: frag
 			} );
 			materialList.push( material );
 
-			var pickingMaterial = new THREE.RawShaderMaterial( {
+			var pickingMaterial = new RawShaderMaterial( {
 				vertexShader: "#define PICKING\n" + vert,
 				fragmentShader: "#define PICKING\n" + frag
 			} );
@@ -713,24 +737,24 @@
 
 			// geometry
 
-			var mgeo = new THREE.BufferGeometry();
+			var mgeo = new BufferGeometry();
 			geometryList.push( mgeo );
 
 			var pos = geo.attributes.position;
 			var posLen = geo.attributes.position.count * 3;
-			var vertices = new THREE.BufferAttribute(
+			var vertices = new BufferAttribute(
 				new Float32Array( instanceCount * posLen ), 3
 			);
 
-			var vertex = new THREE.Vector3();
-			var matrix = new THREE.Matrix4();
+			var vertex = new Vector3();
+			var matrix = new Matrix4();
 
 			for ( var i = 0, ul = instanceCount; i < ul; i ++ ) {
 
 				var offset = i * posLen;
 
 				randomizeMatrix( matrix );
-				var object = new THREE.Object3D();
+				var object = new Object3D();
 				objectCount ++;
 				object.applyMatrix( matrix );
 				pickingData[ i + 1 ] = object;
@@ -749,7 +773,7 @@
 			mgeo.addAttribute( 'position', vertices );
 
 			var colCount = posLen / 3;
-			var colors = new THREE.BufferAttribute(
+			var colors = new BufferAttribute(
 				new Float32Array( instanceCount * colCount * 3 ), 3
 			);
 			var randCol = function () {
@@ -769,8 +793,8 @@
 			}
 			mgeo.addAttribute( 'color', colors );
 
-			var col = new THREE.Color();
-			var pickingColors = new THREE.BufferAttribute(
+			var col = new Color();
+			var pickingColors = new BufferAttribute(
 				new Float32Array( instanceCount * colCount * 3 ), 3
 			);
 			for ( var i = 0, ul = instanceCount; i < ul; i ++ ) {
@@ -787,10 +811,10 @@
 
 			// mesh
 
-			var mesh = new THREE.Mesh( mgeo, material );
+			var mesh = new Mesh( mgeo, material );
 			scene.add( mesh );
 
-			var pickingMesh = new THREE.Mesh( mgeo, pickingMaterial );
+			var pickingMesh = new Mesh( mgeo, pickingMaterial );
 			pickingScene.add( pickingMesh );
 
 		}
@@ -802,13 +826,13 @@
 			var vert = document.getElementById( 'vertInstanced' ).textContent;
 			var frag = document.getElementById( 'fragInstanced' ).textContent;
 
-			var material = new THREE.RawShaderMaterial( {
+			var material = new RawShaderMaterial( {
 				vertexShader: vert,
 				fragmentShader: frag,
 			} );
 			materialList.push( material );
 
-			var pickingMaterial = new THREE.RawShaderMaterial( {
+			var pickingMaterial = new RawShaderMaterial( {
 				vertexShader: "#define PICKING\n" + vert,
 				fragmentShader: "#define PICKING\n" + frag
 			} );
@@ -816,33 +840,33 @@
 
 			// geometry
 
-			var igeo = new THREE.InstancedBufferGeometry();
+			var igeo = new InstancedBufferGeometry();
 			geometryList.push( igeo );
 
 			var vertices = geo.attributes.position.clone();
 			igeo.addAttribute( 'position', vertices );
 
-			// var matrices = new THREE.InstancedBufferAttribute(
+			// var matrices = new InstancedBufferAttribute(
 			// 	new Float32Array( instanceCount * 16 ), 16
 			// );
-			var mcol0 = new THREE.InstancedBufferAttribute(
+			var mcol0 = new InstancedBufferAttribute(
 				new Float32Array( instanceCount * 3 ), 3
 			);
-			var mcol1 = new THREE.InstancedBufferAttribute(
+			var mcol1 = new InstancedBufferAttribute(
 				new Float32Array( instanceCount * 3 ), 3
 			);
-			var mcol2 = new THREE.InstancedBufferAttribute(
+			var mcol2 = new InstancedBufferAttribute(
 				new Float32Array( instanceCount * 3 ), 3
 			);
-			var mcol3 = new THREE.InstancedBufferAttribute(
+			var mcol3 = new InstancedBufferAttribute(
 				new Float32Array( instanceCount * 3 ), 3
 			);
-			var matrix = new THREE.Matrix4();
+			var matrix = new Matrix4();
 			var me = matrix.elements;
 			for ( var i = 0, ul = mcol0.count; i < ul; i ++ ) {
 
 				randomizeMatrix( matrix );
-				var object = new THREE.Object3D();
+				var object = new Object3D();
 				objectCount ++;
 				object.applyMatrix( matrix );
 				pickingData[ i + 1 ] = object;
@@ -864,7 +888,7 @@
 				return Math.random();
 
 			};
-			var colors = new THREE.InstancedBufferAttribute(
+			var colors = new InstancedBufferAttribute(
 				new Float32Array( instanceCount * 3 ), 3
 			);
 			for ( var i = 0, ul = colors.count; i < ul; i ++ ) {
@@ -874,8 +898,8 @@
 			}
 			igeo.addAttribute( 'color', colors );
 
-			var col = new THREE.Color();
-			var pickingColors = new THREE.InstancedBufferAttribute(
+			var col = new Color();
+			var pickingColors = new InstancedBufferAttribute(
 				new Float32Array( instanceCount * 3 ), 3
 			);
 			for ( var i = 0, ul = pickingColors.count; i < ul; i ++ ) {
@@ -888,10 +912,10 @@
 
 			// mesh
 
-			var mesh = new THREE.Mesh( igeo, material );
+			var mesh = new Mesh( igeo, material );
 			scene.add( mesh );
 
-			var pickingMesh = new THREE.Mesh( igeo, pickingMaterial );
+			var pickingMesh = new Mesh( igeo, pickingMaterial );
 			pickingScene.add( pickingMesh );
 
 		}
@@ -900,24 +924,24 @@
 
 			// camera
 
-			camera = new THREE.PerspectiveCamera(
+			camera = new PerspectiveCamera(
 				70, window.innerWidth / window.innerHeight, 1, 100
 			);
 			camera.position.z = 40;
 
 			// picking render target
 
-			pickingRenderTarget = new THREE.WebGLRenderTarget(
+			pickingRenderTarget = new WebGLRenderTarget(
 				window.innerWidth, window.innerHeight
 			);
 			pickingRenderTarget.texture.generateMipmaps = false;
-			pickingRenderTarget.texture.minFilter = THREE.NearestFilter;
+			pickingRenderTarget.texture.minFilter = NearestFilter;
 
 			// highlight box
 
-			highlightBox = new THREE.Mesh(
-				new THREE.BoxBufferGeometry( 1, 1, 1 ),
-				new THREE.MeshLambertMaterial( {
+			highlightBox = new Mesh(
+				new BoxBufferGeometry( 1, 1, 1 ),
+				new MeshLambertMaterial( {
 					emissive: 0xffff00,
 					transparent: true,
 					opacity: 0.5
@@ -927,7 +951,7 @@
 			// renderer
 
 			container = document.getElementById( "container" );
-			renderer = new THREE.WebGLRenderer( {
+			renderer = new WebGLRenderer( {
 				antialias: true,
 				alpha: true
 			} );
@@ -950,7 +974,7 @@
 
 			// controls
 
-			controls = new THREE.TrackballControls(
+			controls = new TrackballControls(
 				camera, renderer.domElement
 			);
 			controls.staticMoving = true;

examples/webgl_interactive_lines.html

@@ -17,16 +17,32 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BufferGeometry,
+				Color,
+				Float32BufferAttribute,
+				Line,
+				LineSegments,
+				Math as _Math,
+				Mesh,
+				MeshBasicMaterial,
+				Object3D,
+				PerspectiveCamera,
+				Raycaster,
+				Scene,
+				SphereBufferGeometry,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 			var camera, scene, raycaster, renderer, parentTransform, sphereInter;
 
-			var mouse = new THREE.Vector2();
+			var mouse = new Vector2();
 			var radius = 100, theta = 0;
 
 			init();
@@ -45,23 +61,23 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive lines';
 				container.appendChild( info );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				var geometry = new THREE.SphereBufferGeometry( 5 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+				var geometry = new SphereBufferGeometry( 5 );
+				var material = new MeshBasicMaterial( { color: 0xff0000 } );
 
-				sphereInter = new THREE.Mesh( geometry, material );
+				sphereInter = new Mesh( geometry, material );
 				sphereInter.visible = false;
 				scene.add( sphereInter );
 
-				var lineGeometry = new THREE.BufferGeometry();
+				var lineGeometry = new BufferGeometry();
 				var points = [];
 
-				var point = new THREE.Vector3();
-				var direction = new THREE.Vector3();
+				var point = new Vector3();
+				var direction = new Vector3();
 
 				for ( var i = 0; i < 50; i ++ ) {
 
@@ -75,9 +91,9 @@
 
 				}
 
-				lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );
+				lineGeometry.addAttribute( 'position', new Float32BufferAttribute( points, 3 ) );
 
-				parentTransform = new THREE.Object3D();
+				parentTransform = new Object3D();
 				parentTransform.position.x = Math.random() * 40 - 20;
 				parentTransform.position.y = Math.random() * 40 - 20;
 				parentTransform.position.z = Math.random() * 40 - 20;
@@ -96,11 +112,11 @@
 
 					if ( Math.random() > 0.5 ) {
 
-						object = new THREE.Line( lineGeometry );
+						object = new Line( lineGeometry );
 
 					} else {
 
-						object = new THREE.LineSegments( lineGeometry );
+						object = new LineSegments( lineGeometry );
 
 					}
 
@@ -122,10 +138,10 @@
 
 				scene.add( parentTransform );
 
-				raycaster = new THREE.Raycaster();
+				raycaster = new Raycaster();
 				raycaster.linePrecision = 3;
 
-				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 );
@@ -174,9 +190,9 @@
 
 				theta += 0.1;
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
+				camera.position.x = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.y = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.z = radius * Math.cos( _Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
 				camera.updateMatrixWorld();

examples/webgl_interactive_points.html

@@ -11,11 +11,6 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive - particles</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 			attribute float size;
@@ -56,14 +51,23 @@
 
 		</script>
 
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxGeometry,
+				BufferAttribute,
+				BufferGeometry,
+				Color,
+				PerspectiveCamera,
+				Points,
+				Raycaster,
+				Scene,
+				ShaderMaterial,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var renderer, scene, camera, stats;
 
@@ -81,21 +85,21 @@
 
 				var container = document.getElementById( 'container' );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 250;
 
 				//
 
-				var vertices = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 ).vertices;
+				var vertices = new BoxGeometry( 200, 200, 200, 16, 16, 16 ).vertices;
 
 				var positions = new Float32Array( vertices.length * 3 );
 				var colors = new Float32Array( vertices.length * 3 );
 				var sizes = new Float32Array( vertices.length );
 
 				var vertex;
-				var color = new THREE.Color();
+				var color = new Color();
 
 				for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
@@ -109,18 +113,18 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
-				geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+				var geometry = new BufferGeometry();
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'customColor', new BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'size', new BufferAttribute( sizes, 1 ) );
 
 				//
 
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 
 					uniforms: {
-						color: { value: new THREE.Color( 0xffffff ) },
-						texture: { value: new THREE.TextureLoader().load( "textures/sprites/disc.png" ) }
+						color: { value: new Color( 0xffffff ) },
+						texture: { value: new TextureLoader().load( "textures/sprites/disc.png" ) }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
@@ -131,20 +135,20 @@
 
 				//
 
-				particles = new THREE.Points( geometry, material );
+				particles = new Points( geometry, material );
 				scene.add( particles );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				raycaster = new THREE.Raycaster();
-				mouse = new THREE.Vector2();
+				raycaster = new Raycaster();
+				mouse = new Vector2();
 
 				//
 

examples/webgl_interactive_raycasting_points.html

@@ -11,23 +11,32 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive - raycasting - points </div>
 
-		<script src="../build/three.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 {
+				BufferAttribute,
+				BufferGeometry,
+				Clock,
+				Color,
+				Matrix4,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Points,
+				PointsMaterial,
+				Raycaster,
+				Scene,
+				SphereBufferGeometry,
+				Vector2,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var renderer, scene, camera, stats;
 			var pointclouds;
 			var raycaster;
-			var mouse = new THREE.Vector2();
+			var mouse = new Vector2();
 			var intersection = null;
 			var spheres = [];
 			var spheresIndex = 0;
@@ -37,14 +46,14 @@
 			var pointSize = 0.05;
 			var width = 80;
 			var length = 160;
-			var rotateY = new THREE.Matrix4().makeRotationY( 0.005 );
+			var rotateY = new Matrix4().makeRotationY( 0.005 );
 
 			init();
 			animate();
 
 			function generatePointCloudGeometry( color, width, length ) {
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var numPoints = width * length;
 
 				var positions = new Float32Array( numPoints * 3 );
@@ -77,8 +86,8 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 				geometry.computeBoundingBox();
 
 				return geometry;
@@ -88,9 +97,9 @@
 			function generatePointcloud( color, width, length ) {
 
 				var geometry = generatePointCloudGeometry( color, width, length );
-				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+				var material = new PointsMaterial( { size: pointSize, vertexColors: VertexColors } );
 
-				return  new THREE.Points( geometry, material );
+				return new Points( geometry, material );
 
 			}
 
@@ -113,11 +122,11 @@
 
 				}
 
-				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
+				geometry.setIndex( new BufferAttribute( indices, 1 ) );
 
-				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+				var material = new PointsMaterial( { size: pointSize, vertexColors: VertexColors } );
 
-				return new THREE.Points( geometry, material );
+				return new Points( geometry, material );
 
 			}
 
@@ -140,12 +149,12 @@
 
 				}
 
-				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
+				geometry.setIndex( new BufferAttribute( indices, 1 ) );
 				geometry.addGroup( 0, indices.length );
 
-				var material = new THREE.PointsMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
+				var material = new PointsMaterial( { size: pointSize, vertexColors: VertexColors } );
 
-				return new THREE.Points( geometry, material );
+				return new Points( geometry, material );
 
 			}
 
@@ -153,28 +162,28 @@
 
 				var container = document.getElementById( 'container' );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 10, 10, 10 );
 				camera.lookAt( scene.position );
 				camera.updateMatrix();
 
 				//
 
-				var pcBuffer = generatePointcloud( new THREE.Color( 1, 0, 0 ), width, length );
+				var pcBuffer = generatePointcloud( new Color( 1, 0, 0 ), width, length );
 				pcBuffer.scale.set( 5, 10, 10 );
 				pcBuffer.position.set( - 5, 0, 0 );
 				scene.add( pcBuffer );
 
-				var pcIndexed = generateIndexedPointcloud( new THREE.Color( 0, 1, 0 ), width, length );
+				var pcIndexed = generateIndexedPointcloud( new Color( 0, 1, 0 ), width, length );
 				pcIndexed.scale.set( 5, 10, 10 );
 				pcIndexed.position.set( 0, 0, 0 );
 				scene.add( pcIndexed );
 
-				var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new THREE.Color( 0, 1, 1 ), width, length );
+				var pcIndexedOffset = generateIndexedWithOffsetPointcloud( new Color( 0, 1, 1 ), width, length );
 				pcIndexedOffset.scale.set( 5, 10, 10 );
 				pcIndexedOffset.position.set( 5, 0, 0 );
 				scene.add( pcIndexedOffset );
@@ -183,12 +192,12 @@
 
 				//
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 0.1, 32, 32 );
-				var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+				var sphereGeometry = new SphereBufferGeometry( 0.1, 32, 32 );
+				var sphereMaterial = new MeshBasicMaterial( { color: 0xff0000 } );
 
 				for ( var i = 0; i < 40; i ++ ) {
 
-					var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
+					var sphere = new Mesh( sphereGeometry, sphereMaterial );
 					scene.add( sphere );
 					spheres.push( sphere );
 
@@ -196,14 +205,14 @@
 
 				//
 
-				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 );
 
 				//
 
-				raycaster = new THREE.Raycaster();
+				raycaster = new Raycaster();
 				raycaster.params.Points.threshold = threshold;
 
 				//

examples/webgl_interactive_voxelpainter.html

@@ -22,20 +22,27 @@
 			<strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel
 		</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 {
+				AmbientLight,
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				GridHelper,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				Scene,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			var camera, scene, renderer;
-			var plane, cube;
+			var plane;
 			var mouse, raycaster, isShiftDown = false;
 
 			var rollOverMesh, rollOverMaterial;
@@ -48,53 +55,53 @@
 
 			function init() {
 
-				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, 800, 1300 );
 				camera.lookAt( 0, 0, 0 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
 				// roll-over helpers
 
-				var rollOverGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				rollOverMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
-				rollOverMesh = new THREE.Mesh( rollOverGeo, rollOverMaterial );
+				var rollOverGeo = new BoxBufferGeometry( 50, 50, 50 );
+				rollOverMaterial = new MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } );
+				rollOverMesh = new Mesh( rollOverGeo, rollOverMaterial );
 				scene.add( rollOverMesh );
 
 				// cubes
 
-				cubeGeo = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				cubeMaterial = new THREE.MeshLambertMaterial( { color: 0xfeb74c, map: new THREE.TextureLoader().load( 'textures/square-outline-textured.png' ) } );
+				cubeGeo = new BoxBufferGeometry( 50, 50, 50 );
+				cubeMaterial = new MeshLambertMaterial( { color: 0xfeb74c, map: new TextureLoader().load( 'textures/square-outline-textured.png' ) } );
 
 				// grid
 
-				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				var gridHelper = new GridHelper( 1000, 20 );
 				scene.add( gridHelper );
 
 				//
 
-				raycaster = new THREE.Raycaster();
-				mouse = new THREE.Vector2();
+				raycaster = new Raycaster();
+				mouse = new Vector2();
 
-				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
+				var geometry = new PlaneBufferGeometry( 1000, 1000 );
 				geometry.rotateX( - Math.PI / 2 );
 
-				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
+				plane = new Mesh( geometry, new MeshBasicMaterial( { visible: false } ) );
 				scene.add( plane );
 
 				objects.push( plane );
 
 				// lights
 
-				var ambientLight = new THREE.AmbientLight( 0x606060 );
+				var ambientLight = new AmbientLight( 0x606060 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				var directionalLight = new DirectionalLight( 0xffffff );
 				directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
 				scene.add( directionalLight );
 
-				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 );
@@ -172,7 +179,7 @@
 
 					} else {
 
-						var voxel = new THREE.Mesh( cubeGeo, cubeMaterial );
+						var voxel = new Mesh( cubeGeo, cubeMaterial );
 						voxel.position.copy( intersect.point ).add( intersect.face.normal );
 						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
 						scene.add( voxel );

examples/webgl_kinect.html

@@ -8,12 +8,6 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script src='js/libs/dat.gui.min.js'></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/WebGL.js"></script>
-
 		<video id="video" loop muted crossOrigin="anonymous" webkit-playsinline style="display:none">
 			<source src="textures/kinect.webm">
 			<source src="textures/kinect.mp4">
@@ -74,25 +68,31 @@
 
 		</script>
 
-		<script>
+		<script type="module">
+			import {
+				AdditiveBlending,
+				BufferAttribute,
+				BufferGeometry,
+				NearestFilter,
+				PerspectiveCamera,
+				Points,
+				Scene,
+				ShaderMaterial,
+				Vector3,
+				VideoTexture,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var container;
 
 			var scene, camera, renderer;
 			var geometry, mesh, material;
 			var mouse, center;
-			var stats;
-
-			if ( WEBGL.isWebGLAvailable() ) {
-
-				init();
-				animate();
 
-			} else {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			init();
+			animate();
 
 			function init() {
 
@@ -104,26 +104,23 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - kinect';
 				document.body.appendChild( info );
 
-				stats = new Stats();
-				// container.appendChild( stats.dom );
-
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 0, 500 );
 
-				scene = new THREE.Scene();
-				center = new THREE.Vector3();
+				scene = new Scene();
+				center = new Vector3();
 				center.z = - 1000;
 
 				var video = document.getElementById( 'video' );
 				video.addEventListener( 'loadedmetadata', function () {
 
-					var texture = new THREE.VideoTexture( video );
-					texture.minFilter = THREE.NearestFilter;
+					var texture = new VideoTexture( video );
+					texture.minFilter = NearestFilter;
 
 					var width = 640, height = 480;
 					var nearClipping = 850, farClipping = 4000;
 
-					geometry = new THREE.BufferGeometry();
+					geometry = new BufferGeometry();
 
 					var vertices = new Float32Array( width * height * 3 );
 
@@ -134,9 +131,9 @@
 
 					}
 
-					geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
+					geometry.addAttribute( 'position', new BufferAttribute( vertices, 3 ) );
 
-					material = new THREE.ShaderMaterial( {
+					material = new ShaderMaterial( {
 
 						uniforms: {
 
@@ -152,16 +149,16 @@
 						},
 						vertexShader: document.getElementById( 'vs' ).textContent,
 						fragmentShader: document.getElementById( 'fs' ).textContent,
-						blending: THREE.AdditiveBlending,
+						blending: AdditiveBlending,
 						depthTest: false, depthWrite: false,
 						transparent: true
 
 					} );
 
-					mesh = new THREE.Points( geometry, material );
+					mesh = new Points( geometry, material );
 					scene.add( mesh );
 
-					var gui = new dat.GUI();
+					var gui = new GUI();
 					gui.add( material.uniforms.nearClipping, 'value', 1, 10000, 1.0 ).name( 'nearClipping' );
 					gui.add( material.uniforms.farClipping, 'value', 1, 10000, 1.0 ).name( 'farClipping' );
 					gui.add( material.uniforms.pointSize, 'value', 1, 10, 1.0 ).name( 'pointSize' );
@@ -173,12 +170,12 @@
 
 				video.play();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				mouse = new THREE.Vector3( 0, 0, 1 );
+				mouse = new Vector3( 0, 0, 1 );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
@@ -209,7 +206,6 @@
 				requestAnimationFrame( animate );
 
 				render();
-				stats.update();
 
 			}
 

examples/webgl_layers.html

@@ -21,12 +21,21 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl layers
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				Math as _Math,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var container, stats;
 			var camera, scene, renderer;
@@ -41,15 +50,15 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.layers.enable( 0 ); // enabled by default
 				camera.layers.enable( 1 );
 				camera.layers.enable( 2 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				var light = new THREE.PointLight( 0xffffff, 1 );
+				var light = new PointLight( 0xffffff, 1 );
 				light.layers.enable( 0 );
 				light.layers.enable( 1 );
 				light.layers.enable( 2 );
@@ -58,14 +67,14 @@
 				camera.add( light );
 
 				var colors = [ 0xff0000, 0x00ff00, 0x0000ff ];
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new BoxBufferGeometry( 20, 20, 20 );
 				var layer;
 
 				for ( var i = 0; i < 300; i ++ ) {
 
 					layer = ( i % 3 );
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: colors[ layer ] } ) );
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: colors[ layer ] } ) );
 
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
@@ -85,7 +94,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -97,7 +106,7 @@
 
 				//
 				// Init gui
-				var gui = new dat.GUI();
+				var gui = new GUI();
 				gui.add( layers, 'red' ).onChange( function () {
 
 					camera.layers.toggle( 0 );
@@ -142,9 +151,9 @@
 
 				theta += 0.1;
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
+				camera.position.x = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.y = radius * Math.sin( _Math.degToRad( theta ) );
+				camera.position.z = radius * Math.cos( _Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
 				renderer.render( scene, camera );

examples/webgl_lensflares.html

@@ -14,21 +14,33 @@
 			fly with WASD/RF/QE + mouse
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FlyControls.js"></script>
-		<script src="js/objects/Lensflare.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Clock,
+				Color,
+				DirectionalLight,
+				Fog,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FlyControls } from './jsm/controls/FlyControls.js';
+			import { Lensflare, LensflareElement } from './jsm/objects/Lensflare.js';
 
 			var container, stats;
 
 			var camera, scene, renderer;
 			var controls;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -40,10 +52,10 @@
 
 				// camera
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 250;
 
-				controls = new THREE.FlyControls( camera );
+				controls = new FlyControls( camera );
 
 				controls.movementSpeed = 2500;
 				controls.domElement = container;
@@ -53,20 +65,20 @@
 
 				// scene
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color().setHSL( 0.51, 0.4, 0.01 );
-				scene.fog = new THREE.Fog( scene.background, 3500, 15000 );
+				scene = new Scene();
+				scene.background = new Color().setHSL( 0.51, 0.4, 0.01 );
+				scene.fog = new Fog( scene.background, 3500, 15000 );
 
 				// world
 
 				var s = 250;
 
-				var geometry = new THREE.BoxBufferGeometry( s, s, s );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 50 } );
+				var geometry = new BoxBufferGeometry( s, s, s );
+				var material = new MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 50 } );
 
 				for ( var i = 0; i < 3000; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = 8000 * ( 2.0 * Math.random() - 1.0 );
 					mesh.position.y = 8000 * ( 2.0 * Math.random() - 1.0 );
@@ -86,13 +98,13 @@
 
 				// lights
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.05 );
+				var dirLight = new DirectionalLight( 0xffffff, 0.05 );
 				dirLight.position.set( 0, - 1, 0 ).normalize();
 				dirLight.color.setHSL( 0.1, 0.7, 0.5 );
 				scene.add( dirLight );
 
 				// lensflares
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				var textureFlare0 = textureLoader.load( 'textures/lensflare/lensflare0.png' );
 				var textureFlare3 = textureLoader.load( 'textures/lensflare/lensflare3.png' );
@@ -103,24 +115,24 @@
 
 				function addLight( h, s, l, x, y, z ) {
 
-					var light = new THREE.PointLight( 0xffffff, 1.5, 2000 );
+					var light = new PointLight( 0xffffff, 1.5, 2000 );
 					light.color.setHSL( h, s, l );
 					light.position.set( x, y, z );
 					scene.add( light );
 
-					var lensflare = new THREE.Lensflare();
-					lensflare.addElement( new THREE.LensflareElement( textureFlare0, 700, 0, light.color ) );
-					lensflare.addElement( new THREE.LensflareElement( textureFlare3, 60, 0.6 ) );
-					lensflare.addElement( new THREE.LensflareElement( textureFlare3, 70, 0.7 ) );
-					lensflare.addElement( new THREE.LensflareElement( textureFlare3, 120, 0.9 ) );
-					lensflare.addElement( new THREE.LensflareElement( textureFlare3, 70, 1 ) );
+					var lensflare = new Lensflare();
+					lensflare.addElement( new LensflareElement( textureFlare0, 700, 0, light.color ) );
+					lensflare.addElement( new LensflareElement( textureFlare3, 60, 0.6 ) );
+					lensflare.addElement( new LensflareElement( textureFlare3, 70, 0.7 ) );
+					lensflare.addElement( new LensflareElement( textureFlare3, 120, 0.9 ) );
+					lensflare.addElement( new LensflareElement( textureFlare3, 70, 1 ) );
 					light.add( lensflare );
 
 				}
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
+				renderer = new WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_lightningstrike.html

@@ -11,32 +11,51 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - lightning strike</div>
 
-		<script src="../build/three.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 src="js/controls/OrbitControls.js"></script>
-		<script src="js/geometries/LightningStrike.js"></script>
-		<script src="js/objects/LightningStorm.js"></script>
-		<script src="js/math/SimplexNoise.js"></script>
-		<script src="js/shaders/CopyShader.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/OutlinePass.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				BufferGeometry,
+				Clock,
+				Color,
+				ConeBufferGeometry,
+				CubeReflectionMapping,
+				CubeTextureLoader,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				DoubleSide,
+				Float32BufferAttribute,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				MeshPhysicalMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				Raycaster,
+				RGBFormat,
+				Scene,
+				Sphere,
+				SphereBufferGeometry,
+				Vector2,
+				Vector3,
+				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 { LightningStrike } from './jsm/geometries/LightningStrike.js';
+			import { LightningStorm } from './jsm/objects/LightningStorm.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { OutlinePass } from './jsm/postprocessing/OutlinePass.js';
 
 			var container, stats;
 
-			var camera, scene, renderer, composer, gui;
+			var scene, renderer, composer, gui;
 
 			var currentSceneIndex = 0;
 
@@ -48,12 +67,10 @@
 				createStormScene
 			];
 
-			var textureLoader;
-
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2();
+			var raycaster = new Raycaster();
+			var mouse = new Vector2();
 
 			init();
 			animate();
@@ -62,7 +79,7 @@
 
 				container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -71,15 +88,13 @@
 
 				container.appendChild( renderer.domElement );
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				textureLoader = new THREE.TextureLoader();
-
 				createScene();
 
 			}
@@ -108,10 +123,12 @@
 			function createGUI() {
 
 				if ( gui ) {
+
 					gui.destroy();
+
 				}
 
-				gui = new dat.GUI( { width: 350 } );
+				gui = new GUI( { width: 350 } );
 
 				var sceneFolder = gui.addFolder( "Scene" );
 
@@ -126,7 +143,7 @@
 				} );
 
 				scene.userData.timeRate = 1;
-				sceneFolder.add( scene.userData, 'timeRate', scene.userData.canGoBackwardsInTime ? -1 : 0, 1 ).name( 'Time rate' );
+				sceneFolder.add( scene.userData, 'timeRate', scene.userData.canGoBackwardsInTime ? - 1 : 0, 1 ).name( 'Time rate' );
 
 				sceneFolder.open();
 
@@ -140,7 +157,9 @@
 					scene.userData.lightningColor.b * 255
 				];
 				graphicsFolder.addColor( scene.userData, 'lightningColorRGB' ).name( 'Color' ).onChange( function ( value ) {
+
 					scene.userData.lightningMaterial.color.setRGB( value[ 0 ], value[ 1 ], value[ 2 ] ).multiplyScalar( 1 / 255 );
+
 				} );
 				scene.userData.outlineColorRGB = [
 					scene.userData.outlineColor.r * 255,
@@ -148,7 +167,9 @@
 					scene.userData.outlineColor.b * 255
 				];
 				graphicsFolder.addColor( scene.userData, 'outlineColorRGB' ).name( 'Glow color' ).onChange( function ( value ) {
+
 					scene.userData.outlineColor.setRGB( value[ 0 ], value[ 1 ], value[ 2 ] ).multiplyScalar( 1 / 255 );
+
 				} );
 
 				graphicsFolder.open();
@@ -224,7 +245,7 @@
 
 			function createOutline( scene, objectsArray, visibleColor ) {
 
-				var outlinePass = new THREE.OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, scene.userData.camera, objectsArray );
+				var outlinePass = new OutlinePass( new Vector2( window.innerWidth, window.innerHeight ), scene, scene.userData.camera, objectsArray );
 				outlinePass.edgeStrength = 2.5;
 				outlinePass.edgeGlow = 0.7;
 				outlinePass.edgeThickness = 2.8;
@@ -242,24 +263,24 @@
 
 			function createConesScene() {
 
-				var scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
+				var scene = new Scene();
+				scene.background = new Color( 0x050505 );
 
 				scene.userData.canGoBackwardsInTime = true;
 
-				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 200, 100000 );
+				scene.userData.camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 200, 100000 );
 
 				// Lights
 
-				scene.userData.lightningColor = new THREE.Color( 0xB0FFFF );
-				scene.userData.outlineColor = new THREE.Color( 0x00FFFF );
+				scene.userData.lightningColor = new Color( 0xB0FFFF );
+				scene.userData.outlineColor = new Color( 0x00FFFF );
 
-				var posLight = new THREE.PointLight( 0x00ffff, 1, 5000, 2 );
+				var posLight = new PointLight( 0x00ffff, 1, 5000, 2 );
 				scene.add( posLight );
 
 				// Ground
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200000, 200000 ), new THREE.MeshPhongMaterial( { color: 0xC0C0C0, shininess: 0 } ) );
+				var ground = new Mesh( new PlaneBufferGeometry( 200000, 200000 ), new MeshPhongMaterial( { color: 0xC0C0C0, shininess: 0 } ) );
 				ground.rotation.x = - Math.PI * 0.5;
 				scene.add( ground );
 
@@ -274,23 +295,23 @@
 
 				scene.userData.camera.position.set( 5 * coneHeight, 4 * coneHeight, 18 * coneHeight );
 
-				var coneMesh1 = new THREE.Mesh( new THREE.ConeBufferGeometry( coneHeight, coneHeight, 30, 1, false ), new THREE.MeshPhongMaterial( { color: 0xFFFF00, emissive: 0x1F1F00 } ) );
+				var coneMesh1 = new Mesh( new ConeBufferGeometry( coneHeight, coneHeight, 30, 1, false ), new MeshPhongMaterial( { color: 0xFFFF00, emissive: 0x1F1F00 } ) );
 				coneMesh1.rotation.x = Math.PI;
 				coneMesh1.position.y = conesDistance + coneHeight;
 				scene.add( coneMesh1 );
 
-				var coneMesh2 = new THREE.Mesh( coneMesh1.geometry.clone(), new THREE.MeshPhongMaterial( { color: 0xFF2020, emissive: 0x1F0202 } ) );
+				var coneMesh2 = new Mesh( coneMesh1.geometry.clone(), new MeshPhongMaterial( { color: 0xFF2020, emissive: 0x1F0202 } ) );
 				coneMesh2.position.y = coneHeightHalf;
 				scene.add( coneMesh2 );
 
 				// Lightning strike
 
-				scene.userData.lightningMaterial = new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor } );
+				scene.userData.lightningMaterial = new MeshBasicMaterial( { color: scene.userData.lightningColor } );
 
 				scene.userData.rayParams = {
 
-					sourceOffset: new THREE.Vector3(),
-					destOffset: new THREE.Vector3(),
+					sourceOffset: new Vector3(),
+					destOffset: new Vector3(),
 					radius0: 4,
 					radius1: 4,
 					minRadius: 2.5,
@@ -319,38 +340,40 @@
 				scene.userData.recreateRay = function () {
 
 					if ( lightningStrikeMesh ) {
+
 						scene.remove( lightningStrikeMesh );
+
 					}
 
-					lightningStrike = new THREE.LightningStrike( scene.userData.rayParams );
-					lightningStrikeMesh = new THREE.Mesh( lightningStrike, scene.userData.lightningMaterial );
+					lightningStrike = new LightningStrike( scene.userData.rayParams );
+					lightningStrikeMesh = new Mesh( lightningStrike, scene.userData.lightningMaterial );
 
 					outlineMeshArray.length = 0;
 					outlineMeshArray.push( lightningStrikeMesh );
 
 					scene.add( lightningStrikeMesh );
 
-				}
+				};
 
 				scene.userData.recreateRay();
 
 				// Compose rendering
 
 				composer.passes = [];
-				composer.addPass( new THREE.RenderPass( scene, scene.userData.camera ) );
+				composer.addPass( new RenderPass( scene, scene.userData.camera ) );
 				createOutline( scene, outlineMeshArray, scene.userData.outlineColor );
 
 				// Controls
 
-				var controls = new THREE.OrbitControls( scene.userData.camera, renderer.domElement );
-				controls.target.y = ( conesDistance + coneHeight ) * 0.5
+				var controls = new OrbitControls( scene.userData.camera, renderer.domElement );
+				controls.target.y = ( conesDistance + coneHeight ) * 0.5;
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
 
 				scene.userData.render = function ( time ) {
 
 					// Move cones and Update ray position
-					coneMesh1.position.set( Math.sin( 0.5 * time ) * conesDistance * 0.6,  conesDistance + coneHeight, Math.cos( 0.5 * time ) * conesDistance * 0.6 );
+					coneMesh1.position.set( Math.sin( 0.5 * time ) * conesDistance * 0.6, conesDistance + coneHeight, Math.cos( 0.5 * time ) * conesDistance * 0.6 );
 					coneMesh2.position.set( Math.sin( 0.9 * time ) * conesDistance, coneHeightHalf, 0 );
 					lightningStrike.rayParameters.sourceOffset.copy( coneMesh1.position );
 					lightningStrike.rayParameters.sourceOffset.y -= coneHeightHalf;
@@ -368,8 +391,7 @@
 
 						composer.render();
 
-					}
-					else {
+					}	else {
 
 						renderer.render( scene, scene.userData.camera );
 
@@ -385,48 +407,48 @@
 
 			function createPlasmaBallScene() {
 
-				var scene = new THREE.Scene();
+				var scene = new Scene();
 
 				scene.userData.canGoBackwardsInTime = true;
 
-				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 100, 50000 );
+				scene.userData.camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 100, 50000 );
 
-				var ballScene = new THREE.Scene();
-				ballScene.background = new THREE.Color( 0x454545 );
+				var ballScene = new Scene();
+				ballScene.background = new Color( 0x454545 );
 
 				// Lights
 
-				var ambientLight = new THREE.AmbientLight( 0x444444 );
+				var ambientLight = new AmbientLight( 0x444444 );
 				ballScene.add( ambientLight );
 				scene.add( ambientLight );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				var light1 = new DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				ballScene.add( light1 );
 				scene.add( light1 );
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
-				light2.position.set( -0.5, 1, 0.2 );
+				var light2 = new DirectionalLight( 0xffffff, 1.5 );
+				light2.position.set( - 0.5, 1, 0.2 );
 				ballScene.add( light2 );
 				scene.add( light2 );
 
 				// Plasma ball
 
-				scene.userData.lightningColor = new THREE.Color( 0xFFB0FF );
-				scene.userData.outlineColor = new THREE.Color( 0xFF00FF );
+				scene.userData.lightningColor = new Color( 0xFFB0FF );
+				scene.userData.outlineColor = new Color( 0xFF00FF );
 
-				scene.userData.lightningMaterial =  new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor, side: THREE.DoubleSide } );
+				scene.userData.lightningMaterial = new MeshBasicMaterial( { color: scene.userData.lightningColor, side: DoubleSide } );
 
 				var r = "textures/cube/Bridge2/";
 				var urls = [ r + "posx.jpg", r + "negx.jpg",
 							 r + "posy.jpg", r + "negy.jpg",
 							 r + "posz.jpg", r + "negz.jpg" ];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
-				textureCube.format = THREE.RGBFormat;
-				textureCube.mapping = THREE.CubeReflectionMapping;
+				var textureCube = new CubeTextureLoader().load( urls );
+				textureCube.format = RGBFormat;
+				textureCube.mapping = CubeReflectionMapping;
 
-				var sphereMaterial = new THREE.MeshPhysicalMaterial( {
+				var sphereMaterial = new MeshPhysicalMaterial( {
 					transparent: true,
 					depthWrite: false,
 					opacity: 0.15,
@@ -442,37 +464,37 @@
 
 				scene.userData.camera.position.set( 5 * sphereRadius, 2 * sphereHeight, 6 * sphereRadius );
 
-				var sphereMesh = new THREE.Mesh( new THREE.SphereBufferGeometry( sphereRadius, 80, 40 ), sphereMaterial );
+				var sphereMesh = new Mesh( new SphereBufferGeometry( sphereRadius, 80, 40 ), sphereMaterial );
 				sphereMesh.position.set( 0, sphereHeight, 0 );
 				ballScene.add( sphereMesh );
 
-				var sphere = new THREE.Sphere( sphereMesh.position, sphereRadius );
+				var sphere = new Sphere( sphereMesh.position, sphereRadius );
 
-				var spherePlasma = new THREE.Mesh( new THREE.SphereBufferGeometry( sphereRadius * 0.05, 24, 12 ), scene.userData.lightningMaterial );
+				var spherePlasma = new Mesh( new SphereBufferGeometry( sphereRadius * 0.05, 24, 12 ), scene.userData.lightningMaterial );
 				spherePlasma.position.copy( sphereMesh.position );
 				spherePlasma.scale.y = 0.6;
 				scene.add( spherePlasma );
 
-				var post = new THREE.Mesh(
-					new THREE.CylinderBufferGeometry( sphereRadius * 0.06, sphereRadius * 0.06, sphereHeight, 6, 1, true ),
-					new THREE.MeshLambertMaterial( { color: 0x020202 } )
+				var post = new Mesh(
+					new CylinderBufferGeometry( sphereRadius * 0.06, sphereRadius * 0.06, sphereHeight, 6, 1, true ),
+					new MeshLambertMaterial( { color: 0x020202 } )
 				);
 				post.position.y = sphereHeight * 0.5 - sphereRadius * 0.05 * 1.2;
 				scene.add( post );
 
-				var box = new THREE.Mesh( new THREE.BoxBufferGeometry( sphereHeight * 0.5, sphereHeight * 0.1, sphereHeight * 0.5 ), post.material );
+				var box = new Mesh( new BoxBufferGeometry( sphereHeight * 0.5, sphereHeight * 0.1, sphereHeight * 0.5 ), post.material );
 				box.position.y = sphereHeight * 0.05 * 0.5;
 				scene.add( box );
 
-				var rayDirection = new THREE.Vector3();
+				var rayDirection = new Vector3();
 				var rayLength = 0;
-				var vec1 = new THREE.Vector3();
-				var vec2 = new THREE.Vector3();
+				var vec1 = new Vector3();
+				var vec2 = new Vector3();
 
 				scene.userData.rayParams = {
 
 					sourceOffset: sphereMesh.position,
-					destOffset: new THREE.Vector3( sphereRadius, 0, 0 ).add( sphereMesh.position ),
+					destOffset: new Vector3( sphereRadius, 0, 0 ).add( sphereMesh.position ),
 					radius0: 4,
 					radius1: 4,
 					radius0Factor: 0.82,
@@ -499,7 +521,9 @@
 						vec1.subVectors( childSubray.pos1, lightningStrike.rayParameters.sourceOffset );
 						vec2.set( 0, 0, 0 );
 						if ( lightningStrike.randomGenerator.random() < 0.7 ) {
+
 							vec2.copy( rayDirection ).multiplyScalar( rayLength * 1.0865 );
+
 						}
 						vec1.add( vec2 ).setLength( rayLength );
 						childSubray.pos1.addVectors( vec1, lightningStrike.rayParameters.sourceOffset );
@@ -515,11 +539,13 @@
 				scene.userData.recreateRay = function () {
 
 					if ( lightningStrikeMesh ) {
+
 						scene.remove( lightningStrikeMesh );
+
 					}
 
-					lightningStrike = new THREE.LightningStrike( scene.userData.rayParams );
-					lightningStrikeMesh = new THREE.Mesh( lightningStrike, scene.userData.lightningMaterial );
+					lightningStrike = new LightningStrike( scene.userData.rayParams );
+					lightningStrikeMesh = new Mesh( lightningStrike, scene.userData.lightningMaterial );
 
 					outlineMeshArray.length = 0;
 					outlineMeshArray.push( lightningStrikeMesh );
@@ -527,7 +553,7 @@
 
 					scene.add( lightningStrikeMesh );
 
-				}
+				};
 
 				scene.userData.recreateRay();
 
@@ -535,9 +561,9 @@
 
 				composer.passes = [];
 
-				composer.addPass( new THREE.RenderPass( ballScene, scene.userData.camera ) );
+				composer.addPass( new RenderPass( ballScene, scene.userData.camera ) );
 
-				var rayPass = new THREE.RenderPass( scene, scene.userData.camera );
+				var rayPass = new RenderPass( scene, scene.userData.camera );
 				rayPass.clear = false;
 				composer.addPass( rayPass );
 
@@ -561,7 +587,7 @@
 
 				// Controls
 
-				var controls = new THREE.OrbitControls( scene.userData.camera, renderer.domElement );
+				var controls = new OrbitControls( scene.userData.camera, renderer.domElement );
 				controls.target.copy( sphereMesh.position );
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
@@ -594,7 +620,7 @@
 
 				}
 
-				var intersection = new THREE.Vector3();
+				var intersection = new Vector3();
 
 				function checkIntersection() {
 
@@ -618,22 +644,22 @@
 
 			function createStormScene() {
 
-				var scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
+				var scene = new Scene();
+				scene.background = new Color( 0x050505 );
 
 				scene.userData.canGoBackwardsInTime = false;
 
-				scene.userData.camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 20, 10000 );
+				scene.userData.camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 20, 10000 );
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x444444 ) );
+				scene.add( new AmbientLight( 0x444444 ) );
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				var light1 = new DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var posLight = new THREE.PointLight( 0x00ffff );
+				var posLight = new PointLight( 0x00ffff );
 				posLight.position.set( 0, 100, 0 );
 				scene.add( posLight );
 
@@ -643,21 +669,21 @@
 
 				scene.userData.camera.position.set( 0, 0.2, 1.6 ).multiplyScalar( GROUND_SIZE * 0.5 );
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( GROUND_SIZE, GROUND_SIZE ), new THREE.MeshLambertMaterial( { color: 0x072302 } ) );
+				var ground = new Mesh( new PlaneBufferGeometry( GROUND_SIZE, GROUND_SIZE ), new MeshLambertMaterial( { color: 0x072302 } ) );
 				ground.rotation.x = - Math.PI * 0.5;
 				scene.add( ground );
 
 				// Storm
 
-				scene.userData.lightningColor = new THREE.Color( 0xB0FFFF );
-				scene.userData.outlineColor = new THREE.Color( 0x00FFFF );
+				scene.userData.lightningColor = new Color( 0xB0FFFF );
+				scene.userData.outlineColor = new Color( 0x00FFFF );
 
-				scene.userData.lightningMaterial =  new THREE.MeshBasicMaterial( { color: scene.userData.lightningColor } );
+				scene.userData.lightningMaterial = new MeshBasicMaterial( { color: scene.userData.lightningColor } );
 
-				var rayDirection = new THREE.Vector3( 0, -1, 0 );
+				var rayDirection = new Vector3( 0, - 1, 0 );
 				var rayLength = 0;
-				var vec1 = new THREE.Vector3();
-				var vec2 = new THREE.Vector3();
+				var vec1 = new Vector3();
+				var vec2 = new Vector3();
 
 				scene.userData.rayParams = {
 
@@ -701,9 +727,9 @@
 
 				// Black star mark
 				var starVertices = [];
-				var prevPoint = new THREE.Vector3( 0, 0, 1 );
-				var currPoint = new THREE.Vector3();
-				for ( var i = 1; i <= 16; i++ ) {
+				var prevPoint = new Vector3( 0, 0, 1 );
+				var currPoint = new Vector3();
+				for ( var i = 1; i <= 16; i ++ ) {
 
 					currPoint.set( Math.sin( 2 * Math.PI * i / 16 ), 0, Math.cos( 2 * Math.PI * i / 16 ) );
 
@@ -721,14 +747,14 @@
 
 				}
 
-				var starGeometry = new THREE.BufferGeometry();
-				starGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( starVertices, 3 ) );
-				var starMesh = new THREE.Mesh( starGeometry, new THREE.MeshBasicMaterial( { color: 0x020900 } ) );
+				var starGeometry = new BufferGeometry();
+				starGeometry.addAttribute( 'position', new Float32BufferAttribute( starVertices, 3 ) );
+				var starMesh = new Mesh( starGeometry, new MeshBasicMaterial( { color: 0x020900 } ) );
 				starMesh.scale.multiplyScalar( 6 );
 
 				//
 
-				var storm = new THREE.LightningStorm( {
+				var storm = new LightningStorm( {
 
 					size: GROUND_SIZE,
 					minHeight: 90,
@@ -758,12 +784,12 @@
 				// Compose rendering
 
 				composer.passes = [];
-				composer.addPass( new THREE.RenderPass( scene, scene.userData.camera ) );
+				composer.addPass( new RenderPass( scene, scene.userData.camera ) );
 				createOutline( scene, storm.lightningsMeshes, scene.userData.outlineColor );
 
 				// Controls
 
-				var controls = new THREE.OrbitControls( scene.userData.camera, renderer.domElement );
+				var controls = new OrbitControls( scene.userData.camera, renderer.domElement );
 				controls.target.y = GROUND_SIZE * 0.05;
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
@@ -778,8 +804,7 @@
 
 						composer.render();
 
-					}
-					else {
+					}	else {
 
 						renderer.render( scene, scene.userData.camera );
 

examples/webgl_lightprobe.html

@@ -12,22 +12,24 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - light probe
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/lights/LightProbeGenerator.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				DirectionalLight,
+				LightProbe,
+				Mesh,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				sRGBEncoding,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { LightProbeGenerator } from './jsm/lights/LightProbeGenerator.js';
 
 			var mesh, renderer, scene, camera;
 
@@ -48,13 +50,13 @@
 			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;
 
 				// gamma
@@ -62,25 +64,25 @@
 				renderer.gammaFactor = 2.2; // approximate sRGB
 
 				// 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( 0, 0, 30 );
 
 				// 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;
 
 				// probe
-				lightProbe = new THREE.LightProbe();
+				lightProbe = new LightProbe();
 				scene.add( lightProbe );
 
 				// light
-				directionalLight = new THREE.DirectionalLight( 0xffffff, API.directionalLightIntensity );
+				directionalLight = new DirectionalLight( 0xffffff, API.directionalLightIntensity );
 				directionalLight.position.set( 10, 10, 10 );
 				scene.add( directionalLight );
 
@@ -97,18 +99,18 @@
 
 				var urls = genCubeUrls( 'textures/cube/pisa/', '.png' );
 
-				new THREE.CubeTextureLoader().load( urls, function ( cubeTexture ) {
+				new CubeTextureLoader().load( urls, function ( cubeTexture ) {
 
-					cubeTexture.encoding = THREE.sRGBEncoding;
+					cubeTexture.encoding = sRGBEncoding;
 
 					scene.background = cubeTexture;
 
-					lightProbe.copy( THREE.LightProbeGenerator.fromCubeTexture( cubeTexture ) );
-					console.log(lightProbe );
-					var geometry = new THREE.SphereBufferGeometry( 5, 64, 32 );
-					//var geometry = new THREE.TorusKnotBufferGeometry( 4, 1.5, 256, 32, 2, 3 );
+					lightProbe.copy( LightProbeGenerator.fromCubeTexture( cubeTexture ) );
+
+					var geometry = new SphereBufferGeometry( 5, 64, 32 );
+					//var geometry = new TorusKnotBufferGeometry( 4, 1.5, 256, 32, 2, 3 );
 
-					var material = new THREE.MeshStandardMaterial( {
+					var material = new MeshStandardMaterial( {
 						color: 0xffffff,
 						metalness: 0,
 						roughness: 0,
@@ -117,7 +119,7 @@
 					} );
 
 					// mesh
-					mesh = new THREE.Mesh( geometry, material );
+					mesh = new Mesh( geometry, material );
 					scene.add( mesh );
 
 					render();
@@ -126,7 +128,7 @@
 
 
 				// gui
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.width = 300;
 
@@ -135,16 +137,28 @@
 				var fl = gui.addFolder( 'Intensity' );
 
 				fl.add( API, 'lightProbeIntensity', 0, 1, 0.02 )
-					.name( 'light probe')
-					.onChange( function() { lightProbe.intensity = API.lightProbeIntensity; render(); } );
+					.name( 'light probe' )
+					.onChange( function () {
+
+						lightProbe.intensity = API.lightProbeIntensity; render();
+
+					} );
 
 				fl.add( API, 'directionalLightIntensity', 0, 1, 0.02 )
-					.name( 'directional light')
-					.onChange( function() { directionalLight.intensity = API.directionalLightIntensity; render(); } );
+					.name( 'directional light' )
+					.onChange( function () {
+
+						directionalLight.intensity = API.directionalLightIntensity; render();
+
+					} );
 
 				fl.add( API, 'envMapIntensity', 0, 1, 0.02 )
-					.name( 'envMap')
-					.onChange( function() { mesh.material.envMapIntensity = API.envMapIntensity; render(); } );
+					.name( 'envMap' )
+					.onChange( function () {
+
+						mesh.material.envMapIntensity = API.envMapIntensity; render();
+
+					} );
 
 				fl.open();
 

examples/webgl_lights_hemisphere.html

@@ -24,12 +24,6 @@
 			<button id="directionalButton">toggle directional light</button>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexShader">
 
 			varying vec3 vWorldPosition;
@@ -63,19 +57,37 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
+		<script type="module">
+			import {
+				AnimationMixer,
+				BackSide,
+				Clock,
+				Color,
+				DirectionalLight,
+				DirectionalLightHelper,
+				Fog,
+				HemisphereLight,
+				HemisphereLightHelper,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
 
 			var camera, scene, renderer, dirLight, dirLightHeper, hemiLight, hemiLightHelper;
 			var mixers = [];
 			var stats;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -84,27 +96,27 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.set( 0, 0, 250 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color().setHSL( 0.6, 0, 1 );
-				scene.fog = new THREE.Fog( scene.background, 1, 5000 );
+				scene = new Scene();
+				scene.background = new Color().setHSL( 0.6, 0, 1 );
+				scene.fog = new Fog( scene.background, 1, 5000 );
 
 				// LIGHTS
 
-				hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
+				hemiLight = new HemisphereLight( 0xffffff, 0xffffff, 0.6 );
 				hemiLight.color.setHSL( 0.6, 1, 0.6 );
 				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
 				hemiLight.position.set( 0, 50, 0 );
 				scene.add( hemiLight );
 
-				hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
+				hemiLightHelper = new HemisphereLightHelper( hemiLight, 10 );
 				scene.add( hemiLightHelper );
 
 				//
 
-				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				dirLight = new DirectionalLight( 0xffffff, 1 );
 				dirLight.color.setHSL( 0.1, 1, 0.95 );
 				dirLight.position.set( - 1, 1.75, 1 );
 				dirLight.position.multiplyScalar( 30 );
@@ -125,16 +137,16 @@
 				dirLight.shadow.camera.far = 3500;
 				dirLight.shadow.bias = - 0.0001;
 
-				dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 );
+				dirLightHeper = new DirectionalLightHelper( dirLight, 10 );
 				scene.add( dirLightHeper );
 
 				// GROUND
 
-				var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
-				var groundMat = new THREE.MeshLambertMaterial( { color: 0xffffff } );
+				var groundGeo = new PlaneBufferGeometry( 10000, 10000 );
+				var groundMat = new MeshLambertMaterial( { color: 0xffffff } );
 				groundMat.color.setHSL( 0.095, 1, 0.75 );
 
-				var ground = new THREE.Mesh( groundGeo, groundMat );
+				var ground = new Mesh( groundGeo, groundMat );
 				ground.position.y = - 33;
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
@@ -145,8 +157,8 @@
 				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: 33 },
 					"exponent": { value: 0.6 }
 				};
@@ -154,20 +166,20 @@
 
 				scene.fog.color.copy( uniforms[ "bottomColor" ].value );
 
-				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 );
 
 				// MODEL
 
-				var loader = new THREE.GLTFLoader();
+				var loader = new GLTFLoader();
 
 				loader.load( 'models/gltf/Flamingo.glb', function ( gltf ) {
 
@@ -183,7 +195,7 @@
 
 					scene.add( mesh );
 
-					var mixer = new THREE.AnimationMixer( mesh );
+					var mixer = new AnimationMixer( mesh );
 					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 					mixers.push( mixer );
 
@@ -191,7 +203,7 @@
 
 				// RENDERER
 
-				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 );

examples/webgl_lights_physical.html

@@ -15,19 +15,27 @@
 			Reinhard inline tonemapping with real-world light falloff (decay = 2).
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				HemisphereLight,
+				Mesh,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				ReinhardToneMapping,
+				RepeatWrapping,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				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';
 
 			var camera, scene, renderer,
 				bulbLight, bulbMat, hemiLight, stats;
@@ -79,40 +87,40 @@
 				container.appendChild( stats.dom );
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.x = - 4;
 				camera.position.z = 4;
 				camera.position.y = 2;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
-				bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
+				var bulbGeometry = new SphereBufferGeometry( 0.02, 16, 8 );
+				bulbLight = new PointLight( 0xffee88, 1, 100, 2 );
 
-				bulbMat = new THREE.MeshStandardMaterial( {
+				bulbMat = new MeshStandardMaterial( {
 					emissive: 0xffffee,
 					emissiveIntensity: 1,
 					color: 0x000000
 				} );
-				bulbLight.add( new THREE.Mesh( bulbGeometry, bulbMat ) );
+				bulbLight.add( new Mesh( bulbGeometry, bulbMat ) );
 				bulbLight.position.set( 0, 2, 0 );
 				bulbLight.castShadow = true;
 				scene.add( bulbLight );
 
-				hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
+				hemiLight = new HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
 				scene.add( hemiLight );
 
-				floorMat = new THREE.MeshStandardMaterial( {
+				floorMat = new MeshStandardMaterial( {
 					roughness: 0.8,
 					color: 0xffffff,
 					metalness: 0.2,
 					bumpScale: 0.0005
 				} );
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
 
-					map.wrapS = THREE.RepeatWrapping;
-					map.wrapT = THREE.RepeatWrapping;
+					map.wrapS = RepeatWrapping;
+					map.wrapT = RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 10, 24 );
 					floorMat.map = map;
@@ -121,8 +129,8 @@
 	} );
 				textureLoader.load( "textures/hardwood2_bump.jpg", function ( map ) {
 
-					map.wrapS = THREE.RepeatWrapping;
-					map.wrapT = THREE.RepeatWrapping;
+					map.wrapS = RepeatWrapping;
+					map.wrapT = RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 10, 24 );
 					floorMat.bumpMap = map;
@@ -131,8 +139,8 @@
 	} );
 				textureLoader.load( "textures/hardwood2_roughness.jpg", function ( map ) {
 
-					map.wrapS = THREE.RepeatWrapping;
-					map.wrapT = THREE.RepeatWrapping;
+					map.wrapS = RepeatWrapping;
+					map.wrapT = RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 10, 24 );
 					floorMat.roughnessMap = map;
@@ -140,7 +148,7 @@
 
 	} );
 
-				cubeMat = new THREE.MeshStandardMaterial( {
+				cubeMat = new MeshStandardMaterial( {
 					roughness: 0.7,
 					color: 0xffffff,
 					bumpScale: 0.002,
@@ -148,8 +156,8 @@
 				} );
 				textureLoader.load( "textures/brick_diffuse.jpg", function ( map ) {
 
-					map.wrapS = THREE.RepeatWrapping;
-					map.wrapT = THREE.RepeatWrapping;
+					map.wrapS = RepeatWrapping;
+					map.wrapT = RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 1, 1 );
 					cubeMat.map = map;
@@ -158,8 +166,8 @@
 	} );
 				textureLoader.load( "textures/brick_bump.jpg", function ( map ) {
 
-					map.wrapS = THREE.RepeatWrapping;
-					map.wrapT = THREE.RepeatWrapping;
+					map.wrapS = RepeatWrapping;
+					map.wrapT = RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 1, 1 );
 					cubeMat.bumpMap = map;
@@ -167,7 +175,7 @@
 
 	} );
 
-				ballMat = new THREE.MeshStandardMaterial( {
+				ballMat = new MeshStandardMaterial( {
 					color: 0xffffff,
 					roughness: 0.5,
 					metalness: 1.0
@@ -187,53 +195,53 @@
 
 	} );
 
-				var floorGeometry = new THREE.PlaneBufferGeometry( 20, 20 );
-				var floorMesh = new THREE.Mesh( floorGeometry, floorMat );
+				var floorGeometry = new PlaneBufferGeometry( 20, 20 );
+				var floorMesh = new Mesh( floorGeometry, floorMat );
 				floorMesh.receiveShadow = true;
 				floorMesh.rotation.x = - Math.PI / 2.0;
 				scene.add( floorMesh );
 
-				var ballGeometry = new THREE.SphereBufferGeometry( 0.25, 32, 32 );
-				var ballMesh = new THREE.Mesh( ballGeometry, ballMat );
+				var ballGeometry = new SphereBufferGeometry( 0.25, 32, 32 );
+				var ballMesh = new Mesh( ballGeometry, ballMat );
 				ballMesh.position.set( 1, 0.25, 1 );
 				ballMesh.rotation.y = Math.PI;
 				ballMesh.castShadow = true;
 				scene.add( ballMesh );
 
-				var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
-				var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
+				var boxGeometry = new BoxBufferGeometry( 0.5, 0.5, 0.5 );
+				var boxMesh = new Mesh( boxGeometry, cubeMat );
 				boxMesh.position.set( - 0.5, 0.25, - 1 );
 				boxMesh.castShadow = true;
 				scene.add( boxMesh );
 
-				var boxMesh2 = new THREE.Mesh( boxGeometry, cubeMat );
+				var boxMesh2 = new Mesh( boxGeometry, cubeMat );
 				boxMesh2.position.set( 0, 0.25, - 5 );
 				boxMesh2.castShadow = true;
 				scene.add( boxMesh2 );
 
-				var boxMesh3 = new THREE.Mesh( boxGeometry, cubeMat );
+				var boxMesh3 = new Mesh( boxGeometry, cubeMat );
 				boxMesh3.position.set( 7, 0.25, 0 );
 				boxMesh3.castShadow = true;
 				scene.add( boxMesh3 );
 
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.physicallyCorrectLights = true;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 				renderer.shadowMap.enabled = true;
-				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMapping = ReinhardToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 
-				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, 'hemiIrradiance', Object.keys( hemiLuminousIrradiances ) );
 				gui.add( params, 'bulbPower', Object.keys( bulbLuminousPowers ) );

examples/webgl_lights_pointlights.html

@@ -13,40 +13,41 @@
 			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/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 {
+				Clock,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
 			var camera, scene, renderer,
 				light1, light2, light3, light4,
 				object, stats;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 100;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//model
 
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
 
 					object = obj;
@@ -56,29 +57,29 @@
 
 				} );
 
-				var sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
+				var sphere = new SphereBufferGeometry( 0.5, 16, 8 );
 
 				//lights
 
-				light1 = new THREE.PointLight( 0xff0040, 2, 50 );
-				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
+				light1 = new PointLight( 0xff0040, 2, 50 );
+				light1.add( new Mesh( sphere, new MeshBasicMaterial( { color: 0xff0040 } ) ) );
 				scene.add( light1 );
 
-				light2 = new THREE.PointLight( 0x0040ff, 2, 50 );
-				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
+				light2 = new PointLight( 0x0040ff, 2, 50 );
+				light2.add( new Mesh( sphere, new MeshBasicMaterial( { color: 0x0040ff } ) ) );
 				scene.add( light2 );
 
-				light3 = new THREE.PointLight( 0x80ff80, 2, 50 );
-				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
+				light3 = new PointLight( 0x80ff80, 2, 50 );
+				light3.add( new Mesh( sphere, new MeshBasicMaterial( { color: 0x80ff80 } ) ) );
 				scene.add( light3 );
 
-				light4 = new THREE.PointLight( 0xffaa00, 2, 50 );
-				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
+				light4 = new PointLight( 0xffaa00, 2, 50 );
+				light4.add( new Mesh( sphere, new MeshBasicMaterial( { color: 0xffaa00 } ) ) );
 				scene.add( light4 );
 
 				//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 );

examples/webgl_lights_pointlights2.html

@@ -13,25 +13,36 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - point lights WebGL demo
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/TrackballControls.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,
+				Color,
+				DirectionalLight,
+				Fog,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				RepeatWrapping,
+				RGBFormat,
+				TextureLoader,
+				TorusBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			var camera, scene, renderer, controls;
 			var light1, light2, light3, light4, light5, light6;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			var stats;
 
@@ -44,44 +55,44 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 300 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 300 );
 				camera.position.set( 0, 15, 150 );
 				camera.lookAt( 0, 0, 0 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x040306 );
-				scene.fog = new THREE.Fog( 0x040306, 10, 300 );
+				scene = new Scene();
+				scene.background = new Color( 0x040306 );
+				scene.fog = new Fog( 0x040306, 10, 300 );
 
 				// TEXTURES
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 
 				var texture = textureLoader.load( "textures/disturb.jpg" );
 				texture.repeat.set( 20, 10 );
-				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-				texture.format = THREE.RGBFormat;
+				texture.wrapS = texture.wrapT = RepeatWrapping;
+				texture.format = RGBFormat;
 
 				// MATERIALS
 
-				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture } );
-				var objectMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0.5, metalness: 1.0 } );
+				var groundMaterial = new MeshPhongMaterial( { color: 0xffffff, map: texture } );
+				var objectMaterial = new MeshStandardMaterial( { color: 0xffffff, roughness: 0.5, metalness: 1.0 } );
 
 				// GROUND
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 800, 400, 2, 2 ), groundMaterial );
+				var mesh = new Mesh( new PlaneBufferGeometry( 800, 400, 2, 2 ), groundMaterial );
 				mesh.position.y = - 5;
 				mesh.rotation.x = - Math.PI / 2;
 				scene.add( mesh );
 
 				// OBJECTS
 
-				var objectGeometry = new THREE.TorusBufferGeometry( 1.5, 0.4, 8, 16 );
+				var objectGeometry = new TorusBufferGeometry( 1.5, 0.4, 8, 16 );
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
-					var mesh = new THREE.Mesh( objectGeometry, objectMaterial );
+					var mesh = new Mesh( objectGeometry, objectMaterial );
 
 					mesh.position.x = 400 * ( 0.5 - Math.random() );
 					mesh.position.y = 50 * ( 0.5 - Math.random() ) + 25;
@@ -104,39 +115,39 @@
 
 				var c1 = 0xff0040, c2 = 0x0040ff, c3 = 0x80ff80, c4 = 0xffaa00, c5 = 0x00ffaa, c6 = 0xff1100;
 
-				var sphere = new THREE.SphereBufferGeometry( 0.25, 16, 8 );
+				var sphere = new SphereBufferGeometry( 0.25, 16, 8 );
 
-				light1 = new THREE.PointLight( c1, intensity, distance, decay );
-				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c1 } ) ) );
+				light1 = new PointLight( c1, intensity, distance, decay );
+				light1.add( new Mesh( sphere, new MeshBasicMaterial( { color: c1 } ) ) );
 				scene.add( light1 );
 
-				light2 = new THREE.PointLight( c2, intensity, distance, decay );
-				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c2 } ) ) );
+				light2 = new PointLight( c2, intensity, distance, decay );
+				light2.add( new Mesh( sphere, new MeshBasicMaterial( { color: c2 } ) ) );
 				scene.add( light2 );
 
-				light3 = new THREE.PointLight( c3, intensity, distance, decay );
-				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c3 } ) ) );
+				light3 = new PointLight( c3, intensity, distance, decay );
+				light3.add( new Mesh( sphere, new MeshBasicMaterial( { color: c3 } ) ) );
 				scene.add( light3 );
 
-				light4 = new THREE.PointLight( c4, intensity, distance, decay );
-				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c4 } ) ) );
+				light4 = new PointLight( c4, intensity, distance, decay );
+				light4.add( new Mesh( sphere, new MeshBasicMaterial( { color: c4 } ) ) );
 				scene.add( light4 );
 
-				light5 = new THREE.PointLight( c5, intensity, distance, decay );
-				light5.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c5 } ) ) );
+				light5 = new PointLight( c5, intensity, distance, decay );
+				light5.add( new Mesh( sphere, new MeshBasicMaterial( { color: c5 } ) ) );
 				scene.add( light5 );
 
-				light6 = new THREE.PointLight( c6, intensity, distance, decay );
-				light6.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c6 } ) ) );
+				light6 = new PointLight( c6, intensity, distance, decay );
+				light6.add( new Mesh( sphere, new MeshBasicMaterial( { color: c6 } ) ) );
 				scene.add( light6 );
 
-				var dlight = new THREE.DirectionalLight( 0xffffff, 0.05 );
+				var dlight = new DirectionalLight( 0xffffff, 0.05 );
 				dlight.position.set( 0.5, 1, 0 ).normalize();
 				scene.add( dlight );
 
 				// RENDERER
 
-				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 );
@@ -146,7 +157,7 @@
 
 				// CONTROLS
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.rotateSpeed = 1.0;
 				controls.zoomSpeed = 1.2;

examples/webgl_lights_rectarealight.html

@@ -13,24 +13,34 @@
 			by <a href="http://github.com/abelnation" target="_blank" rel="noopener">abelnation</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/lights/RectAreaLightUniformsLib.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BackSide,
+				BoxBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				MeshStandardMaterial,
+				PCFSoftShadowMap,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RectAreaLight,
+				Scene,
+				SphereBufferGeometry,
+				TorusKnotBufferGeometry,
+				Vector3,
+				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 { RectAreaLightUniformsLib } from './jsm/lights/RectAreaLightUniformsLib.js';
 
 			var renderer, scene, camera;
 
-			var origin = new THREE.Vector3();
+			var origin = new Vector3();
 
 			var rectLight;
 
@@ -42,11 +52,11 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = PCFSoftShadowMap;
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 				document.body.appendChild( renderer.domElement );
@@ -68,64 +78,64 @@
 
 				}
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 20, 35 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+				var ambient = new AmbientLight( 0xffffff, 0.1 );
 				scene.add( ambient );
 
-				THREE.RectAreaLightUniformsLib.init();
+				RectAreaLightUniformsLib.init();
 
-				rectLight = new THREE.RectAreaLight( 0xffffff, 1, 10, 10 );
+				rectLight = new RectAreaLight( 0xffffff, 1, 10, 10 );
 				rectLight.position.set( 5, 5, 0 );
 				scene.add( rectLight );
 
-				var rectLightMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { side: THREE.BackSide } ) );
+				var rectLightMesh = new Mesh( new PlaneBufferGeometry(), new MeshBasicMaterial( { side: BackSide } ) );
 				rectLightMesh.scale.x = rectLight.width;
 				rectLightMesh.scale.y = rectLight.height;
 				rectLight.add( rectLightMesh );
 
-				var rectLightMeshBack = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { color: 0x080808 } ) );
+				var rectLightMeshBack = new Mesh( new PlaneBufferGeometry(), new MeshBasicMaterial( { color: 0x080808 } ) );
 				rectLightMesh.add( rectLightMeshBack );
 
-				var geoFloor = new THREE.BoxBufferGeometry( 2000, 0.1, 2000 );
-				var matStdFloor = new THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
-				var mshStdFloor = new THREE.Mesh( geoFloor, matStdFloor );
+				var geoFloor = new BoxBufferGeometry( 2000, 0.1, 2000 );
+				var matStdFloor = new MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } );
+				var mshStdFloor = new Mesh( geoFloor, matStdFloor );
 				scene.add( mshStdFloor );
 
-				var matStdObjects = new THREE.MeshStandardMaterial( { color: 0xA00000, roughness: 0, metalness: 0 } );
+				var matStdObjects = new MeshStandardMaterial( { color: 0xA00000, roughness: 0, metalness: 0 } );
 
-				var geoBox = new THREE.BoxBufferGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
-				var mshStdBox = new THREE.Mesh( geoBox, matStdObjects );
+				var geoBox = new BoxBufferGeometry( Math.PI, Math.sqrt( 2 ), Math.E );
+				var mshStdBox = new Mesh( geoBox, matStdObjects );
 				mshStdBox.position.set( 0, 5, 0 );
 				mshStdBox.rotation.set( 0, Math.PI / 2.0, 0 );
 				mshStdBox.castShadow = true;
 				mshStdBox.receiveShadow = true;
 				scene.add( mshStdBox );
 
-				var geoSphere = new THREE.SphereBufferGeometry( 1.5, 32, 32 );
-				var mshStdSphere = new THREE.Mesh( geoSphere, matStdObjects );
+				var geoSphere = new SphereBufferGeometry( 1.5, 32, 32 );
+				var mshStdSphere = new Mesh( geoSphere, matStdObjects );
 				mshStdSphere.position.set( - 5, 5, 0 );
 				mshStdSphere.castShadow = true;
 				mshStdSphere.receiveShadow = true;
 				scene.add( mshStdSphere );
 
-				var geoKnot = new THREE.TorusKnotBufferGeometry( 1.5, 0.5, 100, 16 );
-				var mshStdKnot = new THREE.Mesh( geoKnot, matStdObjects );
+				var geoKnot = new TorusKnotBufferGeometry( 1.5, 0.5, 100, 16 );
+				var mshStdKnot = new Mesh( geoKnot, matStdObjects );
 				mshStdKnot.position.set( 5, 5, 0 );
 				mshStdKnot.castShadow = true;
 				mshStdKnot.receiveShadow = true;
 				scene.add( mshStdKnot );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.copy( mshStdBox.position );
 				controls.update();
 
 				// GUI
 
-				var gui = new dat.GUI( { width: 300 } );
+				var gui = new GUI( { width: 300 } );
 				gui.open();
 
 				param = {

examples/webgl_lights_spotlight.html

@@ -12,20 +12,26 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - spotlight by <a href="http://master-domain.com" target="_blank" rel="noopener">Master James</a><br />
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.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 {
+				AmbientLight,
+				AxesHelper,
+				BoxBufferGeometry,
+				CameraHelper,
+				Mesh,
+				MeshPhongMaterial,
+				PCFSoftShadowMap,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				SpotLight,
+				SpotLightHelper,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var renderer, scene, camera;
 
@@ -35,31 +41,31 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = PCFSoftShadowMap;
 
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 65, 8, - 10 );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 20;
 				controls.maxDistance = 500;
 				controls.enablePan = false;
 
-				var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );
+				var ambient = new AmbientLight( 0xffffff, 0.1 );
 				scene.add( ambient );
 
-				spotLight = new THREE.SpotLight( 0xffffff, 1 );
+				spotLight = new SpotLight( 0xffffff, 1 );
 				spotLight.position.set( 15, 40, 35 );
 				spotLight.angle = Math.PI / 4;
 				spotLight.penumbra = 0.05;
@@ -73,29 +79,29 @@
 				spotLight.shadow.camera.far = 200;
 				scene.add( spotLight );
 
-				lightHelper = new THREE.SpotLightHelper( spotLight );
+				lightHelper = new SpotLightHelper( spotLight );
 				scene.add( lightHelper );
 
-				shadowCameraHelper = new THREE.CameraHelper( spotLight.shadow.camera );
+				shadowCameraHelper = new CameraHelper( spotLight.shadow.camera );
 				scene.add( shadowCameraHelper );
 
-				scene.add( new THREE.AxesHelper( 10 ) );
+				scene.add( new AxesHelper( 10 ) );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
+				var material = new MeshPhongMaterial( { color: 0x808080, dithering: true } );
 
-				var geometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
+				var geometry = new PlaneBufferGeometry( 2000, 2000 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.set( 0, - 1, 0 );
 				mesh.rotation.x = - Math.PI * 0.5;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
+				var material = new MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
 
-				var geometry = new THREE.BoxBufferGeometry( 3, 1, 2 );
+				var geometry = new BoxBufferGeometry( 3, 1, 2 );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.set( 40, 2, 0 );
 				mesh.castShadow = true;
 				scene.add( mesh );
@@ -128,7 +134,7 @@
 
 			function buildGui() {
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				var params = {
 					'light color': spotLight.color.getHex(),

examples/webgl_lights_spotlights.html

@@ -13,40 +13,46 @@
 			by <a href="http://master-domain.com" target="_blank" rel="noopener">Master James</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
 		<script src="js/libs/tween.min.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
-
-			var renderer = new THREE.WebGLRenderer();
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Mesh,
+				MeshPhongMaterial,
+				PCFSoftShadowMap,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				SpotLight,
+				SpotLightHelper,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+
+
+			var renderer = new WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 
-			var camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
+			var camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 2000 );
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+			var controls = new OrbitControls( camera, renderer.domElement );
 
-			var scene = new THREE.Scene();
+			var scene = new Scene();
 
-			var matFloor = new THREE.MeshPhongMaterial();
-			var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
+			var matFloor = new MeshPhongMaterial();
+			var matBox = new MeshPhongMaterial( { color: 0xaaaaaa } );
 
-			var geoFloor = new THREE.PlaneBufferGeometry( 2000, 2000 );
-			var geoBox = new THREE.BoxBufferGeometry( 3, 1, 2 );
+			var geoFloor = new PlaneBufferGeometry( 2000, 2000 );
+			var geoBox = new BoxBufferGeometry( 3, 1, 2 );
 
-			var mshFloor = new THREE.Mesh( geoFloor, matFloor );
+			var mshFloor = new Mesh( geoFloor, matFloor );
 			mshFloor.rotation.x = - Math.PI * 0.5;
-			var mshBox = new THREE.Mesh( geoBox, matBox );
+			var mshBox = new Mesh( geoBox, matBox );
 
-			var ambient = new THREE.AmbientLight( 0x111111 );
+			var ambient = new AmbientLight( 0x111111 );
 
 			var spotLight1 = createSpotlight( 0xFF7F00 );
 			var spotLight2 = createSpotlight( 0x00FF7F );
@@ -57,7 +63,7 @@
 			function init() {
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = PCFSoftShadowMap;
 
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
@@ -68,9 +74,9 @@
 				spotLight2.position.set( 0, 40, 35 );
 				spotLight3.position.set( - 15, 40, 45 );
 
-				lightHelper1 = new THREE.SpotLightHelper( spotLight1 );
-				lightHelper2 = new THREE.SpotLightHelper( spotLight2 );
-				lightHelper3 = new THREE.SpotLightHelper( spotLight3 );
+				lightHelper1 = new SpotLightHelper( spotLight1 );
+				lightHelper2 = new SpotLightHelper( spotLight2 );
+				lightHelper3 = new SpotLightHelper( spotLight3 );
 
 				matFloor.color.set( 0x808080 );
 
@@ -99,7 +105,7 @@
 
 			function createSpotlight( color ) {
 
-				var newObj = new THREE.SpotLight( color, 2 );
+				var newObj = new SpotLight( color, 2 );
 
 				newObj.castShadow = true;
 				newObj.angle = 0.3;

examples/webgl_lightshafts.html

@@ -13,13 +13,6 @@
 			Model by <a href="https://skfb.ly/6ICER" target="_blank" rel="noopener">Splodeman</a><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/WebGL.js"></script>
-
 		<script type="x-shader/x-vertex" id="vertexShader">
 
 		#include <common>
@@ -71,13 +64,25 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AdditiveBlending,
+				Clock,
+				Color,
+				DirectionalLight,
+				DoubleSide,
+				HemisphereLight,
+				Mesh,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				ShaderMaterial,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var container, controls, clock;
 			var camera, scene, renderer, uniforms;
@@ -90,25 +95,25 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( 3.2, 3, 3.7 );
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xcf8b74 );
+				scene = new Scene();
+				scene.background = new Color( 0xcf8b74 );
 
-				var	light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				var	light = new HemisphereLight( 0xffffff, 0x444444 );
 				light.position.set( 0, 20, 0 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 20, 10 );
 				scene.add( light );
 
 			 	// light shafts definition
 
-				var textureLoader = new THREE.TextureLoader();
+				var textureLoader = new TextureLoader();
 				var texture = textureLoader.load( 'textures/lightShaft.png' );
 
 				uniforms = {
@@ -122,7 +127,7 @@
 					},
 					// the color of the ray
 					color: {
-						value: new THREE.Color( 0xdadc9f )
+						value: new Color( 0xdadc9f )
 					},
 					// the visual representation of the ray highly depends on the used texture
 					texture: {
@@ -138,21 +143,21 @@
 					}
 				};
 
-				var lightShaftMaterial = new THREE.ShaderMaterial( {
+				var lightShaftMaterial = new ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-					blending: THREE.AdditiveBlending,
+					blending: AdditiveBlending,
 					depthWrite: false,
 					transparent: true,
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
-				var lightShaftGeometry = new THREE.PlaneBufferGeometry( 0.5, 5 );
+				var lightShaftGeometry = new PlaneBufferGeometry( 0.5, 5 );
 
 				// model
 
-				var loader = new THREE.GLTFLoader().setPath( 'models/gltf/Tree/' );
+				var loader = new GLTFLoader().setPath( 'models/gltf/Tree/' );
 				loader.load( 'tree.glb', function ( gltf ) {
 
 					gltf.scene.traverse( function ( child ) {
@@ -172,7 +177,7 @@
 
 					for ( var i = 0; i < 5; i ++ ) {
 
-						var lightShaft = new THREE.Mesh( lightShaftGeometry, lightShaftMaterial );
+						var lightShaft = new Mesh( lightShaftGeometry, lightShaftMaterial );
 						lightShaft.position.x = - 1 + 1.5 * Math.sign( ( i % 2 ) );
 						lightShaft.position.y = 2;
 						lightShaft.position.z = - 1.5 + ( i * 0.5 );
@@ -186,14 +191,14 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
 				renderer.gammaFactor = 2.2;
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0.5, 1.5, 0 );
 				controls.minDistance = 2;
 				controls.maxDistance = 20;

examples/webgl_lines_colors.html

@@ -13,19 +13,22 @@
 			<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/utils/GeometryUtils.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferGeometry,
+				CatmullRomCurve3,
+				Color,
+				Float32BufferAttribute,
+				Line,
+				LineBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				Vector3,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
 			var mouseX = 0, mouseY = 0;
 
@@ -39,23 +42,23 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				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 hilbertPoints = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var hilbertPoints = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var geometry1 = new THREE.BufferGeometry();
-				var geometry2 = new THREE.BufferGeometry();
-				var geometry3 = new THREE.BufferGeometry();
+				var geometry1 = new BufferGeometry();
+				var geometry2 = new BufferGeometry();
+				var geometry3 = new BufferGeometry();
 
 				var subdivisions = 6;
 
@@ -64,10 +67,10 @@
 				var colors2 = [];
 				var colors3 = [];
 
-				var point = new THREE.Vector3();
-				var color = new THREE.Color();
+				var point = new Vector3();
+				var color = new Color();
 
-				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
+				var spline = new CatmullRomCurve3( hilbertPoints );
 
 				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
@@ -87,19 +90,19 @@
 
 				}
 
-				geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry1.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry2.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry3.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
-				geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
-				geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
-				geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
+				geometry1.addAttribute( 'color', new Float32BufferAttribute( colors1, 3 ) );
+				geometry2.addAttribute( 'color', new Float32BufferAttribute( colors2, 3 ) );
+				geometry3.addAttribute( 'color', new Float32BufferAttribute( colors3, 3 ) );
 
 				//
 
-				var geometry4 = new THREE.BufferGeometry();
-				var geometry5 = new THREE.BufferGeometry();
-				var geometry6 = new THREE.BufferGeometry();
+				var geometry4 = new BufferGeometry();
+				var geometry5 = new BufferGeometry();
+				var geometry6 = new BufferGeometry();
 
 				vertices = [];
 				colors1 = [];
@@ -123,17 +126,17 @@
 
 				}
 
-				geometry4.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry5.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry6.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry4.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry5.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry6.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
-				geometry4.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
-				geometry5.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
-				geometry6.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
+				geometry4.addAttribute( 'color', new Float32BufferAttribute( colors1, 3 ) );
+				geometry5.addAttribute( 'color', new Float32BufferAttribute( colors2, 3 ) );
+				geometry6.addAttribute( 'color', new Float32BufferAttribute( colors3, 3 ) );
 
 				// Create lines and add to scene
 
-				var	material = new THREE.LineBasicMaterial( { color: 0xffffff, vertexColors: THREE.VertexColors } );
+				var	material = new LineBasicMaterial( { color: 0xffffff, vertexColors: VertexColors } );
 
 				var line, p, scale = 0.3, d = 225;
 
@@ -150,7 +153,7 @@
 				for ( var i = 0; i < parameters.length; i ++ ) {
 
 					p = parameters[ i ];
-					line = new THREE.Line( p[ 3 ], p[ 0 ] );
+					line = new Line( p[ 3 ], p[ 0 ] );
 					line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
 					line.position.x = p[ 2 ][ 0 ];
 					line.position.y = p[ 2 ][ 1 ];

examples/webgl_lines_dashed.html

@@ -11,20 +11,25 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dashed lines example</div>
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/utils/GeometryUtils.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 {
+				BufferGeometry,
+				CatmullRomCurve3,
+				Color,
+				Float32BufferAttribute,
+				Fog,
+				Line,
+				LineDashedMaterial,
+				LineSegments,
+				PerspectiveCamera,
+				Scene,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
 			var renderer, scene, camera, stats;
 			var objects = [];
@@ -36,23 +41,23 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
+				camera = new PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
 				camera.position.z = 150;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x111111 );
-				scene.fog = new THREE.Fog( 0x111111, 150, 200 );
+				scene = new Scene();
+				scene.background = new Color( 0x111111 );
+				scene.fog = new Fog( 0x111111, 150, 200 );
 
 				var subdivisions = 6;
 				var recursion = 1;
 
-				var points = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
-				var spline = new THREE.CatmullRomCurve3( points );
+				var points = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var spline = new CatmullRomCurve3( points );
 
 				var samples = spline.getPoints( points.length * subdivisions );
-				var geometrySpline = new THREE.BufferGeometry().setFromPoints( samples );
+				var geometrySpline = new BufferGeometry().setFromPoints( samples );
 
-				var line = new THREE.Line( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );
+				var line = new Line( geometrySpline, new LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );
 				line.computeLineDistances();
 
 				objects.push( line );
@@ -60,13 +65,13 @@
 
 				var geometryCube = cube( 50 );
 
-				var lineSegments = new THREE.LineSegments( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1 } ) );
+				var lineSegments = new LineSegments( geometryCube, new LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1 } ) );
 				lineSegments.computeLineDistances();
 
 				objects.push( lineSegments );
 				scene.add( lineSegments );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
@@ -86,7 +91,7 @@
 
 				var h = size * 0.5;
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var position = [];
 
 				position.push(
@@ -127,7 +132,7 @@
 					h, - h, h
 				 );
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( position, 3 ) );
+				geometry.addAttribute( 'position', new Float32BufferAttribute( position, 3 ) );
 
 				return geometry;
 

examples/webgl_lines_fat.html

@@ -13,33 +13,30 @@
 
 		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - fat lines</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/utils/GeometryUtils.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 src='js/lines/LineSegmentsGeometry.js'></script>
-		<script src='js/lines/LineGeometry.js'></script>
-		<script src='js/lines/WireframeGeometry2.js'></script>
-
-		<script src='js/lines/LineMaterial.js'></script>
-
-		<script src='js/lines/LineSegments2.js'></script>
-		<script src='js/lines/Line2.js'></script>
-		<script src='js/lines/Wireframe.js'></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferGeometry,
+				CatmullRomCurve3,
+				Color,
+				Float32BufferAttribute,
+				Line,
+				LineBasicMaterial,
+				LineDashedMaterial,
+				PerspectiveCamera,
+				Scene,
+				Vector3,
+				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 { Line2 } from './jsm/lines/Line2.js';
+			import { LineMaterial } from './jsm/lines/LineMaterial.js';
+			import { LineGeometry } from './jsm/lines/LineGeometry.js';
+			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
 			var line, renderer, scene, camera, camera2, controls;
 			var line1;
@@ -56,21 +53,21 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( - 40, 0, 60 );
 
-				camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
+				camera2 = new PerspectiveCamera( 40, 1, 1, 1000 );
 				camera2.position.copy( camera.position );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 500;
 
@@ -80,11 +77,11 @@
 				var positions = [];
 				var colors = [];
 
-				var points = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var points = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var spline = new THREE.CatmullRomCurve3( points );
+				var spline = new CatmullRomCurve3( points );
 				var divisions = Math.round( 12 * points.length );
-				var color = new THREE.Color();
+				var color = new Color();
 
 				for ( var i = 0, l = divisions; i < l; i ++ ) {
 
@@ -97,38 +94,38 @@
 				}
 
 
-				// THREE.Line2 ( LineGeometry, LineMaterial )
+				// Line2 ( LineGeometry, LineMaterial )
 
-				var geometry = new THREE.LineGeometry();
+				var geometry = new LineGeometry();
 				geometry.setPositions( positions );
 				geometry.setColors( colors );
 
-				matLine = new THREE.LineMaterial( {
+				matLine = new LineMaterial( {
 
 					color: 0xffffff,
 					linewidth: 5, // in pixels
-					vertexColors: THREE.VertexColors,
+					vertexColors: VertexColors,
 					//resolution:  // to be set by renderer, eventually
 					dashed: false
 
 				} );
 
-				line = new THREE.Line2( geometry, matLine );
+				line = new Line2( geometry, matLine );
 				line.computeLineDistances();
 				line.scale.set( 1, 1, 1 );
 				scene.add( line );
 
 
-				// THREE.Line ( BufferGeometry, LineBasicMaterial ) - rendered with gl.LINE_STRIP
+				// Line ( BufferGeometry, LineBasicMaterial ) - rendered with gl.LINE_STRIP
 
-				var geo = new THREE.BufferGeometry();
-				geo.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
-				geo.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				var geo = new BufferGeometry();
+				geo.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+				geo.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-				matLineBasic = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
-				matLineDashed = new THREE.LineDashedMaterial( { vertexColors: THREE.VertexColors, scale: 2, dashSize: 1, gapSize: 1 } );
+				matLineBasic = new LineBasicMaterial( { vertexColors: VertexColors } );
+				matLineDashed = new LineDashedMaterial( { vertexColors: VertexColors, scale: 2, dashSize: 1, gapSize: 1 } );
 
-				line1 = new THREE.Line( geo, matLineBasic );
+				line1 = new Line( geo, matLineBasic );
 				line1.computeLineDistances();
 				line1.visible = false;
 				scene.add( line1 );
@@ -205,7 +202,7 @@
 
 			function initGui() {
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				var param = {
 					'line type': 0,

examples/webgl_lines_fat_wireframe.html

@@ -13,31 +13,25 @@
 
 		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - fat lines</div>
 
-		<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 src='js/libs/dat.gui.min.js'></script>
-
-		<script src='js/lines/LineSegmentsGeometry.js'></script>
-		<script src='js/lines/LineGeometry.js'></script>
-		<script src='js/lines/WireframeGeometry2.js'></script>
-
-		<script src='js/lines/LineMaterial.js'></script>
-
-		<script src='js/lines/LineSegments2.js'></script>
-		<script src='js/lines/Line2.js'></script>
-		<script src='js/lines/Wireframe.js'></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				IcosahedronBufferGeometry,
+				LineBasicMaterial,
+				LineDashedMaterial,
+				LineSegments,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+				WireframeGeometry
+			} 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 { LineMaterial } from './jsm/lines/LineMaterial.js';
+			import { Wireframe } from './jsm/lines/Wireframe.js';
+			import { WireframeGeometry2 } from './jsm/lines/WireframeGeometry2.js';
 
 			var wireframe, renderer, scene, camera, camera2, controls;
 			var wireframe1;
@@ -54,32 +48,32 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( - 50, 0, 50 );
 
-				camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
+				camera2 = new PerspectiveCamera( 40, 1, 1, 1000 );
 				camera2.position.copy( camera.position );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 10;
 				controls.maxDistance = 500;
 
 
-				// THREE.Wireframe ( WireframeGeometry2, LineMaterial )
+				// Wireframe ( WireframeGeometry2, LineMaterial )
 
-				var geo = new THREE.IcosahedronBufferGeometry( 20, 1 );
+				var geo = new IcosahedronBufferGeometry( 20, 1 );
 
-				var geometry = new THREE.WireframeGeometry2( geo );
+				var geometry = new WireframeGeometry2( geo );
 
-				matLine = new THREE.LineMaterial( {
+				matLine = new LineMaterial( {
 
 					color: 0x4080ff,
 					linewidth: 5, // in pixels
@@ -88,20 +82,20 @@
 
 				} );
 
-				wireframe = new THREE.Wireframe( geometry, matLine );
+				wireframe = new Wireframe( geometry, matLine );
 				wireframe.computeLineDistances();
 				wireframe.scale.set( 1, 1, 1 );
 				scene.add( wireframe );
 
 
-				// THREE.Line ( WireframeGeometry, LineBasicMaterial ) - rendered with gl.LINE
+				// Line ( WireframeGeometry, LineBasicMaterial ) - rendered with gl.LINE
 
-				geo = new THREE.WireframeGeometry( geo );
+				geo = new WireframeGeometry( geo );
 
-				matLineBasic = new THREE.LineBasicMaterial( { color: 0x4080ff } );
-				matLineDashed = new THREE.LineDashedMaterial( { scale: 2, dashSize: 1, gapSize: 1 } );
+				matLineBasic = new LineBasicMaterial( { color: 0x4080ff } );
+				matLineDashed = new LineDashedMaterial( { scale: 2, dashSize: 1, gapSize: 1 } );
 
-				wireframe1 = new THREE.LineSegments( geo, matLineBasic );
+				wireframe1 = new LineSegments( geo, matLineBasic );
 				wireframe1.computeLineDistances();
 				wireframe1.visible = false;
 				scene.add( wireframe1 );
@@ -178,7 +172,7 @@
 
 			function initGui() {
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				var param = {
 					'line type': 0,

examples/webgl_lines_sphere.html

@@ -12,18 +12,17 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - lines WebGL demo
 		</div>
 
-		<script src="../build/three.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 {
+				BufferGeometry,
+				Float32BufferAttribute,
+				LineBasicMaterial,
+				LineSegments,
+				PerspectiveCamera,
+				Scene,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			var SCREEN_WIDTH = window.innerWidth,
 				SCREEN_HEIGHT = window.innerHeight,
@@ -41,10 +40,10 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
+				camera = new PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var i, line, material, p,
 					parameters = [[ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ],
@@ -56,9 +55,9 @@
 
 					p = parameters[ i ];
 
-					material = new THREE.LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ] } );
+					material = new LineBasicMaterial( { color: p[ 1 ], opacity: p[ 2 ] } );
 
-					line = new THREE.LineSegments( geometry, material );
+					line = new LineSegments( geometry, material );
 					line.scale.x = line.scale.y = line.scale.z = p[ 0 ];
 					line.userData.originalScale = p[ 0 ];
 					line.rotation.y = Math.random() * Math.PI;
@@ -67,7 +66,7 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				document.body.appendChild( renderer.domElement );
@@ -103,10 +102,10 @@
 
 			function createGeometry() {
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var vertices = [];
 
-				var vertex = new THREE.Vector3();
+				var vertex = new Vector3();
 
 				for ( var i = 0; i < 1500; i ++ ) {
 
@@ -124,7 +123,7 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
 				return geometry;