Examples: More module examples.

examples/misc_animation_authoring.html

@@ -13,12 +13,29 @@
 		Press "Q" to toggle world/local space, hold down "Ctrl" to snap to grid
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/TransformControls.js"></script>
 		<script src="js/libs/timeliner_gui.min.js"></script>
-		<script src="js/animation/TimelinerController.js"></script>
 
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				DirectionalLight,
+				GridHelper,
+				InterpolateLinear,
+				InterpolateSmooth,
+				Math as _Math,
+				MeshLambertMaterial,
+				Mesh,
+				PerspectiveCamera,
+				QuaternionKeyframeTrack,
+				Scene,
+				TextureLoader,
+				UVMapping,
+				VectorKeyframeTrack,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { TransformControls } from './jsm/controls/TransformControls.js';
+			import { TimelinerController } from './jsm/animation/TimelinerController.js';
 
 			var camera, scene, renderer, control;
 
@@ -27,36 +44,36 @@
 
 			function init() {
 
-				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 = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.set( 1000, 500, 1000 );
 				camera.lookAt( 0, 200, 0 );
 
-				scene = new THREE.Scene();
-				scene.add( new THREE.GridHelper( 1000, 10 ) );
+				scene = new Scene();
+				scene.add( new GridHelper( 1000, 10 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 2 );
+				var light = new DirectionalLight( 0xffffff, 2 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
 
-				var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
-				texture.mapping = THREE.UVMapping;
+				var texture = new TextureLoader().load( 'textures/crate.gif', render );
+				texture.mapping = UVMapping;
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-				var material = new THREE.MeshLambertMaterial( { map: texture } );
+				var geometry = new BoxBufferGeometry( 200, 200, 200 );
+				var material = new MeshLambertMaterial( { map: texture } );
 
-				control = new THREE.TransformControls( camera, renderer.domElement );
+				control = new TransformControls( camera, renderer.domElement );
 				control.addEventListener( 'change', render );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.name = "MyBox";
 				scene.add( mesh );
 
@@ -75,7 +92,7 @@
 
 						case 17: // Ctrl
 							control.setTranslationSnap( 100 );
-							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
+							control.setRotationSnap( _Math.degToRad( 15 ) );
 							break;
 
 						case 87: // W
@@ -120,23 +137,23 @@
 				var trackInfo = [
 
 					{
-						type: THREE.VectorKeyframeTrack,
+						type: VectorKeyframeTrack,
 						propertyPath: 'MyBox.position',
 						initialValue: [ 0, 0, 0 ],
-						interpolation: THREE.InterpolateSmooth
+						interpolation: InterpolateSmooth
 					},
 
 					{
-						type: THREE.QuaternionKeyframeTrack,
+						type: QuaternionKeyframeTrack,
 						propertyPath: 'MyBox.quaternion',
 						initialValue: [ 0, 0, 0, 1 ],
-						interpolation: THREE.InterpolateLinear
+						interpolation: InterpolateLinear
 
 					}
 
 				];
 
-				new Timeliner( new THREE.TimelinerController( scene, trackInfo, render ) );
+				new Timeliner( new TimelinerController( scene, trackInfo, render ) );
 
 			}
 

examples/misc_animation_groups.html

@@ -12,17 +12,27 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - groups
 		</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 {
+				AnimationClip,
+				AnimationMixer,
+				AnimationObjectGroup,
+				BoxBufferGeometry,
+				Clock,
+				ColorKeyframeTrack,
+				InterpolateDiscrete,
+				Mesh,
+				MeshBasicMaterial,
+				NumberKeyframeTrack,
+				PerspectiveCamera,
+				Quaternion,
+				QuaternionKeyframeTrack,
+				Scene,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var stats, clock;
 			var scene, camera, renderer, mixer;
@@ -32,22 +42,22 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 50, 50, 100 );
 				camera.lookAt( scene.position );
 
 				// all objects of this animation group share a common animation state
 
-				var animationGroup = new THREE.AnimationObjectGroup();
+				var animationGroup = new AnimationObjectGroup();
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
-				var material = new THREE.MeshBasicMaterial( { transparent: true } );
+				var geometry = new BoxBufferGeometry( 5, 5, 5 );
+				var material = new MeshBasicMaterial( { transparent: true } );
 
 				//
 
@@ -55,7 +65,7 @@
 
 					for ( var j = 0; j < 5; j ++ ) {
 
-						var mesh = new THREE.Mesh( geometry, material );
+						var mesh = new Mesh( geometry, material );
 
 						mesh.position.x = 32 - ( 16 * i );
 						mesh.position.y = 0;
@@ -70,28 +80,28 @@
 
 				// create some keyframe tracks
 
-				var xAxis = new THREE.Vector3( 1, 0, 0 );
-				var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
-				var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
-				var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
+				var xAxis = new Vector3( 1, 0, 0 );
+				var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
+				var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
+				var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
 
-				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
-				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+				var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );
+				var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
 
 				// create clip
 
-				var clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
+				var clip = new AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
 
 				// apply the animation group to the mixer as the root object
 
-				mixer = new THREE.AnimationMixer( animationGroup );
+				mixer = new AnimationMixer( animationGroup );
 
 				var clipAction = mixer.clipAction( clip );
 				clipAction.play();
 
 				//
 
-				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 );
@@ -103,7 +113,7 @@
 
 				//
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
 				//
 

examples/misc_animation_keys.html

@@ -12,17 +12,28 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - basic use
 		</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 {
+				AnimationClip,
+				AnimationMixer,
+				AxesHelper,
+				BoxBufferGeometry,
+				Clock,
+				ColorKeyframeTrack,
+				InterpolateDiscrete,
+				Mesh,
+				MeshBasicMaterial,
+				NumberKeyframeTrack,
+				PerspectiveCamera,
+				Quaternion,
+				QuaternionKeyframeTrack,
+				Scene,
+				Vector3,
+				VectorKeyframeTrack,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var stats, clock;
 			var scene, camera, renderer, mixer;
@@ -32,58 +43,58 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 50, 50, 100 );
 				camera.lookAt( scene.position );
 
 				//
 
-				var axesHelper = new THREE.AxesHelper( 10 );
+				var axesHelper = new AxesHelper( 10 );
 				scene.add( axesHelper );
 
 				//
 
-				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
-				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, transparent: true } );
-				var mesh = new THREE.Mesh( geometry, material );
+				var geometry = new BoxBufferGeometry( 5, 5, 5 );
+				var material = new MeshBasicMaterial( { color: 0xffffff, transparent: true } );
+				var mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
 				// Note: the keyframe track type should correspond to the type of the property being animated
 
 				// POSITION
-				var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
+				var positionKF = new VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );
 
 				// SCALE
-				var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
+				var scaleKF = new VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );
 
 				// ROTATION
 				// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
 				// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported
 
 				// set up rotation about x axis
-				var xAxis = new THREE.Vector3( 1, 0, 0 );
+				var xAxis = new Vector3( 1, 0, 0 );
 
-				var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
-				var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
-				var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
+				var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
+				var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
+				var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
 
 				// COLOR
-				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
+				var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );
 
 				// OPACITY
-				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+				var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
 
 				// create an animation sequence with the tracks
 				// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
-				var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
+				var clip = new AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );
 
 				// setup the AnimationMixer
-				mixer = new THREE.AnimationMixer( mesh );
+				mixer = new AnimationMixer( mesh );
 
 				// create a ClipAction and set it to play
 				var clipAction = mixer.clipAction( clip );
@@ -91,7 +102,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 );
@@ -103,7 +114,7 @@
 
 				//
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
 				//
 

examples/misc_boxselection.html

@@ -28,13 +28,24 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - box selection
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/interactive/SelectionBox.js"></script>
-		<script src="js/interactive/SelectionHelper.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Color,
+				Mesh,
+				MeshLambertMaterial,
+				PCFShadowMap,
+				PerspectiveCamera,
+				Scene,
+				SpotLight,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { SelectionBox } from './jsm/interactive/SelectionBox.js';
+			import { SelectionHelper } from './jsm/interactive/SelectionHelper.js';
 
 			var container, stats;
 			var camera, scene, renderer;
@@ -47,15 +58,15 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
+				scene.add( new AmbientLight( 0x505050 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 1.5 );
+				var light = new SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				light.angle = Math.PI / 9;
 
@@ -67,11 +78,11 @@
 
 				scene.add( light );
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new BoxBufferGeometry( 20, 20, 20 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 1600 - 800;
 					object.position.y = Math.random() * 900 - 450;
@@ -92,12 +103,12 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFShadowMap;
+				renderer.shadowMap.type = PCFShadowMap;
 
 				container.appendChild( renderer.domElement );
 
@@ -134,14 +145,14 @@
 
 			}
 
-			var selectionBox = new THREE.SelectionBox( camera, scene );
-			var helper = new THREE.SelectionHelper( selectionBox, renderer, 'selectBox' );
+			var selectionBox = new SelectionBox( camera, scene );
+			var helper = new SelectionHelper( selectionBox, renderer, 'selectBox' );
 
 			document.addEventListener( 'mousedown', function ( event ) {
 
 				for ( var item of selectionBox.collection ) {
 
-					item.material.emissive = new THREE.Color( 0x000000 );
+					item.material.emissive = new Color( 0x000000 );
 
 				}
 
@@ -158,7 +169,7 @@
 
 					for ( var i = 0; i < selectionBox.collection.length; i ++ ) {
 
-						selectionBox.collection[ i ].material.emissive = new THREE.Color( 0x000000 );
+						selectionBox.collection[ i ].material.emissive = new Color( 0x000000 );
 
 					}
 
@@ -171,7 +182,7 @@
 
 					for ( var i = 0; i < allSelected.length; i ++ ) {
 
-						allSelected[ i ].material.emissive = new THREE.Color( 0x0000ff );
+						allSelected[ i ].material.emissive = new Color( 0x0000ff );
 
 					}
 
@@ -190,7 +201,7 @@
 
 				for ( var i = 0; i < allSelected.length; i ++ ) {
 
-					allSelected[ i ].material.emissive = new THREE.Color( 0x0000ff );
+					allSelected[ i ].material.emissive = new Color( 0x0000ff );
 
 				}
 

examples/misc_controls_deviceorientation.html

@@ -13,10 +13,19 @@
 			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/DeviceOrientationControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 
 			var camera, scene, renderer, controls;
 
@@ -25,31 +34,31 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-				controls = new THREE.DeviceOrientationControls( camera );
+				controls = new DeviceOrientationControls( camera );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				var geometry = new SphereBufferGeometry( 500, 60, 40 );
 				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
-				var material = new THREE.MeshBasicMaterial( {
-					map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
+				var material = new MeshBasicMaterial( {
+					map: new TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
-				var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
-				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
-				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
+				var helperGeometry = new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
+				var helperMaterial = new MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
+				var helper = new Mesh( helperGeometry, helperMaterial );
 				scene.add( helper );
 
 				//
 
-				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/misc_controls_fly.html

@@ -19,23 +19,6 @@
 				color: orange
 			}
 		</style>
-
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/FlyControls.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FilmShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/FilmPass.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 	</head>
 
 	<body>
@@ -44,13 +27,33 @@
 		<b>WASD</b> move, <b>R|F</b> up | down, <b>Q|E</b> roll, <b>up|down</b> pitch, <b>left|right</b> yaw
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BufferGeometry,
+				Clock,
+				DirectionalLight,
+				Float32BufferAttribute,
+				FogExp2,
+				Mesh,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Points,
+				PointsMaterial,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { FlyControls } from './jsm/controls/FlyControls.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { FilmPass } from './jsm/postprocessing/FilmPass.js';
 
 			var radius = 6371;
 			var tilt = 0.41;
@@ -69,82 +72,82 @@
 
 			var composer;
 
-			var textureLoader = new THREE.TextureLoader();
+			var textureLoader = new TextureLoader();
 
-			var d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
+			var d, dPlanet, dMoon, dMoonVec = new Vector3();
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
+				camera = new PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
 				camera.position.z = radius * 5;
 
-				scene = new THREE.Scene();
-				scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
+				scene = new Scene();
+				scene.fog = new FogExp2( 0x000000, 0.00000025 );
 
-				dirLight = new THREE.DirectionalLight( 0xffffff );
+				dirLight = new DirectionalLight( 0xffffff );
 				dirLight.position.set( - 1, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				var materialNormalMap = new THREE.MeshPhongMaterial( {
+				var materialNormalMap = new MeshPhongMaterial( {
 
 					specular: 0x333333,
 					shininess: 15,
 					map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
 					specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
 					normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
-					normalScale: new THREE.Vector2( 0.85, 0.85 )
+					normalScale: new Vector2( 0.85, 0.85 )
 
 				} );
 
 				// planet
 
-				geometry = new THREE.SphereBufferGeometry( radius, 100, 50 );
+				geometry = new SphereBufferGeometry( radius, 100, 50 );
 
-				meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
+				meshPlanet = new Mesh( geometry, materialNormalMap );
 				meshPlanet.rotation.y = 0;
 				meshPlanet.rotation.z = tilt;
 				scene.add( meshPlanet );
 
 				// clouds
 
-				var materialClouds = new THREE.MeshLambertMaterial( {
+				var materialClouds = new MeshLambertMaterial( {
 
 					map: textureLoader.load( "textures/planets/earth_clouds_1024.png" ),
 					transparent: true
 
 				} );
 
-				meshClouds = new THREE.Mesh( geometry, materialClouds );
+				meshClouds = new Mesh( geometry, materialClouds );
 				meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
 				meshClouds.rotation.z = tilt;
 				scene.add( meshClouds );
 
 				// moon
 
-				var materialMoon = new THREE.MeshPhongMaterial( {
+				var materialMoon = new MeshPhongMaterial( {
 
 					map: textureLoader.load( "textures/planets/moon_1024.jpg" )
 
 				} );
 
-				meshMoon = new THREE.Mesh( geometry, materialMoon );
+				meshMoon = new Mesh( geometry, materialMoon );
 				meshMoon.position.set( radius * 5, 0, 0 );
 				meshMoon.scale.set( moonScale, moonScale, moonScale );
 				scene.add( meshMoon );
 
 				// stars
 
-				var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];
+				var i, r = radius, starsGeometry = [ new BufferGeometry(), new BufferGeometry() ];
 
 				var vertices1 = [];
 				var vertices2 = [];
 
-				var vertex = new THREE.Vector3();
+				var vertex = new Vector3();
 
 				for ( i = 0; i < 250; i ++ ) {
 
@@ -168,22 +171,22 @@
 
 				}
 
-				starsGeometry[ 0 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices1, 3 ) );
-				starsGeometry[ 1 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
+				starsGeometry[ 0 ].addAttribute( 'position', new Float32BufferAttribute( vertices1, 3 ) );
+				starsGeometry[ 1 ].addAttribute( 'position', new Float32BufferAttribute( vertices2, 3 ) );
 
 				var stars;
 				var starsMaterials = [
-					new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
+					new PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
+					new PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
+					new PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
+					new PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
+					new PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
+					new PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 				];
 
 				for ( i = 10; i < 30; i ++ ) {
 
-					stars = new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
+					stars = new Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
 
 					stars.rotation.x = Math.random() * 6;
 					stars.rotation.y = Math.random() * 6;
@@ -197,14 +200,14 @@
 
 				}
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				controls = new THREE.FlyControls( camera );
+				controls = new FlyControls( camera );
 
 				controls.movementSpeed = 1000;
 				controls.domElement = renderer.domElement;
@@ -221,10 +224,10 @@
 
 				// postprocessing
 
-				var renderModel = new THREE.RenderPass( scene, camera );
-				var effectFilm = new THREE.FilmPass( 0.35, 0.75, 2048, false );
+				var renderModel = new RenderPass( scene, camera );
+				var effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectFilm );

examples/misc_controls_map.html

@@ -22,19 +22,23 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - map controls
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/MapControls.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				FogExp2,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { MapControls } from './jsm/controls/MapControls.js';
 
 			var camera, controls, scene, renderer;
 
@@ -44,21 +48,21 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xcccccc );
-				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
+				scene = new Scene();
+				scene.background = new Color( 0xcccccc );
+				scene.fog = new FogExp2( 0xcccccc, 0.002 );
 
-				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 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 400, 200, 0 );
 
 				// controls
 
-				controls = new THREE.MapControls( camera, renderer.domElement );
+				controls = new MapControls( camera, renderer.domElement );
 
 				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
 
@@ -74,13 +78,13 @@
 
 				// world
 
-				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+				var geometry = new BoxBufferGeometry( 1, 1, 1 );
 				geometry.translate( 0, 0.5, 0 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				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() * 1600 - 800;
 					mesh.position.y = 0;
 					mesh.position.z = Math.random() * 1600 - 800;
@@ -95,15 +99,15 @@
 
 				// lights
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new THREE.DirectionalLight( 0x002288 );
+				var light = new DirectionalLight( 0x002288 );
 				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
-				var light = new THREE.AmbientLight( 0x222222 );
+				var light = new AmbientLight( 0x222222 );
 				scene.add( light );
 
 				//
@@ -111,8 +115,7 @@
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new dat.GUI();
-
+				var gui = new GUI();
 				gui.add( controls, 'screenSpacePanning' );
 
 			}

examples/misc_controls_orbit.html

@@ -22,17 +22,21 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				FogExp2,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var camera, controls, scene, renderer;
 
@@ -42,21 +46,21 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xcccccc );
-				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
+				scene = new Scene();
+				scene.background = new Color( 0xcccccc );
+				scene.fog = new FogExp2( 0xcccccc, 0.002 );
 
-				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 = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 400, 200, 0 );
 
 				// controls
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 
 				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
 
@@ -72,12 +76,12 @@
 
 				// world
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				var geometry = new CylinderBufferGeometry( 0, 10, 30, 4, 1 );
+				var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				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() * 1600 - 800;
 					mesh.position.y = 0;
 					mesh.position.z = Math.random() * 1600 - 800;
@@ -89,15 +93,15 @@
 
 				// lights
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new THREE.DirectionalLight( 0x002288 );
+				var light = new DirectionalLight( 0x002288 );
 				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
-				var light = new THREE.AmbientLight( 0x222222 );
+				var light = new AmbientLight( 0x222222 );
 				scene.add( light );
 
 				//

examples/misc_controls_pointerlock.html

@@ -44,9 +44,6 @@
 		</style>
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/controls/PointerLockControls.js"></script>
-
 		<div id="blocker">
 
 			<div id="instructions">
@@ -59,7 +56,26 @@
 
 		</div>
 
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				Float32BufferAttribute,
+				Fog,
+				HemisphereLight,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Raycaster,
+				Scene,
+				Vector3,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
 
 			var camera, scene, renderer, controls;
 
@@ -74,27 +90,27 @@
 			var canJump = false;
 
 			var prevTime = performance.now();
-			var velocity = new THREE.Vector3();
-			var direction = new THREE.Vector3();
-			var vertex = new THREE.Vector3();
-			var color = new THREE.Color();
+			var velocity = new Vector3();
+			var direction = new Vector3();
+			var vertex = new Vector3();
+			var color = new Color();
 
 			init();
 			animate();
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
+				scene.fog = new Fog( 0xffffff, 0, 750 );
 
-				var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
+				var light = new HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
 				light.position.set( 0.5, 1, 0.75 );
 				scene.add( light );
 
-				controls = new THREE.PointerLockControls( camera );
+				controls = new PointerLockControls( camera );
 
 				var blocker = document.getElementById( 'blocker' );
 				var instructions = document.getElementById( 'instructions' );
@@ -185,11 +201,11 @@
 				document.addEventListener( 'keydown', onKeyDown, false );
 				document.addEventListener( 'keyup', onKeyUp, false );
 
-				raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
+				raycaster = new Raycaster( new Vector3(), new Vector3( 0, - 1, 0 ), 0, 10 );
 
 				// floor
 
-				var floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
+				var floorGeometry = new PlaneBufferGeometry( 2000, 2000, 100, 100 );
 				floorGeometry.rotateX( - Math.PI / 2 );
 
 				// vertex displacement
@@ -220,16 +236,16 @@
 
 				}
 
-				floorGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				floorGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-				var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
+				var floorMaterial = new MeshBasicMaterial( { vertexColors: VertexColors } );
 
-				var floor = new THREE.Mesh( floorGeometry, floorMaterial );
+				var floor = new Mesh( floorGeometry, floorMaterial );
 				scene.add( floor );
 
 				// objects
 
-				var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
+				var boxGeometry = new BoxBufferGeometry( 20, 20, 20 );
 				boxGeometry = boxGeometry.toNonIndexed(); // ensure each face has unique vertices
 
 				position = boxGeometry.attributes.position;
@@ -242,14 +258,14 @@
 
 				}
 
-				boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				boxGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
+					var boxMaterial = new MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: VertexColors } );
 					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					var box = new THREE.Mesh( boxGeometry, boxMaterial );
+					var box = new Mesh( boxGeometry, boxMaterial );
 					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
 					box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
 					box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
@@ -261,7 +277,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/misc_controls_trackball.html

@@ -22,20 +22,24 @@
 			MOVE mouse & press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				FogExp2,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/controls/TrackballControls.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
 
 			var camera, controls, scene, renderer, stats;
 
@@ -44,21 +48,21 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
 				// world
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xcccccc );
-				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
+				scene = new Scene();
+				scene.background = new Color( 0xcccccc );
+				scene.fog = new FogExp2( 0xcccccc, 0.002 );
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				var geometry = new CylinderBufferGeometry( 0, 10, 30, 4, 1 );
+				var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				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() - 0.5 ) * 1000;
 					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
 					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
@@ -71,26 +75,26 @@
 
 				// lights
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new THREE.DirectionalLight( 0x002288 );
+				var light = new DirectionalLight( 0x002288 );
 				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
-				var light = new THREE.AmbientLight( 0x222222 );
+				var light = new AmbientLight( 0x222222 );
 				scene.add( light );
 
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.rotateSpeed = 1.0;
 				controls.zoomSpeed = 1.2;

examples/misc_controls_transform.html

@@ -9,23 +9,26 @@
 	<body>
 
 		<div id="info">
-			<a href="javascript:control.setMode( 'translate' );">"W" translate</a> |
-			<a href="javascript:control.setMode( 'rotate' );">"E" rotate</a> |
-			<a href="javascript:control.setMode( 'scale' );">"R" scale</a> |
-			<a href="javascript:control.setSize( control.size + 0.1 );">"+" increase size</a> |
-			<a href="javascript:control.setSize( Math.max( control.size - 0.1, 0.1 ) );">"-" decrease size</a><br />
-			<a href="javascript:control.setSpace( control.space === 'local' ? 'world' : 'local' );">"Q" toggle world/local space</a> | Hold "Ctrl" down to snap to grid<br />
-			<a href="javascript:control.showX = !control.showX">"X" toggle X</a> |
-			<a href="javascript:control.showY = !control.showY">"Y" toggle Y</a> |
-			<a href="javascript:control.showZ = !control.showZ">"Z" toggle Z</a> |
-			<a href="javascript:control.enabled = !control.enabled">"Spacebar" toggle enabled</a><br />
+			"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
+			"Q" toggle world/local space |  Hold "Ctrl" down to snap to grid<br />
+			"X" toggle X | "Y" toggle Y | "Z" toggle Z | "Spacebar" toggle enabled
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/controls/TransformControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				DirectionalLight,
+				GridHelper,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				TextureLoader,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { TransformControls } from './jsm/controls/TransformControls.js';
 
 			var camera, scene, renderer, control, orbit;
 
@@ -34,35 +37,35 @@
 
 			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( 50, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.set( 1000, 500, 1000 );
 				camera.lookAt( 0, 200, 0 );
 
-				scene = new THREE.Scene();
-				scene.add( new THREE.GridHelper( 1000, 10 ) );
+				scene = new Scene();
+				scene.add( new GridHelper( 1000, 10 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 2 );
+				var light = new DirectionalLight( 0xffffff, 2 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
+				var texture = new TextureLoader().load( 'textures/crate.gif', render );
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
-				var material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
+				var geometry = new BoxBufferGeometry( 200, 200, 200 );
+				var material = new MeshLambertMaterial( { map: texture, transparent: true } );
 
-				orbit = new THREE.OrbitControls( camera, renderer.domElement );
+				orbit = new OrbitControls( camera, renderer.domElement );
 				orbit.update();
 				orbit.addEventListener( 'change', render );
 
-				control = new THREE.TransformControls( camera, renderer.domElement );
+				control = new TransformControls( camera, renderer.domElement );
 				control.addEventListener( 'change', render );
 
 				control.addEventListener( 'dragging-changed', function ( event ) {
@@ -71,7 +74,7 @@
 
 				} );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				scene.add( mesh );
 
 				control.attach( mesh );
@@ -89,7 +92,7 @@
 
 						case 17: // Ctrl
 							control.setTranslationSnap( 100 );
-							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
+							control.setRotationSnap( Math.degToRad( 15 ) );
 							break;
 
 						case 87: // W

examples/misc_exporter_collada.html

@@ -9,28 +9,37 @@
 	<body>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - collada<br /><br />
-			<button onclick="exportCollada()">Export COLLADA</button>
+			<button id="export">Export COLLADA</button>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/exporters/ColladaExporter.js"></script>
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
-		<script src="js/WebGL.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				CubeTextureLoader,
+				DoubleSide,
+				DirectionalLight,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				Mesh,
+				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 { ColladaExporter } from './jsm/exporters/ColladaExporter.js';
+			import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
 
 			////////////////////////////////////////////////////////////////////////////////
 			// Utah/Newell Teapot demo
 			////////////////////////////////////////////////////////////////////////////////
-			/*global THREE, WEBGL, dat, window */
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			/*global window */
 
 			var camera, scene, renderer;
 			var cameraControls;
@@ -50,8 +59,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();
@@ -65,17 +74,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;
@@ -86,12 +95,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
@@ -102,27 +111,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 );
@@ -182,7 +191,7 @@
 
 				var h;
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				// material (attributes)
 
@@ -230,6 +239,9 @@
 
 				gui.add( effectController, "newShading", [ "wireframe", "flat", "smooth", "glossy", "textured", "reflective" ] ).name( "Shading" ).onChange( render );
 
+				var exportButton = document.getElementById( 'export' );
+				exportButton.addEventListener( 'click', exportCollada );
+
 			}
 
 
@@ -316,7 +328,7 @@
 
 				}
 
-				var teapotGeometry = new THREE.TeapotBufferGeometry( teapotSize,
+				var teapotGeometry = new TeapotBufferGeometry( teapotSize,
 					tess,
 					effectController.bottom,
 					effectController.lid,
@@ -324,7 +336,7 @@
 					effectController.fitLid,
 					! effectController.nonblinn );
 
-				teapot = new THREE.Mesh(
+				teapot = new Mesh(
 					teapotGeometry,
 					shading === "wireframe" ? wireMaterial : (
 						shading === "flat" ? flatMaterial : (
@@ -336,23 +348,30 @@
 
 			}
 
-			var exporter = new THREE.ColladaExporter();
+			var exporter = new ColladaExporter();
 
 			function exportCollada() {
 
 				var result = exporter.parse( teapot );
 				var material_type = "Phong";
 				if ( shading === "wireframe" ) {
-					material_type = "Constant"
+
+					material_type = "Constant";
+
 				}
 				if ( shading === "smooth" ) {
-					material_type = "Lambert"
+
+					material_type = "Lambert";
+
 				}
 
 				saveString( result.data, 'teapot_' + shading + "_" + material_type + '.dae' );
+
 				result.textures.forEach( tex => {
+
 					saveArrayBuffer( tex.data, `${ tex.name }.${ tex.ext }` );
-				});
+
+				} );
 
 			}
 

examples/misc_exporter_draco.html

@@ -19,27 +19,32 @@
 	<body>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - draco<br/><br/>
-			<button onclick="createGeometry()">Geometry</button>
-			<button onclick="createBufferGeometry()">BufferGeometry</button> |
-			<button onclick="exportFile()">Export DRC</button>
+			<button id="createGeometry">Geometry</button>
+			<button id="createBufferGeometry">BufferGeometry</button> |
+			<button id="exportFile">Export DRC</button>
 		</div>
 
-		<script src="../build/three.js"></script>
-
 		<script src="js/libs/draco/draco_encoder.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/exporters/DRACOExporter.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				Fog,
+				HemisphereLight,
+				GridHelper,
+				MeshPhongMaterial,
+				Mesh,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				TorusKnotGeometry,
+				TorusKnotBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { DRACOExporter } from './jsm/exporters/DRACOExporter.js';
 
 			var scene, camera, renderer, exporter, mesh;
 
@@ -50,9 +55,9 @@
 
 				scene.remove( mesh );
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
-				mesh = new THREE.Mesh( geometry, material );
+				var geometry = new TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
@@ -63,9 +68,9 @@
 
 				scene.remove( mesh );
 
-				var geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
-				mesh = new THREE.Mesh( geometry, material );
+				var geometry = new TorusKnotGeometry( 50, 15, 200, 30 );
+				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
@@ -74,22 +79,22 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 100, 200 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xa0a0a0 );
-				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
+				scene = new Scene();
+				scene.background = new Color( 0xa0a0a0 );
+				scene.fog = new Fog( 0xa0a0a0, 200, 1000 );
 
-				exporter = new THREE.DRACOExporter();
+				exporter = new DRACOExporter();
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				var directionalLight = new DirectionalLight( 0xffffff, 0.5 );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -100,16 +105,16 @@
 
 				// ground
 
-				var ground = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 2000, 2000 ),
-					new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
+				var ground = new Mesh(
+					new PlaneBufferGeometry( 2000, 2000 ),
+					new MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
 				);
 				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = - 75;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				var grid = new GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				grid.position.y = - 75;
@@ -117,16 +122,16 @@
 
 				// export mesh
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
-				mesh = new THREE.Mesh( geometry, material );
+				var geometry = new TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
 
 				//
 
-				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;
@@ -134,7 +139,7 @@
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 25, 0 );
 				controls.update();
 
@@ -142,6 +147,15 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
+				var createGeometryButton = document.getElementById( 'createGeometry' );
+				createGeometryButton.addEventListener( 'click', createGeometry );
+
+				var createBufferGeometryButton = document.getElementById( 'createBufferGeometry' );
+				createBufferGeometryButton.addEventListener( 'click', createBufferGeometry );
+
+				var exportButton = document.getElementById( 'exportFile' );
+				exportButton.addEventListener( 'click', exportFile );
+
 			}
 
 			function onWindowResize() {

examples/misc_exporter_gltf.html

@@ -24,17 +24,52 @@
 			<label><input id="option_forcepot" name="visible" type="checkbox">Force POT textures</label>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-		<script src="js/exporters/GLTFExporter.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				AxesHelper,
+				BoxBufferGeometry,
+				BufferAttribute,
+				BufferGeometry,
+				CircleBufferGeometry,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				DoubleSide,
+				GridHelper,
+				Group,
+				IcosahedronBufferGeometry,
+				LatheBufferGeometry,
+				Line,
+				LineBasicMaterial,
+				LineLoop,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				MeshStandardMaterial,
+				OctahedronBufferGeometry,
+				OrthographicCamera,
+				PerspectiveCamera,
+				Points,
+				PointsMaterial,
+				RepeatWrapping,
+				RingBufferGeometry,
+				Scene,
+				SphereBufferGeometry,
+				TetrahedronBufferGeometry,
+				TextureLoader,
+				TorusKnotBufferGeometry,
+				TriangleStripDrawMode,
+				Vector2,
+				VertexColors,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+			import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';
 
 			function exportGLTF( input ) {
 
-				var gltfExporter = new THREE.GLTFExporter();
+				var gltfExporter = new GLTFExporter();
 
 				var options = {
 					trs: document.getElementById( 'option_trs' ).checked,
@@ -126,12 +161,6 @@
 
 			}
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
-
 			var container;
 
 			var camera, object, scene1, scene2, renderer;
@@ -145,13 +174,13 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				scene1 = new THREE.Scene();
+				scene1 = new Scene();
 				scene1.name = 'Scene1';
 
 				// ---------------------------------------------------------------------
 				// Perspective Camera
 				// ---------------------------------------------------------------------
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 600, 400, 0 );
 
 				camera.name = "PerspectiveCamera";
@@ -160,24 +189,24 @@
 				// ---------------------------------------------------------------------
 				// Ambient light
 				// ---------------------------------------------------------------------
-				var light = new THREE.AmbientLight( 0xffffff, 0.2 );
+				var light = new AmbientLight( 0xffffff, 0.2 );
 				light.name = 'AmbientLight';
 				scene1.add( light );
 
 				// ---------------------------------------------------------------------
 				// DirectLight
 				// ---------------------------------------------------------------------
-				light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.target.position.set( 0, 0, -1 );
+				light = new DirectionalLight( 0xffffff, 1 );
+				light.target.position.set( 0, 0, - 1 );
 				light.add( light.target );
-				light.lookAt( -1, -1, 0 );
+				light.lookAt( - 1, - 1, 0 );
 				light.name = 'DirectionalLight';
 				scene1.add( light );
 
 				// ---------------------------------------------------------------------
 				// Grid
 				// ---------------------------------------------------------------------
-				gridHelper = new THREE.GridHelper( 2000, 20 );
+				gridHelper = new GridHelper( 2000, 20 );
 				gridHelper.position.y = - 50;
 				gridHelper.name = "Grid";
 				scene1.add( gridHelper );
@@ -185,7 +214,7 @@
 				// ---------------------------------------------------------------------
 				// Axes
 				// ---------------------------------------------------------------------
-				var axes = new THREE.AxesHelper( 500 );
+				var axes = new AxesHelper( 500 );
 				axes.name = "AxesHelper";
 				scene1.add( axes );
 
@@ -193,36 +222,36 @@
 				// Simple geometry with basic material
 				// ---------------------------------------------------------------------
 				// Icosahedron
-				var mapGrid = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
-				var material = new THREE.MeshBasicMaterial( {
+				var mapGrid = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				mapGrid.wrapS = mapGrid.wrapT = RepeatWrapping;
+				var material = new MeshBasicMaterial( {
 					color: 0xffffff,
 					map: mapGrid
 				} );
 
-				object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 0 ), material );
+				object = new Mesh( new IcosahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( - 200, 0, 200 );
 				object.name = 'Icosahedron';
 				scene1.add( object );
 
 				// Octahedron
-				material = new THREE.MeshBasicMaterial( {
+				material = new MeshBasicMaterial( {
 					color: 0x0000ff,
 					wireframe: true
 				} );
-				object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 1 ), material );
+				object = new Mesh( new OctahedronBufferGeometry( 75, 1 ), material );
 				object.position.set( 0, 0, 200 );
 				object.name = 'Octahedron';
 				scene1.add( object );
 
 				// Tetrahedron
-				material = new THREE.MeshBasicMaterial( {
+				material = new MeshBasicMaterial( {
 					color: 0xff0000,
 					transparent: true,
 					opacity: 0.5
 				} );
 
-				object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
+				object = new Mesh( new TetrahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( 200, 0, 200 );
 				object.name = 'Tetrahedron';
 				scene1.add( object );
@@ -231,33 +260,33 @@
 				// Buffered geometry primitives
 				// ---------------------------------------------------------------------
 				// Sphere
-				material = new THREE.MeshStandardMaterial( {
+				material = new MeshStandardMaterial( {
 					color: 0xffff00,
 					metalness: 0.5,
 					roughness: 1.0,
 					flatShading: true
 				} );
-				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 70, 10, 10 ), material );
+				sphere = new Mesh( new SphereBufferGeometry( 70, 10, 10 ), material );
 				sphere.position.set( 0, 0, 0 );
 				sphere.name = "Sphere";
 				scene1.add( sphere );
 
 				// Cylinder
-				material = new THREE.MeshStandardMaterial( {
+				material = new MeshStandardMaterial( {
 					color: 0xff00ff,
 					flatShading: true
 				} );
-				object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 10, 80, 100 ), material );
+				object = new Mesh( new CylinderBufferGeometry( 10, 80, 100 ), material );
 				object.position.set( 200, 0, 0 );
 				object.name = "Cylinder";
 				scene1.add( object );
 
 				// TorusKnot
-				material = new THREE.MeshStandardMaterial( {
+				material = new MeshStandardMaterial( {
 					color: 0xff0000,
 					roughness: 1
 				} );
-				object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 15, 40, 10 ), material );
+				object = new Mesh( new TorusKnotBufferGeometry( 50, 15, 40, 10 ), material );
 				object.position.set( - 200, 0, 0 );
 				object.name = "Cylinder";
 				scene1.add( object );
@@ -266,15 +295,15 @@
 				// ---------------------------------------------------------------------
 				// Hierarchy
 				// ---------------------------------------------------------------------
-				var mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
-				material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } );
+				var mapWood = new TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
+				material = new MeshStandardMaterial( { map: mapWood, side: DoubleSide } );
 
-				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 100, 100 ), material );
+				object = new Mesh( new BoxBufferGeometry( 40, 100, 100 ), material );
 				object.position.set( - 200, 0, 400 );
 				object.name = "Cube";
 				scene1.add( object );
 
-				var object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
+				var object2 = new Mesh( new BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
 				object2.position.set( 0, 0, 50 );
 				object2.rotation.set( 0, 45, 0 );
 				object2.name = "SubCube";
@@ -284,16 +313,16 @@
 				// ---------------------------------------------------------------------
 				// Groups
 				// ---------------------------------------------------------------------
-				var group1 = new THREE.Group();
+				var group1 = new Group();
 				group1.name = "Group";
 				scene1.add( group1 );
 
-				var group2 = new THREE.Group();
+				var group2 = new Group();
 				group2.name = "subGroup";
 				group2.position.set( 0, 50, 0 );
 				group1.add( group2 );
 
-				object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 30, 30, 30 ), material );
+				object2 = new Mesh( new BoxBufferGeometry( 30, 30, 30 ), material );
 				object2.name = "Cube in group";
 				object2.position.set( 0, 0, 400 );
 				group2.add( object2 );
@@ -301,7 +330,7 @@
 				// ---------------------------------------------------------------------
 				// Triangle Strip
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var positions = new Float32Array( [
 					0, 0, 0,
 					0, 80, 0,
@@ -320,11 +349,11 @@
 					0, 0, 1,
 				] );
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
-				object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
+				object = new Mesh( geometry, new MeshBasicMaterial( { side: DoubleSide, vertexColors: VertexColors } ) );
 				object.position.set( 140, - 40, - 250 );
-				object.setDrawMode( THREE.TriangleStripDrawMode );
+				object.setDrawMode( TriangleStripDrawMode );
 				object.name = 'Custom buffered';
 				object.userData = { data: 'customdata', list: [ 1, 2, 3, 4 ] };
 
@@ -334,7 +363,7 @@
 				// ---------------------------------------------------------------------
 				// Line Strip
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var numPoints = 100;
 				var positions = new Float32Array( numPoints * 3 );
 
@@ -346,8 +375,8 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				object = new Line( geometry, new LineBasicMaterial( { color: 0xffff00 } ) );
 				object.position.set( - 50, 0, - 200 );
 				scene1.add( object );
 
@@ -355,7 +384,7 @@
 				// ---------------------------------------------------------------------
 				// Line Loop
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var numPoints = 5;
 				var radius = 70;
 				var positions = new Float32Array( numPoints * 3 );
@@ -369,8 +398,8 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				object = new LineLoop( geometry, new LineBasicMaterial( { color: 0xffff00 } ) );
 				object.position.set( 0, 0, - 200 );
 
 				scene1.add( object );
@@ -378,7 +407,7 @@
 				// ---------------------------------------------------------------------
 				// Buffer geometry truncated (DrawRange)
 				// ---------------------------------------------------------------------
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var numElements = 6;
 				var outOfRange = 3;
 
@@ -403,11 +432,11 @@
 					0, 0, 1,
 				] );
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 				geometry.setDrawRange( 0, numElements );
 
-				object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) );
+				object = new Mesh( geometry, new MeshBasicMaterial( { side: DoubleSide, vertexColors: VertexColors } ) );
 				object.name = 'Custom buffered truncated';
 				object.position.set( 340, - 40, - 200 );
 
@@ -426,11 +455,11 @@
 
 				}
 
-				var pointsGeo = new THREE.BufferGeometry();
-				pointsGeo.addAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );
+				var pointsGeo = new BufferGeometry();
+				pointsGeo.addAttribute( 'position', new BufferAttribute( pointsArray, 3 ) );
 
-				var pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );
-				var points = new THREE.Points( pointsGeo, pointsMaterial );
+				var pointsMaterial = new PointsMaterial( { color: 0xffff00, size: 5 } );
+				var points = new Points( pointsGeo, pointsMaterial );
 				points.name = "Points";
 				points.position.set( - 200, 0, - 200 );
 				scene1.add( points );
@@ -438,24 +467,24 @@
 				// ---------------------------------------------------------------------
 				// Ortho camera
 				// ---------------------------------------------------------------------
-				var cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
+				var cameraOrtho = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
 				scene1.add( cameraOrtho );
 				cameraOrtho.name = 'OrthographicCamera';
 
-				material = new THREE.MeshLambertMaterial( {
+				material = new MeshLambertMaterial( {
 					color: 0xffff00,
-					side: THREE.DoubleSide
+					side: DoubleSide
 				} );
 
-				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( 200, 0, - 400 );
 				scene1.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( 0, 0, - 400 );
 				scene1.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( - 200, 0, - 400 );
 				scene1.add( object );
 
@@ -464,21 +493,21 @@
 
 				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( 200, 0, 400 );
 				scene1.add( object );
 
 				// ---------------------------------------------------------------------
 				// Big red box hidden just for testing `onlyVisible` option
 				// ---------------------------------------------------------------------
-				material = new THREE.MeshBasicMaterial( {
+				material = new MeshBasicMaterial( {
 					color: 0xff0000
 				} );
-				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
+				object = new Mesh( new BoxBufferGeometry( 200, 200, 200 ), material );
 				object.position.set( 0, 0, 0 );
 				object.name = "CubeHidden";
 				object.visible = false;
@@ -487,7 +516,7 @@
 				// ---------------------------------------------------------------------
 				//
 				//
-				var loader = new THREE.OBJLoader();
+				var loader = new OBJLoader();
 				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
 
 					waltHead = obj;
@@ -501,8 +530,8 @@
 				// ---------------------------------------------------------------------
 				// 2nd Scene
 				// ---------------------------------------------------------------------
-				scene2 = new THREE.Scene();
-				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), material );
+				scene2 = new Scene();
+				object = new Mesh( new BoxBufferGeometry( 100, 100, 100 ), material );
 				object.position.set( 0, 0, 0 );
 				object.name = "Cube2ndScene";
 				scene2.name = 'Scene2';
@@ -510,7 +539,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/misc_exporter_obj.html

@@ -33,10 +33,21 @@
 			<button id="export">export to obj</button>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/exporters/OBJExporter.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				BufferGeometry,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				Float32BufferAttribute,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OBJExporter } from './jsm/exporters/OBJExporter.js';
 
 			var camera, scene, light, renderer;
 			var exportButton, floatingDiv;
@@ -44,7 +55,7 @@
 
 			function exportToObj() {
 
-				var exporter = new THREE.OBJExporter();
+				var exporter = new OBJExporter();
 				var result = exporter.parse( scene );
 				floatingDiv.style.display = 'block';
 				floatingDiv.innerHTML = result.split( '\n' ).join( '<br />' );
@@ -69,39 +80,39 @@
 
 				if ( type === 1 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
 					var geometry = generateTriangleGeometry();
 
-					scene.add( new THREE.Mesh( geometry, material ) );
+					scene.add( new Mesh( geometry, material ) );
 
 
 				} else if ( type === 2 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
-					scene.add( new THREE.Mesh( geometry, material ) );
+					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
+					var geometry = new BoxBufferGeometry( 100, 100, 100 );
+					scene.add( new Mesh( geometry, material ) );
 
 				} else if ( type === 3 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
-					scene.add( new THREE.Mesh( geometry, material ) );
+					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
+					var geometry = new CylinderBufferGeometry( 50, 50, 100, 30, 1 );
+					scene.add( new Mesh( geometry, material ) );
 
 				} else if ( type === 4 || type === 5 ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
 					var geometry = generateTriangleGeometry();
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.x = - 200;
 					scene.add( mesh );
 
-					var geometry2 = new THREE.BoxBufferGeometry( 100, 100, 100 );
-					var mesh2 = new THREE.Mesh( geometry2, material );
+					var geometry2 = new BoxBufferGeometry( 100, 100, 100 );
+					var mesh2 = new Mesh( geometry2, material );
 					scene.add( mesh2 );
 
-					var geometry3 = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
-					var mesh3 = new THREE.Mesh( geometry3, material );
+					var geometry3 = new CylinderBufferGeometry( 50, 50, 100, 30, 1 );
+					var mesh3 = new Mesh( geometry3, material );
 					mesh3.position.x = 200;
 					scene.add( mesh3 );
 
@@ -119,17 +130,17 @@
 
 			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.set( 0, 0, 400 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				light = new DirectionalLight( 0xffffff );
 				scene.add( light );
 
 				addGeometry( 1 );
@@ -237,14 +248,14 @@
 
 			function generateTriangleGeometry() {
 
-				var geometry = new THREE.BufferGeometry();
+				var geometry = new BufferGeometry();
 				var vertices = [];
 
 				vertices.push( - 50, - 50, 0 );
 				vertices.push( 50, - 50, 0 );
 				vertices.push( 50, 50, 0 );
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 				geometry.computeVertexNormals();
 
 				return geometry;

examples/misc_exporter_stl.html

@@ -9,22 +9,27 @@
 	<body>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - stl<br/><br/>
-			<button onclick="exportASCII()">export ASCII</button> <button onclick="exportBinary()">export binary</button>
+			<button id="exportASCII">export ASCII</button> <button id="exportBinary">export binary</button>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/exporters/STLExporter.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				Fog,
+				GridHelper,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { STLExporter } from './jsm/exporters/STLExporter.js';
 
 			var scene, camera, renderer, exporter, mesh;
 
@@ -33,22 +38,22 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 100, 200 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xa0a0a0 );
-				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
+				scene = new Scene();
+				scene.background = new Color( 0xa0a0a0 );
+				scene.fog = new Fog( 0xa0a0a0, 200, 1000 );
 
-				exporter = new THREE.STLExporter();
+				exporter = new STLExporter();
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
+				var directionalLight = new DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -59,29 +64,29 @@
 
 				// ground
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var ground = new Mesh( new PlaneBufferGeometry( 2000, 2000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
+				var grid = new GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// export mesh
 
-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
-				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				var geometry = new BoxBufferGeometry( 50, 50, 50 );
+				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
 
-				mesh = new THREE.Mesh( geometry, material );
+				mesh = new Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
 
 				//
 
-				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;
@@ -89,7 +94,7 @@
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 25, 0 );
 				controls.update();
 
@@ -97,6 +102,12 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
+				var buttonExportASCII = document.getElementById( 'exportASCII' );
+				buttonExportASCII.addEventListener( 'click', exportASCII );
+
+				var buttonExportBinary = document.getElementById( 'exportBinary' );
+				buttonExportBinary.addEventListener( 'click', exportBinary );
+
 			}
 
 			function onWindowResize() {

examples/misc_fps.html

@@ -10,16 +10,27 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - platformer demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>.<br />Use arrow keys to look around, WASD to move and SPACE to jump.</div>
 
-		<script src="../build/three.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				CubeTextureLoader,
+				Euler,
+				Object3D,
+				ObjectLoader,
+				PerspectiveCamera,
+				Raycaster,
+				RGBFormat,
+				Scene,
+				Vector2,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			// player motion parameters
 
 			var motion = {
 				airborne: false,
-				position: new THREE.Vector3(), velocity: new THREE.Vector3(),
-				rotation: new THREE.Vector2(), spinning: new THREE.Vector2()
+				position: new Vector3(), velocity: new Vector3(),
+				rotation: new Vector2(), spinning: new Vector2()
 			};
 
 			motion.position.y = - 150;
@@ -68,8 +79,8 @@
 					keys.SP, keys.W, keys.A, keys.S, keys.D, keys.UP, keys.LT, keys.DN, keys.RT
 				] );
 
-				var forward = new THREE.Vector3();
-				var sideways = new THREE.Vector3();
+				var forward = new Vector3();
+				var sideways = new Vector3();
 
 				return function () {
 
@@ -106,8 +117,8 @@
 
 			var jumpPads = ( function () {
 
-				var pads = [ new THREE.Vector3( - 17.5, 8, - 10 ), new THREE.Vector3( 17.5, 8, - 10 ), new THREE.Vector3( 0, 8, 21 ) ];
-				var temp = new THREE.Vector3();
+				var pads = [ new Vector3( - 17.5, 8, - 10 ), new Vector3( 17.5, 8, - 10 ), new Vector3( 0, 8, 21 ) ];
+				var temp = new Vector3();
 
 				return function () {
 
@@ -145,11 +156,11 @@
 				var birdsEye = 100;
 				var kneeDeep = 0.4;
 
-				var raycaster = new THREE.Raycaster();
+				var raycaster = new Raycaster();
 				raycaster.ray.direction.set( 0, - 1, 0 );
 
-				var angles = new THREE.Vector2();
-				var displacement = new THREE.Vector3();
+				var angles = new Vector2();
+				var displacement = new Vector3();
 
 				return function ( dt ) {
 
@@ -222,7 +233,7 @@
 
 			var updateCamera = ( function () {
 
-				var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
+				var euler = new Euler( 0, 0, 0, 'YXZ' );
 
 				return function () {
 
@@ -243,9 +254,9 @@
 
 			function makePlatform( url ) {
 
-				var placeholder = new THREE.Object3D();
+				var placeholder = new Object3D();
 
-				var loader = new THREE.ObjectLoader();
+				var loader = new ObjectLoader();
 				loader.load( url, function ( platform ) {
 
 					placeholder.add( platform );
@@ -256,15 +267,15 @@
 
 			}
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
+			var renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			document.body.appendChild( renderer.domElement );
 
-			var camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 9000 );
+			var camera = new PerspectiveCamera( 60, 1, 0.1, 9000 );
 
-			var scene = new THREE.Scene();
+			var scene = new Scene();
 
-			var envMap = new THREE.CubeTextureLoader().load( [
+			var envMap = new CubeTextureLoader().load( [
 				'textures/cube/skybox/px.jpg', // right
 				'textures/cube/skybox/nx.jpg', // left
 				'textures/cube/skybox/py.jpg', // top
@@ -272,7 +283,7 @@
 				'textures/cube/skybox/pz.jpg', // back
 				'textures/cube/skybox/nz.jpg' // front
 			] );
-			envMap.format = THREE.RGBFormat;
+			envMap.format = RGBFormat;
 
 			scene.background = envMap;
 

examples/misc_lookat.html

@@ -19,11 +19,19 @@
 	<body>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D.lookAt() example</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				Color,
+				CylinderBufferGeometry,
+				Mesh,
+				MeshNormalMaterial,
+				PerspectiveCamera,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			var camera, scene, renderer, stats;
 
@@ -42,23 +50,23 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 3200;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
+				sphere = new Mesh( new SphereBufferGeometry( 100, 20, 20 ), new MeshNormalMaterial() );
 				scene.add( sphere );
 
-				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 100, 12 );
+				var geometry = new CylinderBufferGeometry( 0, 10, 100, 12 );
 				geometry.rotateX( Math.PI / 2 );
 
-				var material = new THREE.MeshNormalMaterial();
+				var material = new MeshNormalMaterial();
 
 				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() * 4000 - 2000;
 					mesh.position.y = Math.random() * 4000 - 2000;
 					mesh.position.z = Math.random() * 4000 - 2000;
@@ -67,7 +75,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/misc_uv_tests.html

@@ -8,10 +8,21 @@
 
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/utils/UVsDebug.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				CylinderBufferGeometry,
+				IcosahedronBufferGeometry,
+				PlaneBufferGeometry,
+				LatheBufferGeometry,
+				OctahedronBufferGeometry,
+				SphereBufferGeometry,
+				TorusBufferGeometry,
+				TorusKnotBufferGeometry,
+				Vector2
+			} from "../build/three.module.js";
+
+			import { UVsDebug } from './jsm/utils/UVsDebug.js';
 
 			/*
 			 * This is to help debug UVs problems in geometry,
@@ -24,7 +35,7 @@
 
 				d.innerHTML = '<br><br>' + name + '<br>';
 
-				d.appendChild( THREE.UVsDebug( geometry ) );
+				d.appendChild( UVsDebug( geometry ) );
 
 				document.body.appendChild( d );
 
@@ -34,29 +45,29 @@
 
 			for ( var i = 0; i < 10; i ++ ) {
 
-				points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
+				points.push( new Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
 			}
 
 			//
 
-			test( 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ) );
+			test( 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new PlaneBufferGeometry( 100, 100, 4, 4 ) );
 
-			test( 'new THREE.SphereBufferGeometry( 75, 12, 6 )', new THREE.SphereBufferGeometry( 75, 12, 6 ) );
+			test( 'new THREE.SphereBufferGeometry( 75, 12, 6 )', new SphereBufferGeometry( 75, 12, 6 ) );
 
-			test( 'new THREE.IcosahedronBufferGeometry( 30, 1 )', new THREE.IcosahedronBufferGeometry( 30, 1 ) );
+			test( 'new THREE.IcosahedronBufferGeometry( 30, 1 )', new IcosahedronBufferGeometry( 30, 1 ) );
 
-			test( 'new THREE.OctahedronBufferGeometry( 30, 2 )', new THREE.OctahedronBufferGeometry( 30, 2 ) );
+			test( 'new THREE.OctahedronBufferGeometry( 30, 2 )', new OctahedronBufferGeometry( 30, 2 ) );
 
-			test( 'new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 ) );
+			test( 'new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new CylinderBufferGeometry( 25, 75, 100, 10, 5 ) );
 
-			test( 'new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ) );
+			test( 'new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ) );
 
-			test( 'new THREE.LatheBufferGeometry( points, 8 )', new THREE.LatheBufferGeometry( points, 8 ) );
+			test( 'new THREE.LatheBufferGeometry( points, 8 )', new LatheBufferGeometry( points, 8 ) );
 
-			test( 'new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new THREE.TorusBufferGeometry( 50, 20, 8, 8 ) );
+			test( 'new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new TorusBufferGeometry( 50, 20, 8, 8 ) );
 
-			test( 'new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 ) );
+			test( 'new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new TorusKnotBufferGeometry( 50, 10, 12, 6 ) );
 
 		</script>
 

examples/raytracing_sandbox.html

@@ -7,17 +7,33 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/renderers/RaytracingRenderer.js"></script>
-		<div id="info"></div>
-		<script>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raytracing renderer (using <span id="workers"></span>
+			<button id="removeWorker">-</button><button id="addWorker">+</button> web workers) <br/>
+			<button id="rearrange">Rearrange</button><button id="render">Render</button>
+		</div>
+
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				Group,
+				Mesh,
+				MeshPhongMaterial,
+				NoColors,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry
+			} from "../build/three.module.js";
+
+			import { RaytracingRenderer } from './jsm/renderers/RaytracingRenderer.js';
 
 			var hash = location.hash ? location.hash.substring( 1 ) : '3';
 
 			var WORKERS = + hash || navigator.hardwareConcurrency || 3;
 
-			var container, info;
-
 			var camera, scene, renderer;
 			var group;
 
@@ -26,99 +42,99 @@
 
 			function initScene( width, height ) {
 
-				camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
+				camera = new PerspectiveCamera( 60, width / height, 1, 1000 );
 				camera.position.z = 600;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
 				// materials
 
-				var phongMaterial = new THREE.MeshPhongMaterial( {
+				var phongMaterial = new MeshPhongMaterial( {
 					color: 0xffffff,
 					specular: 0x222222,
 					shininess: 150,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: false
 				} );
 
-				var phongMaterialBox = new THREE.MeshPhongMaterial( {
+				var phongMaterialBox = new MeshPhongMaterial( {
 					color: 0xffffff,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 
-				var phongMaterialBoxBottom = new THREE.MeshPhongMaterial( {
+				var phongMaterialBoxBottom = new MeshPhongMaterial( {
 					color: 0x666666,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 
-				var phongMaterialBoxLeft = new THREE.MeshPhongMaterial( {
+				var phongMaterialBoxLeft = new MeshPhongMaterial( {
 					color: 0x990000,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 
-				var phongMaterialBoxRight = new THREE.MeshPhongMaterial( {
+				var phongMaterialBoxRight = new MeshPhongMaterial( {
 					color: 0x0066ff,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 
-				var mirrorMaterialFlat = new THREE.MeshPhongMaterial( {
+				var mirrorMaterialFlat = new MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0xff8888,
 					shininess: 10000,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 				mirrorMaterialFlat.mirror = true;
 				mirrorMaterialFlat.reflectivity = 1;
 
-				var mirrorMaterialFlatDark = new THREE.MeshPhongMaterial( {
+				var mirrorMaterialFlatDark = new MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0xaaaaaa,
 					shininess: 10000,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 				mirrorMaterialFlatDark.mirror = true;
 				mirrorMaterialFlatDark.reflectivity = 1;
 
-				var mirrorMaterialSmooth = new THREE.MeshPhongMaterial( {
+				var mirrorMaterialSmooth = new MeshPhongMaterial( {
 					color: 0xffaa00,
 					specular: 0x222222,
 					shininess: 10000,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: false
 				} );
 				mirrorMaterialSmooth.mirror = true;
 				mirrorMaterialSmooth.reflectivity = 0.3;
 
-				var glassMaterialFlat = new THREE.MeshPhongMaterial( {
+				var glassMaterialFlat = new MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0x00ff00,
 					shininess: 10000,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: true
 				} );
 				glassMaterialFlat.glass = true;
 				glassMaterialFlat.reflectivity = 0.5;
 
-				var glassMaterialSmooth = new THREE.MeshPhongMaterial( {
+				var glassMaterialSmooth = new MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0xffaa55,
 					shininess: 10000,
-					vertexColors: THREE.NoColors,
+					vertexColors: NoColors,
 					flatShading: false
 				} );
 				glassMaterialSmooth.glass = true;
@@ -127,37 +143,37 @@
 
 				//
 
-				group = new THREE.Group();
+				group = new Group();
 				scene.add( group );
 
 				// geometries
 
-				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 16, 8 );
-				var planeGeometry = new THREE.BoxBufferGeometry( 600, 5, 600 );
-				var boxGeometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				var sphereGeometry = new SphereBufferGeometry( 100, 16, 8 );
+				var planeGeometry = new BoxBufferGeometry( 600, 5, 600 );
+				var boxGeometry = new BoxBufferGeometry( 100, 100, 100 );
 
 				// Sphere
 
-				var sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
+				var sphere = new Mesh( sphereGeometry, phongMaterial );
 				sphere.scale.multiplyScalar( 0.5 );
 				sphere.position.set( - 50, - 250 + 5, - 50 );
 				group.add( sphere );
 
-				var sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
+				var sphere2 = new Mesh( sphereGeometry, mirrorMaterialSmooth );
 				sphere2.scale.multiplyScalar( 0.5 );
 				sphere2.position.set( 175, - 250 + 5, - 150 );
 				group.add( sphere2 );
 
 				// Box
 
-				var box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
+				var box = new Mesh( boxGeometry, mirrorMaterialFlat );
 				box.position.set( - 175, - 250 + 2.5, - 150 );
 				box.rotation.y = 0.5;
 				group.add( box );
 
 				// Glass
 
-				var glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
+				var glass = new Mesh( sphereGeometry, glassMaterialSmooth );
 				glass.scale.multiplyScalar( 0.5 );
 				glass.position.set( 75, - 250 + 5, - 75 );
 				glass.rotation.y = 0.5;
@@ -165,24 +181,24 @@
 
 				// bottom
 
-				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
+				var plane = new Mesh( planeGeometry, phongMaterialBoxBottom );
 				plane.position.set( 0, - 300 + 2.5, - 300 );
 				scene.add( plane );
 
 				// top
 
-				var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
+				var plane = new Mesh( planeGeometry, phongMaterialBox );
 				plane.position.set( 0, 300 - 2.5, - 300 );
 				scene.add( plane );
 
 				// back
 
-				var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
+				var plane = new Mesh( planeGeometry, phongMaterialBox );
 				plane.rotation.x = 1.57;
 				plane.position.set( 0, 0, - 300 );
 				scene.add( plane );
 
-				var plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
+				var plane = new Mesh( planeGeometry, mirrorMaterialFlatDark );
 				plane.rotation.x = 1.57;
 				plane.position.set( 0, 0, - 300 + 10 );
 				plane.scale.multiplyScalar( 0.85 );
@@ -190,14 +206,14 @@
 
 				// left
 
-				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
+				var plane = new Mesh( planeGeometry, phongMaterialBoxLeft );
 				plane.rotation.z = 1.57;
 				plane.position.set( - 300, 0, - 300 );
 				scene.add( plane );
 
 				// right
 
-				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
+				var plane = new Mesh( planeGeometry, phongMaterialBoxRight );
 				plane.rotation.z = 1.57;
 				plane.position.set( 300, 0, - 300 );
 				scene.add( plane );
@@ -206,17 +222,17 @@
 
 				var intensity = 70000;
 
-				var light = new THREE.PointLight( 0xffaa55, intensity );
+				var light = new PointLight( 0xffaa55, intensity );
 				light.position.set( - 200, 100, 100 );
 				light.physicalAttenuation = true;
 				scene.add( light );
 
-				var light = new THREE.PointLight( 0x55aaff, intensity );
+				var light = new PointLight( 0x55aaff, intensity );
 				light.position.set( 200, 100, 100 );
 				light.physicalAttenuation = true;
 				scene.add( light );
 
-				var light = new THREE.PointLight( 0xffffff, intensity * 1.5 );
+				var light = new PointLight( 0xffffff, intensity * 1.5 );
 				light.position.set( 0, 0, 300 );
 				light.physicalAttenuation = true;
 				scene.add( light );
@@ -225,7 +241,17 @@
 
 			function init() {
 
-				info = document.getElementById( 'info' );
+				var buttonRearrange = document.getElementById( 'rearrange' );
+				buttonRearrange.addEventListener( 'click', rearrange );
+
+				var buttonRender = document.getElementById( 'render' );
+				buttonRender.addEventListener( 'click', render );
+
+				var buttonRemoveWorker = document.getElementById( 'removeWorker' );
+				buttonRemoveWorker.addEventListener( 'click', removeWorker );
+
+				var buttonAddWorker = document.getElementById( 'addWorker' );
+				buttonAddWorker.addEventListener( 'click', addWorker );
 
 				updateWorkers();
 
@@ -235,7 +261,7 @@
 
 				//
 
-				renderer = new THREE.RaytracingRenderer( {
+				renderer = new RaytracingRenderer( {
 					workers: WORKERS,
 					workerPath: 'js/renderers/RaytracingWorker.js',
 					randomize: true,
@@ -253,6 +279,18 @@
 
 			}
 
+			function addWorker() {
+
+				updateWorkers( 1 );
+
+			}
+
+			function removeWorker() {
+
+				updateWorkers( - 1 );
+
+			}
+
 			function updateWorkers( x ) {
 
 				if ( x ) {
@@ -262,8 +300,8 @@
 
 				}
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raytracing renderer (using ' + WORKERS + ' <button onclick="updateWorkers(-1)">-</button><button onclick="updateWorkers(1)">+</button> web workers)' +
-				'<br/><button onclick="rearrange()">Rearrange</button><button onclick="render()">Render</button>';
+				var labelWorkers = document.getElementById( 'workers' );
+				labelWorkers.textContent = WORKERS;
 
 			}
 

examples/software_geometry_earth.html

@@ -16,14 +16,23 @@
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth demo</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/renderers/Projector.js"></script>
-		<script src="js/renderers/SoftwareRenderer.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				CanvasTexture,
+				Group,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				SphereBufferGeometry,
+				TextureLoader
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
 
 			var container, stats;
 			var camera, scene, renderer;
@@ -40,23 +49,23 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				group = new THREE.Group();
+				group = new Group();
 				scene.add( group );
 
 				// earth
 
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
 
-					var geometry = new THREE.SphereBufferGeometry( 200, 20, 20 );
+					var geometry = new SphereBufferGeometry( 200, 20, 20 );
 
-					var material = new THREE.MeshLambertMaterial( { map: texture } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshLambertMaterial( { map: texture } );
+					var mesh = new Mesh( geometry, material );
 					group.add( mesh );
 
 				} );
@@ -82,17 +91,17 @@
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var texture = new THREE.CanvasTexture( canvas );
+				var texture = new CanvasTexture( canvas );
 
-				var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
+				var geometry = new PlaneBufferGeometry( 300, 300, 3, 3 );
+				var material = new MeshBasicMaterial( { map: texture } );
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 				mesh.position.y = - 250;
 				mesh.rotation.x = - Math.PI / 2;
 				group.add( mesh );
 
-				renderer = new THREE.SoftwareRenderer();
+				renderer = new SoftwareRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

examples/software_lines_splines.html

@@ -13,14 +13,22 @@
 			<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/utils/GeometryUtils.js"></script>
-
-		<script src="js/renderers/Projector.js"></script>
-		<script src="js/renderers/SoftwareRenderer.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BufferGeometry,
+				CatmullRomCurve3,
+				Color,
+				Float32BufferAttribute,
+				Line,
+				LineBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				Vector3,
+				VertexColors
+			} from "../build/three.module.js";
+
+			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
+			import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
 
 			var mouseX = 0, mouseY = 0,
 
@@ -37,23 +45,23 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				renderer = new THREE.SoftwareRenderer();
+				renderer = new SoftwareRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				//
 
-				var hilbertPoints = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var hilbertPoints = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var geometry1 = new THREE.BufferGeometry();
-				var geometry2 = new THREE.BufferGeometry();
-				var geometry3 = new THREE.BufferGeometry();
+				var geometry1 = new BufferGeometry();
+				var geometry2 = new BufferGeometry();
+				var geometry3 = new BufferGeometry();
 
 				var subdivisions = 6;
 
@@ -62,10 +70,10 @@
 				var colors2 = [];
 				var colors3 = [];
 
-				var point = new THREE.Vector3();
-				var color = new THREE.Color();
+				var point = new Vector3();
+				var color = new Color();
 
-				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
+				var spline = new CatmullRomCurve3( hilbertPoints );
 
 				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
@@ -85,17 +93,17 @@
 
 				}
 
-				geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry1.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry2.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry3.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
-				geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
-				geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
-				geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
+				geometry1.addAttribute( 'color', new Float32BufferAttribute( colors1, 3 ) );
+				geometry2.addAttribute( 'color', new Float32BufferAttribute( colors2, 3 ) );
+				geometry3.addAttribute( 'color', new Float32BufferAttribute( colors3, 3 ) );
 
 				// lines
 
-				material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
+				var material = new LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: VertexColors } );
 
 				var line, p, scale = 0.3, d = 225;
 				var parameters = [
@@ -107,7 +115,7 @@
 				for ( var i = 0; i < parameters.length; ++ i ) {
 
 					p = parameters[ i ];
-					line = new THREE.Line( p[ 3 ], p[ 0 ] );
+					line = new Line( p[ 3 ], p[ 0 ] );
 					line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
 					line.position.x = p[ 2 ][ 0 ];
 					line.position.y = p[ 2 ][ 1 ];
@@ -189,7 +197,7 @@
 
 					var object = scene.children[ i ];
 
-					if ( object instanceof THREE.Line ) {
+					if ( object instanceof Line ) {
 
 						object.rotation.y = time * ( i % 2 ? 1 : - 1 );
 

examples/software_sandbox.html

@@ -13,13 +13,33 @@
 			drag to change the point of view
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/utils/GeometryUtils.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/renderers/Projector.js"></script>
-		<script src="js/renderers/SoftwareRenderer.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				BufferGeometry,
+				CatmullRomCurve3,
+				Color,
+				Float32BufferAttribute,
+				Line,
+				LineBasicMaterial,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				Sprite,
+				SpriteMaterial,
+				TextureLoader,
+				TorusKnotBufferGeometry,
+				Vector3,
+				VertexColors
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
+			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 
 			var camera, controls, scene, renderer, stats;
 
@@ -35,17 +55,17 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 600;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// Torus
-				var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
+				var torusGeometry = new TorusKnotBufferGeometry( 150, 10 );
 				torusGeometry = torusGeometry.toNonIndexed();
 
 				var colors = [];
-				var color = new THREE.Color();
+				var color = new Color();
 
 				for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {
 
@@ -54,13 +74,13 @@
 
 				}
 
-				torusGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				torusGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-				torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
+				torus = new Mesh( torusGeometry, new MeshBasicMaterial( { color: 0x0000ff, vertexColors: VertexColors } ) );
 				scene.add( torus );
 
 				// Cube
-				var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				var boxGeometry = new BoxBufferGeometry( 200, 200, 200 );
 				boxGeometry = boxGeometry.toNonIndexed();
 
 				colors = [];
@@ -72,46 +92,46 @@
 
 				}
 
-				boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				boxGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-				cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
+				cube = new Mesh( boxGeometry, new MeshBasicMaterial( { color: 0x00ff00, vertexColors: VertexColors } ) );
 				scene.position.set( 100, 0, 0 );
 				scene.add( cube );
 
 				// Cube with texture
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 				var map = loader.load( 'textures/brick_diffuse.jpg' );
-				texCube = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { map: map } ) );
+				texCube = new Mesh( boxGeometry, new MeshLambertMaterial( { map: map } ) );
 				texCube.position.set( - 300, 0, 0 );
 				scene.add( texCube );
 
 				// Sprite
-				var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: 0xff0040 } ) );
+				var sprite = new Sprite( new SpriteMaterial( { color: 0xff0040 } ) );
 				sprite.scale.set( 100, 100, 1 );
 				sprite.position.set( - 100, 200, 0 );
 				scene.add( sprite );
 
 				// Sprite with texture
-				var texLoader = new THREE.TextureLoader();
+				var texLoader = new TextureLoader();
 				map = texLoader.load( 'textures/sprite1.png' );
-				var texSprite = new THREE.Sprite( new THREE.SpriteMaterial( { map: map, transparent: true } ) );
+				var texSprite = new Sprite( new SpriteMaterial( { map: map, transparent: true } ) );
 				texSprite.scale.set( 100, 100, 1 );
 				texSprite.position.set( 100, 200, 0 );
 				scene.add( texSprite );
 
 				// Line
-				var hilbertPoints = THREE.GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var hilbertPoints = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var lineGeometry = new THREE.BufferGeometry();
+				var lineGeometry = new BufferGeometry();
 				var subdivisions = 6;
 
 				var vertices = [];
 				colors = [];
 
-				var point = new THREE.Vector3();
+				var point = new Vector3();
 				color.setHex( 0x88aaff );
 
-				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
+				var spline = new CatmullRomCurve3( hilbertPoints );
 
 				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
@@ -123,22 +143,22 @@
 
 				}
 
-				lineGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				lineGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				lineGeometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				lineGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-				var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
-				var line = new THREE.Line( lineGeometry, material );
+				var material = new LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: VertexColors } );
+				var line = new Line( lineGeometry, material );
 				line.scale.set( 0.5, 0.5, 0.5 );
 				line.position.set( 0, - 200, 0 );
 				scene.add( line );
 
 				//
 
-				renderer = new THREE.SoftwareRenderer();
+				renderer = new SoftwareRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

examples/svg_lines.html

@@ -20,12 +20,19 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> svg - lines
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/renderers/Projector.js"></script>
-		<script src="js/renderers/SVGRenderer.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				BufferGeometry,
+				Color,
+				Float32BufferAttribute,
+				Line,
+				LineBasicMaterial,
+				LineDashedMaterial,
+				PerspectiveCamera,
+				Scene
+			} from "../build/three.module.js";
+
+			import { SVGRenderer } from './jsm/renderers/SVGRenderer.js';
 
 			var camera, scene, renderer;
 
@@ -34,13 +41,13 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.z = 10;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0, 0, 0 );
+				scene = new Scene();
+				scene.background = new Color( 0, 0, 0 );
 
-				renderer = new THREE.SVGRenderer();
+				renderer = new SVGRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
@@ -60,30 +67,30 @@
 
 				}
 
-				var geometry = new THREE.BufferGeometry();
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				var geometry = new BufferGeometry();
+				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
 				//
 
 				for ( var i = 1; i <= 3; i ++ ) {
 
-					var material = new THREE.LineBasicMaterial( {
+					var material = new LineBasicMaterial( {
 						color: Math.random() * 0xffffff,
 						linewidth: 10
 					} );
-					var line = new THREE.Line( geometry, material );
+					var line = new Line( geometry, material );
 					line.scale.setScalar( i / 3 );
 					scene.add( line );
 
 				}
 
-				var material = new THREE.LineDashedMaterial( {
+				var material = new LineDashedMaterial( {
 					color: 'blue',
 					linewidth: 1,
 					dashSize: 10,
 					gapSize: 10
 				} );
-				var line = new THREE.Line( geometry, material );
+				var line = new Line( geometry, material );
 				line.scale.setScalar( 2 );
 				scene.add( line );
 

examples/svg_sandbox.html

@@ -13,13 +13,33 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/renderers/Projector.js"></script>
-		<script src="js/renderers/SVGRenderer.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				BufferGeometry,
+				BufferGeometryLoader,
+				Color,
+				CylinderBufferGeometry,
+				DirectionalLight,
+				DoubleSide,
+				FileLoader,
+				Float32BufferAttribute,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				Sprite,
+				SpriteMaterial,
+				Vector3,
+				VertexColors
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { SVGRenderer, SVGObject } from './jsm/renderers/SVGRenderer.js';
 
 			var camera, scene, renderer, stats;
 
@@ -30,18 +50,18 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xf0f0f0 );
+				scene = new Scene();
+				scene.background = new Color( 0xf0f0f0 );
 
 				// QRCODE
 
-				var loader = new THREE.BufferGeometryLoader();
+				var loader = new BufferGeometryLoader();
 				loader.load( 'models/json/QRCode_buffergeometry.json', function ( geometry ) {
 
-					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { vertexColors: THREE.VertexColors } ) );
+					mesh = new Mesh( geometry, new MeshLambertMaterial( { vertexColors: VertexColors } ) );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 					scene.add( mesh );
 
@@ -49,16 +69,16 @@
 
 				// CUBES
 
-				var cube = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				var cube = new BoxBufferGeometry( 100, 100, 100 );
 
-				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
+				mesh = new Mesh( cube, new MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
 				mesh.position.x = 500;
 				mesh.rotation.x = Math.random();
 				mesh.rotation.y = Math.random();
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				scene.add( mesh );
 
-				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
+				mesh = new Mesh( cube, new MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = 500;
 				mesh.position.y = 500;
 				mesh.rotation.x = Math.random();
@@ -68,14 +88,14 @@
 
 				// PLANE
 
-				mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
+				mesh = new Mesh( new PlaneBufferGeometry( 100, 100 ), new MeshBasicMaterial( { color: Math.random() * 0xffffff, side: DoubleSide } ) );
 				mesh.position.y = - 500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				scene.add( mesh );
 
 				// CYLINDER
 
-				mesh = new THREE.Mesh( new THREE.CylinderBufferGeometry( 20, 100, 200, 10 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
+				mesh = new Mesh( new CylinderBufferGeometry( 20, 100, 200, 10 ), new MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = - 500;
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
@@ -83,14 +103,14 @@
 
 				// POLYFIELD
 
-				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, side: THREE.DoubleSide } );
+				var geometry = new BufferGeometry();
+				var material = new MeshBasicMaterial( { vertexColors: VertexColors, side: DoubleSide } );
 
-				var v = new THREE.Vector3();
-				var v0 = new THREE.Vector3();
-				var v1 = new THREE.Vector3();
-				var v2 = new THREE.Vector3();
-				var color = new THREE.Color();
+				var v = new Vector3();
+				var v0 = new Vector3();
+				var v1 = new Vector3();
+				var v2 = new Vector3();
+				var color = new Color();
 
 				var vertices = [];
 				var colors = [];
@@ -139,10 +159,10 @@
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
-				group = new THREE.Mesh( geometry, material );
+				group = new Mesh( geometry, material );
 				group.scale.set( 2, 2, 2 );
 				scene.add( group );
 
@@ -150,8 +170,8 @@
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
-					var sprite = new THREE.Sprite( material );
+					var material = new SpriteMaterial( { color: Math.random() * 0xffffff } );
+					var sprite = new Sprite( material );
 					sprite.position.x = Math.random() * 1000 - 500;
 					sprite.position.y = Math.random() * 1000 - 500;
 					sprite.position.z = Math.random() * 1000 - 500;
@@ -169,7 +189,7 @@
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					var object = new THREE.SVGObject( node.cloneNode() );
+					var object = new SVGObject( node.cloneNode() );
 					object.position.x = Math.random() * 1000 - 500;
 					object.position.y = Math.random() * 1000 - 500;
 					object.position.z = Math.random() * 1000 - 500;
@@ -179,7 +199,7 @@
 
 				// CUSTOM FROM FILE
 
-				var fileLoader = new THREE.FileLoader();
+				var fileLoader = new FileLoader();
 				fileLoader.load( 'models/svg/hexagon.svg', function ( svg ) {
 
 					var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
@@ -188,7 +208,7 @@
 
 					node.appendChild( doc.documentElement );
 
-					var object = new THREE.SVGObject( node );
+					var object = new SVGObject( node );
 					object.position.x = 500;
 					scene.add( object );
 
@@ -196,14 +216,14 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x80ffff );
+				var ambient = new AmbientLight( 0x80ffff );
 				scene.add( ambient );
 
-				var directional = new THREE.DirectionalLight( 0xffff00 );
+				var directional = new DirectionalLight( 0xffff00 );
 				directional.position.set( - 1, 0.5, 0 );
 				scene.add( directional );
 
-				renderer = new THREE.SVGRenderer();
+				renderer = new SVGRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setQuality( 'low' );
 				document.body.appendChild( renderer.domElement );