Examples: More module examples.

examples/webgl_decals.html

@@ -14,281 +14,300 @@
 			click to shoot
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/geometries/DecalGeometry.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-
-		var container = document.getElementById( 'container' );
-
-		var renderer, scene, camera, stats;
-		var mesh;
-		var raycaster;
-		var line;
-
-		var intersection = {
-			intersects: false,
-			point: new THREE.Vector3(),
-			normal: new THREE.Vector3()
-		};
-		var mouse = new THREE.Vector2();
-
-		var textureLoader = new THREE.TextureLoader();
-		var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
-		var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
-
-		var decalMaterial = new THREE.MeshPhongMaterial( {
-			specular: 0x444444,
-			map: decalDiffuse,
-			normalMap: decalNormal,
-			normalScale: new THREE.Vector2( 1, 1 ),
-			shininess: 30,
-			transparent: true,
-			depthTest: true,
-			depthWrite: false,
-			polygonOffset: true,
-			polygonOffsetFactor: - 4,
-			wireframe: false
-		} );
-
-		var decals = [];
-		var mouseHelper;
-		var position = new THREE.Vector3();
-		var orientation = new THREE.Euler();
-		var size = new THREE.Vector3( 10, 10, 10 );
-
-		var params = {
-			minScale: 10,
-			maxScale: 20,
-			rotate: true,
-			clear: function () {
-
-				removeDecals();
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				BufferGeometry,
+				DirectionalLight,
+				Euler,
+				Line,
+				LineBasicMaterial,
+				Mesh,
+				MeshNormalMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Raycaster,
+				Scene,
+				TextureLoader,
+				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 { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { DecalGeometry } from './jsm/geometries/DecalGeometry.js';
+
+			var container = document.getElementById( 'container' );
+
+			var renderer, scene, camera, stats;
+			var mesh;
+			var raycaster;
+			var line;
+
+			var intersection = {
+				intersects: false,
+				point: new Vector3(),
+				normal: new Vector3()
+			};
+			var mouse = new Vector2();
+
+			var textureLoader = new TextureLoader();
+			var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
+			var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
+
+			var decalMaterial = new MeshPhongMaterial( {
+				specular: 0x444444,
+				map: decalDiffuse,
+				normalMap: decalNormal,
+				normalScale: new Vector2( 1, 1 ),
+				shininess: 30,
+				transparent: true,
+				depthTest: true,
+				depthWrite: false,
+				polygonOffset: true,
+				polygonOffsetFactor: - 4,
+				wireframe: false
+			} );
 
-			}
-		};
+			var decals = [];
+			var mouseHelper;
+			var position = new Vector3();
+			var orientation = new Euler();
+			var size = new Vector3( 10, 10, 10 );
 
-		window.addEventListener( 'load', init );
+			var params = {
+				minScale: 10,
+				maxScale: 20,
+				rotate: true,
+				clear: function () {
 
-		function init() {
+					removeDecals();
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
+				}
+			};
 
-			stats = new Stats();
-			container.appendChild( stats.dom );
+			window.addEventListener( 'load', init );
 
-			scene = new THREE.Scene();
+			function init() {
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.z = 120;
-			camera.target = new THREE.Vector3();
+				renderer = new WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
-			controls.minDistance = 50;
-			controls.maxDistance = 200;
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
-			scene.add( new THREE.AmbientLight( 0x443333 ) );
+				scene = new Scene();
 
-			var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-			light.position.set( 1, 0.75, 0.5 );
-			scene.add( light );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 120;
+				camera.target = new Vector3();
 
-			var light = new THREE.DirectionalLight( 0xccccff, 1 );
-			light.position.set( - 1, 0.75, - 0.5 );
-			scene.add( light );
+				var controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 50;
+				controls.maxDistance = 200;
 
-			var geometry = new THREE.BufferGeometry();
-			geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );
+				scene.add( new AmbientLight( 0x443333 ) );
 
-			line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
-			scene.add( line );
+				var light = new DirectionalLight( 0xffddcc, 1 );
+				light.position.set( 1, 0.75, 0.5 );
+				scene.add( light );
 
-			loadLeePerrySmith();
+				var light = new DirectionalLight( 0xccccff, 1 );
+				light.position.set( - 1, 0.75, - 0.5 );
+				scene.add( light );
 
-			raycaster = new THREE.Raycaster();
+				var geometry = new BufferGeometry();
+				geometry.setFromPoints( [ new Vector3(), new Vector3() ] );
 
-			mouseHelper = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
-			mouseHelper.visible = false;
-			scene.add( mouseHelper );
+				line = new Line( geometry, new LineBasicMaterial() );
+				scene.add( line );
 
-			window.addEventListener( 'resize', onWindowResize, false );
+				loadLeePerrySmith();
 
-			var moved = false;
+				raycaster = new Raycaster();
 
-			controls.addEventListener( 'change', function () {
+				mouseHelper = new Mesh( new BoxBufferGeometry( 1, 1, 10 ), new MeshNormalMaterial() );
+				mouseHelper.visible = false;
+				scene.add( mouseHelper );
 
-				moved = true;
+				window.addEventListener( 'resize', onWindowResize, false );
 
-			} );
+				var moved = false;
 
-			window.addEventListener( 'mousedown', function () {
+				controls.addEventListener( 'change', function () {
 
-				moved = false;
+					moved = true;
 
-			}, false );
+				} );
 
-			window.addEventListener( 'mouseup', function () {
+				window.addEventListener( 'mousedown', function () {
 
-				checkIntersection();
-				if ( ! moved && intersection.intersects ) shoot();
+					moved = false;
 
-			} );
+				}, false );
 
-			window.addEventListener( 'mousemove', onTouchMove );
-			window.addEventListener( 'touchmove', onTouchMove );
+				window.addEventListener( 'mouseup', function () {
 
-			function onTouchMove( event ) {
+					checkIntersection();
+					if ( ! moved && intersection.intersects ) shoot();
 
-				var x, y;
+				} );
 
-				if ( event.changedTouches ) {
+				window.addEventListener( 'mousemove', onTouchMove );
+				window.addEventListener( 'touchmove', onTouchMove );
 
-					x = event.changedTouches[ 0 ].pageX;
-					y = event.changedTouches[ 0 ].pageY;
+				function onTouchMove( event ) {
 
-				} else {
+					var x, y;
 
-					x = event.clientX;
-					y = event.clientY;
+					if ( event.changedTouches ) {
 
-				}
+						x = event.changedTouches[ 0 ].pageX;
+						y = event.changedTouches[ 0 ].pageY;
 
-				mouse.x = ( x / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( y / window.innerHeight ) * 2 + 1;
+					} else {
 
-				checkIntersection();
+						x = event.clientX;
+						y = event.clientY;
 
-			}
+					}
 
-			function checkIntersection() {
+					mouse.x = ( x / window.innerWidth ) * 2 - 1;
+					mouse.y = - ( y / window.innerHeight ) * 2 + 1;
 
-				if ( ! mesh ) return;
+					checkIntersection();
 
-				raycaster.setFromCamera( mouse, camera );
+				}
 
-				var intersects = raycaster.intersectObjects( [ mesh ] );
+				function checkIntersection() {
 
-				if ( intersects.length > 0 ) {
+					if ( ! mesh ) return;
 
-					var p = intersects[ 0 ].point;
-					mouseHelper.position.copy( p );
-					intersection.point.copy( p );
+					raycaster.setFromCamera( mouse, camera );
 
-					var n = intersects[ 0 ].face.normal.clone();
-					n.transformDirection( mesh.matrixWorld );
-					n.multiplyScalar( 10 );
-					n.add( intersects[ 0 ].point );
+					var intersects = raycaster.intersectObjects( [ mesh ] );
 
-					intersection.normal.copy( intersects[ 0 ].face.normal );
-					mouseHelper.lookAt( n );
+					if ( intersects.length > 0 ) {
 
-					var positions = line.geometry.attributes.position;
-					positions.setXYZ( 0, p.x, p.y, p.z );
-					positions.setXYZ( 1, n.x, n.y, n.z );
-					positions.needsUpdate = true;
+						var p = intersects[ 0 ].point;
+						mouseHelper.position.copy( p );
+						intersection.point.copy( p );
 
-					intersection.intersects = true;
+						var n = intersects[ 0 ].face.normal.clone();
+						n.transformDirection( mesh.matrixWorld );
+						n.multiplyScalar( 10 );
+						n.add( intersects[ 0 ].point );
 
-				} else {
+						intersection.normal.copy( intersects[ 0 ].face.normal );
+						mouseHelper.lookAt( n );
 
-					intersection.intersects = false;
+						var positions = line.geometry.attributes.position;
+						positions.setXYZ( 0, p.x, p.y, p.z );
+						positions.setXYZ( 1, n.x, n.y, n.z );
+						positions.needsUpdate = true;
 
-				}
+						intersection.intersects = true;
 
-			}
+					} else {
 
-			var gui = new dat.GUI();
+						intersection.intersects = false;
 
-			gui.add( params, 'minScale', 1, 30 );
-			gui.add( params, 'maxScale', 1, 30 );
-			gui.add( params, 'rotate' );
-			gui.add( params, 'clear' );
-			gui.open();
+					}
 
-			onWindowResize();
-			animate();
+				}
 
-		}
+				var gui = new GUI();
 
-		function loadLeePerrySmith() {
+				gui.add( params, 'minScale', 1, 30 );
+				gui.add( params, 'maxScale', 1, 30 );
+				gui.add( params, 'rotate' );
+				gui.add( params, 'clear' );
+				gui.open();
 
-			var loader = new THREE.GLTFLoader();
+				onWindowResize();
+				animate();
 
-			loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
+			}
 
-				mesh = gltf.scene.children[ 0 ];
-				mesh.material = new THREE.MeshPhongMaterial( {
-					specular: 0x111111,
-					map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
-					specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
-					normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
-					shininess: 25
-				} );
+			function loadLeePerrySmith() {
 
-				scene.add( mesh );
-				mesh.scale.set( 10, 10, 10 );
+				var loader = new GLTFLoader();
 
-			} );
+				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
-		}
+					mesh = gltf.scene.children[ 0 ];
+					mesh.material = new MeshPhongMaterial( {
+						specular: 0x111111,
+						map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
+						specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
+						normalMap: textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' ),
+						shininess: 25
+					} );
 
-		function shoot() {
+					scene.add( mesh );
+					mesh.scale.set( 10, 10, 10 );
 
-			position.copy( intersection.point );
-			orientation.copy( mouseHelper.rotation );
+				} );
 
-			if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
+			}
 
-			var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
-			size.set( scale, scale, scale );
+			function shoot() {
 
-			var material = decalMaterial.clone();
-			material.color.setHex( Math.random() * 0xffffff );
+				position.copy( intersection.point );
+				orientation.copy( mouseHelper.rotation );
 
-			var m = new THREE.Mesh( new THREE.DecalGeometry( mesh, position, orientation, size ), material );
+				if ( params.rotate ) orientation.z = Math.random() * 2 * Math.PI;
 
-			decals.push( m );
-			scene.add( m );
+				var scale = params.minScale + Math.random() * ( params.maxScale - params.minScale );
+				size.set( scale, scale, scale );
 
-		}
+				var material = decalMaterial.clone();
+				material.color.setHex( Math.random() * 0xffffff );
 
-		function removeDecals() {
+				var m = new Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
 
-			decals.forEach( function ( d ) {
+				decals.push( m );
+				scene.add( m );
 
-				scene.remove( d );
+			}
 
-			} );
+			function removeDecals() {
 
-			decals = [];
+				decals.forEach( function ( d ) {
 
-		}
+					scene.remove( d );
 
-		function onWindowResize() {
+				} );
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
+				decals = [];
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-		}
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-		function animate() {
+			}
+
+			function animate() {
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-			stats.update();
+				stats.update();
 
-		}
+			}
 
 		</script>
 

examples/webgl_depth_texture.html

@@ -63,11 +63,27 @@
 			</div>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				DepthTexture,
+				Mesh,
+				MeshBasicMaterial,
+				NearestFilter,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RGBFormat,
+				Scene,
+				ShaderMaterial,
+				TorusKnotBufferGeometry,
+				UnsignedShortType,
+				WebGLRenderer,
+				WebGLRenderTarget
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var camera, scene, renderer, stats;
 			var target;
@@ -79,7 +95,7 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
+				renderer = new WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
 
 				if ( ! renderer.extensions.get( 'WEBGL_depth_texture' ) ) {
 
@@ -97,27 +113,27 @@
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 				camera.position.z = 4;
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.enableDamping = true;
 				controls.dampingFactor = 0.25;
 				controls.rotateSpeed = 0.35;
 
 				// Create a multi render target with Float buffers
-				target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
-				target.texture.format = THREE.RGBFormat;
-				target.texture.minFilter = THREE.NearestFilter;
-				target.texture.magFilter = THREE.NearestFilter;
+				target = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
+				target.texture.format = RGBFormat;
+				target.texture.minFilter = NearestFilter;
+				target.texture.magFilter = NearestFilter;
 				target.texture.generateMipmaps = false;
 				target.stencilBuffer = false;
 				target.depthBuffer = true;
-				target.depthTexture = new THREE.DepthTexture();
-				target.depthTexture.type = THREE.UnsignedShortType;
+				target.depthTexture = new DepthTexture();
+				target.depthTexture.type = UnsignedShortType;
 
 				// Our scene
-				scene = new THREE.Scene();
+				scene = new Scene();
 				setupScene();
 
 				// Setup post-processing step
@@ -131,8 +147,8 @@
 			function setupPost() {
 
 				// Setup post processing stage
-				postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-				var postMaterial = new THREE.ShaderMaterial( {
+				postCamera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+				var postMaterial = new ShaderMaterial( {
 					vertexShader: document.querySelector( '#post-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
 					uniforms: {
@@ -142,21 +158,21 @@
 						tDepth: { value: target.depthTexture }
 					}
 				} );
-				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
-				var postQuad = new THREE.Mesh( postPlane, postMaterial );
-				postScene = new THREE.Scene();
+				var postPlane = new PlaneBufferGeometry( 2, 2 );
+				var postQuad = new Mesh( postPlane, postMaterial );
+				postScene = new Scene();
 				postScene.add( postQuad );
 
 			}
 
 			function setupScene() {
 
-				//var diffuse = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
-				//diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping;
+				//var diffuse = new TextureLoader().load( 'textures/brick_diffuse.jpg' );
+				//diffuse.wrapS = diffuse.wrapT = RepeatWrapping;
 
 				// Setup some geometries
-				var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
-				var material = new THREE.MeshBasicMaterial( { color: 'blue' } );
+				var geometry = new TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
+				var material = new MeshBasicMaterial( { color: 'blue' } );
 
 				var count = 50;
 				var scale = 5;
@@ -167,7 +183,7 @@
 					var z = ( Math.random() * 2.0 ) - 1.0;
 					var zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.set(
 						Math.cos( r ) * zScale,
 						Math.sin( r ) * zScale,

examples/webgl_effects_anaglyph.html

@@ -12,17 +12,18 @@
 			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/effects/AnaglyphEffect.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { AnaglyphEffect } from './jsm/effects/AnaglyphEffect.js';
 
 			var container, camera, scene, renderer, effect;
 
@@ -44,7 +45,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
@@ -56,17 +57,17 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				var textureCube = new CubeTextureLoader().load( urls );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.background = textureCube;
 
-				var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				var geometry = new SphereBufferGeometry( 0.1, 32, 16 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -82,14 +83,14 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 
 				var width = window.innerWidth || 2;
 				var height = window.innerHeight || 2;
 
-				effect = new THREE.AnaglyphEffect( renderer );
+				effect = new AnaglyphEffect( renderer );
 				effect.setSize( width, height );
 
 				//

examples/webgl_effects_ascii.html

@@ -9,20 +9,22 @@
 
 	<body>
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - ascii</div>
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/effects/AsciiEffect.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { AsciiEffect } from './jsm/effects/AsciiEffect.js';
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			var camera, controls, scene, renderer, effect;
 
@@ -35,34 +37,34 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.y = 150;
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var light = new THREE.PointLight( 0xffffff );
+				var light = new PointLight( 0xffffff );
 				light.position.set( 500, 500, 500 );
 				scene.add( light );
 
-				var light = new THREE.PointLight( 0xffffff, 0.25 );
+				var light = new PointLight( 0xffffff, 0.25 );
 				light.position.set( - 500, - 500, - 500 );
 				scene.add( light );
 
-				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true } ) );
+				sphere = new Mesh( new SphereBufferGeometry( 200, 20, 10 ), new MeshPhongMaterial( { flatShading: true } ) );
 				scene.add( sphere );
 
 				// Plane
 
-				plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
+				plane = new Mesh( new PlaneBufferGeometry( 400, 400 ), new MeshBasicMaterial( { color: 0xe0e0e0 } ) );
 				plane.position.y = - 200;
 				plane.rotation.x = - Math.PI / 2;
 				scene.add( plane );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				effect = new THREE.AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
+				effect = new AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
 				effect.setSize( window.innerWidth, window.innerHeight );
 				effect.domElement.style.color = 'white';
 				effect.domElement.style.backgroundColor = 'black';
@@ -72,7 +74,7 @@
 
 				document.body.appendChild( effect.domElement );
 
-				controls = new THREE.TrackballControls( camera, effect.domElement );
+				controls = new TrackballControls( camera, effect.domElement );
 
 				//
 

examples/webgl_effects_parallaxbarrier.html

@@ -13,17 +13,18 @@
 			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/effects/ParallaxBarrierEffect.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { ParallaxBarrierEffect } from './jsm/effects/ParallaxBarrierEffect.js';
 
 			var container, camera, scene, renderer, effect;
 
@@ -45,7 +46,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
@@ -57,17 +58,17 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var textureCube = new THREE.CubeTextureLoader().load( urls );
+				var textureCube = new CubeTextureLoader().load( urls );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.background = textureCube;
 
-				var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				var geometry = new SphereBufferGeometry( 0.1, 32, 16 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -83,14 +84,14 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 
 				var width = window.innerWidth || 2;
 				var height = window.innerHeight || 2;
 
-				effect = new THREE.ParallaxBarrierEffect( renderer );
+				effect = new ParallaxBarrierEffect( renderer );
 				effect.setSize( width, height );
 
 				//

examples/webgl_effects_peppersghost.html

@@ -8,117 +8,121 @@
 	</head>
 	<body>
 
-			<div id="info">
-				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
-				<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">how to build the reflective prism</a>
-			</div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="https://en.wikipedia.org/wiki/Pepper%27s_ghost">peppers ghost effect</a> demo <br />
+			<a href="http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS" target="_blank" rel="noopener">how to build the reflective prism</a>
+		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/effects/PeppersGhostEffect.js"></script>
-		<script src="js/WebGL.js"></script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				Float32BufferAttribute,
+				Group,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script>
+			import { PeppersGhostEffect } from './jsm/effects/PeppersGhostEffect.js';
 
-				if ( WEBGL.isWebGLAvailable() === false ) {
+			var container;
 
-					document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+			var camera, scene, renderer, effect;
+			var group;
 
-				}
-
-				var container;
-
-				var camera, scene, renderer, effect;
-				var group;
+			init();
+			animate();
 
-				init();
-				animate();
+			function init() {
 
-				function init() {
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
 
-					container = document.createElement( 'div' );
-					document.body.appendChild( container );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
-					camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				scene = new Scene();
 
-					scene = new THREE.Scene();
+				group = new Group();
+				scene.add( group );
 
-					group = new THREE.Group();
-					scene.add( group );
+				// Cube
 
-					// Cube
+				var geometry = new BoxBufferGeometry( 1, 1, 1 );
+				geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
 
-					var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-					geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
+				var position = geometry.attributes.position;
+				var colors = [];
+				var color = new Color();
 
-					var position = geometry.attributes.position;
-					var colors = [];
-					var color = new THREE.Color();
+				// generate for each side of the cube a different color
 
-					// generate for each side of the cube a different color
+				for ( var i = 0; i < position.count; i += 6 ) {
 
-					for ( var i = 0; i < position.count; i += 6 ) {
+					color.setHex( Math.random() * 0xffffff );
 
-						color.setHex( Math.random() * 0xffffff );
+					// first face
 
-						// first face
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
 
-						colors.push( color.r, color.g, color.b );
-						colors.push( color.r, color.g, color.b );
-						colors.push( color.r, color.g, color.b );
+					// second face
 
-						// second face
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
 
-						colors.push( color.r, color.g, color.b );
-						colors.push( color.r, color.g, color.b );
-						colors.push( color.r, color.g, color.b );
-
-					}
+				}
 
-					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-					var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
+				var material = new MeshBasicMaterial( { vertexColors: VertexColors } );
 
-					for ( var i = 0; i < 10; i ++ ) {
+				for ( var i = 0; i < 10; i ++ ) {
 
-						var cube = new THREE.Mesh( geometry, material );
-						cube.position.x = Math.random() * 2 - 1;
-						cube.position.y = Math.random() * 2 - 1;
-						cube.position.z = Math.random() * 2 - 1;
-						cube.scale.multiplyScalar( Math.random() + 0.5 );
-						group.add( cube );
+					var cube = new Mesh( geometry, material );
+					cube.position.x = Math.random() * 2 - 1;
+					cube.position.y = Math.random() * 2 - 1;
+					cube.position.z = Math.random() * 2 - 1;
+					cube.scale.multiplyScalar( Math.random() + 0.5 );
+					group.add( cube );
 
-					}
+				}
 
-					renderer = new THREE.WebGLRenderer();
-					renderer.setPixelRatio( window.devicePixelRatio );
-					container.appendChild( renderer.domElement );
+				renderer = new WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				container.appendChild( renderer.domElement );
 
-					effect = new THREE.PeppersGhostEffect( renderer );
-					effect.setSize( window.innerWidth, window.innerHeight );
-					effect.cameraDistance = 5;
+				effect = new PeppersGhostEffect( renderer );
+				effect.setSize( window.innerWidth, window.innerHeight );
+				effect.cameraDistance = 5;
 
-					window.addEventListener( 'resize', onWindowResize, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
-				}
+			}
 
-				function onWindowResize() {
+			function onWindowResize() {
 
-					camera.aspect = window.innerWidth / window.innerHeight;
-					camera.updateProjectionMatrix();
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-					effect.setSize( window.innerWidth, window.innerHeight );
+				effect.setSize( window.innerWidth, window.innerHeight );
 
-				}
+			}
 
-				function animate() {
+			function animate() {
 
-					requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-					group.rotation.y += 0.01;
+				group.rotation.y += 0.01;
 
-					effect.render( scene, camera );
+				effect.render( scene, camera );
 
-				}
+			}
 
 		</script>
 

examples/webgl_effects_stereo.html

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

examples/webgl_fire.html

@@ -5,13 +5,6 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
-
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/objects/Fire.js"></script>
-
 	</head>
 	<body>
 
@@ -19,13 +12,22 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> fire and smoke demo
 		</div>
 
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				Scene,
+				Texture,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { Fire } from './jsm/objects/Fire.js';
 
 			var camera, scene, renderer, stats;
 			var fire;
@@ -56,21 +58,21 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
+				camera = new PerspectiveCamera( 70, width / height, 1, 1000 );
 				camera.position.z = 25;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
+				scene = new Scene();
+				scene.background = new Color( 0x000000 );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
-				var plane = new THREE.PlaneBufferGeometry( 20, 20 );
-				fire = new THREE.Fire( plane, {
+				var plane = new PlaneBufferGeometry( 20, 20 );
+				fire = new Fire( plane, {
 					textureWidth: 512,
 					textureHeight: 512,
 					debug: false
@@ -78,7 +80,7 @@
 				fire.position.z = - 2;
 				scene.add( fire );
 
-				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 );
 				renderer.autoClear = false;
@@ -209,7 +211,7 @@
 					context.fillStyle = "black";
 
 					context.strokeText( text, canvas.width / 2, canvas.height * 0.75 );
-					var texture = new THREE.Texture( canvas );
+					var texture = new Texture( canvas );
 					texture.needsUpdate = true;
 
 					fire.setSourceMap( texture );
@@ -217,7 +219,7 @@
 				};
 
 				// dat.gui
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, "Single" );
 				gui.add( params, "Multiple" );

examples/webgl_framebuffer_texture.html

@@ -24,11 +24,6 @@
 				border: 1px solid white;
 			}
 		</style>
-
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-
 	</head>
 	<body>
 
@@ -40,13 +35,27 @@
 			<div></div>
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				DataTexture,
+				Mesh,
+				MeshStandardMaterial,
+				NearestFilter,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PointLight,
+				RGBFormat,
+				Scene,
+				Sprite,
+				SpriteMaterial,
+				TorusKnotBufferGeometry,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var camera, scene, renderer;
 			var mesh, sprite, texture;
@@ -56,7 +65,7 @@
 			var dpr = window.devicePixelRatio;
 
 			var textureSize = 128 * dpr;
-			var vector = new THREE.Vector2();
+			var vector = new Vector2();
 
 			init();
 			animate();
@@ -68,29 +77,29 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
+				camera = new PerspectiveCamera( 70, width / height, 1, 1000 );
 				camera.position.z = 20;
 
-				cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
+				cameraOrtho = new OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
 				cameraOrtho.position.z = 10;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x20252f );
-				sceneOrtho = new THREE.Scene();
+				scene = new Scene();
+				scene.background = new Color( 0x20252f );
+				sceneOrtho = new Scene();
 
 				//
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
-				var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
+				var geometry = new TorusKnotBufferGeometry( 3, 1, 256, 32 );
+				var material = new MeshStandardMaterial( { color: 0x6083c2 } );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -98,15 +107,15 @@
 
 				var data = new Uint8Array( textureSize * textureSize * 3 );
 
-				texture = new THREE.DataTexture( data, textureSize, textureSize, THREE.RGBFormat );
-				texture.minFilter = THREE.NearestFilter;
-				texture.magFilter = THREE.NearestFilter;
+				texture = new DataTexture( data, textureSize, textureSize, RGBFormat );
+				texture.minFilter = NearestFilter;
+				texture.magFilter = NearestFilter;
 				texture.needsUpdate = true;
 
 				//
 
-				var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
-				sprite = new THREE.Sprite( spriteMaterial );
+				var spriteMaterial = new SpriteMaterial( { map: texture } );
+				sprite = new Sprite( spriteMaterial );
 				sprite.scale.set( textureSize, textureSize, 1 );
 				sceneOrtho.add( sprite );
 
@@ -114,7 +123,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
@@ -123,7 +132,7 @@
 				//
 
 				var overlay = document.getElementById( 'overlay' );
-				var controls = new THREE.OrbitControls( camera, overlay );
+				var controls = new OrbitControls( camera, overlay );
 				controls.enablePan = false;
 
 				//

examples/webgl_furnace_test.html

@@ -11,12 +11,6 @@
 			}
 		</style>
 
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-
 	</head>
 	<body>
 
@@ -28,130 +22,136 @@
 			</div>
 		</div>
 
-		<script>
-
-if ( WEBGL.isWebGLAvailable() === false ) {
-
-	document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+		<script type="module">
+			import {
+				Color,
+				CubeCamera,
+				DoubleSide,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhysicalMaterial,
+				OrthographicCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-}
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
-var scene, camera, renderer, envMap, radianceMap, gui;
-var right = 6;
-var config = {
-	preserveEnergy: true,
-};
+			var scene, camera, renderer, envMap, radianceMap;
+			var right = 6;
 
-function init() {
+			function init() {
 
-	var width = window.innerWidth;
-	var height = window.innerHeight;
-	var aspect = width / height;
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+				var aspect = width / height;
 
-	// renderer
+				// renderer
 
-	renderer = new THREE.WebGLRenderer( { antialias: true } );
-	renderer.setSize( width, height );
-	renderer.setPixelRatio( window.devicePixelRatio );
-	document.body.appendChild( renderer.domElement );
+				renderer = new WebGLRenderer( { antialias: true } );
+				renderer.setSize( width, height );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				document.body.appendChild( renderer.domElement );
 
-	window.addEventListener( 'resize', onResize, false );
+				window.addEventListener( 'resize', onResize, false );
 
-	// scene
+				// scene
 
-	scene = new THREE.Scene();
+				scene = new Scene();
 
-	// camera
+				// camera
 
-	camera = new THREE.OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
-	camera.position.set( 0, 0, 9 );
+				camera = new OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
+				camera.position.set( 0, 0, 9 );
 
-}
+			}
 
-function createObjects() {
+			function createObjects() {
 
-	var geo = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
-	var count = 10;
-	for ( var x = 0; x <= count; x ++ ) {
+				var geo = new SphereBufferGeometry( 0.4, 32, 32 );
+				var count = 10;
+				for ( var x = 0; x <= count; x ++ ) {
 
-		var mesh = new THREE.Mesh( geo, new THREE.MeshPhysicalMaterial( {
-			roughness: x / count,
-			metalness: 1,
-			color: 0xffffff,
-			envMap: radianceMap,
-			envMapIntensity: 1,
-			reflectivity: 1,
-		} ) );
-		mesh.position.x = x - ( Math.floor( count / 2 ) );
-		scene.add( mesh );
+					var mesh = new Mesh( geo, new MeshPhysicalMaterial( {
+						roughness: x / count,
+						metalness: 1,
+						color: 0xffffff,
+						envMap: radianceMap,
+						envMapIntensity: 1,
+						reflectivity: 1,
+					} ) );
+					mesh.position.x = x - ( Math.floor( count / 2 ) );
+					scene.add( mesh );
 
-	}
+				}
 
-}
+			}
 
-function createEnvironment() {
+			function createEnvironment() {
 
-	var color = new THREE.Color( 0xcccccc );
-	var sky = new THREE.Mesh( new THREE.SphereBufferGeometry( 1, 32, 32 ), new THREE.MeshBasicMaterial( {
-		color: color,
-		side: THREE.DoubleSide,
-	} ) );
-	sky.scale.setScalar( 100 );
+				var color = new Color( 0xcccccc );
+				var sky = new Mesh( new SphereBufferGeometry( 1, 32, 32 ), new MeshBasicMaterial( {
+					color: color,
+					side: DoubleSide,
+				} ) );
+				sky.scale.setScalar( 100 );
 
-	var envScene = new THREE.Scene();
-	envScene.add( sky );
-	envScene.background = color;
-	var cubeCamera = new THREE.CubeCamera( 1, 100, 256, 256 );
-	cubeCamera.update( renderer, envScene );
+				var envScene = new Scene();
+				envScene.add( sky );
+				envScene.background = color;
+				var cubeCamera = new CubeCamera( 1, 100, 256, 256 );
+				cubeCamera.update( renderer, envScene );
 
-	envMap = cubeCamera.renderTarget.texture;
+				envMap = cubeCamera.renderTarget.texture;
 
-	scene.background = color;
+				scene.background = color;
 
-}
+			}
 
-function getRadiance() {
+			function getRadiance() {
 
-	return new Promise( function ( resolve, reject ) {
+				return new Promise( function ( resolve ) {
 
-		var pmremGenerator = new THREE.PMREMGenerator( envMap );
-		pmremGenerator.update( renderer );
-		var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-		pmremCubeUVPacker.update( renderer );
-		var cubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+					var pmremGenerator = new PMREMGenerator( envMap );
+					pmremGenerator.update( renderer );
+					var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+					var cubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-		pmremGenerator.dispose();
-		pmremCubeUVPacker.dispose();
-		radianceMap = cubeRenderTarget.texture;
-		resolve();
+					pmremGenerator.dispose();
+					pmremCubeUVPacker.dispose();
+					radianceMap = cubeRenderTarget.texture;
+					resolve();
 
-	} );
+				} );
 
-}
+			}
 
-function onResize() {
+			function onResize() {
 
-	var aspect = window.innerWidth / window.innerHeight;
-	camera.top = right / aspect;
-	camera.bottom = - camera.top;
-	camera.updateProjectionMatrix();
-	renderer.setSize( window.innerWidth, window.innerHeight );
-	render();
+				var aspect = window.innerWidth / window.innerHeight;
+				camera.top = right / aspect;
+				camera.bottom = - camera.top;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				render();
 
-}
+			}
 
-function render() {
+			function render() {
 
-	renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-}
+			}
 
-Promise.resolve()
-	.then( init )
-	.then( createEnvironment )
-	.then( getRadiance )
-	.then( createObjects )
-	.then( render );
+			Promise.resolve()
+				.then( init )
+				.then( createEnvironment )
+				.then( getRadiance )
+				.then( createObjects )
+				.then( render );
 
 		</script>
 	</body>

examples/webgl_geometries.html

@@ -10,18 +10,34 @@
 
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</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,
+				BoxBufferGeometry,
+				CircleBufferGeometry,
+				CylinderBufferGeometry,
+				DoubleSide,
+				IcosahedronBufferGeometry,
+				LatheBufferGeometry,
+				Mesh,
+				MeshPhongMaterial,
+				OctahedronBufferGeometry,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				RepeatWrapping,
+				RingBufferGeometry,
+				Scene,
+				SphereBufferGeometry,
+				TetrahedronBufferGeometry,
+				TextureLoader,
+				TorusBufferGeometry,
+				TorusKnotBufferGeometry,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var camera, scene, renderer, stats;
 
@@ -30,65 +46,65 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.y = 400;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var object;
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
-				var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				map.wrapS = map.wrapT = THREE.RepeatWrapping;
+				var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				map.wrapS = map.wrapT = RepeatWrapping;
 				map.anisotropy = 16;
 
-				var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
+				var material = new MeshPhongMaterial( { map: map, side: DoubleSide } );
 
 				//
 
-				object = new THREE.Mesh( new THREE.SphereBufferGeometry( 75, 20, 10 ), material );
+				object = new Mesh( new SphereBufferGeometry( 75, 20, 10 ), material );
 				object.position.set( - 300, 0, 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 1 ), material );
+				object = new Mesh( new IcosahedronBufferGeometry( 75, 1 ), material );
 				object.position.set( - 100, 0, 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 2 ), material );
+				object = new Mesh( new OctahedronBufferGeometry( 75, 2 ), material );
 				object.position.set( 100, 0, 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
+				object = new Mesh( new TetrahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( 300, 0, 200 );
 				scene.add( object );
 
 				//
 
-				object = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ), material );
+				object = new Mesh( new PlaneBufferGeometry( 100, 100, 4, 4 ), material );
 				object.position.set( - 300, 0, 0 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
+				object = new Mesh( new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
 				object.position.set( - 100, 0, 0 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
+				object = new Mesh( new CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
 				object.position.set( 100, 0, 0 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
+				object = new Mesh( new RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
 				object.position.set( 300, 0, 0 );
 				scene.add( object );
 
 				//
 
-				object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
+				object = new Mesh( new CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
 				object.position.set( - 300, 0, - 200 );
 				scene.add( object );
 
@@ -96,25 +112,25 @@
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
+					points.push( new Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
 				}
 
-				object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
+				object = new Mesh( new LatheBufferGeometry( points, 20 ), material );
 				object.position.set( - 100, 0, - 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.TorusBufferGeometry( 50, 20, 20, 20 ), material );
+				object = new Mesh( new TorusBufferGeometry( 50, 20, 20, 20 ), material );
 				object.position.set( 100, 0, - 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
+				object = new Mesh( new TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
 				object.position.set( 300, 0, - 200 );
 				scene.add( object );
 
 				//
 
-				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_geometries_parametric.html

@@ -11,21 +11,26 @@
 		<div id="container"></div>
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - parametric geometries</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/curves/CurveExtras.js"></script>
-		<script src="js/geometries/ParametricGeometries.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BufferGeometry,
+				DoubleSide,
+				Mesh,
+				MeshPhongMaterial,
+				ParametricBufferGeometry,
+				PerspectiveCamera,
+				PointLight,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { Curves } from './jsm/curves/CurveExtras.js';
+			import { ParametricGeometries } from './jsm/geometries/ParametricGeometries.js';
 
 			var camera, scene, renderer, stats;
 
@@ -36,78 +41,78 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.y = 400;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
 				//
 
-				var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				map.wrapS = map.wrapT = THREE.RepeatWrapping;
+				var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				map.wrapS = map.wrapT = RepeatWrapping;
 				map.anisotropy = 16;
 
-				var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
+				var material = new MeshPhongMaterial( { map: map, side: DoubleSide } );
 
 				//
 
 				var geometry, object;
 
-				geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.plane( 100, 100 ), 10, 10 );
+				geometry = new ParametricBufferGeometry( ParametricGeometries.plane( 100, 100 ), 10, 10 );
 				geometry.center();
-				object = new THREE.Mesh( geometry, material );
+				object = new Mesh( geometry, material );
 				object.position.set( - 200, 0, 200 );
 				scene.add( object );
 
-				geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 20, 20 );
-				object = new THREE.Mesh( geometry, material );
+				geometry = new ParametricBufferGeometry( ParametricGeometries.klein, 20, 20 );
+				object = new Mesh( geometry, material );
 				object.position.set( 0, 0, 200 );
 				object.scale.multiplyScalar( 5 );
 				scene.add( object );
 
-				geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.mobius, 20, 20 );
-				object = new THREE.Mesh( geometry, material );
+				geometry = new ParametricBufferGeometry( ParametricGeometries.mobius, 20, 20 );
+				object = new Mesh( geometry, material );
 				object.position.set( 200, 0, 200 );
 				object.scale.multiplyScalar( 30 );
 				scene.add( object );
 
 				//
 
-				var GrannyKnot = new THREE.Curves.GrannyKnot();
+				var GrannyKnot = new Curves.GrannyKnot();
 
-				var torus = new THREE.ParametricGeometries.TorusKnotGeometry( 50, 10, 50, 20, 2, 3 );
-				var sphere = new THREE.ParametricGeometries.SphereGeometry( 50, 20, 10 );
-				var tube = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
+				var torus = new ParametricGeometries.TorusKnotGeometry( 50, 10, 50, 20, 2, 3 );
+				var sphere = new ParametricGeometries.SphereGeometry( 50, 20, 10 );
+				var tube = new ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
 
-				torus = new THREE.BufferGeometry().fromGeometry( torus );
-				sphere = new THREE.BufferGeometry().fromGeometry( sphere );
-				tube = new THREE.BufferGeometry().fromGeometry( tube );
+				torus = new BufferGeometry().fromGeometry( torus );
+				sphere = new BufferGeometry().fromGeometry( sphere );
+				tube = new BufferGeometry().fromGeometry( tube );
 
-				object = new THREE.Mesh( torus, material );
+				object = new Mesh( torus, material );
 				object.position.set( - 200, 0, - 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( sphere, material );
+				object = new Mesh( sphere, material );
 				object.position.set( 0, 0, - 200 );
 				scene.add( object );
 
-				object = new THREE.Mesh( tube, material );
+				object = new Mesh( tube, material );
 				object.position.set( 200, 0, - 200 );
 				object.scale.multiplyScalar( 2 );
 				scene.add( object );
 
 				//
 
-				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_geometry_colors.html

@@ -20,18 +20,24 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - vertex colors</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,
+				CanvasTexture,
+				Color,
+				DirectionalLight,
+				IcosahedronBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 
@@ -49,13 +55,13 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1800;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -73,25 +79,25 @@
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
+				var shadowTexture = new CanvasTexture( canvas );
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
+				var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
+				var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
 
 				var shadowMesh;
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
 				shadowMesh.position.x = - 400;
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
 				shadowMesh.position.x = 400;
 				shadowMesh.rotation.x = - Math.PI / 2;
@@ -99,15 +105,15 @@
 
 				var radius = 200;
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
+				var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
 
 				var count = geometry1.attributes.position.count;
-				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
+				geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 				var geometry2 = geometry1.clone();
 				var geometry3 = geometry1.clone();
 
-				var color = new THREE.Color();
+				var color = new Color();
 				var positions1 = geometry1.attributes.position;
 				var positions2 = geometry2.attributes.position;
 				var positions3 = geometry3.attributes.position;
@@ -128,34 +134,34 @@
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( {
+				var material = new MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
-					vertexColors: THREE.VertexColors,
+					vertexColors: VertexColors,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var mesh = new THREE.Mesh( geometry1, material );
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
+				var mesh = new Mesh( geometry1, material );
+				var wireframe = new Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry2, material );
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
+				var mesh = new Mesh( geometry2, material );
+				var wireframe = new Mesh( geometry2, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = 400;
 				scene.add( mesh );
 
-				var mesh = new THREE.Mesh( geometry3, material );
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
+				var mesh = new Mesh( geometry3, material );
+				var wireframe = new Mesh( geometry3, wireframeMaterial );
 				mesh.add( wireframe );
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_colors_lookuptable.html

@@ -24,18 +24,29 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/math/Lut.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferGeometryLoader,
+				CanvasTexture,
+				Color,
+				DoubleSide,
+				Float32BufferAttribute,
+				Mesh,
+				MeshLambertMaterial,
+				OrthographicCamera,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				Sprite,
+				SpriteMaterial,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { Lut } from './jsm/math/Lut.js';
 
 			var container;
 
@@ -52,33 +63,33 @@
 
 				container = document.getElementById( 'container' );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				uiScene = new THREE.Scene();
+				uiScene = new Scene();
 
-				lut = new THREE.Lut();
+				lut = new Lut();
 
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
+				perpCamera = new PerspectiveCamera( 60, width / height, 1, 100 );
 				perpCamera.position.set( 0, 0, 10 );
 				scene.add( perpCamera );
 
-				orthoCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
+				orthoCamera = new OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
 				orthoCamera.position.set( 0.5, 0, 1 );
 
-				sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
-					map: new THREE.CanvasTexture( lut.createCanvas() )
+				sprite = new Sprite( new SpriteMaterial( {
+					map: new CanvasTexture( lut.createCanvas() )
 				} ) );
 				sprite.scale.x = 0.125;
 				uiScene.add( sprite );
 
-				mesh = new THREE.Mesh( undefined, new THREE.MeshLambertMaterial( {
-					side: THREE.DoubleSide,
+				mesh = new Mesh( undefined, new MeshLambertMaterial( {
+					side: DoubleSide,
 					color: 0xF5F5F5,
-					vertexColors: THREE.VertexColors
+					vertexColors: VertexColors
 				} ) );
 				scene.add( mesh );
 
@@ -87,10 +98,10 @@
 				};
 				loadModel( );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1 );
+				var pointLight = new PointLight( 0xffffff, 1 );
 				perpCamera.add( pointLight );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
@@ -98,10 +109,10 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var controls = new THREE.OrbitControls( perpCamera, renderer.domElement );
+				var controls = new OrbitControls( perpCamera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'colorMap', [ 'rainbow', 'cooltowarm', 'blackbody', 'grayscale' ] ).onChange( function () {
 
@@ -135,7 +146,7 @@
 
 			function loadModel( ) {
 
-				var loader = new THREE.BufferGeometryLoader();
+				var loader = new BufferGeometryLoader();
 				loader.load( 'models/json/pressure.json', function ( geometry ) {
 
 					geometry.center();
@@ -148,7 +159,7 @@
 						colors.push( 1, 1, 1 );
 
 					}
-					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+					geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 					mesh.geometry = geometry;
 					updateColors();

examples/webgl_geometry_convex.html

@@ -10,20 +10,28 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - convex geometry</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/math/ConvexHull.js"></script>
-		<script src="js/geometries/ConvexGeometry.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,
+				AxesHelper,
+				BackSide,
+				BufferGeometry,
+				DodecahedronGeometry,
+				FrontSide,
+				Group,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Points,
+				PointsMaterial,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ConvexBufferGeometry } from './jsm/geometries/ConvexGeometry.js';
 
 			var group, camera, scene, renderer;
 
@@ -32,48 +40,48 @@
 
 			function init() {
 
-				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 );
 
 				// 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( 15, 20, 30 );
 				scene.add( camera );
 
 				// controls
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 20;
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
 				// light
 
-				var light = new THREE.PointLight( 0xffffff, 1 );
+				var light = new PointLight( 0xffffff, 1 );
 				camera.add( light );
 
 				// helper
 
-				scene.add( new THREE.AxesHelper( 20 ) );
+				scene.add( new AxesHelper( 20 ) );
 
 				// textures
 
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 				var texture = loader.load( 'textures/sprites/disc.png' );
 
-				group = new THREE.Group();
+				group = new Group();
 				scene.add( group );
 
 				// points
 
-				var vertices = new THREE.DodecahedronGeometry( 10 ).vertices;
+				var vertices = new DodecahedronGeometry( 10 ).vertices;
 
 				for ( var i = 0; i < vertices.length; i ++ ) {
 
@@ -81,7 +89,7 @@
 
 				}
 
-				var pointsMaterial = new THREE.PointsMaterial( {
+				var pointsMaterial = new PointsMaterial( {
 
 					color: 0x0080ff,
 					map: texture,
@@ -90,28 +98,28 @@
 
 				} );
 
-				var pointsGeometry = new THREE.BufferGeometry().setFromPoints( vertices );
+				var pointsGeometry = new BufferGeometry().setFromPoints( vertices );
 
-				var points = new THREE.Points( pointsGeometry, pointsMaterial );
+				var points = new Points( pointsGeometry, pointsMaterial );
 				group.add( points );
 
 				// convex hull
 
-				var meshMaterial = new THREE.MeshLambertMaterial( {
+				var meshMaterial = new MeshLambertMaterial( {
 					color: 0xffffff,
 					opacity: 0.5,
 					transparent: true
 				} );
 
-				var meshGeometry = new THREE.ConvexBufferGeometry( vertices );
+				var meshGeometry = new ConvexBufferGeometry( vertices );
 
-				var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
-				mesh.material.side = THREE.BackSide; // back faces
+				var mesh = new Mesh( meshGeometry, meshMaterial );
+				mesh.material.side = BackSide; // back faces
 				mesh.renderOrder = 0;
 				group.add( mesh );
 
-				var mesh = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
-				mesh.material.side = THREE.FrontSide; // front faces
+				var mesh = new Mesh( meshGeometry, meshMaterial.clone() );
+				mesh.material.side = FrontSide; // front faces
 				mesh.renderOrder = 1;
 				group.add( mesh );
 
@@ -121,12 +129,6 @@
 
 			}
 
-			// function randomPoint() {
-
-			// 	return new THREE.Vector3( THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ), THREE.Math.randFloat( - 1, 1 ) );
-
-			// }
-
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;

examples/webgl_geometry_cube.html

@@ -8,9 +8,16 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			var camera, scene, renderer;
 			var mesh;
@@ -20,20 +27,20 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 400;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
+				var texture = new TextureLoader().load( 'textures/crate.gif' );
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				var geometry = new BoxBufferGeometry( 200, 200, 200 );
+				var material = new MeshBasicMaterial( { map: texture } );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometry_dynamic.html

@@ -21,20 +21,24 @@
 			left click: forward, right click: backward
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FirstPersonControls.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,
+				FogExp2,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
 			var camera, controls, scene, renderer, stats;
 
@@ -47,21 +51,21 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = 200;
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
-				controls = new THREE.FirstPersonControls( camera );
+				controls = new FirstPersonControls( camera );
 
 				controls.movementSpeed = 500;
 				controls.lookSpeed = 0.1;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xaaccff );
-				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
+				scene = new Scene();
+				scene.background = new Color( 0xaaccff );
+				scene.fog = new FogExp2( 0xaaccff, 0.0007 );
 
-				geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
+				geometry = new PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				var position = geometry.attributes.position;
@@ -74,16 +78,16 @@
 
 				}
 
-				var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
-				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+				var texture = new TextureLoader().load( 'textures/water.jpg' );
+				texture.wrapS = texture.wrapT = RepeatWrapping;
 				texture.repeat.set( 5, 5 );
 
-				material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );
+				material = new MeshBasicMaterial( { color: 0x0044ff, map: texture } );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometry_extrude_shapes.html

@@ -17,10 +17,25 @@
 
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				CatmullRomCurve3,
+				Color,
+				ExtrudeBufferGeometry,
+				Mesh,
+				MeshLambertMaterial,
+				Math as _Math,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				Shape,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 			var camera, scene, renderer, controls;
 
@@ -39,35 +54,35 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometry extrude shapes';
 				document.body.appendChild( info );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x222222 );
+				scene = new Scene();
+				scene.background = new Color( 0x222222 );
 
-				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, 0, 500 );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 500;
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
-				var light = new THREE.PointLight( 0xffffff );
+				var light = new PointLight( 0xffffff );
 				light.position.copy( camera.position );
 				scene.add( light );
 
 				//
 
-				var closedSpline = new THREE.CatmullRomCurve3( [
-					new THREE.Vector3( - 60, - 100, 60 ),
-					new THREE.Vector3( - 60, 20, 60 ),
-					new THREE.Vector3( - 60, 120, 60 ),
-					new THREE.Vector3( 60, 20, - 60 ),
-					new THREE.Vector3( 60, - 100, - 60 )
+				var closedSpline = new CatmullRomCurve3( [
+					new Vector3( - 60, - 100, 60 ),
+					new Vector3( - 60, 20, 60 ),
+					new Vector3( - 60, 120, 60 ),
+					new Vector3( 60, 20, - 60 ),
+					new Vector3( 60, - 100, - 60 )
 				] );
 
 				closedSpline.curveType = 'catmullrom';
@@ -88,17 +103,17 @@
 
 					var a = 2 * i / count * Math.PI;
 
-					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts.push( new Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
-				var shape = new THREE.Shape( pts );
+				var shape = new Shape( pts );
 
-				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+				var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
+				var material = new MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
@@ -110,11 +125,11 @@
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.Math.randFloat( - 50, 50 ), THREE.Math.randFloat( - 50, 50 ) ) );
+					randomPoints.push( new Vector3( ( i - 4.5 ) * 50, _Math.randFloat( - 50, 50 ), _Math.randFloat( - 50, 50 ) ) );
 
 				}
 
-				var randomSpline = new THREE.CatmullRomCurve3( randomPoints );
+				var randomSpline = new CatmullRomCurve3( randomPoints );
 
 				//
 
@@ -133,17 +148,17 @@
 
 					var a = i / numPts * Math.PI;
 
-					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts.push( new Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
-				var shape = new THREE.Shape( pts );
+				var shape = new Shape( pts );
 
-				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+				var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
 
-				var material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
+				var material2 = new MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
 
-				var mesh = new THREE.Mesh( geometry, material2 );
+				var mesh = new Mesh( geometry, material2 );
 
 				scene.add( mesh );
 
@@ -161,9 +176,9 @@
 					bevelSegments: 1
 				};
 
-				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+				var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
 
-				var mesh = new THREE.Mesh( geometry, materials );
+				var mesh = new Mesh( geometry, materials );
 
 				mesh.position.set( 50, 100, 50 );
 

examples/webgl_geometry_extrude_shapes2.html

@@ -17,11 +17,27 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shapes extrusion via geodata
 		</div>
 
-		<script type="text/javascript" src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				DirectionalLight,
+				ExtrudeBufferGeometry,
+				GridHelper,
+				Group,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				ShapePath,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		<script>
 			// From d3-threeD.js
 			/* This Source Code Form is subject to the terms of the Mozilla Public
 			 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -34,7 +50,7 @@
 
 				exports.transformSVGPath = function transformSVGPath( pathStr ) {
 
-					var path = new THREE.ShapePath();
+					var path = new ShapePath();
 
 					var idx = 1, len = pathStr.length, activeCmd,
 						x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
@@ -282,8 +298,8 @@
 								cx = Math.cos( xar ) * x2 - Math.sin( xar ) * y2 + ( x + nx ) / 2;
 								cy = Math.sin( xar ) * x2 + Math.cos( xar ) * y2 + ( y + ny ) / 2;
 
-								var u = new THREE.Vector2( 1, 0 );
-								var v = new THREE.Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
+								var u = new Vector2( 1, 0 );
+								var v = new Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
 
 								var startAng = Math.acos( u.dot( v ) / u.length() / v.length() );
 
@@ -341,8 +357,8 @@
 				for ( var i = 0; i < paths.length; i ++ ) {
 
 					var path = $d3g.transformSVGPath( paths[ i ] );
-					var color = new THREE.Color( colors[ i ] );
-					var material = new THREE.MeshLambertMaterial( {
+					var color = new Color( colors[ i ] );
+					var material = new MeshLambertMaterial( {
 						color: color,
 						emissive: color
 					} );
@@ -352,12 +368,12 @@
 					for ( var j = 0; j < simpleShapes.length; j ++ ) {
 
 						var simpleShape = simpleShapes[ j ];
-						var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
+						var shape3d = new ExtrudeBufferGeometry( simpleShape, {
 							depth: depth,
 							bevelEnabled: false
 						} );
 
-						var mesh = new THREE.Mesh( shape3d, material );
+						var mesh = new Mesh( shape3d, material );
 						mesh.rotation.x = Math.PI;
 						mesh.translateZ( - depth - 1 );
 						mesh.translateX( - center.x );
@@ -384,31 +400,31 @@
 
 				//
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xb0b0b0 );
+				scene = new Scene();
+				scene.background = new Color( 0xb0b0b0 );
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 200 );
 
 				//
 
-				var group = new THREE.Group();
+				var group = new Group();
 				scene.add( group );
 
 				//
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
+				var directionalLight = new DirectionalLight( 0xffffff, 0.6 );
 				directionalLight.position.set( 0.75, 0.75, 1.0 ).normalize();
 				scene.add( directionalLight );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.2 );
 				scene.add( ambientLight );
 
 				//
 
-				var helper = new THREE.GridHelper( 160, 10 );
+				var helper = new GridHelper( 160, 10 );
 				helper.rotation.x = Math.PI / 2;
 				group.add( helper );
 
@@ -419,14 +435,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 );
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_geometry_extrude_splines.html

@@ -23,316 +23,328 @@
 			by <a href="http://www.lab4games.net/zz85/blog" target="_blank" rel="noopener">zz85</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<!-- where curves formulas are defined -->
-
-		<script src="js/curves/CurveExtras.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-
-		var container, stats;
-
-		var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
-
-		var binormal = new THREE.Vector3();
-		var normal = new THREE.Vector3();
-
-		var pipeSpline = new THREE.CatmullRomCurve3( [
-			new THREE.Vector3( 0, 10, - 10 ), new THREE.Vector3( 10, 0, - 10 ),
-			new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
-			new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
-			new THREE.Vector3( 10, 0, 30 ), new THREE.Vector3( 0, 0, 30 ),
-			new THREE.Vector3( - 10, 10, 30 ), new THREE.Vector3( - 10, 20, 30 ),
-			new THREE.Vector3( 0, 30, 30 ), new THREE.Vector3( 10, 30, 30 ),
-			new THREE.Vector3( 20, 30, 15 ), new THREE.Vector3( 10, 30, 10 ),
-			new THREE.Vector3( 0, 30, 10 ), new THREE.Vector3( - 10, 20, 10 ),
-			new THREE.Vector3( - 10, 10, 10 ), new THREE.Vector3( 0, 0, 10 ),
-			new THREE.Vector3( 10, - 10, 10 ), new THREE.Vector3( 20, - 15, 10 ),
-			new THREE.Vector3( 30, - 15, 10 ), new THREE.Vector3( 40, - 15, 10 ),
-			new THREE.Vector3( 50, - 15, 10 ), new THREE.Vector3( 60, 0, 10 ),
-			new THREE.Vector3( 70, 0, 0 ), new THREE.Vector3( 80, 0, 0 ),
-			new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
-		] );
-
-		var sampleClosedSpline = new THREE.CatmullRomCurve3( [
-			new THREE.Vector3( 0, - 40, - 40 ),
-			new THREE.Vector3( 0, 40, - 40 ),
-			new THREE.Vector3( 0, 140, - 40 ),
-			new THREE.Vector3( 0, 40, 40 ),
-			new THREE.Vector3( 0, - 40, 40 )
-		] );
-
-		sampleClosedSpline.curveType = 'catmullrom';
-		sampleClosedSpline.closed = true;
-
-		// Keep a dictionary of Curve instances
-		var splines = {
-			GrannyKnot: new THREE.Curves.GrannyKnot(),
-			HeartCurve: new THREE.Curves.HeartCurve( 3.5 ),
-			VivianiCurve: new THREE.Curves.VivianiCurve( 70 ),
-			KnotCurve: new THREE.Curves.KnotCurve(),
-			HelixCurve: new THREE.Curves.HelixCurve(),
-			TrefoilKnot: new THREE.Curves.TrefoilKnot(),
-			TorusKnot: new THREE.Curves.TorusKnot( 20 ),
-			CinquefoilKnot: new THREE.Curves.CinquefoilKnot( 20 ),
-			TrefoilPolynomialKnot: new THREE.Curves.TrefoilPolynomialKnot( 14 ),
-			FigureEightPolynomialKnot: new THREE.Curves.FigureEightPolynomialKnot(),
-			DecoratedTorusKnot4a: new THREE.Curves.DecoratedTorusKnot4a(),
-			DecoratedTorusKnot4b: new THREE.Curves.DecoratedTorusKnot4b(),
-			DecoratedTorusKnot5a: new THREE.Curves.DecoratedTorusKnot5a(),
-			DecoratedTorusKnot5c: new THREE.Curves.DecoratedTorusKnot5c(),
-			PipeSpline: pipeSpline,
-			SampleClosedSpline: sampleClosedSpline
-		};
-
-		var parent, tubeGeometry, mesh;
-
-		var params = {
-			spline: 'GrannyKnot',
-			scale: 4,
-			extrusionSegments: 100,
-			radiusSegments: 3,
-			closed: true,
-			animationView: false,
-			lookAhead: false,
-			cameraHelper: false,
-		};
-
-		var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
-
-		var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
-
-		function addTube() {
-
-			if ( mesh !== undefined ) {
-
-				parent.remove( mesh );
-				mesh.geometry.dispose();
+		<script type="module">
+			import {
+				CameraHelper,
+				CatmullRomCurve3,
+				Color,
+				DirectionalLight,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				Object3D,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				TubeBufferGeometry,
+				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 { Curves } from './jsm/curves/CurveExtras.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+
+			var container, stats;
+
+			var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
+
+			var binormal = new Vector3();
+			var normal = new Vector3();
+
+			var pipeSpline = new CatmullRomCurve3( [
+				new Vector3( 0, 10, - 10 ), new Vector3( 10, 0, - 10 ),
+				new Vector3( 20, 0, 0 ), new Vector3( 30, 0, 10 ),
+				new Vector3( 30, 0, 20 ), new Vector3( 20, 0, 30 ),
+				new Vector3( 10, 0, 30 ), new Vector3( 0, 0, 30 ),
+				new Vector3( - 10, 10, 30 ), new Vector3( - 10, 20, 30 ),
+				new Vector3( 0, 30, 30 ), new Vector3( 10, 30, 30 ),
+				new Vector3( 20, 30, 15 ), new Vector3( 10, 30, 10 ),
+				new Vector3( 0, 30, 10 ), new Vector3( - 10, 20, 10 ),
+				new Vector3( - 10, 10, 10 ), new Vector3( 0, 0, 10 ),
+				new Vector3( 10, - 10, 10 ), new Vector3( 20, - 15, 10 ),
+				new Vector3( 30, - 15, 10 ), new Vector3( 40, - 15, 10 ),
+				new Vector3( 50, - 15, 10 ), new Vector3( 60, 0, 10 ),
+				new Vector3( 70, 0, 0 ), new Vector3( 80, 0, 0 ),
+				new Vector3( 90, 0, 0 ), new Vector3( 100, 0, 0 )
+			] );
+
+			var sampleClosedSpline = new CatmullRomCurve3( [
+				new Vector3( 0, - 40, - 40 ),
+				new Vector3( 0, 40, - 40 ),
+				new Vector3( 0, 140, - 40 ),
+				new Vector3( 0, 40, 40 ),
+				new Vector3( 0, - 40, 40 )
+			] );
+
+			sampleClosedSpline.curveType = 'catmullrom';
+			sampleClosedSpline.closed = true;
+
+			// Keep a dictionary of Curve instances
+			var splines = {
+				GrannyKnot: new Curves.GrannyKnot(),
+				HeartCurve: new Curves.HeartCurve( 3.5 ),
+				VivianiCurve: new Curves.VivianiCurve( 70 ),
+				KnotCurve: new Curves.KnotCurve(),
+				HelixCurve: new Curves.HelixCurve(),
+				TrefoilKnot: new Curves.TrefoilKnot(),
+				TorusKnot: new Curves.TorusKnot( 20 ),
+				CinquefoilKnot: new Curves.CinquefoilKnot( 20 ),
+				TrefoilPolynomialKnot: new Curves.TrefoilPolynomialKnot( 14 ),
+				FigureEightPolynomialKnot: new Curves.FigureEightPolynomialKnot(),
+				DecoratedTorusKnot4a: new Curves.DecoratedTorusKnot4a(),
+				DecoratedTorusKnot4b: new Curves.DecoratedTorusKnot4b(),
+				DecoratedTorusKnot5a: new Curves.DecoratedTorusKnot5a(),
+				DecoratedTorusKnot5c: new Curves.DecoratedTorusKnot5c(),
+				PipeSpline: pipeSpline,
+				SampleClosedSpline: sampleClosedSpline
+			};
+
+			var parent, tubeGeometry, mesh;
+
+			var params = {
+				spline: 'GrannyKnot',
+				scale: 4,
+				extrusionSegments: 100,
+				radiusSegments: 3,
+				closed: true,
+				animationView: false,
+				lookAhead: false,
+				cameraHelper: false,
+			};
+
+			var material = new MeshLambertMaterial( { color: 0xff00ff } );
+
+			var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
+
+			function addTube() {
+
+				if ( mesh !== undefined ) {
+
+					parent.remove( mesh );
+					mesh.geometry.dispose();
+
+				}
+
+				var extrudePath = splines[ params.spline ];
+
+				tubeGeometry = new TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
+
+				addGeometry( tubeGeometry );
 
-			}
-
-			var extrudePath = splines[ params.spline ];
-
-			tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
-
-			addGeometry( tubeGeometry );
-
-			setScale();
+				setScale();
 
-		}
+			}
 
-		function setScale() {
+			function setScale() {
 
-			mesh.scale.set( params.scale, params.scale, params.scale );
+				mesh.scale.set( params.scale, params.scale, params.scale );
 
-		}
+			}
 
 
-		function addGeometry( geometry ) {
+			function addGeometry( geometry ) {
 
-			// 3D shape
+				// 3D shape
 
-			mesh = new THREE.Mesh( geometry, material );
-			var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
-			mesh.add( wireframe );
+				mesh = new Mesh( geometry, material );
+				var wireframe = new Mesh( geometry, wireframeMaterial );
+				mesh.add( wireframe );
 
-			parent.add( mesh );
+				parent.add( mesh );
 
-		}
+			}
 
-		function animateCamera() {
+			function animateCamera() {
 
-			cameraHelper.visible = params.cameraHelper;
-			cameraEye.visible = params.cameraHelper;
+				cameraHelper.visible = params.cameraHelper;
+				cameraEye.visible = params.cameraHelper;
 
-		}
+			}
 
-		init();
-		animate();
+			init();
+			animate();
 
-		function init() {
+			function init() {
 
-			container = document.getElementById( 'container' );
+				container = document.getElementById( 'container' );
 
-			// camera
+				// camera
 
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
-			camera.position.set( 0, 50, 500 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
+				camera.position.set( 0, 50, 500 );
 
-			// scene
+				// scene
 
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-			// light
+				// light
 
-			var light = new THREE.DirectionalLight( 0xffffff );
-			light.position.set( 0, 0, 1 );
-			scene.add( light );
+				var light = new DirectionalLight( 0xffffff );
+				light.position.set( 0, 0, 1 );
+				scene.add( light );
 
-			// tube
+				// tube
 
-			parent = new THREE.Object3D();
-			scene.add( parent );
+				parent = new Object3D();
+				scene.add( parent );
 
-			splineCamera = new THREE.PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
-			parent.add( splineCamera );
+				splineCamera = new PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
+				parent.add( splineCamera );
 
-			cameraHelper = new THREE.CameraHelper( splineCamera );
-			scene.add( cameraHelper );
+				cameraHelper = new CameraHelper( splineCamera );
+				scene.add( cameraHelper );
 
-			addTube();
+				addTube();
 
-			// debug camera
+				// debug camera
 
-			cameraEye = new THREE.Mesh( new THREE.SphereBufferGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
-			parent.add( cameraEye );
+				cameraEye = new Mesh( new SphereBufferGeometry( 5 ), new MeshBasicMaterial( { color: 0xdddddd } ) );
+				parent.add( cameraEye );
 
-			cameraHelper.visible = params.cameraHelper;
-			cameraEye.visible = params.cameraHelper;
+				cameraHelper.visible = params.cameraHelper;
+				cameraEye.visible = params.cameraHelper;
 
-			// renderer
+				// renderer
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
+				renderer = new WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-			// stats
+				// stats
 
-			stats = new Stats();
-			container.appendChild( stats.dom );
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
-			// dat.GUI
+				// dat.GUI
 
-			var gui = new dat.GUI( { width: 300 } );
+				var gui = new GUI( { width: 300 } );
 
-			var folderGeometry = gui.addFolder( 'Geometry' );
-			folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {
+				var folderGeometry = gui.addFolder( 'Geometry' );
+				folderGeometry.add( params, 'spline', Object.keys( splines ) ).onChange( function () {
 
-				addTube();
+					addTube();
 
-			} );
-			folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function () {
+				} );
+				folderGeometry.add( params, 'scale', 2, 10 ).step( 2 ).onChange( function () {
 
-				setScale();
+					setScale();
 
-			} );
-			folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function () {
+				} );
+				folderGeometry.add( params, 'extrusionSegments', 50, 500 ).step( 50 ).onChange( function () {
 
-				addTube();
+					addTube();
 
-			} );
-			folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function () {
+				} );
+				folderGeometry.add( params, 'radiusSegments', 2, 12 ).step( 1 ).onChange( function () {
 
-				addTube();
+					addTube();
 
-			} );
-			folderGeometry.add( params, 'closed' ).onChange( function () {
+				} );
+				folderGeometry.add( params, 'closed' ).onChange( function () {
 
-				addTube();
+					addTube();
 
-			} );
-			folderGeometry.open();
+				} );
+				folderGeometry.open();
 
-			var folderCamera = gui.addFolder( 'Camera' );
-			folderCamera.add( params, 'animationView' ).onChange( function () {
+				var folderCamera = gui.addFolder( 'Camera' );
+				folderCamera.add( params, 'animationView' ).onChange( function () {
 
-				animateCamera();
+					animateCamera();
 
-			} );
-			folderCamera.add( params, 'lookAhead' ).onChange( function () {
+				} );
+				folderCamera.add( params, 'lookAhead' ).onChange( function () {
 
-				animateCamera();
+					animateCamera();
 
-			} );
-			folderCamera.add( params, 'cameraHelper' ).onChange( function () {
+				} );
+				folderCamera.add( params, 'cameraHelper' ).onChange( function () {
 
-				animateCamera();
+					animateCamera();
 
-			} );
-			folderCamera.open();
+				} );
+				folderCamera.open();
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
-			window.addEventListener( 'resize', onWindowResize, false );
+				window.addEventListener( 'resize', onWindowResize, false );
 
-		}
+			}
 
-		function onWindowResize() {
+			function onWindowResize() {
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-		}
+			}
 
-		//
+			//
 
-		function animate() {
+			function animate() {
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-			render();
-			stats.update();
+				render();
+				stats.update();
 
-		}
+			}
 
-		function render() {
+			function render() {
 
-			// animate camera along spline
+				// animate camera along spline
 
-			var time = Date.now();
-			var looptime = 20 * 1000;
-			var t = ( time % looptime ) / looptime;
+				var time = Date.now();
+				var looptime = 20 * 1000;
+				var t = ( time % looptime ) / looptime;
 
-			var pos = tubeGeometry.parameters.path.getPointAt( t );
-			pos.multiplyScalar( params.scale );
+				var pos = tubeGeometry.parameters.path.getPointAt( t );
+				pos.multiplyScalar( params.scale );
 
-			// interpolation
+				// interpolation
 
-			var segments = tubeGeometry.tangents.length;
-			var pickt = t * segments;
-			var pick = Math.floor( pickt );
-			var pickNext = ( pick + 1 ) % segments;
+				var segments = tubeGeometry.tangents.length;
+				var pickt = t * segments;
+				var pick = Math.floor( pickt );
+				var pickNext = ( pick + 1 ) % segments;
 
-			binormal.subVectors( tubeGeometry.binormals[ pickNext ], tubeGeometry.binormals[ pick ] );
-			binormal.multiplyScalar( pickt - pick ).add( tubeGeometry.binormals[ pick ] );
+				binormal.subVectors( tubeGeometry.binormals[ pickNext ], tubeGeometry.binormals[ pick ] );
+				binormal.multiplyScalar( pickt - pick ).add( tubeGeometry.binormals[ pick ] );
 
-			var dir = tubeGeometry.parameters.path.getTangentAt( t );
-			var offset = 15;
+				var dir = tubeGeometry.parameters.path.getTangentAt( t );
+				var offset = 15;
 
-			normal.copy( binormal ).cross( dir );
+				normal.copy( binormal ).cross( dir );
 
-			// we move on a offset on its binormal
+				// we move on a offset on its binormal
 
-			pos.add( normal.clone().multiplyScalar( offset ) );
+				pos.add( normal.clone().multiplyScalar( offset ) );
 
-			splineCamera.position.copy( pos );
-			cameraEye.position.copy( pos );
+				splineCamera.position.copy( pos );
+				cameraEye.position.copy( pos );
 
-			// using arclength for stablization in look ahead
+				// using arclength for stablization in look ahead
 
-			var lookAt = tubeGeometry.parameters.path.getPointAt( ( t + 30 / tubeGeometry.parameters.path.getLength() ) % 1 ).multiplyScalar( params.scale );
+				var lookAt = tubeGeometry.parameters.path.getPointAt( ( t + 30 / tubeGeometry.parameters.path.getLength() ) % 1 ).multiplyScalar( params.scale );
 
-			// camera orientation 2 - up orientation via normal
+				// camera orientation 2 - up orientation via normal
 
-			if ( ! params.lookAhead ) lookAt.copy( pos ).add( dir );
-			splineCamera.matrix.lookAt( splineCamera.position, lookAt, normal );
-			splineCamera.rotation.setFromRotationMatrix( splineCamera.matrix, splineCamera.rotation.order );
+				if ( ! params.lookAhead ) lookAt.copy( pos ).add( dir );
+				splineCamera.matrix.lookAt( splineCamera.position, lookAt, normal );
+				splineCamera.rotation.setFromRotationMatrix( splineCamera.matrix, splineCamera.rotation.order );
 
-			cameraHelper.update();
+				cameraHelper.update();
 
-			renderer.render( scene, params.animationView === true ? splineCamera : camera );
+				renderer.render( scene, params.animationView === true ? splineCamera : camera );
 
-		}
+			}
 
-	</script>
+		</script>
 	</body>
 </html>

examples/webgl_geometry_hierarchy.html

@@ -8,10 +8,20 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				Fog,
+				Group,
+				Mesh,
+				MeshNormalMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var camera, scene, renderer, stats, group;
 
@@ -25,21 +35,21 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
+				scene.fog = new Fog( 0xffffff, 1, 10000 );
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
-				var material = new THREE.MeshNormalMaterial();
+				var geometry = new BoxBufferGeometry( 100, 100, 100 );
+				var material = new MeshNormalMaterial();
 
-				group = new THREE.Group();
+				group = new Group();
 
 				for ( var i = 0; i < 1000; i ++ ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.x = Math.random() * 2000 - 1000;
 					mesh.position.y = Math.random() * 2000 - 1000;
 					mesh.position.z = Math.random() * 2000 - 1000;
@@ -58,7 +68,7 @@
 
 				//
 
-				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_geometry_hierarchy2.html

@@ -8,10 +8,18 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				Mesh,
+				MeshNormalMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var camera, scene, renderer, stats, root;
 
@@ -25,16 +33,16 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
-				var material = new THREE.MeshNormalMaterial();
+				var geometry = new BoxBufferGeometry( 100, 100, 100 );
+				var material = new MeshNormalMaterial();
 
-				root = new THREE.Mesh( geometry, material );
+				root = new Mesh( geometry, material );
 				root.position.x = 1000;
 				scene.add( root );
 
@@ -42,7 +50,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new THREE.Mesh( geometry, material );
+					object = new Mesh( geometry, material );
 					object.position.x = 100;
 
 					parent.add( object );
@@ -54,7 +62,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new THREE.Mesh( geometry, material );
+					object = new Mesh( geometry, material );
 					object.position.x = - 100;
 
 					parent.add( object );
@@ -66,7 +74,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new THREE.Mesh( geometry, material );
+					object = new Mesh( geometry, material );
 					object.position.y = - 100;
 
 					parent.add( object );
@@ -78,7 +86,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new THREE.Mesh( geometry, material );
+					object = new Mesh( geometry, material );
 					object.position.y = 100;
 
 					parent.add( object );
@@ -90,7 +98,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new THREE.Mesh( geometry, material );
+					object = new Mesh( geometry, material );
 					object.position.z = - 100;
 
 					parent.add( object );
@@ -102,7 +110,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new THREE.Mesh( geometry, material );
+					object = new Mesh( geometry, material );
 					object.position.z = 100;
 
 					parent.add( object );
@@ -112,7 +120,7 @@
 
 				//
 
-				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_geometry_minecraft.html

@@ -20,22 +20,29 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="http://www.minecraft.net/" target="_blank" rel="noopener">minecraft</a> demo. featuring <a href="http://painterlypack.net/" target="_blank" rel="noopener">painterly pack</a><br />(left click: forward, right click: backward)</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FirstPersonControls.js"></script>
-
-		<script src="js/utils/BufferGeometryUtils.js"></script>
-		<script src="js/math/ImprovedNoise.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,
+				Clock,
+				Color,
+				DirectionalLight,
+				DoubleSide,
+				Matrix4,
+				Mesh,
+				MeshLambertMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
+			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
 			var container, stats;
 
@@ -46,7 +53,7 @@
 			var worldHalfDepth = worldDepth / 2;
 			var data = generateHeight( worldWidth, worldDepth );
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -55,46 +62,46 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
-				controls = new THREE.FirstPersonControls( camera );
+				controls = new FirstPersonControls( camera );
 
 				controls.movementSpeed = 1000;
 				controls.lookSpeed = 0.125;
 				controls.lookVertical = true;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xbfd1e5 );
+				scene = new Scene();
+				scene.background = new Color( 0xbfd1e5 );
 
 				// sides
 
-				var matrix = new THREE.Matrix4();
+				var matrix = new Matrix4();
 
-				var pxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var pxGeometry = new PlaneBufferGeometry( 100, 100 );
 				pxGeometry.attributes.uv.array[ 1 ] = 0.5;
 				pxGeometry.attributes.uv.array[ 3 ] = 0.5;
 				pxGeometry.rotateY( Math.PI / 2 );
 				pxGeometry.translate( 50, 0, 0 );
 
-				var nxGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var nxGeometry = new PlaneBufferGeometry( 100, 100 );
 				nxGeometry.attributes.uv.array[ 1 ] = 0.5;
 				nxGeometry.attributes.uv.array[ 3 ] = 0.5;
 				nxGeometry.rotateY( - Math.PI / 2 );
 				nxGeometry.translate( - 50, 0, 0 );
 
-				var pyGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var pyGeometry = new PlaneBufferGeometry( 100, 100 );
 				pyGeometry.attributes.uv.array[ 5 ] = 0.5;
 				pyGeometry.attributes.uv.array[ 7 ] = 0.5;
 				pyGeometry.rotateX( - Math.PI / 2 );
 				pyGeometry.translate( 0, 50, 0 );
 
-				var pzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var pzGeometry = new PlaneBufferGeometry( 100, 100 );
 				pzGeometry.attributes.uv.array[ 1 ] = 0.5;
 				pzGeometry.attributes.uv.array[ 3 ] = 0.5;
 				pzGeometry.translate( 0, 0, 50 );
 
-				var nzGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var nzGeometry = new PlaneBufferGeometry( 100, 100 );
 				nzGeometry.attributes.uv.array[ 1 ] = 0.5;
 				nzGeometry.attributes.uv.array[ 3 ] = 0.5;
 				nzGeometry.rotateY( Math.PI );
@@ -151,23 +158,23 @@
 
 				}
 
-				var geometry = THREE.BufferGeometryUtils.mergeBufferGeometries( geometries );
+				var geometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
 				geometry.computeBoundingSphere();
 
-				var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
-				texture.magFilter = THREE.NearestFilter;
+				var texture = new TextureLoader().load( 'textures/minecraft/atlas.png' );
+				texture.magFilter = NearestFilter;
 
-				var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } ) );
+				var mesh = new Mesh( geometry, new MeshLambertMaterial( { map: texture, side: DoubleSide } ) );
 				scene.add( mesh );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				var ambientLight = new AmbientLight( 0xcccccc );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				var directionalLight = new DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( 1, 1, 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 );
 				container.appendChild( renderer.domElement );
@@ -194,7 +201,7 @@
 
 			function generateHeight( width, height ) {
 
-				var data = [], perlin = new THREE.ImprovedNoise(),
+				var data = [], perlin = new ImprovedNoise(),
 					size = width * height, quality = 2, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {

examples/webgl_geometry_minecraft_ao.html

@@ -22,22 +22,33 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="http://www.minecraft.net/" target="_blank" rel="noopener">minecraft</a> demo [ambient occlusion]. featuring <a href="http://painterlypack.net/" target="_blank" rel="noopener">painterly pack</a><br />(left click: forward, right click: backward)
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FirstPersonControls.js"></script>
-
-		<script src="js/math/ImprovedNoise.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,
+				BufferGeometry,
+				Clock,
+				Color,
+				DirectionalLight,
+				DoubleSide,
+				FogExp2,
+				Geometry,
+				LinearMipMapLinearFilter,
+				Matrix4,
+				Mesh,
+				MeshLambertMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				PlaneGeometry,
+				Scene,
+				TextureLoader,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
 			var container, stats;
 
@@ -48,7 +59,7 @@
 			var worldHalfDepth = worldDepth / 2;
 			var data = generateHeight( worldWidth, worldDepth );
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -57,10 +68,10 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
-				controls = new THREE.FirstPersonControls( camera );
+				controls = new FirstPersonControls( camera );
 
 				controls.movementSpeed = 1000;
 				controls.lookSpeed = 0.125;
@@ -69,18 +80,18 @@
 				controls.verticalMin = 1.1;
 				controls.verticalMax = 2.2;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
+				scene.fog = new FogExp2( 0xffffff, 0.00015 );
 
 				// sides
 
-				var light = new THREE.Color( 0xffffff );
-				var shadow = new THREE.Color( 0x505050 );
+				var light = new Color( 0xffffff );
+				var shadow = new Color( 0x505050 );
 
-				var matrix = new THREE.Matrix4();
+				var matrix = new Matrix4();
 
-				var pxGeometry = new THREE.PlaneGeometry( 100, 100 );
+				var pxGeometry = new PlaneGeometry( 100, 100 );
 				pxGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				pxGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				pxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -89,7 +100,7 @@
 				pxGeometry.rotateY( Math.PI / 2 );
 				pxGeometry.translate( 50, 0, 0 );
 
-				var nxGeometry = new THREE.PlaneGeometry( 100, 100 );
+				var nxGeometry = new PlaneGeometry( 100, 100 );
 				nxGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				nxGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				nxGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -98,7 +109,7 @@
 				nxGeometry.rotateY( - Math.PI / 2 );
 				nxGeometry.translate( - 50, 0, 0 );
 
-				var pyGeometry = new THREE.PlaneGeometry( 100, 100 );
+				var pyGeometry = new PlaneGeometry( 100, 100 );
 				pyGeometry.faces[ 0 ].vertexColors = [ light, light, light ];
 				pyGeometry.faces[ 1 ].vertexColors = [ light, light, light ];
 				pyGeometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
@@ -107,7 +118,7 @@
 				pyGeometry.rotateX( - Math.PI / 2 );
 				pyGeometry.translate( 0, 50, 0 );
 
-				var py2Geometry = new THREE.PlaneGeometry( 100, 100 );
+				var py2Geometry = new PlaneGeometry( 100, 100 );
 				py2Geometry.faces[ 0 ].vertexColors = [ light, light, light ];
 				py2Geometry.faces[ 1 ].vertexColors = [ light, light, light ];
 				py2Geometry.faceVertexUvs[ 0 ][ 0 ][ 1 ].y = 0.5;
@@ -117,7 +128,7 @@
 				py2Geometry.rotateY( Math.PI / 2 );
 				py2Geometry.translate( 0, 50, 0 );
 
-				var pzGeometry = new THREE.PlaneGeometry( 100, 100 );
+				var pzGeometry = new PlaneGeometry( 100, 100 );
 				pzGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				pzGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				pzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -125,7 +136,7 @@
 				pzGeometry.faceVertexUvs[ 0 ][ 1 ][ 2 ].y = 0.5;
 				pzGeometry.translate( 0, 0, 50 );
 
-				var nzGeometry = new THREE.PlaneGeometry( 100, 100 );
+				var nzGeometry = new PlaneGeometry( 100, 100 );
 				nzGeometry.faces[ 0 ].vertexColors = [ light, shadow, light ];
 				nzGeometry.faces[ 1 ].vertexColors = [ shadow, shadow, light ];
 				nzGeometry.faceVertexUvs[ 0 ][ 0 ][ 0 ].y = 0.5;
@@ -136,7 +147,7 @@
 
 				//
 
-				var geometry = new THREE.Geometry();
+				var geometry = new Geometry();
 
 				for ( var z = 0; z < worldDepth; z ++ ) {
 
@@ -251,26 +262,26 @@
 
 				}
 
-				geometry = new THREE.BufferGeometry().fromGeometry( geometry );
+				geometry = new BufferGeometry().fromGeometry( geometry );
 
-				var texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
-				texture.magFilter = THREE.NearestFilter;
-				texture.minFilter = THREE.LinearMipMapLinearFilter;
+				var texture = new TextureLoader().load( 'textures/minecraft/atlas.png' );
+				texture.magFilter = NearestFilter;
+				texture.minFilter = LinearMipMapLinearFilter;
 
-				var mesh = new THREE.Mesh(
+				var mesh = new Mesh(
 					geometry,
-					new THREE.MeshLambertMaterial( { map: texture, vertexColors: THREE.VertexColors, side: THREE.DoubleSide } )
+					new MeshLambertMaterial( { map: texture, vertexColors: VertexColors, side: DoubleSide } )
 				);
 				scene.add( mesh );
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc );
+				var ambientLight = new AmbientLight( 0xcccccc );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
+				var directionalLight = new DirectionalLight( 0xffffff, 2 );
 				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 				scene.add( directionalLight );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -297,7 +308,7 @@
 
 			function generateHeight( width, height ) {
 
-				var data = [], perlin = new THREE.ImprovedNoise(),
+				var data = [], perlin = new ImprovedNoise(),
 					size = width * height, quality = 2, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {

examples/webgl_geometry_normals.html

@@ -13,35 +13,53 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - normals</a>
 		</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/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				CircleBufferGeometry,
+				CylinderBufferGeometry,
+				IcosahedronBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				OctahedronBufferGeometry,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RingBufferGeometry,
+				Scene,
+				SphereBufferGeometry,
+				TorusBufferGeometry,
+				TorusKnotBufferGeometry,
+				VertexNormalsHelper,
+				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 container, stats, gui;
 			var camera, scene, renderer;
 			var mesh, geometry;
 
 			var geometries = [
-				new THREE.BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ),
-				new THREE.CircleBufferGeometry( 200, 32 ),
-				new THREE.CylinderBufferGeometry( 75, 75, 200, 8, 8 ),
-				new THREE.IcosahedronBufferGeometry( 100, 1 ),
-				new THREE.OctahedronBufferGeometry( 200, 0 ),
-				new THREE.PlaneBufferGeometry( 200, 200, 4, 4 ),
-				new THREE.RingBufferGeometry( 32, 64, 16 ),
-				new THREE.SphereBufferGeometry( 100, 12, 12 ),
-				new THREE.TorusBufferGeometry( 64, 16, 12, 12 ),
-				new THREE.TorusKnotBufferGeometry( 64, 16 )
+				new BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ),
+				new CircleBufferGeometry( 200, 32 ),
+				new CylinderBufferGeometry( 75, 75, 200, 8, 8 ),
+				new IcosahedronBufferGeometry( 100, 1 ),
+				new OctahedronBufferGeometry( 200, 0 ),
+				new PlaneBufferGeometry( 200, 200, 4, 4 ),
+				new RingBufferGeometry( 32, 64, 16 ),
+				new SphereBufferGeometry( 100, 12, 12 ),
+				new TorusBufferGeometry( 64, 16, 12, 12 ),
+				new TorusKnotBufferGeometry( 64, 16 )
 			];
 
 			var options = {
 				Geometry: 0
 			};
 
-			var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
+			var material = new MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
 
 			init();
 			animate();
@@ -64,10 +82,10 @@
 				var scaleFactor = 160 / geometry.boundingSphere.radius;
 				geometry.scale( scaleFactor, scaleFactor, scaleFactor );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
-				var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
+				var vertexNormalsHelper = new VertexNormalsHelper( mesh, 10 );
 				mesh.add( vertexNormalsHelper );
 
 			}
@@ -76,16 +94,16 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				addMesh();
 
 				//
 
-				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 );
@@ -110,7 +128,7 @@
 					TorusKnotBufferGeometry: 9
 				};
 
-				gui = new dat.GUI( { width: 350 } );
+				gui = new GUI( { width: 350 } );
 				gui.add( options, 'Geometry', geometries ).onChange( function () {
 
 					addMesh();
@@ -119,7 +137,7 @@
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_geometry_nurbs.html

@@ -20,13 +20,32 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - NURBS curve and surface example
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/curves/NURBSCurve.js"></script>
-		<script src="js/curves/NURBSSurface.js"></script>
-		<script src="js/curves/NURBSUtils.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BufferGeometry,
+				Color,
+				DirectionalLight,
+				DoubleSide,
+				Group,
+				Line,
+				LineBasicMaterial,
+				Math as _Math,
+				Mesh,
+				MeshLambertMaterial,
+				ParametricBufferGeometry,
+				PerspectiveCamera,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				Vector4,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { NURBSCurve } from './jsm/curves/NURBSCurve.js';
+			import { NURBSSurface } from './jsm/curves/NURBSSurface.js';
 
 			var container, stats;
 
@@ -49,19 +68,19 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 0, 150, 750 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x808080 ) );
+				scene.add( new AmbientLight( 0x808080 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				group = new THREE.Group();
+				group = new Group();
 				group.position.y = 50;
 				scene.add( group );
 
@@ -80,7 +99,7 @@
 				for ( var i = 0, j = 20; i < j; i ++ ) {
 
 					nurbsControlPoints.push(
-						new THREE.Vector4(
+						new Vector4(
 							Math.random() * 400 - 200,
 							Math.random() * 400,
 							Math.random() * 400 - 200,
@@ -89,27 +108,27 @@
 					);
 
 					var knot = ( i + 1 ) / ( j - nurbsDegree );
-					nurbsKnots.push( THREE.Math.clamp( knot, 0, 1 ) );
+					nurbsKnots.push( _Math.clamp( knot, 0, 1 ) );
 
 				}
 
-				var nurbsCurve = new THREE.NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
+				var nurbsCurve = new NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
 
-				var nurbsGeometry = new THREE.BufferGeometry();
+				var nurbsGeometry = new BufferGeometry();
 				nurbsGeometry.setFromPoints( nurbsCurve.getPoints( 200 ) );
 
-				var nurbsMaterial = new THREE.LineBasicMaterial( { color: 0x333333 } );
+				var nurbsMaterial = new LineBasicMaterial( { color: 0x333333 } );
 
-				var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
+				var nurbsLine = new Line( nurbsGeometry, nurbsMaterial );
 				nurbsLine.position.set( 200, - 100, 0 );
 				group.add( nurbsLine );
 
-				var nurbsControlPointsGeometry = new THREE.BufferGeometry();
+				var nurbsControlPointsGeometry = new BufferGeometry();
 				nurbsControlPointsGeometry.setFromPoints( nurbsCurve.controlPoints );
 
-				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { color: 0x333333, opacity: 0.25, transparent: true } );
+				var nurbsControlPointsMaterial = new LineBasicMaterial( { color: 0x333333, opacity: 0.25, transparent: true } );
 
-				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
+				var nurbsControlPointsLine = new Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
 				nurbsControlPointsLine.position.copy( nurbsLine.position );
 				group.add( nurbsControlPointsLine );
 
@@ -117,32 +136,32 @@
 
 				var nsControlPoints = [
 					[
-						new THREE.Vector4( - 200, - 200, 100, 1 ),
-						new THREE.Vector4( - 200, - 100, - 200, 1 ),
-						new THREE.Vector4( - 200, 100, 250, 1 ),
-						new THREE.Vector4( - 200, 200, - 100, 1 )
+						new Vector4( - 200, - 200, 100, 1 ),
+						new Vector4( - 200, - 100, - 200, 1 ),
+						new Vector4( - 200, 100, 250, 1 ),
+						new Vector4( - 200, 200, - 100, 1 )
 					],
 					[
-						new THREE.Vector4( 0, - 200, 0, 1 ),
-						new THREE.Vector4( 0, - 100, - 100, 5 ),
-						new THREE.Vector4( 0, 100, 150, 5 ),
-						new THREE.Vector4( 0, 200, 0, 1 )
+						new Vector4( 0, - 200, 0, 1 ),
+						new Vector4( 0, - 100, - 100, 5 ),
+						new Vector4( 0, 100, 150, 5 ),
+						new Vector4( 0, 200, 0, 1 )
 					],
 					[
-						new THREE.Vector4( 200, - 200, - 100, 1 ),
-						new THREE.Vector4( 200, - 100, 200, 1 ),
-						new THREE.Vector4( 200, 100, - 250, 1 ),
-						new THREE.Vector4( 200, 200, 100, 1 )
+						new Vector4( 200, - 200, - 100, 1 ),
+						new Vector4( 200, - 100, 200, 1 ),
+						new Vector4( 200, 100, - 250, 1 ),
+						new Vector4( 200, 200, 100, 1 )
 					]
 				];
 				var degree1 = 2;
 				var degree2 = 3;
 				var knots1 = [ 0, 0, 0, 1, 1, 1 ];
 				var knots2 = [ 0, 0, 0, 0, 1, 1, 1, 1 ];
-				var nurbsSurface = new THREE.NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
+				var nurbsSurface = new NURBSSurface( degree1, degree2, knots1, knots2, nsControlPoints );
 
-				var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				map.wrapS = map.wrapT = THREE.RepeatWrapping;
+				var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				map.wrapS = map.wrapT = RepeatWrapping;
 				map.anisotropy = 16;
 
 				function getSurfacePoint( u, v, target ) {
@@ -151,16 +170,16 @@
 
 				}
 
-				var geometry = new THREE.ParametricBufferGeometry( getSurfacePoint, 20, 20 );
-				var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } );
-				var object = new THREE.Mesh( geometry, material );
+				var geometry = new ParametricBufferGeometry( getSurfacePoint, 20, 20 );
+				var material = new MeshLambertMaterial( { map: map, side: DoubleSide } );
+				var object = new Mesh( geometry, material );
 				object.position.set( - 200, 100, 0 );
 				object.scale.multiplyScalar( 1 );
 				group.add( object );
 
 				//
 
-				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_geometry_shapes.html

@@ -16,10 +16,32 @@
 
 		<div id="info">Simple procedurally-generated shapes</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BufferGeometry,
+				Color,
+				DoubleSide,
+				ExtrudeBufferGeometry,
+				Group,
+				Line,
+				LineBasicMaterial,
+				Mesh,
+				MeshPhongMaterial,
+				Path,
+				PerspectiveCamera,
+				PointLight,
+				Points,
+				PointsMaterial,
+				RepeatWrapping,
+				Scene,
+				Shape,
+				ShapeBufferGeometry,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var container, stats;
 
@@ -43,26 +65,26 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 150, 500 );
 				scene.add( camera );
 
-				var light = new THREE.PointLight( 0xffffff, 0.8 );
+				var light = new PointLight( 0xffffff, 0.8 );
 				camera.add( light );
 
-				group = new THREE.Group();
+				group = new Group();
 				group.position.y = 50;
 				scene.add( group );
 
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 				var texture = loader.load( "textures/UV_Grid_Sm.jpg" );
 
 				// it's necessary to apply these settings in order to correctly display the texture on a shape geometry
 
-				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+				texture.wrapS = texture.wrapT = RepeatWrapping;
 				texture.repeat.set( 0.008, 0.008 );
 
 				function addShape( shape, extrudeSettings, color, x, y, z, rx, ry, rz, s ) {
@@ -70,9 +92,9 @@
 					// flat shape with texture
 					// note: default UVs generated by ShapeBufferGeometry are simply the x- and y-coordinates of the vertices
 
-					var geometry = new THREE.ShapeBufferGeometry( shape );
+					var geometry = new ShapeBufferGeometry( shape );
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { side: THREE.DoubleSide, map: texture } ) );
+					var mesh = new Mesh( geometry, new MeshPhongMaterial( { side: DoubleSide, map: texture } ) );
 					mesh.position.set( x, y, z - 175 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -80,9 +102,9 @@
 
 					// flat shape
 
-					var geometry = new THREE.ShapeBufferGeometry( shape );
+					var geometry = new ShapeBufferGeometry( shape );
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color, side: THREE.DoubleSide } ) );
+					var mesh = new Mesh( geometry, new MeshPhongMaterial( { color: color, side: DoubleSide } ) );
 					mesh.position.set( x, y, z - 125 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -90,9 +112,9 @@
 
 					// extruded shape
 
-					var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
+					var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
 
-					var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: color } ) );
+					var mesh = new Mesh( geometry, new MeshPhongMaterial( { color: color } ) );
 					mesh.position.set( x, y, z - 75 );
 					mesh.rotation.set( rx, ry, rz );
 					mesh.scale.set( s, s, s );
@@ -111,12 +133,12 @@
 					var points = shape.getPoints();
 					var spacedPoints = shape.getSpacedPoints( 50 );
 
-					var geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
-					var geometrySpacedPoints = new THREE.BufferGeometry().setFromPoints( spacedPoints );
+					var geometryPoints = new BufferGeometry().setFromPoints( points );
+					var geometrySpacedPoints = new BufferGeometry().setFromPoints( spacedPoints );
 
 					// solid line
 
-					var line = new THREE.Line( geometryPoints, new THREE.LineBasicMaterial( { color: color } ) );
+					var line = new Line( geometryPoints, new LineBasicMaterial( { color: color } ) );
 					line.position.set( x, y, z - 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
@@ -124,7 +146,7 @@
 
 					// line from equidistance sampled points
 
-					var line = new THREE.Line( geometrySpacedPoints, new THREE.LineBasicMaterial( { color: color } ) );
+					var line = new Line( geometrySpacedPoints, new LineBasicMaterial( { color: color } ) );
 					line.position.set( x, y, z + 25 );
 					line.rotation.set( rx, ry, rz );
 					line.scale.set( s, s, s );
@@ -132,7 +154,7 @@
 
 					// vertices from real points
 
-					var particles = new THREE.Points( geometryPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
+					var particles = new Points( geometryPoints, new PointsMaterial( { color: color, size: 4 } ) );
 					particles.position.set( x, y, z + 75 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
@@ -140,7 +162,7 @@
 
 					// equidistance sampled points
 
-					var particles = new THREE.Points( geometrySpacedPoints, new THREE.PointsMaterial( { color: color, size: 4 } ) );
+					var particles = new Points( geometrySpacedPoints, new PointsMaterial( { color: color, size: 4 } ) );
 					particles.position.set( x, y, z + 125 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
@@ -153,37 +175,37 @@
 
 				var californiaPts = [];
 
-				californiaPts.push( new THREE.Vector2( 610, 320 ) );
-				californiaPts.push( new THREE.Vector2( 450, 300 ) );
-				californiaPts.push( new THREE.Vector2( 392, 392 ) );
-				californiaPts.push( new THREE.Vector2( 266, 438 ) );
-				californiaPts.push( new THREE.Vector2( 190, 570 ) );
-				californiaPts.push( new THREE.Vector2( 190, 600 ) );
-				californiaPts.push( new THREE.Vector2( 160, 620 ) );
-				californiaPts.push( new THREE.Vector2( 160, 650 ) );
-				californiaPts.push( new THREE.Vector2( 180, 640 ) );
-				californiaPts.push( new THREE.Vector2( 165, 680 ) );
-				californiaPts.push( new THREE.Vector2( 150, 670 ) );
-				californiaPts.push( new THREE.Vector2( 90, 737 ) );
-				californiaPts.push( new THREE.Vector2( 80, 795 ) );
-				californiaPts.push( new THREE.Vector2( 50, 835 ) );
-				californiaPts.push( new THREE.Vector2( 64, 870 ) );
-				californiaPts.push( new THREE.Vector2( 60, 945 ) );
-				californiaPts.push( new THREE.Vector2( 300, 945 ) );
-				californiaPts.push( new THREE.Vector2( 300, 743 ) );
-				californiaPts.push( new THREE.Vector2( 600, 473 ) );
-				californiaPts.push( new THREE.Vector2( 626, 425 ) );
-				californiaPts.push( new THREE.Vector2( 600, 370 ) );
-				californiaPts.push( new THREE.Vector2( 610, 320 ) );
+				californiaPts.push( new Vector2( 610, 320 ) );
+				californiaPts.push( new Vector2( 450, 300 ) );
+				californiaPts.push( new Vector2( 392, 392 ) );
+				californiaPts.push( new Vector2( 266, 438 ) );
+				californiaPts.push( new Vector2( 190, 570 ) );
+				californiaPts.push( new Vector2( 190, 600 ) );
+				californiaPts.push( new Vector2( 160, 620 ) );
+				californiaPts.push( new Vector2( 160, 650 ) );
+				californiaPts.push( new Vector2( 180, 640 ) );
+				californiaPts.push( new Vector2( 165, 680 ) );
+				californiaPts.push( new Vector2( 150, 670 ) );
+				californiaPts.push( new Vector2( 90, 737 ) );
+				californiaPts.push( new Vector2( 80, 795 ) );
+				californiaPts.push( new Vector2( 50, 835 ) );
+				californiaPts.push( new Vector2( 64, 870 ) );
+				californiaPts.push( new Vector2( 60, 945 ) );
+				californiaPts.push( new Vector2( 300, 945 ) );
+				californiaPts.push( new Vector2( 300, 743 ) );
+				californiaPts.push( new Vector2( 600, 473 ) );
+				californiaPts.push( new Vector2( 626, 425 ) );
+				californiaPts.push( new Vector2( 600, 370 ) );
+				californiaPts.push( new Vector2( 610, 320 ) );
 
 				for ( var i = 0; i < californiaPts.length; i ++ ) californiaPts[ i ].multiplyScalar( 0.25 );
 
-				var californiaShape = new THREE.Shape( californiaPts );
+				var californiaShape = new Shape( californiaPts );
 
 
 				// Triangle
 
-				var triangleShape = new THREE.Shape();
+				var triangleShape = new Shape();
 				triangleShape.moveTo( 80, 20 );
 				triangleShape.lineTo( 40, 80 );
 				triangleShape.lineTo( 120, 80 );
@@ -194,7 +216,7 @@
 
 				var x = 0, y = 0;
 
-				var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
+				var heartShape = new Shape(); // From http://blog.burlock.org/html5/130-paths
 
 				heartShape.moveTo( x + 25, y + 25 );
 				heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
@@ -209,7 +231,7 @@
 
 				var sqLength = 80;
 
-				var squareShape = new THREE.Shape();
+				var squareShape = new Shape();
 				squareShape.moveTo( 0, 0 );
 				squareShape.lineTo( 0, sqLength );
 				squareShape.lineTo( sqLength, sqLength );
@@ -221,7 +243,7 @@
 
 				var rectLength = 120, rectWidth = 40;
 
-				var rectShape = new THREE.Shape();
+				var rectShape = new Shape();
 				rectShape.moveTo( 0, 0 );
 				rectShape.lineTo( 0, rectWidth );
 				rectShape.lineTo( rectLength, rectWidth );
@@ -231,7 +253,7 @@
 
 				// Rounded rectangle
 
-				var roundedRectShape = new THREE.Shape();
+				var roundedRectShape = new Shape();
 
 				( function roundedRect( ctx, x, y, width, height, radius ) {
 
@@ -250,7 +272,7 @@
 
 				// Track
 
-				var trackShape = new THREE.Shape();
+				var trackShape = new Shape();
 
 				trackShape.moveTo( 40, 40 );
 				trackShape.lineTo( 40, 160 );
@@ -262,7 +284,7 @@
 				// Circle
 
 				var circleRadius = 40;
-				var circleShape = new THREE.Shape();
+				var circleShape = new Shape();
 				circleShape.moveTo( 0, circleRadius );
 				circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
 				circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
@@ -274,7 +296,7 @@
 
 				var x = y = 0;
 
-				var fishShape = new THREE.Shape();
+				var fishShape = new Shape();
 
 				fishShape.moveTo( x, y );
 				fishShape.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 );
@@ -286,11 +308,11 @@
 
 				// Arc circle
 
-				var arcShape = new THREE.Shape();
+				var arcShape = new Shape();
 				arcShape.moveTo( 50, 10 );
 				arcShape.absarc( 10, 10, 40, 0, Math.PI * 2, false );
 
-				var holePath = new THREE.Path();
+				var holePath = new Path();
 				holePath.moveTo( 20, 10 );
 				holePath.absarc( 10, 10, 10, 0, Math.PI * 2, true );
 				arcShape.holes.push( holePath );
@@ -298,22 +320,22 @@
 
 				// Smiley
 
-				var smileyShape = new THREE.Shape();
+				var smileyShape = new Shape();
 				smileyShape.moveTo( 80, 40 );
 				smileyShape.absarc( 40, 40, 40, 0, Math.PI * 2, false );
 
-				var smileyEye1Path = new THREE.Path();
+				var smileyEye1Path = new Path();
 				smileyEye1Path.moveTo( 35, 20 );
 				smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
 
 				smileyShape.holes.push( smileyEye1Path );
 
-				var smileyEye2Path = new THREE.Path();
+				var smileyEye2Path = new Path();
 				smileyEye2Path.moveTo( 65, 20 );
 				smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI * 2, true );
 				smileyShape.holes.push( smileyEye2Path );
 
-				var smileyMouthPath = new THREE.Path();
+				var smileyMouthPath = new Path();
 				smileyMouthPath.moveTo( 20, 40 );
 				smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
 				smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
@@ -326,12 +348,12 @@
 				// Spline shape
 
 				var splinepts = [];
-				splinepts.push( new THREE.Vector2( 70, 20 ) );
-				splinepts.push( new THREE.Vector2( 80, 90 ) );
-				splinepts.push( new THREE.Vector2( - 30, 70 ) );
-				splinepts.push( new THREE.Vector2( 0, 0 ) );
+				splinepts.push( new Vector2( 70, 20 ) );
+				splinepts.push( new Vector2( 80, 90 ) );
+				splinepts.push( new Vector2( - 30, 70 ) );
+				splinepts.push( new Vector2( 0, 0 ) );
 
-				var splineShape = new THREE.Shape();
+				var splineShape = new Shape();
 				splineShape.moveTo( 0, 0 );
 				splineShape.splineThru( splinepts );
 
@@ -361,7 +383,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_spline_editor.html

@@ -22,16 +22,35 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - catmull spline editor
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/DragControls.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/controls/TransformControls.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				BufferAttribute,
+				BufferGeometry,
+				CatmullRomCurve3,
+				Color,
+				GridHelper,
+				LightShadow,
+				Line,
+				LineBasicMaterial,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				ShadowMaterial,
+				SpotLight,
+				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 { DragControls } from './jsm/controls/DragControls.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { TransformControls } from './jsm/controls/TransformControls.js';
 
 			String.prototype.format = function () {
 
@@ -51,9 +70,9 @@
 			var splineHelperObjects = [];
 			var splinePointsLength = 4;
 			var positions = [];
-			var point = new THREE.Vector3();
+			var point = new Vector3();
 
-			var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+			var geometry = new BoxBufferGeometry( 20, 20, 20 );
 			var transformControl;
 
 			var ARC_SEGMENTS = 200;
@@ -77,43 +96,43 @@
 
 				container = document.getElementById( 'container' );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 250, 1000 );
 				scene.add( camera );
 
-				scene.add( new THREE.AmbientLight( 0xf0f0f0 ) );
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				scene.add( new AmbientLight( 0xf0f0f0 ) );
+				var light = new SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 1500, 200 );
 				light.castShadow = true;
-				light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 200, 2000 ) );
+				light.shadow = new LightShadow( new PerspectiveCamera( 70, 1, 200, 2000 ) );
 				light.shadow.bias = - 0.000222;
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 				scene.add( light );
 
-				var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
+				var planeGeometry = new PlaneBufferGeometry( 2000, 2000 );
 				planeGeometry.rotateX( - Math.PI / 2 );
-				var planeMaterial = new THREE.ShadowMaterial( { opacity: 0.2 } );
+				var planeMaterial = new ShadowMaterial( { opacity: 0.2 } );
 
-				var plane = new THREE.Mesh( planeGeometry, planeMaterial );
+				var plane = new Mesh( planeGeometry, planeMaterial );
 				plane.position.y = - 200;
 				plane.receiveShadow = true;
 				scene.add( plane );
 
-				var helper = new THREE.GridHelper( 2000, 100 );
+				var helper = new GridHelper( 2000, 100 );
 				helper.position.y = - 199;
 				helper.material.opacity = 0.25;
 				helper.material.transparent = true;
 				scene.add( helper );
 
-				//var axes = new THREE.AxesHelper( 1000 );
+				//var axes = new AxesHelper( 1000 );
 				//axes.position.set( - 500, - 500, - 500 );
 				//scene.add( axes );
 
-				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;
@@ -122,7 +141,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'uniform' );
 				gui.add( params, 'tension', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
@@ -139,7 +158,7 @@
 				gui.open();
 
 				// Controls
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.damping = 0.2;
 				controls.addEventListener( 'change', render );
 
@@ -155,7 +174,7 @@
 
 				} );
 
-				transformControl = new THREE.TransformControls( camera, renderer.domElement );
+				transformControl = new TransformControls( camera, renderer.domElement );
 				transformControl.addEventListener( 'change', render );
 				transformControl.addEventListener( 'dragging-changed', function ( event ) {
 
@@ -189,7 +208,7 @@
 
 				} );
 
-				var dragcontrols = new THREE.DragControls( splineHelperObjects, camera, renderer.domElement ); //
+				var dragcontrols = new DragControls( splineHelperObjects, camera, renderer.domElement ); //
 				dragcontrols.enabled = false;
 				dragcontrols.addEventListener( 'hoveron', function ( event ) {
 
@@ -247,30 +266,30 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
+				var geometry = new BufferGeometry();
+				geometry.addAttribute( 'position', new BufferAttribute( new Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
 
-				var curve = new THREE.CatmullRomCurve3( positions );
+				var curve = new CatmullRomCurve3( positions );
 				curve.curveType = 'catmullrom';
-				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
+				curve.mesh = new Line( geometry.clone(), new LineBasicMaterial( {
 					color: 0xff0000,
 					opacity: 0.35
 				} ) );
 				curve.mesh.castShadow = true;
 				splines.uniform = curve;
 
-				curve = new THREE.CatmullRomCurve3( positions );
+				curve = new CatmullRomCurve3( positions );
 				curve.curveType = 'centripetal';
-				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
+				curve.mesh = new Line( geometry.clone(), new LineBasicMaterial( {
 					color: 0x00ff00,
 					opacity: 0.35
 				} ) );
 				curve.mesh.castShadow = true;
 				splines.centripetal = curve;
 
-				curve = new THREE.CatmullRomCurve3( positions );
+				curve = new CatmullRomCurve3( positions );
 				curve.curveType = 'chordal';
-				curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
+				curve.mesh = new Line( geometry.clone(), new LineBasicMaterial( {
 					color: 0x0000ff,
 					opacity: 0.35
 				} ) );
@@ -284,17 +303,17 @@
 
 				}
 
-				load( [ new THREE.Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
-					new THREE.Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
-					new THREE.Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
-					new THREE.Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
+				load( [ new Vector3( 289.76843686945404, 452.51481137238443, 56.10018915737797 ),
+					new Vector3( - 53.56300074753207, 171.49711742836848, - 14.495472686253045 ),
+					new Vector3( - 91.40118730204415, 176.4306956436485, - 6.958271935582161 ),
+					new Vector3( - 383.785318791128, 491.1365363371675, 47.869296953772746 ) ] );
 
 			}
 
 			function addSplineObject( position ) {
 
-				var material = new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } );
-				var object = new THREE.Mesh( geometry, material );
+				var material = new MeshLambertMaterial( { color: Math.random() * 0xffffff } );
+				var object = new Mesh( geometry, material );
 
 				if ( position ) {
 
@@ -371,7 +390,7 @@
 				for ( var i = 0; i < splinePointsLength; i ++ ) {
 
 					var p = splineHelperObjects[ i ].position;
-					strplace.push( 'new THREE.Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) );
+					strplace.push( 'new Vector3({0}, {1}, {2})'.format( p.x, p.y, p.z ) );
 
 				}
 

examples/webgl_geometry_teapot.html

@@ -12,24 +12,28 @@
 			from <a href="https://www.udacity.com/course/interactive-3d-graphics--cs291" target="_blank" rel="noopener">Udacity Interactive 3D Graphics</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
-
-		<script>
-
-			////////////////////////////////////////////////////////////////////////////////
-			// Utah/Newell Teapot demo
-			////////////////////////////////////////////////////////////////////////////////
-			/*global THREE, WEBGL, dat, window */
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				CubeTextureLoader,
+				DirectionalLight,
+				DoubleSide,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
 
 			var camera, scene, renderer;
 			var cameraControls;
@@ -49,8 +53,8 @@
 			var teapot, textureCube;
 
 			// allocate these just once
-			var diffuseColor = new THREE.Color();
-			var specularColor = new THREE.Color();
+			var diffuseColor = new Color();
+			var specularColor = new Color();
 
 			init();
 			render();
@@ -64,17 +68,17 @@
 				var canvasHeight = window.innerHeight;
 
 				// CAMERA
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
 				camera.position.set( - 600, 550, 1300 );
 
 				// LIGHTS
-				ambientLight = new THREE.AmbientLight( 0x333333 );	// 0.2
+				ambientLight = new AmbientLight( 0x333333 );	// 0.2
 
-				light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+				light = new DirectionalLight( 0xFFFFFF, 1.0 );
 				// direction is set in GUI
 
 				// RENDERER
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( canvasWidth, canvasHeight );
 				renderer.gammaInput = true;
@@ -85,12 +89,12 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				// CONTROLS
-				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
+				cameraControls = new OrbitControls( camera, renderer.domElement );
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP
-				var textureMap = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
+				var textureMap = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				textureMap.wrapS = textureMap.wrapT = RepeatWrapping;
 				textureMap.anisotropy = 16;
 
 				// REFLECTION MAP
@@ -101,27 +105,27 @@
 					path + "pz.jpg", path + "nz.jpg"
 				];
 
-				textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube = new CubeTextureLoader().load( urls );
 
 				// MATERIALS
-				var materialColor = new THREE.Color();
+				var materialColor = new Color();
 				materialColor.setRGB( 1.0, 1.0, 1.0 );
 
-				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
+				wireMaterial = new MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
 
-				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );
+				flatMaterial = new MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: DoubleSide } );
 
-				gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, side: THREE.DoubleSide } );
+				gouraudMaterial = new MeshLambertMaterial( { color: materialColor, side: DoubleSide } );
 
-				phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, side: THREE.DoubleSide } );
+				phongMaterial = new MeshPhongMaterial( { color: materialColor, side: DoubleSide } );
 
-				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );
+				texturedMaterial = new MeshPhongMaterial( { color: materialColor, map: textureMap, side: DoubleSide } );
 
-				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );
+				reflectiveMaterial = new MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: DoubleSide } );
 
 				// scene itself
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xAAAAAA );
+				scene = new Scene();
+				scene.background = new Color( 0xAAAAAA );
 
 				scene.add( ambientLight );
 				scene.add( light );
@@ -181,7 +185,7 @@
 
 				var h;
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				// material (attributes)
 
@@ -315,7 +319,7 @@
 
 				}
 
-				var teapotGeometry = new THREE.TeapotBufferGeometry( teapotSize,
+				var teapotGeometry = new TeapotBufferGeometry( teapotSize,
 					tess,
 					effectController.bottom,
 					effectController.lid,
@@ -323,7 +327,7 @@
 					effectController.fitLid,
 					! effectController.nonblinn );
 
-				teapot = new THREE.Mesh(
+				teapot = new Mesh(
 					teapotGeometry,
 					shading === "wireframe" ? wireMaterial : (
 						shading === "flat" ? flatMaterial : (

examples/webgl_geometry_terrain.html

@@ -20,21 +20,25 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FirstPersonControls.js"></script>
-
-		<script src="js/math/ImprovedNoise.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 {
+				CanvasTexture,
+				ClampToEdgeWrapping,
+				Clock,
+				Color,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
 			var container, stats;
 
@@ -45,7 +49,7 @@
 			var worldWidth = 256, worldDepth = 256,
 				worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -54,12 +58,12 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xbfd1e5 );
+				scene = new Scene();
+				scene.background = new Color( 0xbfd1e5 );
 
-				controls = new THREE.FirstPersonControls( camera );
+				controls = new FirstPersonControls( camera );
 				controls.movementSpeed = 1000;
 				controls.lookSpeed = 0.1;
 
@@ -67,7 +71,7 @@
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
 
-				var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
+				var geometry = new PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				var vertices = geometry.attributes.position.array;
@@ -78,14 +82,14 @@
 
 				}
 
-				texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
-				texture.wrapS = THREE.ClampToEdgeWrapping;
-				texture.wrapT = THREE.ClampToEdgeWrapping;
+				texture = new CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
+				texture.wrapS = ClampToEdgeWrapping;
+				texture.wrapT = ClampToEdgeWrapping;
 
-				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
+				mesh = new Mesh( geometry, new MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -113,7 +117,7 @@
 			function generateHeight( width, height ) {
 
 				var size = width * height, data = new Uint8Array( size ),
-					perlin = new THREE.ImprovedNoise(), quality = 1, z = Math.random() * 100;
+					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
@@ -136,9 +140,9 @@
 
 				var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
+				vector3 = new Vector3( 0, 0, 0 );
 
-				sun = new THREE.Vector3( 1, 1, 1 );
+				sun = new Vector3( 1, 1, 1 );
 				sun.normalize();
 
 				canvas = document.createElement( 'canvas' );

examples/webgl_geometry_terrain_fog.html

@@ -20,20 +20,26 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FirstPersonControls.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/math/ImprovedNoise.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				CanvasTexture,
+				ClampToEdgeWrapping,
+				Clock,
+				Color,
+				FogExp2,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
 			var container, stats;
 
@@ -45,7 +51,7 @@
 			var worldHalfWidth = worldWidth / 2;
 			var worldHalfDepth = worldDepth / 2;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -54,21 +60,21 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				controls = new THREE.FirstPersonControls( camera );
+				controls = new FirstPersonControls( camera );
 				controls.movementSpeed = 150;
 				controls.lookSpeed = 0.1;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xefd1b5 );
-				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
+				scene = new Scene();
+				scene.background = new Color( 0xefd1b5 );
+				scene.fog = new FogExp2( 0xefd1b5, 0.0025 );
 
 				var data = generateHeight( worldWidth, worldDepth );
 
 				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
 
-				var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
+				var geometry = new PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				var vertices = geometry.attributes.position.array;
@@ -79,14 +85,14 @@
 
 				}
 
-				texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
-				texture.wrapS = THREE.ClampToEdgeWrapping;
-				texture.wrapT = THREE.ClampToEdgeWrapping;
+				texture = new CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
+				texture.wrapS = ClampToEdgeWrapping;
+				texture.wrapT = ClampToEdgeWrapping;
 
-				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
+				mesh = new Mesh( geometry, new MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -115,7 +121,7 @@
 			function generateHeight( width, height ) {
 
 				var size = width * height, data = new Uint8Array( size ),
-					perlin = new THREE.ImprovedNoise(), quality = 1, z = Math.random() * 100;
+					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
@@ -138,9 +144,9 @@
 
 				var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
+				vector3 = new Vector3( 0, 0, 0 );
 
-				sun = new THREE.Vector3( 1, 1, 1 );
+				sun = new Vector3( 1, 1, 1 );
 				sun.normalize();
 
 				canvas = document.createElement( 'canvas' );

examples/webgl_geometry_terrain_raycast.html

@@ -20,21 +20,28 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain raycasting demo</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/math/ImprovedNoise.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 {
+				CanvasTexture,
+				ClampToEdgeWrapping,
+				Color,
+				ConeBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				MeshNormalMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				Scene,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
 			var container, stats;
 
@@ -47,8 +54,8 @@
 
 			var helper;
 
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2();
+			var raycaster = new Raycaster();
+			var mouse = new Vector2();
 
 			init();
 			animate();
@@ -58,17 +65,17 @@
 				container = document.getElementById( 'container' );
 				container.innerHTML = "";
 
-				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 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xbfd1e5 );
+				scene = new Scene();
+				scene.background = new Color( 0xbfd1e5 );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 10, 20000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 10, 20000 );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1000;
 				controls.maxDistance = 10000;
 				controls.maxPolarAngle = Math.PI / 2;
@@ -82,7 +89,7 @@
 				camera.position.x = 2000;
 				controls.update();
 
-				var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
+				var geometry = new PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				var vertices = geometry.attributes.position.array;
@@ -97,17 +104,17 @@
 
 				//
 
-				texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
-				texture.wrapS = THREE.ClampToEdgeWrapping;
-				texture.wrapT = THREE.ClampToEdgeWrapping;
+				texture = new CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
+				texture.wrapS = ClampToEdgeWrapping;
+				texture.wrapT = ClampToEdgeWrapping;
 
-				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
+				mesh = new Mesh( geometry, new MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );
 
-				var geometry = new THREE.ConeBufferGeometry( 20, 100, 3 );
+				var geometry = new ConeBufferGeometry( 20, 100, 3 );
 				geometry.translate( 0, 50, 0 );
 				geometry.rotateX( Math.PI / 2 );
-				helper = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
+				helper = new Mesh( geometry, new MeshNormalMaterial() );
 				scene.add( helper );
 
 				container.addEventListener( 'mousemove', onMouseMove, false );
@@ -133,7 +140,7 @@
 			function generateHeight( width, height ) {
 
 				var size = width * height, data = new Uint8Array( size ),
-					perlin = new THREE.ImprovedNoise(), quality = 1, z = Math.random() * 100;
+					perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
 
 				for ( var j = 0; j < 4; j ++ ) {
 
@@ -158,9 +165,9 @@
 
 				var canvas, canvasScaled, context, image, imageData, vector3, sun, shade;
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
+				vector3 = new Vector3( 0, 0, 0 );
 
-				sun = new THREE.Vector3( 1, 1, 1 );
+				sun = new Vector3( 1, 1, 1 );
 				sun.normalize();
 
 				canvas = document.createElement( 'canvas' );

examples/webgl_geometry_text.html

@@ -18,21 +18,31 @@
 			<a id="permalink" href="#">permalink</a>
 		</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() );
-
-			}
-
-			THREE.Cache.enabled = true;
+		<script type="module">
+			import {
+				BufferGeometry,
+				Color,
+				DirectionalLight,
+				Fog,
+				FontLoader,
+				Group,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				Scene,
+				TextGeometry,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
+
+			Cache.enabled = true;
 
 			var container, stats, permalink, hex;
 
@@ -114,24 +124,24 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
 				camera.position.set( 0, 400, 700 );
 
-				cameraTarget = new THREE.Vector3( 0, 150, 0 );
+				cameraTarget = new Vector3( 0, 150, 0 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
-				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
+				scene = new Scene();
+				scene.background = new Color( 0x000000 );
+				scene.fog = new Fog( 0x000000, 250, 1400 );
 
 				// LIGHTS
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				var dirLight = new DirectionalLight( 0xffffff, 0.125 );
 				dirLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
+				var pointLight = new PointLight( 0xffffff, 1.5 );
 				pointLight.position.set( 0, 100, 90 );
 				scene.add( pointLight );
 
@@ -167,20 +177,20 @@
 				}
 
 				materials = [
-					new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
-					new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
+					new MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
+					new MeshPhongMaterial( { color: 0xffffff } ) // side
 				];
 
-				group = new THREE.Group();
+				group = new Group();
 				group.position.y = 100;
 
 				scene.add( group );
 
 				loadFont();
 
-				var plane = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 10000, 10000 ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } )
+				var plane = new Mesh(
+					new PlaneBufferGeometry( 10000, 10000 ),
+					new MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } )
 				);
 				plane.position.y = 100;
 				plane.rotation.x = - Math.PI / 2;
@@ -188,7 +198,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 );
@@ -333,7 +343,7 @@
 
 			function loadFont() {
 
-				var loader = new THREE.FontLoader();
+				var loader = new FontLoader();
 				loader.load( 'fonts/' + fontName + '_' + fontWeight + '.typeface.json', function ( response ) {
 
 					font = response;
@@ -346,7 +356,7 @@
 
 			function createText() {
 
-				textGeo = new THREE.TextGeometry( text, {
+				textGeo = new TextGeometry( text, {
 
 					font: font,
 
@@ -387,7 +397,7 @@
 							var vb = textGeo.vertices[ face.b ];
 							var vc = textGeo.vertices[ face.c ];
 
-							var s = THREE.GeometryUtils.triangleArea( va, vb, vc );
+							var s = GeometryUtils.triangleArea( va, vb, vc );
 
 							if ( s > triangleAreaHeuristics ) {
 
@@ -407,9 +417,9 @@
 
 				var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				textGeo = new THREE.BufferGeometry().fromGeometry( textGeo );
+				textGeo = new BufferGeometry().fromGeometry( textGeo );
 
-				textMesh1 = new THREE.Mesh( textGeo, materials );
+				textMesh1 = new Mesh( textGeo, materials );
 
 				textMesh1.position.x = centerOffset;
 				textMesh1.position.y = hover;
@@ -422,7 +432,7 @@
 
 				if ( mirror ) {
 
-					textMesh2 = new THREE.Mesh( textGeo, materials );
+					textMesh2 = new Mesh( textGeo, materials );
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = - hover;

examples/webgl_geometry_text_shapes.html

@@ -20,10 +20,24 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - simple text from json fonts
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BufferGeometry,
+				Color,
+				DoubleSide,
+				FontLoader,
+				Line,
+				LineBasicMaterial,
+				Mesh,
+				MeshBasicMaterial,
+				Object3D,
+				PerspectiveCamera,
+				Scene,
+				ShapeBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var camera, scene, renderer;
 
@@ -32,36 +46,36 @@
 
 			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( 0, - 400, 600 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				var loader = new THREE.FontLoader();
+				var loader = new FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
 					var xMid, text;
 
 					var color = 0x006699;
 
-					var matDark = new THREE.LineBasicMaterial( {
+					var matDark = new LineBasicMaterial( {
 						color: color,
-						side: THREE.DoubleSide
+						side: DoubleSide
 					} );
 
-					var matLite = new THREE.MeshBasicMaterial( {
+					var matLite = new MeshBasicMaterial( {
 						color: color,
 						transparent: true,
 						opacity: 0.4,
-						side: THREE.DoubleSide
+						side: DoubleSide
 					} );
 
-					var message = "   Three.js\nSimple text.";
+					var message = "   js\nSimple text.";
 
 					var shapes = font.generateShapes( message, 100 );
 
-					var geometry = new THREE.ShapeBufferGeometry( shapes );
+					var geometry = new ShapeBufferGeometry( shapes );
 
 					geometry.computeBoundingBox();
 
@@ -71,7 +85,7 @@
 
 					// make shape ( N.B. edge view not visible )
 
-					text = new THREE.Mesh( geometry, matLite );
+					text = new Mesh( geometry, matLite );
 					text.position.z = - 150;
 					scene.add( text );
 
@@ -98,18 +112,18 @@
 
 					shapes.push.apply( shapes, holeShapes );
 
-					var lineText = new THREE.Object3D();
+					var lineText = new Object3D();
 
 					for ( var i = 0; i < shapes.length; i ++ ) {
 
 						var shape = shapes[ i ];
 
 						var points = shape.getPoints();
-						var geometry = new THREE.BufferGeometry().setFromPoints( points );
+						var geometry = new BufferGeometry().setFromPoints( points );
 
 						geometry.translate( xMid, 0, 0 );
 
-						var lineMesh = new THREE.Line( geometry, matDark );
+						var lineMesh = new Line( geometry, matDark );
 						lineText.add( lineMesh );
 
 					}
@@ -118,12 +132,12 @@
 
 				} ); //end load function
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 0, 0 );
 				controls.update();
 

examples/webgl_geometry_text_stroke.html

@@ -20,11 +20,22 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - simple text from json fonts
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/SVGLoader.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				Color,
+				DoubleSide,
+				FontLoader,
+				Group,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				ShapeBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { SVGLoader } from './jsm/loaders/SVGLoader.js';
 
 			var camera, scene, renderer;
 
@@ -33,36 +44,36 @@
 
 			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( 0, - 400, 600 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				var loader = new THREE.FontLoader();
+				var loader = new FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
 					var xMid, text;
 
-					var color = new THREE.Color( 0x006699 );
+					var color = new Color( 0x006699 );
 
-					var matDark = new THREE.MeshBasicMaterial( {
+					var matDark = new MeshBasicMaterial( {
 						color: color,
-						side: THREE.DoubleSide
+						side: DoubleSide
 					} );
 
-					var matLite = new THREE.MeshBasicMaterial( {
+					var matLite = new MeshBasicMaterial( {
 						color: color,
 						transparent: true,
 						opacity: 0.4,
-						side: THREE.DoubleSide
+						side: DoubleSide
 					} );
 
 					var message = "   Three.js\nStroke text.";
 
 					var shapes = font.generateShapes( message, 100 );
 
-					var geometry = new THREE.ShapeBufferGeometry( shapes );
+					var geometry = new ShapeBufferGeometry( shapes );
 
 					geometry.computeBoundingBox();
 
@@ -72,7 +83,7 @@
 
 					// make shape ( N.B. edge view not visible )
 
-					text = new THREE.Mesh( geometry, matLite );
+					text = new Mesh( geometry, matLite );
 					text.position.z = - 150;
 					scene.add( text );
 
@@ -99,9 +110,9 @@
 
 					shapes.push.apply( shapes, holeShapes );
 
-					var style = THREE.SVGLoader.getStrokeStyle( 5, color.getStyle() );
+					var style = SVGLoader.getStrokeStyle( 5, color.getStyle() );
 
-					var strokeText = new THREE.Group();
+					var strokeText = new Group();
 
 					for ( var i = 0; i < shapes.length; i ++ ) {
 
@@ -109,11 +120,11 @@
 
 						var points = shape.getPoints();
 
-						var geometry = THREE.SVGLoader.pointsToStroke( points, style );
+						var geometry = SVGLoader.pointsToStroke( points, style );
 
 						geometry.translate( xMid, 0, 0 );
 
-						var strokeMesh = new THREE.Mesh( geometry, matDark );
+						var strokeMesh = new Mesh( geometry, matDark );
 						strokeText.add( strokeMesh );
 
 					}
@@ -122,12 +133,12 @@
 
 				} ); //end load function
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 0, 0 );
 				controls.update();
 

examples/webgl_gpgpu_birds.html

@@ -18,25 +18,16 @@
 	<body>
 
 		<div id="info">
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="birds"></span> webgl gpgpu birds<br/>
-			Select <span id="options"></span> birds<br/>
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl gpgpu birds<br/>
 			Move mouse to disturb birds.
 		</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/misc/GPUComputationRenderer.js"></script>
-
 		<!--
 		TODO: If you're reading this, you may wish to improve this example by
 			- Create a better shading for the birds?
 
 		-->
 
-
 		<!-- shader for bird's position -->
 		<script id="fragmentShaderPosition" type="x-shader/x-fragment">
 
@@ -304,35 +295,44 @@
 
 		</script>
 
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
-
-			var hash = document.location.hash.substr( 1 );
-			if ( hash ) hash = parseInt( hash, 0 );
+		<script type="module">
+			import {
+				BufferAttribute,
+				BufferGeometry,
+				Color,
+				DoubleSide,
+				Fog,
+				Mesh,
+				PerspectiveCamera,
+				RepeatWrapping,
+				Scene,
+				ShaderMaterial,
+				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 { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 
 			/* TEXTURE WIDTH FOR SIMULATION */
-			var WIDTH = hash || 32;
+			var WIDTH = 32;
 
 			var BIRDS = WIDTH * WIDTH;
 
 			// Custom Geometry - using 3 triangles each. No UVs, no normals currently.
-			THREE.BirdGeometry = function () {
+			var BirdGeometry = function () {
 
 				var triangles = BIRDS * 3;
 				var points = triangles * 3;
 
-				THREE.BufferGeometry.call( this );
+				BufferGeometry.call( this );
 
-				var vertices = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
-				var birdColors = new THREE.BufferAttribute( new Float32Array( points * 3 ), 3 );
-				var references = new THREE.BufferAttribute( new Float32Array( points * 2 ), 2 );
-				var birdVertex = new THREE.BufferAttribute( new Float32Array( points ), 1 );
+				var vertices = new BufferAttribute( new Float32Array( points * 3 ), 3 );
+				var birdColors = new BufferAttribute( new Float32Array( points * 3 ), 3 );
+				var references = new BufferAttribute( new Float32Array( points * 2 ), 2 );
+				var birdVertex = new BufferAttribute( new Float32Array( points ), 1 );
 
 				this.addAttribute( 'position', vertices );
 				this.addAttribute( 'birdColor', birdColors );
@@ -387,7 +387,7 @@
 					var x = ( i % WIDTH ) / WIDTH;
 					var y = ~ ~ ( i / WIDTH ) / WIDTH;
 
-					var c = new THREE.Color(
+					var c = new Color(
 						0x444444 +
 						~ ~ ( v / 9 ) / BIRDS * 0x666666
 					);
@@ -407,11 +407,11 @@
 
 			};
 
-			THREE.BirdGeometry.prototype = Object.create( THREE.BufferGeometry.prototype );
+			BirdGeometry.prototype = Object.create( BufferGeometry.prototype );
 
 
 			var container, stats;
-			var camera, scene, renderer, i;
+			var camera, scene, renderer;
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -419,26 +419,6 @@
 
 			var BOUNDS = 800, BOUNDS_HALF = BOUNDS / 2;
 
-			document.getElementById( 'birds' ).innerText = BIRDS;
-
-			function change( n ) {
-
-				location.hash = n;
-				location.reload();
-				return false;
-
-			}
-
-			var options = '';
-			for ( i = 1; i < 7; i ++ ) {
-
-				var j = Math.pow( 2, i );
-				options += '<a href="#" onclick="return change(' + j + ')">' + ( j * j ) + '</a> ';
-
-			}
-
-			document.getElementById( 'options' ).innerHTML = options;
-
 			var last = performance.now();
 
 			var gpuCompute;
@@ -456,14 +436,14 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 350;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.Fog( 0xffffff, 100, 1000 );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
+				scene.fog = new Fog( 0xffffff, 100, 1000 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -481,9 +461,7 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-
-
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 
 				var effectController = {
@@ -504,7 +482,6 @@
 
 				valuesChanger();
 
-
 				gui.add( effectController, "separation", 0.0, 100.0, 1.0 ).onChange( valuesChanger );
 				gui.add( effectController, "alignment", 0.0, 100, 0.001 ).onChange( valuesChanger );
 				gui.add( effectController, "cohesion", 0.0, 100, 0.025 ).onChange( valuesChanger );
@@ -516,7 +493,7 @@
 
 			function initComputeRenderer() {
 
-				gpuCompute = new THREE.GPUComputationRenderer( WIDTH, WIDTH, renderer );
+				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
 				var dtPosition = gpuCompute.createTexture();
 				var dtVelocity = gpuCompute.createTexture();
@@ -541,13 +518,13 @@
 				velocityUniforms[ "alignmentDistance" ] = { value: 1.0 };
 				velocityUniforms[ "cohesionDistance" ] = { value: 1.0 };
 				velocityUniforms[ "freedomFactor" ] = { value: 1.0 };
-				velocityUniforms[ "predator" ] = { value: new THREE.Vector3() };
+				velocityUniforms[ "predator" ] = { value: new Vector3() };
 				velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed( 2 );
 
-				velocityVariable.wrapS = THREE.RepeatWrapping;
-				velocityVariable.wrapT = THREE.RepeatWrapping;
-				positionVariable.wrapS = THREE.RepeatWrapping;
-				positionVariable.wrapT = THREE.RepeatWrapping;
+				velocityVariable.wrapS = RepeatWrapping;
+				velocityVariable.wrapT = RepeatWrapping;
+				positionVariable.wrapS = RepeatWrapping;
+				positionVariable.wrapT = RepeatWrapping;
 
 				var error = gpuCompute.init();
 				if ( error !== null ) {
@@ -560,11 +537,11 @@
 
 			function initBirds() {
 
-				var geometry = new THREE.BirdGeometry();
+				var geometry = new BirdGeometry();
 
 				// For Vertex and Fragment
 				birdUniforms = {
-					"color": { value: new THREE.Color( 0xff2200 ) },
+					"color": { value: new Color( 0xff2200 ) },
 					"texturePosition": { value: null },
 					"textureVelocity": { value: null },
 					"time": { value: 1.0 },
@@ -572,15 +549,15 @@
 				};
 
 				// ShaderMaterial
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 					uniforms: birdUniforms,
 					vertexShader: document.getElementById( 'birdVS' ).textContent,
 					fragmentShader: document.getElementById( 'birdFS' ).textContent,
-					side: THREE.DoubleSide
+					side: DoubleSide
 
 				} );
 
-				var birdMesh = new THREE.Mesh( geometry, material );
+				var birdMesh = new Mesh( geometry, material );
 				birdMesh.rotation.y = Math.PI / 2;
 				birdMesh.matrixAutoUpdate = false;
 				birdMesh.updateMatrix();

examples/webgl_gpgpu_protoplanet.html

@@ -14,20 +14,9 @@
 	<body>
 
 		<div id="info">
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="protoplanets"></span> webgl gpgpu debris<br/>
-			Select <span id="options"></span> debris<br/>
-			<span id="warning"></span>
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="protoplanets"></span> webgl gpgpu debris
 		</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/misc/GPUComputationRenderer.js"></script>
-
-
 		<!-- Fragment shader for protoplanet's position -->
 		<script id="computeShaderPosition" type="x-shader/x-fragment">
 
@@ -242,57 +231,35 @@
 
 		</script>
 
+		<script type="module">
+			import {
+				BufferAttribute,
+				BufferGeometry,
+				Math as _Math,
+				PerspectiveCamera,
+				Points,
+				Scene,
+				ShaderMaterial,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script>
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
 
 			var isIE = /Trident/i.test( navigator.userAgent );
 			var isEdge = /Edge/i.test( navigator.userAgent );
 
-			var hash = document.location.hash.substr( 1 );
-
-			if ( hash ) hash = parseInt( hash, 0 );
-
 			// Texture width for simulation (each texel is a debris particle)
-			var WIDTH = hash || ( ( isIE || isEdge ) ? 4 : 64 );
+			var WIDTH = ( isIE || isEdge ) ? 4 : 64;
 
 			var container, stats;
 			var camera, scene, renderer, geometry;
 
 			var PARTICLES = WIDTH * WIDTH;
 
-			document.getElementById( 'protoplanets' ).innerText = PARTICLES;
-
-			function change( n ) {
-
-				location.hash = n;
-				location.reload();
-				return false;
-
-			}
-
-			var options = '';
-
-			for ( var i = 1; i < 8; i ++ ) {
-
-				var j = Math.pow( 2, i );
-				options += '<a href="#" onclick="return change(' + j + ')">' + ( j * j ) + '</a> ';
-
-			}
-
-			document.getElementById( 'options' ).innerHTML = options;
-
-			if ( isEdge || isIE ) {
-
-				document.getElementById( 'warning' ).innerText = 'particle counts greater than 16 may not render with ' + ( isEdge ? 'Edge' : 'IE11' );
-
-			}
-
 			var gpuCompute;
 			var velocityVariable;
 			var positionVariable;
@@ -308,18 +275,18 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 15000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 5, 15000 );
 				camera.position.y = 120;
 				camera.position.z = 400;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				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 );
 
 				effectController = {
 					// Can be changed dynamically
@@ -353,7 +320,7 @@
 
 			function initComputeRenderer() {
 
-				gpuCompute = new THREE.GPUComputationRenderer( WIDTH, WIDTH, renderer );
+				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
 				var dtPosition = gpuCompute.createTexture();
 				var dtVelocity = gpuCompute.createTexture();
@@ -397,7 +364,7 @@
 
 			function initProtoplanets() {
 
-				geometry = new THREE.BufferGeometry();
+				geometry = new BufferGeometry();
 
 				var positions = new Float32Array( PARTICLES * 3 );
 				var p = 0;
@@ -424,8 +391,8 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'uv', new BufferAttribute( uvs, 2 ) );
 
 				particleUniforms = {
 					"texturePosition": { value: null },
@@ -435,7 +402,7 @@
 				};
 
 				// ShaderMaterial
-				var material = new THREE.ShaderMaterial( {
+				var material = new ShaderMaterial( {
 					uniforms: particleUniforms,
 					vertexShader: document.getElementById( 'particleVertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'particleFragmentShader' ).textContent
@@ -443,7 +410,7 @@
 
 				material.extensions.drawBuffers = true;
 
-				var particles = new THREE.Points( geometry, material );
+				var particles = new Points( geometry, material );
 				particles.matrixAutoUpdate = false;
 				particles.updateMatrix();
 
@@ -530,14 +497,14 @@
 
 			function initGUI() {
 
-				var gui = new dat.GUI();
+				var gui = new GUI( { width: 300 } );
 
 				var folder1 = gui.addFolder( 'Dynamic parameters' );
 
 				folder1.add( effectController, "gravityConstant", 0.0, 1000.0, 0.05 ).onChange( dynamicValuesChanger );
 				folder1.add( effectController, "density", 0.0, 10.0, 0.001 ).onChange( dynamicValuesChanger );
 
-				var folder2 = gui.addFolder( 'Static parameters - press restartSimulation' );
+				var folder2 = gui.addFolder( 'Static parameters' );
 
 				folder2.add( effectController, "radius", 10.0, 1000.0, 1.0 );
 				folder2.add( effectController, "height", 0.0, 50.0, 0.01 );
@@ -564,7 +531,7 @@
 
 			function getCameraConstant( camera ) {
 
-				return window.innerHeight / ( Math.tan( THREE.Math.DEG2RAD * 0.5 * camera.fov ) / camera.zoom );
+				return window.innerHeight / ( Math.tan( _Math.DEG2RAD * 0.5 * camera.fov ) / camera.zoom );
 
 			}
 

examples/webgl_gpgpu_water.html

@@ -10,20 +10,10 @@
 
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - <span id="waterSize"></span> webgl gpgpu water<br/>
-			Select <span id="options"></span> water size<br/>
 			Move mouse to disturb water.<br>
 			Press mouse button to orbit around. 'W' key toggles wireframe.
 		</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/math/SimplexNoise.js"></script>
-
-		<script src="js/misc/GPUComputationRenderer.js"></script>
-
 
 		<!-- This is the 'compute shader' for the water heightmap: -->
 		<script id="heightmapFragmentShader" type="x-shader/x-fragment">
@@ -256,19 +246,41 @@
 
 		</script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
-
-			var hash = document.location.hash.substr( 1 );
-			if ( hash ) hash = parseInt( hash, 0 );
+		<script type="module">
+			import {
+				ClampToEdgeWrapping,
+				Color,
+				DirectionalLight,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				RGBAFormat,
+				Scene,
+				ShaderChunk,
+				ShaderLib,
+				ShaderMaterial,
+				SphereBufferGeometry,
+				UniformsUtils,
+				UnsignedByteType,
+				Vector2,
+				Vector3,
+				WebGLRenderer,
+				WebGLRenderTarget,
+			} 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 { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';
+			import { SimplexNoise } from './jsm/math/SimplexNoise.js';
 
 			// Texture width for simulation
-			var WIDTH = hash || 128;
+			var WIDTH = 128;
 
 			// Water size in system units
 			var BOUNDS = 512;
@@ -277,8 +289,8 @@
 			var container, stats;
 			var camera, scene, renderer;
 			var mouseMoved = false;
-			var mouseCoords = new THREE.Vector2();
-			var raycaster = new THREE.Raycaster();
+			var mouseCoords = new Vector2();
+			var raycaster = new Raycaster();
 
 			var waterMesh;
 			var meshRay;
@@ -289,33 +301,13 @@
 			var readWaterLevelShader;
 			var readWaterLevelRenderTarget;
 			var readWaterLevelImage;
-			var waterNormal = new THREE.Vector3();
+			var waterNormal = new Vector3();
 
 			var NUM_SPHERES = 5;
 			var spheres = [];
 			var spheresEnabled = true;
 
-			var simplex = new THREE.SimplexNoise();
-
-			document.getElementById( 'waterSize' ).innerText = WIDTH + ' x ' + WIDTH;
-
-			function change( n ) {
-
-				location.hash = n;
-				location.reload();
-				return false;
-
-			}
-
-
-			var options = '';
-			for ( var i = 4; i < 10; i ++ ) {
-
-				var j = Math.pow( 2, i );
-				options += '<a href="#" onclick="return change(' + j + ')">' + j + 'x' + j + '</a> ';
-
-			}
-			document.getElementById( 'options' ).innerHTML = options;
+			var simplex = new SimplexNoise();
 
 			init();
 			animate();
@@ -325,25 +317,25 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.set( 0, 200, 350 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var sun = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
+				var sun = new DirectionalLight( 0xFFFFFF, 1.0 );
 				sun.position.set( 300, 400, 175 );
 				scene.add( sun );
 
-				var sun2 = new THREE.DirectionalLight( 0x40A040, 0.6 );
+				var sun2 = new DirectionalLight( 0x40A040, 0.6 );
 				sun2.position.set( - 100, 350, - 200 );
 				scene.add( sun2 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				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 );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -367,7 +359,7 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				var effectController = {
 					mouseSize: 20.0,
@@ -418,26 +410,26 @@
 
 				var materialColor = 0x0040C0;
 
-				var geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
+				var geometry = new PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
 
 				// material: make a ShaderMaterial clone of MeshPhongMaterial, with customized vertex shader
-				var material = new THREE.ShaderMaterial( {
-					uniforms: THREE.UniformsUtils.merge( [
-						THREE.ShaderLib[ 'phong' ].uniforms,
+				var material = new ShaderMaterial( {
+					uniforms: UniformsUtils.merge( [
+						ShaderLib[ 'phong' ].uniforms,
 						{
 							"heightmap": { value: null }
 						}
 					] ),
 					vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
-					fragmentShader: THREE.ShaderChunk[ 'meshphong_frag' ]
+					fragmentShader: ShaderChunk[ 'meshphong_frag' ]
 
 				} );
 
 				material.lights = true;
 
 				// Material attributes from MeshPhongMaterial
-				material.color = new THREE.Color( materialColor );
-				material.specular = new THREE.Color( 0x111111 );
+				material.color = new Color( materialColor );
+				material.specular = new Color( 0x111111 );
 				material.shininess = 50;
 
 				// Sets the uniforms with the material values
@@ -452,7 +444,7 @@
 
 				waterUniforms = material.uniforms;
 
-				waterMesh = new THREE.Mesh( geometry, material );
+				waterMesh = new Mesh( geometry, material );
 				waterMesh.rotation.x = - Math.PI / 2;
 				waterMesh.matrixAutoUpdate = false;
 				waterMesh.updateMatrix();
@@ -460,8 +452,8 @@
 				scene.add( waterMesh );
 
 				// Mesh just for mouse raycasting
-				var geometryRay = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, 1, 1 );
-				meshRay = new THREE.Mesh( geometryRay, new THREE.MeshBasicMaterial( { color: 0xFFFFFF, visible: false } ) );
+				var geometryRay = new PlaneBufferGeometry( BOUNDS, BOUNDS, 1, 1 );
+				meshRay = new Mesh( geometryRay, new MeshBasicMaterial( { color: 0xFFFFFF, visible: false } ) );
 				meshRay.rotation.x = - Math.PI / 2;
 				meshRay.matrixAutoUpdate = false;
 				meshRay.updateMatrix();
@@ -470,7 +462,7 @@
 
 				// Creates the gpu computation class and sets it up
 
-				gpuCompute = new THREE.GPUComputationRenderer( WIDTH, WIDTH, renderer );
+				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
 				var heightmap0 = gpuCompute.createTexture();
 
@@ -480,7 +472,7 @@
 
 				gpuCompute.setVariableDependencies( heightmapVariable, [ heightmapVariable ] );
 
-				heightmapVariable.material.uniforms[ "mousePos" ] = { value: new THREE.Vector2( 10000, 10000 ) };
+				heightmapVariable.material.uniforms[ "mousePos" ] = { value: new Vector2( 10000, 10000 ) };
 				heightmapVariable.material.uniforms[ "mouseSize" ] = { value: 20.0 };
 				heightmapVariable.material.uniforms[ "viscosityConstant" ] = { value: 0.98 };
 				heightmapVariable.material.uniforms[ "heightCompensation" ] = { value: 0 };
@@ -498,7 +490,7 @@
 
 				// Create compute shader to read water level
 				readWaterLevelShader = gpuCompute.createShaderMaterial( document.getElementById( 'readWaterLevelFragmentShader' ).textContent, {
-					point1: { value: new THREE.Vector2() },
+					point1: { value: new Vector2() },
 					texture: { value: null }
 				} );
 				readWaterLevelShader.defines.WIDTH = WIDTH.toFixed( 1 );
@@ -507,13 +499,13 @@
 				// Create a 4x1 pixel image and a render target (Uint8, 4 channels, 1 byte per channel) to read water height and orientation
 				readWaterLevelImage = new Uint8Array( 4 * 1 * 4 );
 
-				readWaterLevelRenderTarget = new THREE.WebGLRenderTarget( 4, 1, {
-					wrapS: THREE.ClampToEdgeWrapping,
-					wrapT: THREE.ClampToEdgeWrapping,
-					minFilter: THREE.NearestFilter,
-					magFilter: THREE.NearestFilter,
-					format: THREE.RGBAFormat,
-					type: THREE.UnsignedByteType,
+				readWaterLevelRenderTarget = new WebGLRenderTarget( 4, 1, {
+					wrapS: ClampToEdgeWrapping,
+					wrapT: ClampToEdgeWrapping,
+					minFilter: NearestFilter,
+					magFilter: NearestFilter,
+					format: RGBAFormat,
+					type: UnsignedByteType,
 					stencilBuffer: false,
 					depthBuffer: false
 				} );
@@ -582,7 +574,7 @@
 
 			function createSpheres() {
 
-				var sphereTemplate = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 24, 12 ), new THREE.MeshPhongMaterial( { color: 0xFFFF00 } ) );
+				var sphereTemplate = new Mesh( new SphereBufferGeometry( 4, 24, 12 ), new MeshPhongMaterial( { color: 0xFFFF00 } ) );
 
 				for ( var i = 0; i < NUM_SPHERES; i ++ ) {
 
@@ -591,12 +583,12 @@
 
 						sphere = sphereTemplate.clone();
 
-				}
+					}
 
 					sphere.position.x = ( Math.random() - 0.5 ) * BOUNDS * 0.7;
 					sphere.position.z = ( Math.random() - 0.5 ) * BOUNDS * 0.7;
 
-					sphere.userData.velocity = new THREE.Vector3();
+					sphere.userData.velocity = new Vector3();
 
 					scene.add( sphere );
 

examples/webgl_gpu_particle_system.html

@@ -13,16 +13,24 @@
 			by <a href="http://charliehoey.com">Charlie Hoey</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="./js/controls/TrackballControls.js"></script>
-		<script src="./js/libs/dat.gui.min.js"></script>
-		<script src="./js/libs/stats.min.js"></script>
-		<script src="./js/objects/GPUParticleSystem.js"></script>
+		<script type="module">
+			import {
+				Clock,
+				PerspectiveCamera,
+				Scene,
+				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 { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { GPUParticleSystem } from './jsm/objects/GPUParticleSystem.js';
 
-		<script>
 			var camera, tick = 0,
-				scene, renderer, clock = new THREE.Clock(),
-				controls, container, gui = new dat.GUI( { width: 350 } ),
+				scene, renderer, clock = new Clock(),
+				controls, container, gui = new GUI( { width: 350 } ),
 				options, spawnerOptions, particleSystem;
 
 			var stats;
@@ -36,17 +44,17 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 28, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 28, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 100;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// The GPU Particle system extends THREE.Object3D, and so you can use it
 				// as you would any other scene graph component.	Particle positions will be
 				// relative to the position of the particle system, but you will probably only need one
 				// system for your whole scene
 
-				particleSystem = new THREE.GPUParticleSystem( {
+				particleSystem = new GPUParticleSystem( {
 					maxParticles: 250000
 				} );
 
@@ -55,9 +63,9 @@
 				// options passed during each spawned
 
 				options = {
-					position: new THREE.Vector3(),
+					position: new Vector3(),
 					positionRandomness: .3,
-					velocity: new THREE.Vector3(),
+					velocity: new Vector3(),
 					velocityRandomness: .5,
 					color: 0xaa88ff,
 					colorRandomness: .2,
@@ -94,14 +102,14 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				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 = 5.0;
 				controls.zoomSpeed = 2.2;
 				controls.panSpeed = 1;

examples/webgl_helpers.html

@@ -7,12 +7,28 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/GLTFLoader.js"></script>
-
-		<script>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - helpers
+		</div>
+
+		<script type="module">
+			import {
+				BoxHelper,
+				EdgesGeometry,
+				GridHelper,
+				Group,
+				LineSegments,
+				PerspectiveCamera,
+				PointLight,
+				PointLightHelper,
+				PolarGridHelper,
+				Scene,
+				VertexNormalsHelper,
+				WebGLRenderer,
+				WireframeGeometry
+			} from "../build/three.module.js";
+
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 			var scene, renderer;
 			var camera, light;
@@ -23,40 +39,40 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 400;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				light = new THREE.PointLight();
+				light = new PointLight();
 				light.position.set( 200, 100, 150 );
 				scene.add( light );
 
-				scene.add( new THREE.PointLightHelper( light, 15 ) );
+				scene.add( new PointLightHelper( light, 15 ) );
 
-				var gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
+				var gridHelper = new GridHelper( 400, 40, 0x0000ff, 0x808080 );
 				gridHelper.position.y = - 150;
 				gridHelper.position.x = - 150;
 				scene.add( gridHelper );
 
-				var polarGridHelper = new THREE.PolarGridHelper( 200, 16, 8, 64, 0x0000ff, 0x808080 );
+				var polarGridHelper = new PolarGridHelper( 200, 16, 8, 64, 0x0000ff, 0x808080 );
 				polarGridHelper.position.y = - 150;
 				polarGridHelper.position.x = 200;
 				scene.add( polarGridHelper );
 
-				var loader = new THREE.GLTFLoader();
+				var loader = new GLTFLoader();
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
 					var mesh = gltf.scene.children[ 0 ];
 
-					var group = new THREE.Group();
+					var group = new Group();
 					group.scale.multiplyScalar( 50 );
 					scene.add( group );
 
@@ -65,31 +81,31 @@
 
 					group.add( mesh );
 
-					vnh = new THREE.VertexNormalsHelper( mesh, 5 );
+					vnh = new VertexNormalsHelper( mesh, 5 );
 					scene.add( vnh );
 
-					scene.add( new THREE.BoxHelper( mesh ) );
+					scene.add( new BoxHelper( mesh ) );
 
-					var wireframe = new THREE.WireframeGeometry( mesh.geometry );
-					var line = new THREE.LineSegments( wireframe );
+					var wireframe = new WireframeGeometry( mesh.geometry );
+					var line = new LineSegments( wireframe );
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;
 					line.material.transparent = true;
 					line.position.x = 4;
 					group.add( line );
-					scene.add( new THREE.BoxHelper( line ) );
+					scene.add( new BoxHelper( line ) );
 
-					var edges = new THREE.EdgesGeometry( mesh.geometry );
-					var line = new THREE.LineSegments( edges );
+					var edges = new EdgesGeometry( mesh.geometry );
+					var line = new LineSegments( edges );
 					line.material.depthTest = false;
 					line.material.opacity = 0.25;
 					line.material.transparent = true;
 					line.position.x = - 4;
 					group.add( line );
-					scene.add( new THREE.BoxHelper( line ) );
+					scene.add( new BoxHelper( line ) );
 
-					scene.add( new THREE.BoxHelper( group ) );
-					scene.add( new THREE.BoxHelper( scene ) );
+					scene.add( new BoxHelper( group ) );
+					scene.add( new BoxHelper( scene ) );
 
 
 				} );