Examples: More module examples.

examples/webgl_loader_3ds.html

@@ -12,11 +12,18 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3DS loader
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/loaders/TDSLoader.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				DirectionalLight,
+				HemisphereLight,
+				PerspectiveCamera,
+				Scene,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { TDSLoader } from './jsm/loaders/TDSLoader.js';
 
 			var container, controls;
 			var camera, scene, renderer;
@@ -29,27 +36,27 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 2;
 
-				scene = new THREE.Scene();
-				scene.add( new THREE.HemisphereLight() );
+				scene = new Scene();
+				scene.add( new HemisphereLight() );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+				var directionalLight = new DirectionalLight( 0xffeedd );
 				directionalLight.position.set( 0, 0, 2 );
 				scene.add( directionalLight );
 
 				//3ds files dont store normal maps
-				var loader = new THREE.TextureLoader();
+				var loader = new TextureLoader();
 				var normal = loader.load( 'models/3ds/portalgun/textures/normal.jpg' );
 
-				var loader = new THREE.TDSLoader( );
+				var loader = new TDSLoader( );
 				loader.setResourcePath( 'models/3ds/portalgun/textures/' );
 				loader.load( 'models/3ds/portalgun/portalgun.3ds', function ( object ) {
 
 					object.traverse( function ( child ) {
 
-						if ( child instanceof THREE.Mesh ) {
+						if ( child.isMesh ) {
 
 							child.material.normalMap = normal;
 
@@ -61,12 +68,12 @@
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', resize, false );
 

examples/webgl_loader_3mf.html

@@ -19,21 +19,20 @@
 			<div>Cube gears file from <a href="https://github.com/3MFConsortium/3mf-samples" target="_blank" rel="noopener">3mf-samples</a></div>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/3MFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
 		<script src="js/libs/jszip.min.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ThreeMFLoader } from './jsm/loaders/3MFLoader.js';
 
 			var camera, scene, renderer;
 
@@ -41,17 +40,17 @@
 
 			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 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
+				scene.add( new AmbientLight( 0xffffff, 0.2 ) );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
 
 				// Z is up for objects intended to be 3D printed.
 
@@ -59,7 +58,7 @@
 				camera.position.set( - 80, - 90, 150 );
 				scene.add( camera );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 50;
 				controls.maxDistance = 300;
@@ -67,9 +66,9 @@
 				controls.target.set( 80, 65, 20 );
 				controls.update();
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
-				var loader = new THREE.ThreeMFLoader();
+				var loader = new ThreeMFLoader();
 				loader.load( './models/3mf/cube_gears.3mf', function ( object ) {
 
 					scene.add( object );

examples/webgl_loader_3mf_materials.html

@@ -17,21 +17,26 @@
 			<a href="http://3mf.io" target="_blank" rel="noopener">3MF</a> file with materials
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/3MFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
 		<script src="js/libs/jszip.min.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				Euler,
+				Fog,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				PCFSoftShadowMap,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ThreeMFLoader } from './jsm/loaders/3MFLoader.js';
 
 			var camera, scene, renderer;
 
@@ -39,23 +44,21 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xa0a0a0 );
-				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 500 );
-
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
+				scene = new Scene();
+				scene.background = new Color( 0xa0a0a0 );
+				scene.fog = new Fog( 0xa0a0a0, 10, 500 );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
 				camera.position.set( - 50, 40, 50 );
 				scene.add( camera );
 
 				//
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 100, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				var dirLight = new DirectionalLight( 0xffffff );
 				dirLight.position.set( - 0, 40, 50 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 50;
@@ -67,14 +70,14 @@
 				dirLight.shadow.mapSize.set( 1024, 1024 );
 				scene.add( dirLight );
 
-				// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
+				// scene.add( new CameraHelper( dirLight.shadow.camera ) );
 
 				//
 
-				var loader = new THREE.ThreeMFLoader();
+				var loader = new ThreeMFLoader();
 				loader.load( './models/3mf/truck.3mf', function ( object ) {
 
-					object.quaternion.setFromEuler( new THREE.Euler( - Math.PI / 2, 0, 0 ) ); 	// z-up conversion
+					object.quaternion.setFromEuler( new Euler( - Math.PI / 2, 0, 0 ) ); 	// z-up conversion
 
 					object.traverse( function ( child ) {
 
@@ -90,7 +93,7 @@
 
 				//
 
-				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 1000, 1000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var ground = new Mesh( new PlaneBufferGeometry( 1000, 1000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = 11;
 				ground.receiveShadow = true;
@@ -98,18 +101,18 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
 				renderer.gammaFactor = 2.2;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = PCFSoftShadowMap;
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.minDistance = 50;
 				controls.maxDistance = 200;

examples/webgl_loader_amf.html

@@ -19,21 +19,22 @@
 			<div>Rook manufacturing file from <a href="http://amf.wikispaces.com/AMF+test+files" target="_blank" rel="noopener">AMF test files</a></div>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/AMFLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
 		<script src="js/libs/jszip.min.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				GridHelper,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { AMFLoader } from './jsm/loaders/AMFLoader.js';
 
 			var camera, scene, renderer;
 
@@ -41,32 +42,32 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x999999 );
+				scene = new Scene();
+				scene.background = new Color( 0x999999 );
 
-				scene.add( new THREE.AmbientLight( 0x999999 ) );
+				scene.add( new AmbientLight( 0x999999 ) );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
 
 				// Z is up for objects intended to be 3D printed.
 
 				camera.up.set( 0, 0, 1 );
 				camera.position.set( 0, - 9, 6 );
 
-				camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
+				camera.add( new PointLight( 0xffffff, 0.8 ) );
 
 				scene.add( camera );
 
-				var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
-				grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI / 180 ) );
+				var grid = new GridHelper( 50, 50, 0xffffff, 0x555555 );
+				grid.rotateOnAxis( new Vector3( 1, 0, 0 ), 90 * ( Math.PI / 180 ) );
 				scene.add( grid );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var loader = new THREE.AMFLoader();
+				var loader = new AMFLoader();
 				loader.load( './models/amf/rook.amf', function ( amfobject ) {
 
 					scene.add( amfobject );
@@ -74,7 +75,7 @@
 
 				} );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.target.set( 0, 1.2, 2 );
 				controls.update();

examples/webgl_loader_assimp.html

@@ -15,91 +15,91 @@
 			<div>Assimp loader by <a href="https://virtulo.us" target="_blank" rel="noopener">Virtulous</a></div>
 			<div>Octaminator model from <a href="http://opengameart.org/content/octaminator-engine-ready" target="_blank" rel="noopener">Teh_Bucket and raymoohawk</a></div>
 		</div>
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/AssimpLoader.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
+		<script type="module">
+			import {
+				DirectionalLight,
+				HemisphereLight,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { AssimpLoader } from './jsm/loaders/AssimpLoader.js';
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+			var container, stats;
+			var camera, scene, renderer;
+			var animation;
 
-		}
+			init();
 
-		var container, stats;
-		var camera, scene, renderer;
-		var animation;
+			function init() {
 
-		init();
+				container = document.getElementById( 'container' );
+				camera = new PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.set( 600, 1150, 5 );
+				camera.up.set( 0, 0, 1 );
+				camera.lookAt( - 100, 0, 0 );
 
-		function init() {
+				scene = new Scene();
 
-			container = document.getElementById( 'container' );
-			camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 10000 );
-			camera.position.set( 600, 1150, 5 );
-			camera.up.set( 0, 0, 1 );
-			camera.lookAt( - 100, 0, 0 );
+				var ambient = new HemisphereLight( 0x8888fff, 0xff8888, 0.5 );
+				ambient.position.set( 0, 1, 0 );
+				scene.add( ambient );
 
-			scene = new THREE.Scene();
+				var light = new DirectionalLight( 0xffffff, 1 );
+				light.position.set( 0, 4, 4 ).normalize();
+				scene.add( light );
 
-			var ambient = new THREE.HemisphereLight( 0x8888fff, 0xff8888, 0.5 );
-			ambient.position.set( 0, 1, 0 );
-			scene.add( ambient );
+				renderer = new WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
-			light.position.set( 0, 4, 4 ).normalize();
-			scene.add( light );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
-			var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var loader = new AssimpLoader();
+				loader.load( './models/assimp/octaminator/Octaminator.assimp', function ( result ) {
 
-			stats = new Stats();
-			container.appendChild( stats.dom );
+					var object = result.object;
 
-			var loader = new THREE.AssimpLoader();
-			loader.load( './models/assimp/octaminator/Octaminator.assimp', function ( result ) {
+					object.position.y = - 100;
+					object.rotation.x = Math.PI / 2;
+					scene.add( object );
 
-				var object = result.object;
+					animation = result.animation;
 
-				object.position.y = - 100;
-				object.rotation.x = Math.PI / 2;
-				scene.add( object );
+				} );
 
-				animation = result.animation;
+				window.addEventListener( 'resize', onWindowResize, false );
+				animate();
 
-			} );
+			}
 
-			window.addEventListener( 'resize', onWindowResize, false );
-			animate();
+			function onWindowResize() {
 
-		}
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-		function onWindowResize() {
+			}
 
-			camera.aspect = window.innerWidth / window.innerHeight;
-			camera.updateProjectionMatrix();
-			renderer.setSize( window.innerWidth, window.innerHeight );
+			function animate() {
 
-		}
+				requestAnimationFrame( animate, renderer.domElement );
+				renderer.render( scene, camera );
 
-		function animate() {
+				if ( animation ) animation.setTime( performance.now() / 1000 );
 
-			requestAnimationFrame( animate, renderer.domElement );
-			renderer.render( scene, camera );
+				stats.update();
 
-			if ( animation ) animation.setTime( performance.now() / 1000 );
-
-			stats.update();
-
-		}
+			}
 		</script>
 </body>
 

examples/webgl_loader_assimp2json.html

@@ -14,20 +14,19 @@
 			<a href="http://www.assimp.org/" target="_blank" rel="noopener">Assimp</a>
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Clock,
+				DirectionalLight,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/loaders/AssimpJSONLoader.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { AssimpJSONLoader } from './jsm/loaders/AssimpJSONLoader.js';
 
 			/*
 
@@ -63,15 +62,15 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
 				// load jeep model
 
-				var loader = new THREE.AssimpJSONLoader();
+				var loader = new AssimpJSONLoader();
 
 				loader.load( 'models/assimp/jeep/jeep.assimp.json', function ( object ) {
 
@@ -90,17 +89,17 @@
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xeeeeee );
+				var directionalLight = new DirectionalLight( 0xeeeeee );
 				directionalLight.position.set( 1, 1, - 1 );
 				directionalLight.position.normalize();
 				scene.add( directionalLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_awd.html

@@ -11,21 +11,20 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - AWD loader
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				DirectionalLight,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/loaders/AWDLoader.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { AWDLoader } from './jsm/loaders/AWDLoader.js';
 
 			var container, stats;
 
@@ -33,7 +32,7 @@
 			var pointLight;
 			var trunk;
 
-			var loader = new THREE.AWDLoader();
+			var loader = new AWDLoader();
 
 			loader.materialFactory = createMaterial;
 			loader.load( './models/awd/simple/simple.awd', function ( _trunk ) {
@@ -48,7 +47,7 @@
 			function createMaterial() {
 
 				// console.log( name );
-				// var mat = new THREE.MeshPhongMaterial({
+				// var mat = new MeshPhongMaterial({
 				// 	color: 0xaaaaaa,
 				// 	shininess: 20
 
@@ -63,10 +62,10 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 70, 50, - 100 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// Add the AWD SCENE
 
@@ -74,22 +73,22 @@
 
 				// Lights
 
-				scene.add( new THREE.AmbientLight( 0x606060 ) );
+				scene.add( new AmbientLight( 0x606060 ) );
 
-				var directionalLight = new THREE.DirectionalLight( /*Math.random() * 0xffffff*/0xeeeeee );
+				var directionalLight = new DirectionalLight( /*Math.random() * 0xffffff*/0xeeeeee );
 				directionalLight.position.set( .2, - 1, .2 );
 				directionalLight.position.normalize();
 				scene.add( directionalLight );
 
-				pointLight = new THREE.PointLight( 0xffffff, .6 );
+				pointLight = new PointLight( 0xffffff, .6 );
 				scene.add( pointLight );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );

examples/webgl_loader_babylon.html

@@ -11,11 +11,17 @@
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Babylon loader
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/BabylonLoader.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				LoadingManager,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { BabylonLoader } from './jsm/loaders/BabylonLoader.js';
 
 			var camera, controls, scene, renderer;
 
@@ -23,16 +29,16 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 100;
 
 				// scene
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// texture
 
-				var manager = new THREE.LoadingManager();
+				var manager = new LoadingManager();
 				manager.onProgress = function ( item, loaded, total ) {
 
 					console.log( item, loaded, total );
@@ -52,14 +58,14 @@
 
 				// model
 
-				var loader = new THREE.BabylonLoader( manager );
+				var loader = new BabylonLoader( manager );
 				loader.load( 'models/babylon/skull.babylon', function ( babylonScene ) {
 
 					babylonScene.traverse( function ( object ) {
 
-						if ( object instanceof THREE.Mesh ) {
+						if ( object.isMesh ) {
 
-							object.material = new THREE.MeshPhongMaterial( {
+							object.material = new MeshPhongMaterial( {
 								color: Math.random() * 0xffffff
 							} );
 
@@ -75,14 +81,14 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				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 );
 
 				//
 

examples/webgl_loader_bvh.html

@@ -20,12 +20,24 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - BVH Loader<br/>
 			animation from <a href="http://mocap.cs.cmu.edu/">http://mocap.cs.cmu.edu/</a>
 		</div>
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/BVHLoader.js"></script>
-		<script>
 
-			var clock = new THREE.Clock();
+		<script type="module">
+			import {
+				AnimationMixer,
+				Clock,
+				Color,
+				GridHelper,
+				Group,
+				PerspectiveCamera,
+				Scene,
+				SkeletonHelper,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { BVHLoader } from './jsm/loaders/BVHLoader.js';
+
+			var clock = new Clock();
 
 			var camera, controls, scene, renderer;
 			var mixer, skeletonHelper;
@@ -33,41 +45,41 @@
 			init();
 			animate();
 
-			var loader = new THREE.BVHLoader();
+			var loader = new BVHLoader();
 			loader.load( "models/bvh/pirouette.bvh", function ( result ) {
 
-				skeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
+				skeletonHelper = new SkeletonHelper( result.skeleton.bones[ 0 ] );
 				skeletonHelper.skeleton = result.skeleton; // allow animation mixer to bind to SkeletonHelper directly
 
-				var boneContainer = new THREE.Group();
+				var boneContainer = new Group();
 				boneContainer.add( result.skeleton.bones[ 0 ] );
 
 				scene.add( skeletonHelper );
 				scene.add( boneContainer );
 
 				// play animation
-				mixer = new THREE.AnimationMixer( skeletonHelper );
+				mixer = new AnimationMixer( skeletonHelper );
 				mixer.clipAction( result.clip ).setEffectiveWeight( 1.0 ).play();
 
 			} );
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 200, 400 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xeeeeee );
+				scene = new Scene();
+				scene.background = new Color( 0xeeeeee );
 
-				scene.add( new THREE.GridHelper( 400, 10 ) );
+				scene.add( new GridHelper( 400, 10 ) );
 
 				// 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.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 300;
 				controls.maxDistance = 700;
 

examples/webgl_loader_collada.html

@@ -14,19 +14,20 @@
 			Elf Girl by <a href="https://sketchfab.com/yellow09" target="_blank" rel="noopener">halloween</a>, <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Clock,
+				DirectionalLight,
+				LoadingManager,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/loaders/ColladaLoader.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';
 
 			var container, stats, clock;
 			var camera, scene, renderer, elf;
@@ -38,17 +39,17 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 				camera.position.set( 8, 10, 8 );
 				camera.lookAt( 0, 3, 0 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
 				// loading manager
 
-				var loadingManager = new THREE.LoadingManager( function () {
+				var loadingManager = new LoadingManager( function () {
 
 					scene.add( elf );
 
@@ -56,7 +57,7 @@
 
 				// collada
 
-				var loader = new THREE.ColladaLoader( loadingManager );
+				var loader = new ColladaLoader( loadingManager );
 				loader.load( './models/collada/elf/elf.dae', function ( collada ) {
 
 					elf = collada.scene;
@@ -65,16 +66,16 @@
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				var directionalLight = new DirectionalLight( 0xffffff, 0.8 );
 				directionalLight.position.set( 1, 1, 0 ).normalize();
 				scene.add( directionalLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_collada_kinematics.html

@@ -12,21 +12,25 @@
 			robot from <a href="https://github.com/rdiankov/collada_robots" target="_blank" rel="noopener">collada robots</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
 		<script src="js/libs/tween.min.js"></script>
-		<script src="js/loaders/ColladaLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
-		<script>
+		<script type="module">
+			import {
+				GridHelper,
+				HemisphereLight,
+				Math as _Math,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SphereBufferGeometry,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import Stats from './jsm/libs/stats.module.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';
 
 			var container, stats;
 
@@ -38,7 +42,7 @@
 			var kinematicsTween;
 			var tweenParameters = {};
 
-			var loader = new THREE.ColladaLoader();
+			var loader = new ColladaLoader();
 			// loader.load( './models/collada/kawada-hironx.dae', function ( collada ) {
 			loader.load( './models/collada/abb_irb52_7_120.dae', function ( collada ) {
 
@@ -46,7 +50,7 @@
 
 				dae.traverse( function ( child ) {
 
-					if ( child instanceof THREE.Mesh ) {
+					if ( child.isMesh ) {
 
 						// model does not have normals
 						child.material.flatShading = true;
@@ -70,32 +74,32 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 2, 2, 3 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				// Grid
 
-				var grid = new THREE.GridHelper( 20, 20 );
+				var grid = new GridHelper( 20, 20 );
 				scene.add( grid );
 
 				// Add the COLLADA
 
 				scene.add( dae );
 
-				particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
+				particleLight = new Mesh( new SphereBufferGeometry( 4, 8, 8 ), new MeshBasicMaterial( { color: 0xffffff } ) );
 				scene.add( particleLight );
 
 				// Lights
 
-				var light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
+				var light = new HemisphereLight( 0xffeeee, 0x111122 );
 				scene.add( light );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.3 );
+				var pointLight = new PointLight( 0xffffff, 0.3 );
 				particleLight.add( pointLight );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -113,7 +117,7 @@
 
 			function setupTween() {
 
-				var duration = THREE.Math.randInt( 1000, 5000 );
+				var duration = _Math.randInt( 1000, 5000 );
 
 				var target = {};
 
@@ -131,7 +135,7 @@
 
 							tweenParameters[ prop ] = position;
 
-							target[ prop ] = THREE.Math.randInt( joint.limits.min, joint.limits.max );
+							target[ prop ] = _Math.randInt( joint.limits.min, joint.limits.max );
 
 						}
 

examples/webgl_loader_collada_skinning.html

@@ -14,19 +14,22 @@
 			Dancing Stormtrooper by <a href="https://sketchfab.com/strykerdoesgames" target="_blank" rel="noopener">StrykerDoesAnimation</a>, <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/ColladaLoader.js"></script>
-		<script src="js/controls/OrbitControls.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 {
+				AnimationMixer,
+				AmbientLight,
+				Clock,
+				GridHelper,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { ColladaLoader } from './jsm/loaders/ColladaLoader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var container, stats, clock, controls;
 			var camera, scene, renderer, mixer;
@@ -38,16 +41,16 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 15, 10, - 15 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				clock = new THREE.Clock();
+				clock = new Clock();
 
 				// collada
 
-				var loader = new THREE.ColladaLoader();
+				var loader = new ColladaLoader();
 				loader.load( './models/collada/stormtrooper/stormtrooper.dae', function ( collada ) {
 
 					var animations = collada.animations;
@@ -63,8 +66,8 @@
 
 					} );
 
-					mixer = new THREE.AnimationMixer( avatar );
-					var action = mixer.clipAction( animations[ 0 ] ).play();
+					mixer = new AnimationMixer( avatar );
+					mixer.clipAction( animations[ 0 ] ).play();
 
 					scene.add( avatar );
 
@@ -72,28 +75,28 @@
 
 				//
 
-				var gridHelper = new THREE.GridHelper( 10, 20 );
+				var gridHelper = new GridHelper( 10, 20 );
 				scene.add( gridHelper );
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
+				var ambientLight = new AmbientLight( 0xffffff, 0.2 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				scene.add( camera );
 				camera.add( pointLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.screenSpacePanning = true;
 				controls.minDistance = 5;
 				controls.maxDistance = 40;

examples/webgl_loader_ctm.html

@@ -16,20 +16,27 @@
 			<a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/ctm/CTMLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				CubeTextureLoader,
+				Fog,
+				Mesh,
+				MeshLambertMaterial,
+				MeshPhongMaterial,
+				MixOperation,
+				PerspectiveCamera,
+				Scene,
+				SpotLight,
+				TextureLoader,
+				Vector2,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { CTMLoader } from './jsm/loaders/ctm/CTMLoader.js';
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
@@ -43,8 +50,8 @@
 			var windowHalfX = window.innerWidth / 2;
 			var windowHalfY = window.innerHeight / 2;
 
-			var textureLoader = new THREE.TextureLoader();
-			var cubeTextureLoader = new THREE.CubeTextureLoader();
+			var textureLoader = new TextureLoader();
+			var cubeTextureLoader = new CubeTextureLoader();
 			var reflectionCube;
 
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
@@ -58,12 +65,12 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
+				camera = new PerspectiveCamera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
 				camera.position.z = 800;
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
-				scene.fog = new THREE.Fog( 0x050505, 800, 2000 );
+				scene = new Scene();
+				scene.background = new Color( 0x050505 );
+				scene.fog = new Fog( 0x050505, 800, 2000 );
 
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
@@ -77,23 +84,23 @@
 
 				// LIGHTS
 
-				var ambient = new THREE.AmbientLight( 0x040404 );
+				var ambient = new AmbientLight( 0x040404 );
 				scene.add( ambient );
 
-				var light = new THREE.SpotLight( 0xffeedd, 1.2, 650, Math.PI / 6 );
+				var light = new SpotLight( 0xffeedd, 1.2, 650, Math.PI / 6 );
 				light.position.set( 0, - 100, 500 );
 
 				light.castShadow = true;
 				light.shadow.mapWidth = 1024;
 				light.shadow.mapHeight = 1024;
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 				scene.add( light );
 
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
@@ -132,12 +139,12 @@
 
 				}
 
-				var loader = new THREE.CTMLoader();
+				var loader = new CTMLoader();
 				loader.setWorkerPath( "js/loaders/ctm/CTMWorker.js" );
 
 				loader.load( "models/ctm/ben.ctm", function ( geometry ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xffaa00, map: textureLoader.load( "textures/UV_Grid_Sm.jpg" ), envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.3 } );
+					var material = new MeshLambertMaterial( { color: 0xffaa00, map: textureLoader.load( "textures/UV_Grid_Sm.jpg" ), envMap: reflectionCube, combine: MixOperation, reflectivity: 0.3 } );
 					callbackModel( geometry, 450, material, 0, - 200, 0, 0, 0 );
 					checkTime();
 
@@ -145,9 +152,9 @@
 
 				loader.load( "models/ctm/WaltHead.ctm", function ( geometry ) {
 
-					var material1 = new THREE.MeshLambertMaterial( { color: 0xffffff } );
-					var material2 = new THREE.MeshPhongMaterial( { color: 0xff4400, specular: 0x333333, shininess: 100 } );
-					var material3 = new THREE.MeshPhongMaterial( { color: 0x00ff44, specular: 0x333333, shininess: 100 } );
+					var material1 = new MeshLambertMaterial( { color: 0xffffff } );
+					var material2 = new MeshPhongMaterial( { color: 0xff4400, specular: 0x333333, shininess: 100 } );
+					var material3 = new MeshPhongMaterial( { color: 0x00ff44, specular: 0x333333, shininess: 100 } );
 
 					callbackModel( geometry, 5, material1, - 200, 0, - 50, 0, 0 );
 					callbackModel( geometry, 2, material2, 100, 0, 125, 0, 0 );
@@ -159,14 +166,14 @@
 
 				loader.load( "models/ctm/LeePerry.ctm", function ( geometry ) {
 
-					var material = new THREE.MeshPhongMaterial( {
+					var material = new MeshPhongMaterial( {
 
 						specular: 0x303030,
 						shininess: 50,
 						map: textureLoader.load( "models/gltf/LeePerrySmith/Map-COL.jpg" ),
 						specularMap: textureLoader.load( "models/gltf/LeePerrySmith/Map-SPEC.jpg" ),
 						normalMap: textureLoader.load( "models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg" ),
-						normalScale: new THREE.Vector2( 0.8, 0.8 )
+						normalScale: new Vector2( 0.8, 0.8 )
 
 					} );
 
@@ -179,7 +186,7 @@
 
 			function callbackModel( geometry, s, material, x, y, z, rx, ry ) {
 
-				var mesh = new THREE.Mesh( geometry, material );
+				var mesh = new Mesh( geometry, material );
 
 				mesh.position.set( x, y, z );
 				mesh.scale.set( s, s, s );

examples/webgl_loader_ctm_materials.html

@@ -14,22 +14,25 @@
 			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/ctm/CTMLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				CubeTextureLoader,
+				DoubleSide,
+				Mesh,
+				MeshPhongMaterial,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { CTMLoader } from './jsm/loaders/ctm/CTMLoader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
@@ -51,7 +54,7 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera = new PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 				camera.position.set( 185, 40, 170 );
 
 				// SCENE
@@ -63,28 +66,28 @@
 					r + "pz.png", r + "nz.png"
 				];
 
-				textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube = new CubeTextureLoader().load( urls );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.background = textureCube;
 
 				// LIGHTS
 
-				var light = new THREE.PointLight( 0xffffff, 1 );
+				var light = new PointLight( 0xffffff, 1 );
 				light.position.set( 2, 5, 1 );
 				light.position.multiplyScalar( 30 );
 				scene.add( light );
 
-				var light = new THREE.PointLight( 0xffffff, 0.75 );
+				var light = new PointLight( 0xffffff, 0.75 );
 				light.position.set( - 12, 4.6, 2.4 );
 				light.position.multiplyScalar( 30 );
 				scene.add( light );
 
-				scene.add( new THREE.AmbientLight( 0x050505 ) );
+				scene.add( new AmbientLight( 0x050505 ) );
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				renderer.gammaInput = true;
@@ -92,7 +95,7 @@
 				renderer.domElement.style.position = "relative";
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.maxPolarAngle = Math.PI / 2;
 				controls.minDistance = 150;
 				controls.maxDistance = 500;
@@ -112,10 +115,10 @@
 
 				// new way via CTMLoader and separate parts
 
-				var position = new THREE.Vector3( - 105, - 78, - 30 );
-				var scale = new THREE.Vector3( 30, 30, 30 );
+				var position = new Vector3( - 105, - 78, - 30 );
+				var scale = new Vector3( 30, 30, 30 );
 
-				var loader = new THREE.CTMLoader();
+				var loader = new CTMLoader();
 				loader.setWorkerPath( "js/loaders/ctm/CTMWorker.js" );
 
 				loader.loadParts( "models/ctm/camaro/camaro.js", function ( geometries, materials ) {
@@ -124,7 +127,7 @@
 
 					for ( var i = 0; i < geometries.length; i ++ ) {
 
-						var mesh = new THREE.Mesh( geometries[ i ], materials[ i ] );
+						var mesh = new Mesh( geometries[ i ], materials[ i ] );
 						mesh.position.copy( position );
 						mesh.scale.copy( scale );
 						scene.add( mesh );
@@ -149,7 +152,7 @@
 
 					if ( m.name.indexOf( "Body" ) !== - 1 ) {
 
-						var mm = new THREE.MeshStandardMaterial();
+						var mm = new MeshStandardMaterial();
 
 						mm.color.setHex( 0x000000 );
 						mm.lightMap = m.map;
@@ -161,7 +164,7 @@
 
 					} else if ( m.name.indexOf( "tire_car" ) !== - 1 ) {
 
-						var mm = new THREE.MeshStandardMaterial();
+						var mm = new MeshStandardMaterial();
 
 						mm.color.setHex( 0x000000 );
 						mm.lightMap = m.map;
@@ -172,7 +175,7 @@
 
 					} else if ( m.name.indexOf( "mirror" ) !== - 1 ) {
 
-						var mm = new THREE.MeshStandardMaterial();
+						var mm = new MeshStandardMaterial();
 
 						mm.color.setHex( 0x808080 );
 						mm.lightMap = m.map;
@@ -184,7 +187,7 @@
 
 					} else if ( m.name.indexOf( "glass" ) !== - 1 ) {
 
-						var mm = new THREE.MeshStandardMaterial();
+						var mm = new MeshStandardMaterial();
 
 						mm.color.copy( m.color );
 						mm.envMap = textureCube;
@@ -197,7 +200,7 @@
 
 					} else if ( m.name.indexOf( "Material.001" ) !== - 1 ) {
 
-						var mm = new THREE.MeshPhongMaterial( { map: m.map } );
+						var mm = new MeshPhongMaterial( { map: m.map } );
 
 						mm.specularMap = m.map;
 						mm.shininess = 30;
@@ -207,7 +210,7 @@
 
 					}
 
-					materials[ i ].side = THREE.DoubleSide;
+					materials[ i ].side = DoubleSide;
 
 				}
 

examples/webgl_loader_draco.html

@@ -13,34 +13,48 @@
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
 		<a href="https://github.com/google/draco" target="_blank" rel="noopener">DRACO</a> loader
 	</div>
-	<script src="../build/three.js"></script>
-	<script src="js/loaders/DRACOLoader.js"></script>
-	<script>
+
+	<script type="module">
+		import {
+			Color,
+			Fog,
+			HemisphereLight,
+			Mesh,
+			MeshPhongMaterial,
+			MeshStandardMaterial,
+			PerspectiveCamera,
+			PlaneBufferGeometry,
+			Scene,
+			SpotLight,
+			WebGLRenderer,
+		} from "../build/three.module.js";
+
+		import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
 		var camera, scene, renderer;
 
 		var container = document.querySelector( '#container' );
 
 		// Configure and create Draco decoder.
-		THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/' );
-		THREE.DRACOLoader.setDecoderConfig( { type: 'js' } );
-		var dracoLoader = new THREE.DRACOLoader();
+		DRACOLoader.setDecoderPath( 'js/libs/draco/' );
+		DRACOLoader.setDecoderConfig( { type: 'js' } );
+		var dracoLoader = new DRACOLoader();
 		init();
 		animate();
 
 		function init() {
 
-			camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 15 );
+			camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 15 );
 			camera.position.set( 3, 0.25, 3 );
 
-			scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0x443333 );
-			scene.fog = new THREE.Fog( 0x443333, 1, 4 );
+			scene = new Scene();
+			scene.background = new Color( 0x443333 );
+			scene.fog = new Fog( 0x443333, 1, 4 );
 
 			// Ground
-			var plane = new THREE.Mesh(
-				new THREE.PlaneBufferGeometry( 8, 8 ),
-				new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+			var plane = new Mesh(
+				new PlaneBufferGeometry( 8, 8 ),
+				new MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
 			);
 			plane.rotation.x = - Math.PI / 2;
 			plane.position.y = 0.03;
@@ -48,10 +62,10 @@
 			scene.add( plane );
 
 			// Lights
-			var light = new THREE.HemisphereLight( 0x443333, 0x111122 );
+			var light = new HemisphereLight( 0x443333, 0x111122 );
 			scene.add( light );
 
-			var light = new THREE.SpotLight();
+			var light = new SpotLight();
 			light.angle = Math.PI / 16;
 			light.penumbra = 0.5;
 			light.castShadow = true;
@@ -62,19 +76,19 @@
 
 				geometry.computeVertexNormals();
 
-				var material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
-				var mesh = new THREE.Mesh( geometry, material );
+				var material = new MeshStandardMaterial( { color: 0x606060 } );
+				var mesh = new Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
 				// Release decoder resources.
-				THREE.DRACOLoader.releaseDecoderModule();
+				DRACOLoader.releaseDecoderModule();
 
 			} );
 
 			// renderer
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
+			renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.gammaInput = true;

examples/webgl_loader_fbx.html

@@ -13,28 +13,32 @@
 			Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/inflate.min.js"></script>
-		<script src="js/loaders/FBXLoader.js"></script>
-
-		<script src="js/controls/OrbitControls.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 {
+				AnimationMixer,
+				Clock,
+				Color,
+				DirectionalLight,
+				Fog,
+				GridHelper,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
 			var container, stats, controls;
 			var camera, scene, renderer, light;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			var mixer;
 
@@ -46,18 +50,18 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 100, 200, 300 );
 
-				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 );
 
-				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				light = new HemisphereLight( 0xffffff, 0x444444 );
 				light.position.set( 0, 200, 0 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 200, 100 );
 				light.castShadow = true;
 				light.shadow.camera.top = 180;
@@ -66,24 +70,24 @@
 				light.shadow.camera.right = 120;
 				scene.add( light );
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 				// ground
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var mesh = new Mesh( new PlaneBufferGeometry( 2000, 2000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				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 );
 
 				// model
-				var loader = new THREE.FBXLoader();
+				var loader = new FBXLoader();
 				loader.load( 'models/fbx/Samba Dancing.fbx', function ( object ) {
 
-					mixer = new THREE.AnimationMixer( object );
+					mixer = new AnimationMixer( object );
 
 					var action = mixer.clipAction( object.animations[ 0 ] );
 					action.play();
@@ -103,13 +107,13 @@
 
 				} );
 
-				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;
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 100, 0 );
 				controls.update();
 

examples/webgl_loader_fbx_nurbs.html

@@ -12,24 +12,20 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FBXLoader - Nurbs
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				DirectionalLight,
+				GridHelper,
+				HemisphereLight,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/controls/OrbitControls.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script src="js/curves/NURBSCurve.js"></script>
-		<script src="js/curves/NURBSUtils.js"></script>
-		<script src="js/loaders/FBXLoader.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() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
 			var container, stats, controls;
 			var camera, scene, renderer, light;
@@ -42,21 +38,21 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 2, 18, 28 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				light = new HemisphereLight( 0xffffff, 0x444444 );
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff );
+				light = new DirectionalLight( 0xffffff );
 				light.position.set( 0, 1, 0 );
 				scene.add( light );
 
 				// grid
-				var gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
+				var gridHelper = new GridHelper( 28, 28, 0x303030, 0x303030 );
 				scene.add( gridHelper );
 
 				// stats
@@ -64,19 +60,19 @@
 				container.appendChild( stats.dom );
 
 				// model
-				var loader = new THREE.FBXLoader();
+				var loader = new FBXLoader();
 				loader.load( 'models/fbx/nurbs.fbx', function ( object ) {
 
 					scene.add( object );
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 12, 0 );
 				controls.update();
 

examples/webgl_loader_gcode.html

@@ -12,11 +12,15 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - GCode loader
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/GCodeLoader.js"></script>
+		<script type="module">
+			import {
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script>
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GCodeLoader } from './jsm/loaders/GCodeLoader.js';
 
 			var container;
 			var camera, scene, renderer;
@@ -29,12 +33,12 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000 );
 				camera.position.set( 0, 0, 70 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var loader = new THREE.GCodeLoader();
+				var loader = new GCodeLoader();
 				loader.load( 'models/gcode/benchy.gcode', function ( object ) {
 
 					object.position.set( - 100, - 20, 100 );
@@ -42,12 +46,12 @@
 
 				} );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', resize, false );
 

examples/webgl_loader_imagebitmap.html

@@ -7,19 +7,24 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Texture loader using ImageBitmap
 		</div>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				CanvasTexture,
+				GridHelper,
+				Group,
+				ImageBitmapLoader,
+				ImageLoader,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
 			var container;
 
@@ -31,12 +36,12 @@
 
 			function addImageBitmap() {
 
-				new THREE.ImageBitmapLoader()
+				new ImageBitmapLoader()
 					.setOptions( { imageOrientation: 'none' } )
 					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( imageBitmap ) {
 
-						var texture = new THREE.CanvasTexture( imageBitmap );
-						var material = new THREE.MeshBasicMaterial( { map: texture } );
+						var texture = new CanvasTexture( imageBitmap );
+						var material = new MeshBasicMaterial( { map: texture } );
 
 						/* ImageBitmap should be disposed when done with it
 						   Can't be done until it's actually uploaded to WebGLTexture */
@@ -59,23 +64,23 @@
 
 			function addImage() {
 
-				new THREE.ImageLoader()
+				new ImageLoader()
 					.setCrossOrigin( '*' )
 					.load( 'textures/planets/earth_atmos_2048.jpg?' + performance.now(), function ( image ) {
 
-						var texture = new THREE.CanvasTexture( image );
-						var material = new THREE.MeshBasicMaterial( { color: 0xff8888, map: texture } );
+						var texture = new CanvasTexture( image );
+						var material = new MeshBasicMaterial( { color: 0xff8888, map: texture } );
 						addCube( material );
 
 					} );
 
 			}
 
-			var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+			var geometry = new BoxBufferGeometry( 1, 1, 1 );
 
 			function addCube( material ) {
 
-				var cube = new THREE.Mesh( geometry, material );
+				var cube = new Mesh( geometry, material );
 				cube.position.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 				cube.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );
 				cubes.add( cube );
@@ -89,27 +94,27 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
 				camera.position.set( 0, 4, 7 );
 				camera.lookAt( 0, 0, 0 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				group = new THREE.Group();
+				group = new Group();
 				scene.add( group );
 
-				group.add( new THREE.GridHelper( 4, 12 ) );
+				group.add( new GridHelper( 4, 12 ) );
 
-				cubes = new THREE.Group();
+				cubes = new Group();
 				group.add( cubes );
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_json_claraio.html

@@ -13,14 +13,17 @@
 		More Information: <a href="https://clara.io/learn/user-guide/data_exchange/threejs_export" target="_blank" rel="noopener">Clara.io ThreeJS Export Documentation</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			var container, stats;
+		<script type="module">
+			import {
+				AmbientLight,
+				DirectionalLight,
+				ObjectLoader,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			var container;
 
 			var camera, scene, renderer;
 
@@ -39,22 +42,22 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 4;
 
 				// scene
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var ambient = new THREE.AmbientLight( 0x444444 );
+				var ambient = new AmbientLight( 0x444444 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+				var directionalLight = new DirectionalLight( 0xffeedd );
 				directionalLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( directionalLight );
 
 				// BEGIN Clara.io JSON loader code
-				var objectLoader = new THREE.ObjectLoader();
+				var objectLoader = new ObjectLoader();
 				objectLoader.load( "models/json/teapot-claraio.json", function ( obj ) {
 
 				 	scene.add( obj );
@@ -62,7 +65,7 @@
 				} );
 				// END Clara.io JSON loader code
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_kmz.html

@@ -8,26 +8,24 @@
 	</head>
 	<body>
 		<div id="info">
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
 			<a href="https://developers.google.com/kml/documentation/kmzarchives" target="_blank" rel="noopener">KMZ</a> loader
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/KMZLoader.js"></script>
-		<script src="js/loaders/ColladaLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
 		<script src="js/libs/jszip.min.js"></script>
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				GridHelper,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { KMZLoader } from './jsm/loaders/KMZLoader.js';
 
 			var camera, scene, renderer;
 
@@ -35,30 +33,30 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x999999 );
+				scene = new Scene();
+				scene.background = new Color( 0x999999 );
 
-				var light = new THREE.DirectionalLight( 0xffffff );
+				var light = new DirectionalLight( 0xffffff );
 				light.position.set( 0.5, 1.0, 0.5 ).normalize();
 
 				scene.add( light );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
 
 				camera.position.y = 5;
 				camera.position.z = 10;
 
 				scene.add( camera );
 
-				var grid = new THREE.GridHelper( 50, 50, 0xffffff, 0x555555 );
+				var grid = new GridHelper( 50, 50, 0xffffff, 0x555555 );
 				scene.add( grid );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var loader = new THREE.KMZLoader();
+				var loader = new KMZLoader();
 				loader.load( './models/kmz/Box.kmz', function ( kmz ) {
 
 					kmz.scene.position.y = 0.5;
@@ -67,7 +65,7 @@
 
 				} );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
 				controls.update();
 

examples/webgl_loader_ldraw.html

@@ -20,14 +20,25 @@
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - LDrawLoader
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/LDrawLoader.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Box3,
+				Color,
+				CubeReflectionMapping,
+				CubeTextureLoader,
+				DirectionalLight,
+				PerspectiveCamera,
+				RGBFormat,
+				Scene,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { LDrawLoader } from './jsm/loaders/LDrawLoader.js';
 
 			var container, progressBarDiv;
 
@@ -67,29 +78,29 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 150, 200, 250 );
 
 				// scene
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xdeebed );
+				scene = new Scene();
+				scene.background = new Color( 0xdeebed );
 
-				var ambientLight = new THREE.AmbientLight( 0xdeebed, 0.4 );
+				var ambientLight = new AmbientLight( 0xdeebed, 0.4 );
 				scene.add( ambientLight );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 				directionalLight.position.set( - 1000, 1200, 1500 );
 				scene.add( directionalLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 
@@ -102,7 +113,7 @@
 					smoothNormals: true
 				};
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( guiData, 'modelFileName', modelFileList ).name( 'Model' ).onFinishChange( function () {
 
@@ -118,25 +129,25 @@
 
 				} );
 
-				gui.add( guiData, 'separateObjects' ).name( 'Separate Objects' ).onChange( function ( value ) {
+				gui.add( guiData, 'separateObjects' ).name( 'Separate Objects' ).onChange( function () {
 
 					reloadObject( false );
 
 				} );
 
-				gui.add( guiData, 'smoothNormals' ).name( 'Smooth Normals' ).onChange( function ( value ) {
+				gui.add( guiData, 'smoothNormals' ).name( 'Smooth Normals' ).onChange( function () {
 
 					reloadObject( false );
 
 				} );
 
-				gui.add( guiData, 'displayLines' ).name( 'Display Lines' ).onChange( function ( value ) {
+				gui.add( guiData, 'displayLines' ).name( 'Display Lines' ).onChange( function () {
 
 					updateLineSegments();
 
 				} );
 
-				gui.add( guiData, 'conditionalLines' ).name( 'Conditional Lines' ).onChange( function ( value ) {
+				gui.add( guiData, 'conditionalLines' ).name( 'Conditional Lines' ).onChange( function () {
 
 					updateLineSegments();
 
@@ -195,7 +206,7 @@
 				updateProgressBar( 0 );
 				showProgressBar();
 
-				var lDrawLoader = new THREE.LDrawLoader();
+				var lDrawLoader = new LDrawLoader();
 				lDrawLoader.separateObjects = guiData.separateObjects;
 				lDrawLoader.smoothNormals = guiData.smoothNormals;
 				lDrawLoader
@@ -228,9 +239,9 @@
 								var urls = [ r + "posx.jpg", r + "negx.jpg",
 									r + "posy.jpg", r + "negy.jpg",
 									r + "posz.jpg", r + "negz.jpg" ];
-								textureCube = new THREE.CubeTextureLoader().load( urls );
-								textureCube.format = THREE.RGBFormat;
-								textureCube.mapping = THREE.CubeReflectionMapping;
+								textureCube = new CubeTextureLoader().load( urls );
+								textureCube.format = RGBFormat;
+								textureCube.mapping = CubeReflectionMapping;
 
 							}
 
@@ -252,13 +263,13 @@
 
 						// Adjust camera and light
 
-						var bbox = new THREE.Box3().setFromObject( model );
-						var size = bbox.getSize( new THREE.Vector3() );
+						var bbox = new Box3().setFromObject( model );
+						var size = bbox.getSize( new Vector3() );
 						var radius = Math.max( size.x, Math.max( size.y, size.z ) ) * 0.5;
 
 						if ( resetCamera ) {
 
-							controls.target0.copy( bbox.getCenter( new THREE.Vector3() ) );
+							controls.target0.copy( bbox.getCenter( new Vector3() ) );
 							controls.position0.set( - 2.3, 2, 2 ).multiplyScalar( radius ).add( controls.target0 );
 							controls.reset();
 

examples/webgl_loader_lwo.html

@@ -15,19 +15,19 @@
 			Models by <a href="https://onthez.com/" target="_blank" rel="noopener">on the z</a> - Environment images by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/LWOLoader.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,
+				DirectionalLight,
+				GridHelper,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { LWOLoader } from './jsm/loaders/LWOLoader.js';
 
 			var container, controls;
 			var camera, scene, renderer;
@@ -37,57 +37,58 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
-				camera.position.set( -.7, 14.6, 43.2 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
+				camera.position.set( - 0.7, 14.6, 43.2 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xa0a0a0 );
+				scene = new Scene();
+				scene.background = new Color( 0xa0a0a0 );
 
-				var ambientLight = new THREE.AmbientLight( 0xaaaaaa, 1.75 );
+				var ambientLight = new AmbientLight( 0xaaaaaa, 1.75 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( 0, 200, 100 );
 				light.castShadow = true;
 				light.shadow.camera.top = 180;
-				light.shadow.camera.bottom = -100;
-				light.shadow.camera.left = -120;
+				light.shadow.camera.bottom = - 100;
+				light.shadow.camera.left = - 120;
 				light.shadow.camera.right = 120;
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.7 );
-				light.position.set( -100, 200, -100 );
+				light = new DirectionalLight( 0xffffff, 0.7 );
+				light.position.set( - 100, 200, - 100 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff, 0.4 );
-				light.position.set( 100, -200, 100 );
+				light = new DirectionalLight( 0xffffff, 0.4 );
+				light.position.set( 100, - 200, 100 );
 				scene.add( light );
 
-				light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( -100, -100, 100 );
+				light = new DirectionalLight( 0xffffff, 1 );
+				light.position.set( - 100, - 100, 100 );
 				scene.add( light );
 
-				var grid = new THREE.GridHelper( 200, 20, 0x000000, 0x000000 );
+				var grid = new GridHelper( 200, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.3;
 				grid.material.transparent = true;
 				scene.add( grid );
 
-				var loader = new THREE.LWOLoader();
+				var loader = new LWOLoader();
 				loader.load( 'models/lwo/Objects/LWO3/Demo.lwo', function ( object ) {
-					var phong = object.meshes[0];
-					phong.position.set( -2, 12, 0 );
 
-					var standard = object.meshes[1];
+					var phong = object.meshes[ 0 ];
+					phong.position.set( - 2, 12, 0 );
+
+					var standard = object.meshes[ 1 ];
 					standard.position.set( 2, 12, 0 );
 
-					var rocket = object.meshes[2];
-					rocket.position.set( 0, 10.5, -1 );
+					var rocket = object.meshes[ 2 ];
+					rocket.position.set( 0, 10.5, - 1 );
 
 					scene.add( phong, standard, rocket );
 
 				} );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
+				renderer = new WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
@@ -96,8 +97,8 @@
 				renderer.gammaOutput = true;
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.target.set( 1.33, 10, -6.7 );
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.target.set( 1.33, 10, - 6.7 );
 				controls.update();
 
 				renderer.setAnimationLoop( function () {

examples/webgl_loader_md2.html

@@ -13,24 +13,29 @@
 			Character by <a href="http://planetquake.gamespy.com/View.php?view=Quake2.Detail&id=368">Brian Collins</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/MD2Loader.js"></script>
-		<script src="js/misc/MD2Character.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Clock,
+				Color,
+				Fog,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RepeatWrapping,
+				Scene,
+				SpotLight,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { MD2Character } from './jsm/misc/MD2Character.js';
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
@@ -48,7 +53,7 @@
 
 			var controls;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			var stats;
 
@@ -62,20 +67,20 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 150, 400 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
-				scene.fog = new THREE.Fog( 0x050505, 400, 1000 );
+				scene = new Scene();
+				scene.background = new Color( 0x050505 );
+				scene.fog = new Fog( 0x050505, 400, 1000 );
 
 				// LIGHTS
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
-				var light = new THREE.SpotLight( 0xffffff, 5, 1000 );
+				var light = new SpotLight( 0xffffff, 5, 1000 );
 				light.position.set( 200, 250, 500 );
 				light.angle = 0.5;
 				light.penumbra = 0.5;
@@ -84,10 +89,10 @@
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 				scene.add( light );
 
-				var light = new THREE.SpotLight( 0xffffff, 5, 1000 );
+				var light = new SpotLight( 0xffffff, 5, 1000 );
 				light.position.set( - 100, 350, 350 );
 				light.angle = 0.5;
 				light.penumbra = 0.5;
@@ -96,26 +101,26 @@
 				light.shadow.mapSize.width = 1024;
 				light.shadow.mapSize.height = 1024;
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 				scene.add( light );
 
 				//  GROUND
 
-				var gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
-				var gg = new THREE.PlaneBufferGeometry( 2000, 2000 );
-				var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
+				var gt = new TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
+				var gg = new PlaneBufferGeometry( 2000, 2000 );
+				var gm = new MeshPhongMaterial( { color: 0xffffff, map: gt } );
 
-				var ground = new THREE.Mesh( gg, gm );
+				var ground = new Mesh( gg, gm );
 				ground.rotation.x = - Math.PI / 2;
 				ground.material.map.repeat.set( 8, 8 );
-				ground.material.map.wrapS = ground.material.map.wrapT = THREE.RepeatWrapping;
+				ground.material.map.wrapS = ground.material.map.wrapT = RepeatWrapping;
 				ground.receiveShadow = true;
 
 				scene.add( ground );
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
@@ -137,13 +142,13 @@
 
 				// CONTROLS
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.target.set( 0, 50, 0 );
 				controls.update();
 
 				// GUI
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( playbackConfig, 'speed', 0, 2 ).onChange( function () {
 
@@ -180,7 +185,7 @@
 
 				};
 
-				character = new THREE.MD2Character();
+				character = new MD2Character();
 				character.scale = 3;
 
 				character.onLoadComplete = function () {

examples/webgl_loader_md2_control.html

@@ -23,25 +23,29 @@
 			use arrows to control characters, mouse for camera
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/MD2Loader.js"></script>
-		<script src="js/misc/MorphBlendMesh.js"></script>
-		<script src="js/misc/MD2CharacterComplex.js"></script>
-		<script src="js/misc/Gyroscope.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AmbientLight,
+				Clock,
+				Color,
+				DirectionalLight,
+				Fog,
+				Mesh,
+				MeshPhongMaterial,
+				PCFSoftShadowMap,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				RepeatWrapping,
+				Scene,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { MD2CharacterComplex } from './jsm/misc/MD2CharacterComplex.js';
+			import { Gyroscope } from './jsm/misc/Gyroscope.js';
 
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;
@@ -63,7 +67,7 @@
 
 			};
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			init();
 			animate();
@@ -75,22 +79,22 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.set( 0, 150, 1300 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-				scene.fog = new THREE.Fog( 0xffffff, 1000, 4000 );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
+				scene.fog = new Fog( 0xffffff, 1000, 4000 );
 
 				scene.add( camera );
 
 				// LIGHTS
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new AmbientLight( 0x222222 ) );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 2.25 );
+				var light = new DirectionalLight( 0xffffff, 2.25 );
 				light.position.set( 200, 450, 500 );
 
 				light.castShadow = true;
@@ -107,20 +111,20 @@
 				light.shadow.camera.bottom = - 350;
 
 				scene.add( light );
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				//  GROUND
 
-				var gt = new THREE.TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
-				var gg = new THREE.PlaneBufferGeometry( 16000, 16000 );
-				var gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
+				var gt = new TextureLoader().load( "textures/terrain/grasslight-big.jpg" );
+				var gg = new PlaneBufferGeometry( 16000, 16000 );
+				var gm = new MeshPhongMaterial( { color: 0xffffff, map: gt } );
 
-				var ground = new THREE.Mesh( gg, gm );
+				var ground = new Mesh( gg, gm );
 				ground.rotation.x = - Math.PI / 2;
 				ground.material.map.repeat.set( 64, 64 );
-				ground.material.map.wrapS = THREE.RepeatWrapping;
-				ground.material.map.wrapT = THREE.RepeatWrapping;
+				ground.material.map.wrapS = RepeatWrapping;
+				ground.material.map.wrapT = RepeatWrapping;
 				// note that because the ground does not cast a shadow, .castShadow is left false
 				ground.receiveShadow = true;
 
@@ -128,7 +132,7 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );
@@ -139,7 +143,7 @@
 				renderer.gammaOutput = true;
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = PCFSoftShadowMap;
 
 				// STATS
 
@@ -154,7 +158,7 @@
 
 				// CONTROLS
 
-				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
+				cameraControls = new OrbitControls( camera, renderer.domElement );
 				cameraControls.target.set( 0, 50, 0 );
 				cameraControls.update();
 
@@ -191,14 +195,14 @@
 
 				for ( var i = 0; i < nCharacters; i ++ ) {
 
-					var character = new THREE.MD2CharacterComplex();
+					var character = new MD2CharacterComplex();
 					character.scale = 3;
 					character.controls = controls;
 					characters.push( character );
 
 				}
 
-				var baseCharacter = new THREE.MD2CharacterComplex();
+				var baseCharacter = new MD2CharacterComplex();
 				baseCharacter.scale = 3;
 
 				baseCharacter.onLoadComplete = function () {
@@ -230,7 +234,7 @@
 
 					}
 
-					var gyro = new THREE.Gyroscope();
+					var gyro = new Gyroscope();
 					gyro.add( camera );
 					gyro.add( light, light.target );
 

examples/webgl_loader_mmd.html

@@ -25,33 +25,37 @@
 		<a href="http://www.nicovideo.jp/watch/sm13147122" target="_blank" rel="noopener">Dance Data</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/mmdparser.min.js"></script>
 		<script src="js/libs/ammo.js"></script>
 
-		<script src="js/loaders/TGALoader.js"></script>
-		<script src="js/loaders/MMDLoader.js"></script>
-		<script src="js/effects/OutlineEffect.js"></script>
-		<script src="js/animation/CCDIKSolver.js"></script>
-		<script src="js/animation/MMDPhysics.js"></script>
-		<script src="js/animation/MMDAnimationHelper.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Clock,
+				Color,
+				DirectionalLight,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PolarGridHelper,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
+			import { MMDLoader } from './jsm/loaders/MMDLoader.js';
+			import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';
 
 			var container, stats;
 
 			var mesh, camera, scene, renderer, effect;
 			var helper, ikHelper, physicsHelper;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
-			Ammo().then( function( AmmoLib ) {
+			Ammo().then( function ( AmmoLib ) {
 
 				Ammo = AmmoLib;
 
@@ -66,33 +70,33 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 30;
 
 				// scene
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				var gridHelper = new THREE.PolarGridHelper( 30, 10 );
+				var gridHelper = new PolarGridHelper( 30, 10 );
 				gridHelper.position.y = - 10;
 				scene.add( gridHelper );
 
-				var ambient = new THREE.AmbientLight( 0x666666 );
+				var ambient = new AmbientLight( 0x666666 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0x887766 );
+				var directionalLight = new DirectionalLight( 0x887766 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				effect = new THREE.OutlineEffect( renderer );
+				effect = new OutlineEffect( renderer );
 
 				// STATS
 
@@ -116,11 +120,11 @@
 				var modelFile = 'models/mmd/miku/miku_v2.pmd';
 				var vmdFiles = [ 'models/mmd/vmds/wavefile_v2.vmd' ];
 
-				helper = new THREE.MMDAnimationHelper( {
+				helper = new MMDAnimationHelper( {
 					afterglow: 2.0
 				} );
 
-				var loader = new THREE.MMDLoader();
+				var loader = new MMDLoader();
 
 				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
 
@@ -145,7 +149,7 @@
 
 				}, onProgress, null );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -158,7 +162,7 @@
 
 					for ( var i = 0, il = materials.length; i < il; i ++ ) {
 
-						var m = new THREE.MeshPhongMaterial();
+						var m = new MeshPhongMaterial();
 						m.copy( materials[ i ] );
 						m.needsUpdate = true;
 
@@ -182,7 +186,7 @@
 						'show rigid bodies': false
 					};
 
-					var gui = new dat.GUI();
+					var gui = new GUI();
 
 					gui.add( api, 'animation' ).onChange( function () {
 

examples/webgl_loader_mmd_audio.html

@@ -27,21 +27,26 @@
 		Camera is customized from <a href="http://www.nicovideo.jp/watch/sm19168559" target="_blank" rel="noopener">this Data</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/mmdparser.min.js"></script>
 		<script src="js/libs/ammo.js"></script>
 
-		<script src="js/loaders/TGALoader.js"></script>
-		<script src="js/loaders/MMDLoader.js"></script>
-		<script src="js/effects/OutlineEffect.js"></script>
-		<script src="js/animation/CCDIKSolver.js"></script>
-		<script src="js/animation/MMDPhysics.js"></script>
-		<script src="js/animation/MMDAnimationHelper.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				AudioLoader,
+				AudioListener as _AudioListener,
+				Audio as _Audio,
+				Clock,
+				Color,
+				DirectionalLight,
+				PerspectiveCamera,
+				PolarGridHelper,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
+			import { MMDLoader } from './jsm/loaders/MMDLoader.js';
+			import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';
 
 			var container;
 
@@ -50,9 +55,9 @@
 
 			var ready = false;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
-			Ammo().then( function( AmmoLib ) {
+			Ammo().then( function ( AmmoLib ) {
 
 				Ammo = AmmoLib;
 
@@ -66,30 +71,30 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				// scene
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				scene.add( new THREE.PolarGridHelper( 30, 10 ) );
+				scene.add( new PolarGridHelper( 30, 10 ) );
 
-				var ambient = new THREE.AmbientLight( 0x666666 );
+				var ambient = new AmbientLight( 0x666666 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0x887766 );
+				var directionalLight = new DirectionalLight( 0x887766 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				effect = new THREE.OutlineEffect( renderer );
+				effect = new OutlineEffect( renderer );
 
 				// model
 
@@ -110,9 +115,9 @@
 				var audioFile = 'models/mmd/audios/wavefile_short.mp3';
 				var audioParams = { delayTime: 160 * 1 / 30 };
 
-				helper = new THREE.MMDAnimationHelper();
+				helper = new MMDAnimationHelper();
 
-				var loader = new THREE.MMDLoader();
+				var loader = new MMDLoader();
 
 				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {
 
@@ -129,10 +134,10 @@
 							animation: cameraAnimation
 						} );
 
-						new THREE.AudioLoader().load( audioFile, function ( buffer ) {
+						new AudioLoader().load( audioFile, function ( buffer ) {
 
-							var listener = new THREE.AudioListener();
-							var audio = new THREE.Audio( listener ).setBuffer( buffer );
+							var listener = new _AudioListener();
+							var audio = new _Audio( listener ).setBuffer( buffer );
 
 							listener.position.z = 1;
 

examples/webgl_loader_mmd_pose.html

@@ -25,22 +25,23 @@
 		<a href="http://seiga.nicovideo.jp/seiga/im5162984" target="_blank" rel="noopener">Pose Data</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/mmdparser.min.js"></script>
 		<script src="js/libs/ammo.js"></script>
 
-		<script src="js/loaders/TGALoader.js"></script>
-		<script src="js/loaders/MMDLoader.js"></script>
-		<script src="js/effects/OutlineEffect.js"></script>
-		<script src="js/animation/CCDIKSolver.js"></script>
-		<script src="js/animation/MMDPhysics.js"></script>
-		<script src="js/animation/MMDAnimationHelper.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				Color,
+				DirectionalLight,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-		<script>
+			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
+			import { MMDLoader } from './jsm/loaders/MMDLoader.js';
+			import { MMDAnimationHelper } from './jsm/animation/MMDAnimationHelper.js';
 
 			var container;
 
@@ -49,7 +50,7 @@
 
 			var vpds = [];
 
-			Ammo().then( function( AmmoLib ) {
+			Ammo().then( function ( AmmoLib ) {
 
 				Ammo = AmmoLib;
 
@@ -63,29 +64,29 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 25;
 
 				// scene
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
+				scene = new Scene();
+				scene.background = new Color( 0xffffff );
 
-				var ambient = new THREE.AmbientLight( 0x666666 );
+				var ambient = new AmbientLight( 0x666666 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0x887766 );
+				var directionalLight = new DirectionalLight( 0x887766 );
 				directionalLight.position.set( - 1, 1, 1 ).normalize();
 				scene.add( directionalLight );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				effect = new THREE.OutlineEffect( renderer );
+				effect = new OutlineEffect( renderer );
 
 				// model
 
@@ -115,9 +116,9 @@
 					'models/mmd/vpds/11.vpd'
 				];
 
-				helper = new THREE.MMDAnimationHelper();
+				helper = new MMDAnimationHelper();
 
-				var loader = new THREE.MMDLoader();
+				var loader = new MMDLoader();
 
 				loader.load( modelFile, function ( object ) {
 
@@ -162,7 +163,7 @@
 
 				function initGui() {
 
-					var gui = new dat.GUI();
+					var gui = new GUI();
 
 					var dictionary = mesh.morphTargetDictionary;
 

examples/webgl_loader_nrrd.html

@@ -28,27 +28,27 @@
 		</div>
 		<div id="inset"></div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/TrackballControls.js"></script>
-
-		<script src="js/misc/Volume.js"></script>
-		<script src="js/misc/VolumeSlice.js"></script>
-		<script src="js/loaders/NRRDLoader.js"></script>
-		<script src="js/loaders/VTKLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src="js/libs/gunzip.min.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AxesHelper,
+				BoxBufferGeometry,
+				BoxHelper,
+				DirectionalLight,
+				DoubleSide,
+				Mesh,
+				MeshBasicMaterial,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { NRRDLoader } from './jsm/loaders/NRRDLoader.js';
+			import { VTKLoader } from './jsm/loaders/VTKLoader.js';
 
 			var container,
 				stats,
@@ -67,22 +67,22 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
 				camera.position.z = 300;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				scene.add( camera );
 
 				// light
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				var dirLight = new DirectionalLight( 0xffffff );
 				dirLight.position.set( 200, 200, 1000 ).normalize();
 
 				camera.add( dirLight );
 				camera.add( dirLight.target );
 
-				var loader = new THREE.NRRDLoader();
+				var loader = new NRRDLoader();
 				loader.load( "models/nrrd/I.nrrd", function ( volume ) {
 
 					var geometry,
@@ -92,11 +92,11 @@
 						sliceX;
 
 					//box helper to see the extend of the volume
-					var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
-					var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-					var cube = new THREE.Mesh( geometry, material );
+					var geometry = new BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
+					var material = new MeshBasicMaterial( { color: 0x00ff00 } );
+					var cube = new Mesh( geometry, material );
 					cube.visible = false;
-					var box = new THREE.BoxHelper( cube );
+					var box = new BoxHelper( cube );
 					scene.add( box );
 					box.applyMatrix( volume.matrix );
 					scene.add( cube );
@@ -152,14 +152,14 @@
 
 				} );
 
-				var vtkmaterial = new THREE.MeshLambertMaterial( { wireframe: false, morphTargets: false, side: THREE.DoubleSide, color: 0xff0000 } );
+				var vtkmaterial = new MeshLambertMaterial( { wireframe: false, morphTargets: false, side: DoubleSide, color: 0xff0000 } );
 
-				var vtkloader = new THREE.VTKLoader();
+				var vtkloader = new VTKLoader();
 				vtkloader.load( "models/vtk/liver.vtk", function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					var mesh = new THREE.Mesh( geometry, vtkmaterial );
+					var mesh = new Mesh( geometry, vtkmaterial );
 					scene.add( mesh );
 					var visibilityControl = {
 						visible: true
@@ -174,7 +174,7 @@
 				} );
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { alpha: true } );
+				renderer = new WebGLRenderer( { alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -182,7 +182,7 @@
 				document.body.appendChild( container );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 				controls.rotateSpeed = 5.0;
 				controls.zoomSpeed = 5;
 				controls.panSpeed = 2;
@@ -194,7 +194,7 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				setupInset();
 
@@ -241,20 +241,20 @@
 				container2.height = insetHeight;
 
 				// renderer
-				renderer2 = new THREE.WebGLRenderer( { alpha: true } );
+				renderer2 = new WebGLRenderer( { alpha: true } );
 				renderer2.setClearColor( 0x000000, 0 );
 				renderer2.setSize( insetWidth, insetHeight );
 				container2.appendChild( renderer2.domElement );
 
 				// scene
-				scene2 = new THREE.Scene();
+				scene2 = new Scene();
 
 				// camera
-				camera2 = new THREE.PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );
+				camera2 = new PerspectiveCamera( 50, insetWidth / insetHeight, 1, 1000 );
 				camera2.up = camera.up; // important!
 
 				// axes
-				axes2 = new THREE.AxesHelper( 100 );
+				axes2 = new AxesHelper( 100 );
 				scene2.add( axes2 );
 
 			}

examples/webgl_loader_obj.html

@@ -12,10 +12,18 @@
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader test
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				LoadingManager,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 
 			var container;
 
@@ -37,17 +45,17 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 250;
 
 				// scene
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -66,7 +74,7 @@
 
 				}
 
-				var manager = new THREE.LoadingManager( loadModel );
+				var manager = new LoadingManager( loadModel );
 
 				manager.onProgress = function ( item, loaded, total ) {
 
@@ -76,7 +84,7 @@
 
 				// texture
 
-				var textureLoader = new THREE.TextureLoader( manager );
+				var textureLoader = new TextureLoader( manager );
 
 				var texture = textureLoader.load( 'textures/UV_Grid_Sm.jpg' );
 
@@ -95,7 +103,7 @@
 
 				function onError() {}
 
-				var loader = new THREE.OBJLoader( manager );
+				var loader = new OBJLoader( manager );
 
 				loader.load( 'models/obj/male02/male02.obj', function ( obj ) {
 
@@ -105,7 +113,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_obj_mtl.html

@@ -12,17 +12,21 @@
 		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader + MTLLoader
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/DDSLoader.js"></script>
-		<script src="js/loaders/MTLLoader.js"></script>
-		<script src="js/loaders/OBJLoader.js"></script>
-
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			var container, stats;
+		<script type="module">
+			import {
+				AmbientLight,
+				Loader,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { DDSLoader } from './jsm/loaders/DDSLoader.js';
+			import { MTLLoader } from './jsm/loaders/MTLLoader.js';
+			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
+
+			var container;
 
 			var camera, scene, renderer;
 
@@ -41,17 +45,17 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 250;
 
 				// scene
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -70,15 +74,15 @@
 
 				var onError = function () { };
 
-				THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
+				Loader.Handlers.add( /\.dds$/i, new DDSLoader() );
 
-				new THREE.MTLLoader()
+				new MTLLoader()
 					.setPath( 'models/obj/male02/' )
 					.load( 'male02_dds.mtl', function ( materials ) {
 
 						materials.preload();
 
-						new THREE.OBJLoader()
+						new OBJLoader()
 							.setMaterials( materials )
 							.setPath( 'models/obj/male02/' )
 							.load( 'male02.obj', function ( object ) {
@@ -92,7 +96,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_pcd.html

@@ -15,20 +15,18 @@
 			<div>c: Change color</div>
 		</div>
 
+		<script type="module">
+			import {
+				Color,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/PCDLoader.js"></script>
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { PCDLoader } from './jsm/loaders/PCDLoader.js';
 
 			var container, stats;
 			var camera, controls, scene, renderer;
@@ -37,22 +35,22 @@
 			animate();
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
+				scene = new Scene();
+				scene.background = new Color( 0x000000 );
 
-				camera = new THREE.PerspectiveCamera( 15, window.innerWidth / window.innerHeight, 0.01, 40 );
+				camera = new PerspectiveCamera( 15, window.innerWidth / window.innerHeight, 0.01, 40 );
 				camera.position.x = 0.4;
 				camera.position.z = - 2;
 				camera.up.set( 0, 0, 1 );
 
 				scene.add( camera );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				var loader = new THREE.PCDLoader();
+				var loader = new PCDLoader();
 				loader.load( './models/pcd/binary/Zaghetto.pcd', function ( points ) {
 
 					scene.add( points );
@@ -66,7 +64,7 @@
 				document.body.appendChild( container );
 				container.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.rotateSpeed = 2.0;
 				controls.zoomSpeed = 0.3;

examples/webgl_loader_pdb.html

@@ -38,17 +38,28 @@
 		</style>
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/TrackballControls.js"></script>
-		<script src="js/loaders/PDBLoader.js"></script>
-		<script src="js/renderers/CSS2DRenderer.js"></script>
-
 		<div id="container"></div>
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - molecules</div>
 		<div id="menu"></div>
 
-		<script>
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				Color,
+				DirectionalLight,
+				Group,
+				IcosahedronBufferGeometry,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
+			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
 			var camera, scene, renderer, labelRenderer;
 			var controls;
@@ -75,8 +86,8 @@
 				"Graphite": "graphite.pdb"
 			};
 
-			var loader = new THREE.PDBLoader();
-			var offset = new THREE.Vector3();
+			var loader = new PDBLoader();
+			var offset = new Vector3();
 
 			var menu = document.getElementById( 'menu' );
 
@@ -85,32 +96,32 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x050505 );
+				scene = new Scene();
+				scene.background = new Color( 0x050505 );
 
-				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.add( camera );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				var light = new DirectionalLight( 0xffffff, 0.8 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
+				var light = new DirectionalLight( 0xffffff, 0.5 );
 				light.position.set( - 1, - 1, 1 );
 				scene.add( light );
 
-				root = new THREE.Group();
+				root = new Group();
 				scene.add( root );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.getElementById( 'container' ).appendChild( renderer.domElement );
 
-				labelRenderer = new THREE.CSS2DRenderer();
+				labelRenderer = new CSS2DRenderer();
 				labelRenderer.setSize( window.innerWidth, window.innerHeight );
 				labelRenderer.domElement.style.position = 'absolute';
 				labelRenderer.domElement.style.top = '0';
@@ -119,7 +130,7 @@
 
 				//
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 				controls.minDistance = 500;
 				controls.maxDistance = 2000;
 
@@ -179,8 +190,8 @@
 					var geometryBonds = pdb.geometryBonds;
 					var json = pdb.json;
 
-					var boxGeometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
-					var sphereGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
+					var boxGeometry = new BoxBufferGeometry( 1, 1, 1 );
+					var sphereGeometry = new IcosahedronBufferGeometry( 1, 2 );
 
 					geometryAtoms.computeBoundingBox();
 					geometryAtoms.boundingBox.getCenter( offset ).negate();
@@ -191,8 +202,8 @@
 					var positions = geometryAtoms.getAttribute( 'position' );
 					var colors = geometryAtoms.getAttribute( 'color' );
 
-					var position = new THREE.Vector3();
-					var color = new THREE.Color();
+					var position = new Vector3();
+					var color = new Color();
 
 					for ( var i = 0; i < positions.count; i ++ ) {
 
@@ -204,9 +215,9 @@
 						color.g = colors.getY( i );
 						color.b = colors.getZ( i );
 
-						var material = new THREE.MeshPhongMaterial( { color: color } );
+						var material = new MeshPhongMaterial( { color: color } );
 
-						var object = new THREE.Mesh( sphereGeometry, material );
+						var object = new Mesh( sphereGeometry, material );
 						object.position.copy( position );
 						object.position.multiplyScalar( 75 );
 						object.scale.multiplyScalar( 25 );
@@ -219,7 +230,7 @@
 						text.style.color = 'rgb(' + atom[ 3 ][ 0 ] + ',' + atom[ 3 ][ 1 ] + ',' + atom[ 3 ][ 2 ] + ')';
 						text.textContent = atom[ 4 ];
 
-						var label = new THREE.CSS2DObject( text );
+						var label = new CSS2DObject( text );
 						label.position.copy( object.position );
 						root.add( label );
 
@@ -227,8 +238,8 @@
 
 					positions = geometryBonds.getAttribute( 'position' );
 
-					var start = new THREE.Vector3();
-					var end = new THREE.Vector3();
+					var start = new Vector3();
+					var end = new Vector3();
 
 					for ( var i = 0; i < positions.count; i += 2 ) {
 
@@ -243,7 +254,7 @@
 						start.multiplyScalar( 75 );
 						end.multiplyScalar( 75 );
 
-						var object = new THREE.Mesh( boxGeometry, new THREE.MeshPhongMaterial( 0xffffff ) );
+						var object = new Mesh( boxGeometry, new MeshPhongMaterial( 0xffffff ) );
 						object.position.copy( start );
 						object.position.lerp( end, 0.5 );
 						object.scale.set( 5, 5, start.distanceTo( end ) );

examples/webgl_loader_playcanvas.html

@@ -14,20 +14,19 @@
 			Hand by <a href="https://sketchfab.com/anura" target="_blank" rel="noopener">Anura</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">CC Attribution</a>
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script src="js/loaders/PlayCanvasLoader.js"></script>
-		<script src='js/controls/OrbitControls.js'></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import Stats from './jsm/libs/stats.module.js';
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { PlayCanvasLoader } from './jsm/loaders/PlayCanvasLoader.js';
 
 			var camera, scene, renderer, stats;
 
@@ -38,14 +37,14 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 				camera.position.set( - 1, 2, 4 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				var loader = new THREE.PlayCanvasLoader();
+				var loader = new PlayCanvasLoader();
 				loader.load( './models/playcanvas/hand.json', function ( model ) {
 
 					scene.add( model );
@@ -54,23 +53,23 @@
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
+				var pointLight = new PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_loader_ply.html

@@ -13,20 +13,25 @@
 			Image from <a href="http://people.sc.fsu.edu/~jburkardt/data/ply/ply.html">John Burkardt</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/PLYLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				Fog,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				MeshStandardMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { PLYLoader } from './jsm/loaders/PLYLoader.js';
 
 			var container, stats;
 
@@ -40,21 +45,21 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
 				camera.position.set( 3, 0.15, 3 );
 
-				cameraTarget = new THREE.Vector3( 0, - 0.1, 0 );
+				cameraTarget = new Vector3( 0, - 0.1, 0 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x72645b );
-				scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
+				scene = new Scene();
+				scene.background = new Color( 0x72645b );
+				scene.fog = new Fog( 0x72645b, 2, 15 );
 
 
 				// Ground
 
-				var plane = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 40, 40 ),
-					new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+				var plane = new Mesh(
+					new PlaneBufferGeometry( 40, 40 ),
+					new MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
 				);
 				plane.rotation.x = - Math.PI / 2;
 				plane.position.y = - 0.5;
@@ -65,13 +70,13 @@
 
 				// PLY file
 
-				var loader = new THREE.PLYLoader();
+				var loader = new PLYLoader();
 				loader.load( './models/ply/ascii/dolphins.ply', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.y = - 0.2;
 					mesh.position.z = 0.3;
@@ -89,8 +94,8 @@
 
 					geometry.computeVertexNormals();
 
-					var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.x = - 0.2;
 					mesh.position.y = - 0.02;
@@ -106,14 +111,14 @@
 
 				// Lights
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+				scene.add( new HemisphereLight( 0x443333, 0x111122 ) );
 
 				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
 				addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -137,7 +142,7 @@
 
 			function addShadowedLight( x, y, z, color, intensity ) {
 
-				var directionalLight = new THREE.DirectionalLight( color, intensity );
+				var directionalLight = new DirectionalLight( color, intensity );
 				directionalLight.position.set( x, y, z );
 				scene.add( directionalLight );
 

examples/webgl_loader_prwm.html

@@ -28,10 +28,18 @@
 			See your console for stats.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/PRWMLoader.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				AmbientLight,
+				DirectionalLight,
+				PerspectiveCamera,
+				Mesh,
+				MeshPhongMaterial,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { PRWMLoader } from './jsm/loaders/PRWMLoader.js';
 
 			var container;
 
@@ -49,28 +57,28 @@
 
 			function init() {
 
-				document.getElementById( 'endianness' ).innerHTML = THREE.PRWMLoader.isBigEndianPlatform() ? 'big-endian' : 'little-endian';
+				document.getElementById( 'endianness' ).innerHTML = PRWMLoader.isBigEndianPlatform() ? 'big-endian' : 'little-endian';
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 250;
 
 				// scene
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var ambient = new THREE.AmbientLight( 0x101030 );
+				var ambient = new AmbientLight( 0x101030 );
 				scene.add( ambient );
 
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
+				var directionalLight = new DirectionalLight( 0xffeedd );
 				directionalLight.position.set( 0, 0, 1 );
 				scene.add( directionalLight );
 
 				// model
 
-				var loader = new THREE.PRWMLoader();
-				var material = new THREE.MeshPhongMaterial( {} );
+				var loader = new PRWMLoader();
+				var material = new MeshPhongMaterial( {} );
 				var busy = false;
 				var mesh = null;
 
@@ -116,7 +124,7 @@
 
 					loader.load( url, function ( geometry ) {
 
-						mesh = new THREE.Mesh( geometry, material );
+						mesh = new Mesh( geometry, material );
 						mesh.scale.set( 50, 50, 50 );
 						scene.add( mesh );
 
@@ -131,7 +139,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_loader_stl.html

@@ -13,20 +13,25 @@
 			PR2 head from <a href="http://www.ros.org/wiki/pr2_description">www.ros.org</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/loaders/STLLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				Fog,
+				HemisphereLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				Vector3,
+				VertexColors,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { STLLoader } from './jsm/loaders/STLLoader.js';
 
 			var container, stats;
 
@@ -40,21 +45,21 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
+				camera = new PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
 				camera.position.set( 3, 0.15, 3 );
 
-				cameraTarget = new THREE.Vector3( 0, - 0.25, 0 );
+				cameraTarget = new Vector3( 0, - 0.25, 0 );
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x72645b );
-				scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
+				scene = new Scene();
+				scene.background = new Color( 0x72645b );
+				scene.fog = new Fog( 0x72645b, 2, 15 );
 
 
 				// Ground
 
-				var plane = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 40, 40 ),
-					new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
+				var plane = new Mesh(
+					new PlaneBufferGeometry( 40, 40 ),
+					new MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
 				);
 				plane.rotation.x = - Math.PI / 2;
 				plane.position.y = - 0.5;
@@ -65,11 +70,11 @@
 
 				// ASCII file
 
-				var loader = new THREE.STLLoader();
+				var loader = new STLLoader();
 				loader.load( './models/stl/ascii/slotted_disk.stl', function ( geometry ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.set( 0, - 0.25, 0.6 );
 					mesh.rotation.set( 0, - Math.PI / 2, 0 );
@@ -85,11 +90,11 @@
 
 				// Binary files
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
+				var material = new MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 200 } );
 
 				loader.load( './models/stl/binary/pr2_head_pan.stl', function ( geometry ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.set( 0, - 0.37, - 0.6 );
 					mesh.rotation.set( - Math.PI / 2, 0, 0 );
@@ -104,7 +109,7 @@
 
 				loader.load( './models/stl/binary/pr2_head_tilt.stl', function ( geometry ) {
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.set( 0.136, - 0.37, - 0.6 );
 					mesh.rotation.set( - Math.PI / 2, 0.3, 0 );
@@ -123,11 +128,11 @@
 					var meshMaterial = material;
 					if ( geometry.hasColors ) {
 
-						meshMaterial = new THREE.MeshPhongMaterial( { opacity: geometry.alpha, vertexColors: THREE.VertexColors } );
+						meshMaterial = new MeshPhongMaterial( { opacity: geometry.alpha, vertexColors: VertexColors } );
 
 					}
 
-					var mesh = new THREE.Mesh( geometry, meshMaterial );
+					var mesh = new Mesh( geometry, meshMaterial );
 
 					mesh.position.set( 0.5, 0.2, 0 );
 					mesh.rotation.set( - Math.PI / 2, Math.PI / 2, 0 );
@@ -143,13 +148,13 @@
 
 				// Lights
 
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
+				scene.add( new HemisphereLight( 0x443333, 0x111122 ) );
 
 				addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
 				addShadowedLight( 0.5, 1, - 1, 0xffaa00, 1 );
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -173,7 +178,7 @@
 
 			function addShadowedLight( x, y, z, color, intensity ) {
 
-				var directionalLight = new THREE.DirectionalLight( color, intensity );
+				var directionalLight = new DirectionalLight( color, intensity );
 				directionalLight.position.set( x, y, z );
 				scene.add( directionalLight );
 

examples/webgl_loader_svg.html

@@ -19,13 +19,25 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - SVGLoader
 		</div>
 
-		<script type="text/javascript" src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/SVGLoader.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-		<script src='js/libs/dat.gui.min.js'></script>
-
-		<script>
+		<script type="module">
+			import {
+				Color,
+				DoubleSide,
+				GridHelper,
+				Group,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				ShapeBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { SVGLoader } from './jsm/loaders/SVGLoader.js';
 
 			var renderer, stats, scene, camera, gui, guiData;
 
@@ -40,19 +52,19 @@
 
 				//
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 200 );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.screenSpacePanning = true;
 
 				//
@@ -82,7 +94,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI( { width: 350 } );
+				gui = new GUI( { width: 350 } );
 
 				gui.add( guiData, 'currentURL', {
 
@@ -121,24 +133,24 @@
 
 				//
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xb0b0b0 );
+				scene = new Scene();
+				scene.background = new Color( 0xb0b0b0 );
 
 				//
 
-				var helper = new THREE.GridHelper( 160, 10 );
+				var helper = new GridHelper( 160, 10 );
 				helper.rotation.x = Math.PI / 2;
 				scene.add( helper );
 
 				//
 
-				var loader = new THREE.SVGLoader();
+				var loader = new SVGLoader();
 
 				loader.load( url, function ( data ) {
 
 					var paths = data.paths;
 
-					var group = new THREE.Group();
+					var group = new Group();
 					group.scale.multiplyScalar( 0.25 );
 					group.position.x = - 70;
 					group.position.y = 70;
@@ -151,11 +163,11 @@
 						var fillColor = path.userData.style.fill;
 						if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) {
 
-							var material = new THREE.MeshBasicMaterial( {
-								color: new THREE.Color().setStyle( fillColor ),
+							var material = new MeshBasicMaterial( {
+								color: new Color().setStyle( fillColor ),
 								opacity: path.userData.style.fillOpacity,
 								transparent: path.userData.style.fillOpacity < 1,
-								side: THREE.DoubleSide,
+								side: DoubleSide,
 								depthWrite: false,
 								wireframe: guiData.fillShapesWireframe
 							} );
@@ -166,8 +178,8 @@
 
 								var shape = shapes[ j ];
 
-								var geometry = new THREE.ShapeBufferGeometry( shape );
-								var mesh = new THREE.Mesh( geometry, material );
+								var geometry = new ShapeBufferGeometry( shape );
+								var mesh = new Mesh( geometry, material );
 
 								group.add( mesh );
 
@@ -179,11 +191,11 @@
 
 						if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) {
 
-							var material = new THREE.MeshBasicMaterial( {
-								color: new THREE.Color().setStyle( strokeColor ),
+							var material = new MeshBasicMaterial( {
+								color: new Color().setStyle( strokeColor ),
 								opacity: path.userData.style.strokeOpacity,
 								transparent: path.userData.style.strokeOpacity < 1,
-								side: THREE.DoubleSide,
+								side: DoubleSide,
 								depthWrite: false,
 								wireframe: guiData.strokesWireframe
 							} );
@@ -192,11 +204,11 @@
 
 								var subPath = path.subPaths[ j ];
 
-								var geometry = THREE.SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
+								var geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style );
 
 								if ( geometry ) {
 
-									var mesh = new THREE.Mesh( geometry, material );
+									var mesh = new Mesh( geometry, material );
 
 									group.add( mesh );
 

examples/webgl_loader_texture_dds.html

@@ -13,18 +13,22 @@
 			leaf texture by <a href="http://opengameart.org/node/10505">lauris71</a>, explosion texture by <a href="http://opengameart.org/node/7728">bart</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/DDSLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				AdditiveBlending,
+				BoxBufferGeometry,
+				CubeReflectionMapping,
+				DoubleSide,
+				LinearFilter,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				TorusBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { DDSLoader } from './jsm/loaders/DDSLoader.js';
 
 			var camera, scene, renderer;
 			var meshes = [];
@@ -34,12 +38,12 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				var geometry = new BoxBufferGeometry( 200, 200, 200 );
 
 				/*
 				This is how compressed textures are supposed to be used:
@@ -49,10 +53,10 @@
 				DXT5 - RGBA - transparent textures with full alpha range
 				*/
 
-				var loader = new THREE.DDSLoader();
+				var loader = new DDSLoader();
 
 				var map1 = loader.load( 'textures/compressed/disturb_dxt1_nomip.dds' );
-				map1.minFilter = map1.magFilter = THREE.LinearFilter;
+				map1.minFilter = map1.magFilter = LinearFilter;
 				map1.anisotropy = 4;
 
 				var map2 = loader.load( 'textures/compressed/disturb_dxt1_mip.dds' );
@@ -65,7 +69,7 @@
 				map4.anisotropy = 4;
 
 				var map5 = loader.load( 'textures/compressed/disturb_argb_nomip.dds' );
-				map5.minFilter = map5.magFilter = THREE.LinearFilter;
+				map5.minFilter = map5.magFilter = LinearFilter;
 				map5.anisotropy = 4;
 
 				var map6 = loader.load( 'textures/compressed/disturb_argb_mip.dds' );
@@ -73,90 +77,90 @@
 
 				var cubemap1 = loader.load( 'textures/compressed/Mountains.dds', function ( texture ) {
 
-					texture.magFilter = THREE.LinearFilter;
-					texture.minFilter = THREE.LinearFilter;
-					texture.mapping = THREE.CubeReflectionMapping;
+					texture.magFilter = LinearFilter;
+					texture.minFilter = LinearFilter;
+					texture.mapping = CubeReflectionMapping;
 					material1.needsUpdate = true;
 
 				} );
 
 				var cubemap2 = loader.load( 'textures/compressed/Mountains_argb_mip.dds', function ( texture ) {
 
-					texture.magFilter = THREE.LinearFilter;
-					texture.minFilter = THREE.LinearFilter;
-					texture.mapping = THREE.CubeReflectionMapping;
+					texture.magFilter = LinearFilter;
+					texture.minFilter = LinearFilter;
+					texture.mapping = CubeReflectionMapping;
 					material5.needsUpdate = true;
 
 				} );
 
 				var cubemap3 = loader.load( 'textures/compressed/Mountains_argb_nomip.dds', function ( texture ) {
 
-					texture.magFilter = THREE.LinearFilter;
-					texture.minFilter = THREE.LinearFilter;
-					texture.mapping = THREE.CubeReflectionMapping;
+					texture.magFilter = LinearFilter;
+					texture.minFilter = LinearFilter;
+					texture.mapping = CubeReflectionMapping;
 					material6.needsUpdate = true;
 
 				} );
 
-				var material1 = new THREE.MeshBasicMaterial( { map: map1, envMap: cubemap1 } );
-				var material2 = new THREE.MeshBasicMaterial( { map: map2 } );
-				var material3 = new THREE.MeshBasicMaterial( { map: map3, alphaTest: 0.5, side: THREE.DoubleSide } );
-				var material4 = new THREE.MeshBasicMaterial( { map: map4, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
-				var material5 = new THREE.MeshBasicMaterial( { envMap: cubemap2 } );
-				var material6 = new THREE.MeshBasicMaterial( { envMap: cubemap3 } );
-				var material7 = new THREE.MeshBasicMaterial( { map: map5 } );
-				var material8 = new THREE.MeshBasicMaterial( { map: map6 } );
+				var material1 = new MeshBasicMaterial( { map: map1, envMap: cubemap1 } );
+				var material2 = new MeshBasicMaterial( { map: map2 } );
+				var material3 = new MeshBasicMaterial( { map: map3, alphaTest: 0.5, side: DoubleSide } );
+				var material4 = new MeshBasicMaterial( { map: map4, side: DoubleSide, blending: AdditiveBlending, depthTest: false, transparent: true } );
+				var material5 = new MeshBasicMaterial( { envMap: cubemap2 } );
+				var material6 = new MeshBasicMaterial( { envMap: cubemap3 } );
+				var material7 = new MeshBasicMaterial( { map: map5 } );
+				var material8 = new MeshBasicMaterial( { map: map6 } );
 
 
-				var mesh = new THREE.Mesh( new THREE.TorusBufferGeometry( 100, 50, 32, 16 ), material1 );
+				var mesh = new Mesh( new TorusBufferGeometry( 100, 50, 32, 16 ), material1 );
 				mesh.position.x = - 600;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material2 );
+				mesh = new Mesh( geometry, material2 );
 				mesh.position.x = - 200;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material3 );
+				mesh = new Mesh( geometry, material3 );
 				mesh.position.x = - 200;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material4 );
+				mesh = new Mesh( geometry, material4 );
 				mesh.position.x = - 600;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material5 );
+				mesh = new Mesh( geometry, material5 );
 				mesh.position.x = 200;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material6 );
+				mesh = new Mesh( geometry, material6 );
 				mesh.position.x = 200;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material7 );
+				mesh = new Mesh( geometry, material7 );
 				mesh.position.x = 600;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material8 );
+				mesh = new Mesh( geometry, material8 );
 				mesh.position.x = 600;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_loader_texture_exr.html

@@ -13,20 +13,22 @@
 			Image courtesy of <a href="http://www.pauldebevec.com/Research/HDR/" target="_blank" rel="noopener">Paul Debevec</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/EXRLoader.js"></script>
-
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				FloatType,
+				Mesh,
+				MeshBasicMaterial,
+				NearestFilter,
+				OrthographicCamera,
+				PlaneBufferGeometry,
+				ReinhardToneMapping,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { EXRLoader } from './jsm/loaders/EXRLoader.js';
 
 			var params = {
 				exposure: 2.0
@@ -38,53 +40,53 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMapping = ReinhardToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
 				renderer.gammaOutput = true;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var aspect = window.innerWidth / window.innerHeight;
 
-				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
+				camera = new OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
-				new THREE.EXRLoader()
-					.setType( THREE.FloatType )
+				new EXRLoader()
+					.setType( FloatType )
 					.load( 'textures/memorial.exr', function ( texture, textureData ) {
 
-					//console.log( textureData );
-					//console.log( texture );
+						//console.log( textureData );
+						//console.log( texture );
 
-					texture.minFilter = THREE.NearestFilter;
-					texture.magFilter = THREE.NearestFilter;
+						texture.minFilter = NearestFilter;
+						texture.magFilter = NearestFilter;
 
-					// these setting are currently set correctly by default
-					//texture.encoding = THREE.LinearEncoding;
-					//texture.minFilter = THREE.LinearMipMapLinearFilter;
-					//texture.magFilter = THREE.LinearFilter;
-					//texture.flipY = true;
+						// these setting are currently set correctly by default
+						//texture.encoding = LinearEncoding;
+						//texture.minFilter = LinearMipMapLinearFilter;
+						//texture.magFilter = LinearFilter;
+						//texture.flipY = true;
 
-					var material = new THREE.MeshBasicMaterial( { map: texture } );
+						var material = new MeshBasicMaterial( { map: texture } );
 
-					var quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
+						var quad = new PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
 
-					var mesh = new THREE.Mesh( quad, material );
+						var mesh = new Mesh( quad, material );
 
-					scene.add( mesh );
+						scene.add( mesh );
 
-					render();
+						render();
 
-				} );
+					} );
 
 				//
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'exposure', 0, 4, 0.01 ).onChange( render );
 				gui.open();

examples/webgl_loader_texture_hdr.html

@@ -13,20 +13,21 @@
 			Image courtesy of <a href="http://www.pauldebevec.com/Research/HDR/" target="_blank" rel="noopener">Paul Debevec</a>.
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/RGBELoader.js"></script>
-
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Mesh,
+				MeshBasicMaterial,
+				OrthographicCamera,
+				PlaneBufferGeometry,
+				ReinhardToneMapping,
+				Scene,
+				UnsignedByteType,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
 			var params = {
 				exposure: 2.0
@@ -38,34 +39,34 @@
 
 			function init() {
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMapping = ReinhardToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
 				renderer.gammaOutput = true;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var aspect = window.innerWidth / window.innerHeight;
 
-				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
+				camera = new OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
-				new THREE.RGBELoader()
-					.setType( THREE.UnsignedByteType ) // alt: THREE.FloatType, THREE.HalfFloatType
+				new RGBELoader()
+					.setType( UnsignedByteType ) // alt: FloatType, HalfFloatType
 					.load( 'textures/memorial.hdr', function ( texture, textureData ) {
 
 						//console.log( textureData );
 						//console.log( texture );
 
-						var material = new THREE.MeshBasicMaterial( { map: texture } );
+						var material = new MeshBasicMaterial( { map: texture } );
 
-						var quad = new THREE.PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
+						var quad = new PlaneBufferGeometry( 1.5 * textureData.width / textureData.height, 1.5 );
 
-						var mesh = new THREE.Mesh( quad, material );
+						var mesh = new Mesh( quad, material );
 
 						scene.add( mesh );
 
@@ -75,7 +76,7 @@
 
 				//
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'exposure', 0, 4, 0.01 ).onChange( render );
 				gui.open();

examples/webgl_loader_texture_ktx.html

@@ -13,12 +13,18 @@
 	<a href="https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/">Khronos Texture</a> is a lightweight file format for OpenGL
 </div>
 
-<script src="../build/three.js"></script>
-<script src="js/loaders/KTXLoader.js"></script>
-
-<script src="js/WebGL.js"></script>
-
-<script>
+<script type="module">
+	import {
+		BoxBufferGeometry,
+		DoubleSide,
+		PerspectiveCamera,
+		Mesh,
+		MeshBasicMaterial,
+		Scene,
+		WebGLRenderer,
+	} from "../build/three.module.js";
+
+	import { KTXLoader } from './jsm/loaders/KTXLoader.js';
 
 	/*
 	This is how compressed textures are supposed to be used:
@@ -35,12 +41,6 @@
 	ASTC_4x4, ASTC8x8 - transparent textures with full alpha range
 	*/
 
-	if ( WEBGL.isWebGLAvailable() === false ) {
-
-		document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-	}
-
 	var camera, scene, renderer;
 	var meshes = [];
 
@@ -49,7 +49,7 @@
 
 	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 );
@@ -61,75 +61,75 @@
 			pvrtc: renderer.extensions.get( 'WEBGL_compressed_texture_pvrtc' )
 		};
 
-		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+		camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 		camera.position.z = 1000;
 
-		scene = new THREE.Scene();
+		scene = new Scene();
 
-		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+		var geometry = new BoxBufferGeometry( 200, 200, 200 );
 		var material1, material2;
 
 		// TODO: add cubemap support
-		var loader = new THREE.KTXLoader();
+		var loader = new KTXLoader();
 
 		if ( formats.pvrtc ) {
 
-			material1 = new THREE.MeshBasicMaterial( {
+			material1 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/disturb_PVR2bpp.ktx' )
 			} );
-			material2 = new THREE.MeshBasicMaterial( {
+			material2 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/lensflare_PVR4bpp.ktx' ),
 				depthTest: false,
 				transparent: true,
-				side: THREE.DoubleSide
+				side: DoubleSide
 			} );
 
-			meshes.push( new THREE.Mesh( geometry, material1 ) );
-			meshes.push( new THREE.Mesh( geometry, material2 ) );
+			meshes.push( new Mesh( geometry, material1 ) );
+			meshes.push( new Mesh( geometry, material2 ) );
 
 		}
 
 		if ( formats.s3tc ) {
 
-			material1 = new THREE.MeshBasicMaterial( {
+			material1 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/disturb_BC1.ktx' )
 			} );
-			material2 = new THREE.MeshBasicMaterial( {
+			material2 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/lensflare_BC3.ktx' ),
 				depthTest: false,
 				transparent: true,
-				side: THREE.DoubleSide
+				side: DoubleSide
 			} );
 
-			meshes.push( new THREE.Mesh( geometry, material1 ) );
-			meshes.push( new THREE.Mesh( geometry, material2 ) );
+			meshes.push( new Mesh( geometry, material1 ) );
+			meshes.push( new Mesh( geometry, material2 ) );
 
 		}
 
 		if ( formats.etc1 ) {
 
-			material1 = new THREE.MeshBasicMaterial( {
+			material1 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/disturb_ETC1.ktx' )
 			} );
 
-			meshes.push( new THREE.Mesh( geometry, material1 ) );
+			meshes.push( new Mesh( geometry, material1 ) );
 
 		}
 
 		if ( formats.astc ) {
 
-			material1 = new THREE.MeshBasicMaterial( {
+			material1 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/disturb_ASTC4x4.ktx' )
 			} );
-			material2 = new THREE.MeshBasicMaterial( {
+			material2 = new MeshBasicMaterial( {
 				map: loader.load( 'textures/compressed/lensflare_ASTC8x8.ktx' ),
 				depthTest: false,
 				transparent: true,
-				side: THREE.DoubleSide
+				side: DoubleSide
 			} );
 
-			meshes.push( new THREE.Mesh( geometry, material1 ) );
-			meshes.push( new THREE.Mesh( geometry, material2 ) );
+			meshes.push( new Mesh( geometry, material1 ) );
+			meshes.push( new Mesh( geometry, material2 ) );
 
 		}
 

examples/webgl_loader_texture_pvrtc.html

@@ -12,18 +12,21 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl - PVR compressed textures
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/PVRLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				BoxBufferGeometry,
+				CubeReflectionMapping,
+				DoubleSide,
+				LinearFilter,
+				Mesh,
+				MeshBasicMaterial,
+				PerspectiveCamera,
+				Scene,
+				TorusBufferGeometry,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { PVRLoader } from './jsm/loaders/PVRLoader.js';
 
 			var camera, scene, renderer;
 			var meshes = [];
@@ -33,37 +36,37 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 1000;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				var geometry = new BoxBufferGeometry( 200, 200, 200 );
 
 				//
 
 				var onCube1Loaded = function ( texture ) {
 
-					texture.magFilter = THREE.LinearFilter;
-					texture.minFilter = THREE.LinearFilter;
-					texture.mapping = THREE.CubeReflectionMapping;
+					texture.magFilter = LinearFilter;
+					texture.minFilter = LinearFilter;
+					texture.mapping = CubeReflectionMapping;
 					material6.needsUpdate = true;
 
 				};
 
 				var onCube2Loaded = function ( texture ) {
 
-					texture.magFilter = THREE.LinearFilter;
-					// texture.minFilter = THREE.LinearMipMapNearestFilter;
-					texture.minFilter = THREE.LinearFilter;
-					texture.mapping = THREE.CubeReflectionMapping;
+					texture.magFilter = LinearFilter;
+					// texture.minFilter = LinearMipMapNearestFilter;
+					texture.minFilter = LinearFilter;
+					texture.mapping = CubeReflectionMapping;
 					material8.needsUpdate = true;
 
 				};
 
 				//
 
-				var loader = new THREE.PVRLoader();
+				var loader = new PVRLoader();
 
 				var disturb_4bpp_rgb = loader.load( 'textures/compressed/disturb_4bpp_rgb.pvr' );
 				var disturb_4bpp_rgb_v3 = loader.load( 'textures/compressed/disturb_4bpp_rgb_v3.pvr' );
@@ -83,65 +86,65 @@
 				disturb_4bpp_rgb_v3.minFilter =
 				disturb_4bpp_rgb_v3.magFilter =
 				flare_2bpp_rgba.minFilter =
-				flare_2bpp_rgba.magFilter = THREE.LinearFilter;
+				flare_2bpp_rgba.magFilter = LinearFilter;
 
-				var material1 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb } );
-				var material2 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_mips } );
-				var material3 = new THREE.MeshBasicMaterial( { map: disturb_2bpp_rgb } );
-				var material4 = new THREE.MeshBasicMaterial( { map: flare_4bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
-				var material5 = new THREE.MeshBasicMaterial( { map: flare_2bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
-				var material6 = new THREE.MeshBasicMaterial( { envMap: park3_cube_nomip_4bpp_rgb } );
-				var material8 = new THREE.MeshBasicMaterial( { envMap: park3_cube_mip_2bpp_rgb_v3 } );
+				var material1 = new MeshBasicMaterial( { map: disturb_4bpp_rgb } );
+				var material2 = new MeshBasicMaterial( { map: disturb_4bpp_rgb_mips } );
+				var material3 = new MeshBasicMaterial( { map: disturb_2bpp_rgb } );
+				var material4 = new MeshBasicMaterial( { map: flare_4bpp_rgba, side: DoubleSide, depthTest: false, transparent: true } );
+				var material5 = new MeshBasicMaterial( { map: flare_2bpp_rgba, side: DoubleSide, depthTest: false, transparent: true } );
+				var material6 = new MeshBasicMaterial( { envMap: park3_cube_nomip_4bpp_rgb } );
+				var material8 = new MeshBasicMaterial( { envMap: park3_cube_mip_2bpp_rgb_v3 } );
 
-				var material7 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_v3 } );
+				var material7 = new MeshBasicMaterial( { map: disturb_4bpp_rgb_v3 } );
 
 				//
 
-				var mesh = new THREE.Mesh( geometry, material1 );
+				var mesh = new Mesh( geometry, material1 );
 				mesh.position.x = - 500;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material2 );
+				mesh = new Mesh( geometry, material2 );
 				mesh.position.x = - 166;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material3 );
+				mesh = new Mesh( geometry, material3 );
 				mesh.position.x = 166;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material7 );
+				mesh = new Mesh( geometry, material7 );
 				mesh.position.x = 500;
 				mesh.position.y = 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material4 );
+				mesh = new Mesh( geometry, material4 );
 				mesh.position.x = - 500;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( geometry, material5 );
+				mesh = new Mesh( geometry, material5 );
 				mesh.position.x = - 166;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				var torus = new THREE.TorusBufferGeometry( 100, 50, 32, 24 );
+				var torus = new TorusBufferGeometry( 100, 50, 32, 24 );
 
-				mesh = new THREE.Mesh( torus, material6 );
+				mesh = new Mesh( torus, material6 );
 				mesh.position.x = 166;
 				mesh.position.y = - 200;
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				mesh = new THREE.Mesh( torus, material8 );
+				mesh = new Mesh( torus, material8 );
 				mesh.position.x = 500;
 				mesh.position.y = - 200;
 				scene.add( mesh );
@@ -149,7 +152,7 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_loader_texture_rgbm.html

@@ -12,19 +12,21 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl RGBM texture loader example
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/WebGL.js"></script>
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				LinearFilter,
+				Mesh,
+				MeshBasicMaterial,
+				OrthographicCamera,
+				PlaneBufferGeometry,
+				ReinhardToneMapping,
+				RGBM16Encoding,
+				Scene,
+				TextureLoader,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
 			var params = {
 				exposure: 2.0
@@ -36,35 +38,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 );
 
-				renderer.toneMapping = THREE.ReinhardToneMapping;
+				renderer.toneMapping = ReinhardToneMapping;
 				renderer.toneMappingExposure = params.exposure;
 
 				renderer.gammaOutput = true;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				var aspect = window.innerWidth / window.innerHeight;
 
-				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
+				camera = new OrthographicCamera( - aspect, aspect, 1, - 1, 0, 1 );
 
-				new THREE.TextureLoader().load( 'textures/memorial.png', function ( texture ) {
+				new TextureLoader().load( 'textures/memorial.png', function ( texture ) {
 
-					texture.encoding = THREE.RGBM16Encoding;
+					texture.encoding = RGBM16Encoding;
 
-					texture.minFilter = THREE.LinearFilter;
-					texture.magFilter = THREE.LinearFilter;
+					texture.minFilter = LinearFilter;
+					texture.magFilter = LinearFilter;
 					texture.flipY = true;
 
-					var material = new THREE.MeshBasicMaterial( { map: texture } );
+					var material = new MeshBasicMaterial( { map: texture } );
 
-					var quad = new THREE.PlaneBufferGeometry( 1.5 * texture.width / texture.height, 1.5 );
+					var quad = new PlaneBufferGeometry( 1.5 * texture.width / texture.height, 1.5 );
 
-					var mesh = new THREE.Mesh( quad, material );
+					var mesh = new Mesh( quad, material );
 
 					scene.add( mesh );
 
@@ -74,7 +76,7 @@
 
 				//
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'exposure', 0, 4, 0.01 ).onChange( render );
 				gui.open();

examples/webgl_loader_texture_tga.html

@@ -10,20 +10,23 @@
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - TGA texture example by <a href="https://github.com/DaoshengMu/" target="_blank" rel="noopener">Daosheng Mu</a>
 		</div>
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/TGALoader.js"></script>
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script type="module">
+			import {
+				AmbientLight,
+				BoxBufferGeometry,
+				DirectionalLight,
+				Mesh,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-		<script>
+			import Stats from './jsm/libs/stats.module.js';
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { TGALoader } from './jsm/loaders/TGALoader.js';
 
 			var camera, scene, renderer, stats;
 
@@ -35,22 +38,22 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 				camera.position.set( 0, 50, 250 );
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				//
 
-				var loader = new THREE.TGALoader();
-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				var loader = new TGALoader();
+				var geometry = new BoxBufferGeometry( 50, 50, 50 );
 
 				// add box 1 - grey8 texture
 
 				var texture1 = loader.load( 'textures/crate_grey8.tga' );
-				var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
+				var material1 = new MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
-				var mesh1 = new THREE.Mesh( geometry, material1 );
+				var mesh1 = new Mesh( geometry, material1 );
 				mesh1.position.x = - 50;
 
 				scene.add( mesh1 );
@@ -58,32 +61,32 @@
 				// add box 2 - tga texture
 
 				var texture2 = loader.load( 'textures/crate_color8.tga' );
-				var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
+				var material2 = new MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
-				var mesh2 = new THREE.Mesh( geometry, material2 );
+				var mesh2 = new Mesh( geometry, material2 );
 				mesh2.position.x = 50;
 
 				scene.add( mesh2 );
 
 				//
 
-				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
+				var ambientLight = new AmbientLight( 0xffffff, 0.4 );
 				scene.add( ambientLight );
 
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
+				var light = new DirectionalLight( 0xffffff, 1 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
 				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_loader_ttf.html

@@ -7,23 +7,32 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
-		<script src="../build/three.js"></script>
-		<script src="js/WebGL.js"></script>
-		<script src="js/loaders/TTFLoader.js"></script>
 		<script src="js/libs/opentype.min.js"></script>
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - TTFLoader using opentype by gero3
 			<br/>type to enter new text, drag to spin the text
 		</div>
 
-
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+		<script type="module">
+			import {
+				Color,
+				DirectionalLight,
+				Fog,
+				Font,
+				Group,
+				Mesh,
+				MeshBasicMaterial,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				PointLight,
+				Scene,
+				TextBufferGeometry,
+				Vector3,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import { TTFLoader } from './jsm/loaders/TTFLoader.js';
 
 			var container;
 			var camera, cameraTarget, scene, renderer;
@@ -59,47 +68,47 @@
 
 				// CAMERA
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 1500 );
 				camera.position.set( 0, 400, 700 );
 
-				cameraTarget = new THREE.Vector3( 0, 150, 0 );
+				cameraTarget = new Vector3( 0, 150, 0 );
 
 				// SCENE
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x000000 );
-				scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
+				scene = new Scene();
+				scene.background = new Color( 0x000000 );
+				scene.fog = new Fog( 0x000000, 250, 1400 );
 
 				// LIGHTS
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
+				var dirLight = new DirectionalLight( 0xffffff, 0.125 );
 				dirLight.position.set( 0, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1.5 );
+				var pointLight = new PointLight( 0xffffff, 1.5 );
 				pointLight.position.set( 0, 100, 90 );
 				pointLight.color.setHSL( Math.random(), 1, 0.5 );
 				scene.add( pointLight );
 
-				material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
-				group = new THREE.Group();
+				group = new Group();
 				group.position.y = 100;
 
 				scene.add( group );
 
-				var loader = new THREE.TTFLoader();
+				var loader = new TTFLoader();
 
 				loader.load( 'fonts/ttf/kenpixel.ttf', function ( json ) {
 
-					font = new THREE.Font( json );
+					font = new Font( json );
 					createText();
 
 				} );
 
-				var plane = new THREE.Mesh(
-					new THREE.PlaneBufferGeometry( 10000, 10000 ),
-					new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } )
+				var plane = new Mesh(
+					new PlaneBufferGeometry( 10000, 10000 ),
+					new MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } )
 				);
 				plane.position.y = 100;
 				plane.rotation.x = - Math.PI / 2;
@@ -107,7 +116,7 @@
 
 				// RENDERER
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -184,7 +193,7 @@
 
 			function createText() {
 
-				textGeo = new THREE.TextBufferGeometry( text, {
+				textGeo = new TextBufferGeometry( text, {
 
 					font: font,
 
@@ -203,7 +212,7 @@
 
 				var centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );
 
-				textMesh1 = new THREE.Mesh( textGeo, material );
+				textMesh1 = new Mesh( textGeo, material );
 
 				textMesh1.position.x = centerOffset;
 				textMesh1.position.y = hover;
@@ -216,7 +225,7 @@
 
 				if ( mirror ) {
 
-					textMesh2 = new THREE.Mesh( textGeo, material );
+					textMesh2 = new Mesh( textGeo, material );
 
 					textMesh2.position.x = centerOffset;
 					textMesh2.position.y = - hover;

examples/webgl_loader_vrml.html

@@ -22,23 +22,20 @@
 		<!--model from <a href="http://cs.iupui.edu/~aharris/webDesign/vrml/" target="_blank" rel="noopener">VRML 2.0 Tutorial</a>,-->
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
 		<script src="js/libs/chevrotain.min.js"></script>
-		<script src="js/loaders/VRMLLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 
-		<script>
+		<script type="module">
+			import {
+				DirectionalLight,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import Stats from './jsm/libs/stats.module.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { VRMLLoader } from './jsm/loaders/VRMLLoader.js';
 
 			var camera, scene, renderer, stats;
 
@@ -47,21 +44,21 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
 				camera.position.z = 6;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 				scene.add( camera );
 
 				// light
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				var dirLight = new DirectionalLight( 0xffffff );
 				dirLight.position.set( 200, 200, 1000 ).normalize();
 
 				camera.add( dirLight );
 				camera.add( dirLight.target );
 
-				var loader = new THREE.VRMLLoader();
+				var loader = new VRMLLoader();
 				loader.load( 'models/vrml/house.wrl', function ( object ) {
 
 					scene.add( object );
@@ -70,14 +67,14 @@
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				// controls
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				//
 

examples/webgl_loader_vtk.html

@@ -14,23 +14,21 @@
 		Legacy vtk model from <a href="http://www.cc.gatech.edu/projects/large_models/" target="_blank" rel="noopener">The GeorgiaTech Lagre Geometric Model Archive</a>
 		</div>
 
-		<script src='js/libs/inflate.min.js'></script>
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/TrackballControls.js"></script>
-
-		<script src="js/loaders/VTKLoader.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 {
+				DirectionalLight,
+				DoubleSide,
+				Mesh,
+				MeshLambertMaterial,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer,
+			} from "../build/three.module.js";
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
+			import { VTKLoader } from './jsm/loaders/VTKLoader.js';
 
 			var container, stats;
 
@@ -41,44 +39,44 @@
 
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
 				camera.position.z = 0.2;
 
-				scene = new THREE.Scene();
+				scene = new Scene();
 
 				scene.add( camera );
 
 				// light
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
+				var dirLight = new DirectionalLight( 0xffffff );
 				dirLight.position.set( 200, 200, 1000 ).normalize();
 
 				camera.add( dirLight );
 				camera.add( dirLight.target );
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
+				var material = new MeshLambertMaterial( { color: 0xffffff, side: DoubleSide } );
 
-				var loader = new THREE.VTKLoader();
+				var loader = new VTKLoader();
 				loader.load( "models/vtk/bunny.vtk", function ( geometry ) {
 
 					geometry.center();
 					geometry.computeVertexNormals();
 
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = new Mesh( geometry, material );
 					mesh.position.set( - 0.075, 0.005, 0 );
 					mesh.scale.multiplyScalar( 0.2 );
 					scene.add( mesh );
 
 				} );
 
-				var loader1 = new THREE.VTKLoader();
+				var loader1 = new VTKLoader();
 				loader1.load( 'models/vtk/cube_ascii.vtp', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.center();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, side: THREE.DoubleSide } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshLambertMaterial( { color: 0x00ff00, side: DoubleSide } );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.set( - 0.025, 0, 0 );
 					mesh.scale.multiplyScalar( 0.01 );
@@ -88,14 +86,14 @@
 
 				} );
 
-				var loader2 = new THREE.VTKLoader();
+				var loader2 = new VTKLoader();
 				loader2.load( 'models/vtk/cube_binary.vtp', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.center();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0x0000ff, side: THREE.DoubleSide } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshLambertMaterial( { color: 0x0000ff, side: DoubleSide } );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.set( 0.025, 0, 0 );
 					mesh.scale.multiplyScalar( 0.01 );
@@ -105,14 +103,14 @@
 
 				} );
 
-				var loader3 = new THREE.VTKLoader();
+				var loader3 = new VTKLoader();
 				loader3.load( 'models/vtk/cube_no_compression.vtp', function ( geometry ) {
 
 					geometry.computeVertexNormals();
 					geometry.center();
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var material = new MeshLambertMaterial( { color: 0xff0000, side: DoubleSide } );
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.set( 0.075, 0, 0 );
 					mesh.scale.multiplyScalar( 0.01 );
@@ -124,7 +122,7 @@
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -134,7 +132,7 @@
 
 				// controls
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
+				controls = new TrackballControls( camera, renderer.domElement );
 
 				controls.rotateSpeed = 5.0;
 				controls.zoomSpeed = 5;

examples/webgl_loader_x.html

@@ -10,7 +10,7 @@
 	<div id="info">
 		<a href="http://threejs.org" target="_blank">three.js</a> - X-File Loader <br>
 		<a href="https://github.com/adrs2002/threeXfileLoader" target="_new">see more info and samples</a> <br /><br/>
-		<select id="mech1_anime" onchange="mech1_changeAnime(this.value)">
+		<select id="mech1_anime">
 			<option value="stand">stand</option>
 			<option value="wark">walk</option>
 			<option value="attack">attack</option>
@@ -19,23 +19,30 @@
 
 	<div id="canvase3d"></div>
 
-	<script src="../build/three.js"></script>
-	<script src="js/controls/OrbitControls.js"></script>
-	<script src="js/loaders/XLoader.js"></script>
-	<script src="js/libs/stats.min.js"></script>
-	<script src="js/WebGL.js"></script>
 
-	<script>
+	<script type="module">
+		import {
+			AmbientLight,
+			Clock,
+			DirectionalLight,
+			GridHelper,
+			LoadingManager,
+			LoopOnce,
+			PerspectiveCamera,
+			Scene,
+			SkeletonHelper,
+			SkinnedMesh,
+			WebGLRenderer,
+		} from "../build/three.module.js";
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
+		import Stats from './jsm/libs/stats.module.js';
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-		}
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
+		import { XLoader } from './jsm/loaders/XLoader.js';
 
 		var container, stats, controls;
 		var camera, scene, renderer;
-		var clock = new THREE.Clock();
+		var clock = new Clock();
 		var manager = null;
 
 		var skeletonHelper = null;
@@ -63,12 +70,12 @@
 			container = document.createElement( 'div' );
 			document.body.appendChild( container );
 
-			scene = new THREE.Scene();
-			scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
+			scene = new Scene();
+			scene.add( new AmbientLight( 0xaaaaaa ) );
 
 			// grid
 
-			var gridHelper = new THREE.GridHelper( 14, 1, 0x303030, 0x303030 );
+			var gridHelper = new GridHelper( 14, 1, 0x303030, 0x303030 );
 			scene.add( gridHelper );
 
 			// stats
@@ -76,25 +83,25 @@
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
-			renderer = new THREE.WebGLRenderer();
+			renderer = new WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setClearColor( 0x666666 );
 			container.appendChild( renderer.domElement );
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+			camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 			camera.position.set( 2, 10, - 28 );
 			camera.up.set( 0, 1, 0 );
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
+			controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 5, 0 );
 			controls.update();
 
-			var light = new THREE.DirectionalLight( 0xffffff, 1 );
+			var light = new DirectionalLight( 0xffffff, 1 );
 			light.position.set( 10, 100, - 10 ).normalize();
 			scene.add( light );
 
-			var light2 = new THREE.DirectionalLight( 0x777666, 1 );
+			var light2 = new DirectionalLight( 0x777666, 1 );
 			light2.position.set( - 1, - 1, - 1 ).normalize();
 			scene.add( light2 );
 
@@ -104,14 +111,14 @@
 
 			// model loading
 
-			manager = new THREE.LoadingManager();
+			manager = new LoadingManager();
 			manager.onProgress = function ( item, loaded, total ) {
 
 				console.log( item, loaded, total );
 
 			};
 
-			var loader = new THREE.XLoader( manager );
+			var loader = new XLoader( manager );
 
 			actions[ 0 ] = {};
 
@@ -133,9 +140,9 @@
 
 					scene.add( Models[ 0 ] );
 
-					if ( Models[ 0 ] instanceof THREE.SkinnedMesh ) {
+					if ( Models[ 0 ] instanceof SkinnedMesh ) {
 
-						skeletonHelper = new THREE.SkeletonHelper( Models[ 0 ] );
+						skeletonHelper = new SkeletonHelper( Models[ 0 ] );
 						scene.add( skeletonHelper );
 
 					}
@@ -148,6 +155,11 @@
 
 			}, onProgress, onError );
 
+			//
+
+			var animationSelection = document.getElementById( 'mech1_anime' );
+			animationSelection.addEventListener( 'change', mech1_changeAnime );
+
 		}
 
 		function onWindowResize() {
@@ -198,7 +210,7 @@
 
 			} else {
 
-				var loader2 = new THREE.XLoader( manager );
+				var loader2 = new XLoader( manager );
 				loader2.load( [ 'models/xfile/' + animeName + '.x', { putPos: false, putScl: false } ], function () {
 
 					// !! important!
@@ -214,7 +226,7 @@
 
 					if ( animeName == 'stand' ) {
 
-						actions[ modelId ][ animeName ].setLoop( THREE.LoopOnce );
+						actions[ modelId ][ animeName ].setLoop( LoopOnce );
 
 					}
 
@@ -234,7 +246,9 @@
 
 		}
 
-		function mech1_changeAnime( val ) {
+		function mech1_changeAnime( event ) {
+
+			var val = event.target.value;
 
 			loadAnimation( val, 0, function () {