Examples: Use modules in webgl_loader_gltf_extensions.

examples/webgl_loader_gltf_extensions.html

@@ -16,25 +16,41 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/DRACOLoader.js"></script>
-		<script src="js/loaders/DDSLoader.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
+		<script type="module">
+			import {
+				AnimationMixer,
+				AmbientLight,
+				Clock,
+				Color,
+				DirectionalLight,
+				Euler,
+				Mesh,
+				MeshPhongMaterial,
+				PCFSoftShadowMap,
+				PerspectiveCamera,
+				PlaneBufferGeometry,
+				Scene,
+				SpotLight,
+				UnsignedByteType,
+				Vector3,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { DDSLoader } from './jsm/loaders/DDSLoader.js';
+			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
+			import { EquirectangularToCubeGenerator } from './jsm/loaders/EquirectangularToCubeGenerator.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
-		<script src="js/loaders/EquirectangularToCubeGenerator.js"></script>
-		<script src="js/loaders/RGBELoader.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-
-		<script>
 			var orbitControls;
 			var container, camera, scene, renderer, loader;
 			var gltf, background, envMap, mixer, gui, extensionControls;
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			var scenes = {
 				Boombox: {
@@ -42,8 +58,8 @@
 					url: './models/gltf/BoomBox/%s/BoomBox.gltf',
 					author: 'Microsoft',
 					authorURL: 'https://www.microsoft.com/',
-					cameraPos: new THREE.Vector3( 0.02, 0.01, 0.03 ),
-					objectRotation: new THREE.Euler( 0, Math.PI, 0 ),
+					cameraPos: new Vector3( 0.02, 0.01, 0.03 ),
+					objectRotation: new Euler( 0, Math.PI, 0 ),
 					extensions: [ 'glTF', 'glTF-pbrSpecularGlossiness', 'glTF-Binary', 'glTF-dds' ],
 					addEnvMap: true
 				},
@@ -52,9 +68,9 @@
 					url: './models/gltf/BotSkinned/%s/Bot_Skinned.gltf',
 					author: 'MozillaVR',
 					authorURL: 'https://vr.mozilla.org/',
-					cameraPos: new THREE.Vector3( 0.5, 2, 2 ),
-					center: new THREE.Vector3( 0, 1.2, 0 ),
-					objectRotation: new THREE.Euler( 0, 0, 0 ),
+					cameraPos: new Vector3( 0.5, 2, 2 ),
+					center: new Vector3( 0, 1.2, 0 ),
+					objectRotation: new Euler( 0, 0, 0 ),
 					addLights: true,
 					addGround: true,
 					shadows: true,
@@ -65,8 +81,8 @@
 					url: './models/gltf/MetalRoughSpheres/%s/MetalRoughSpheres.gltf',
 					author: '@emackey',
 					authorURL: 'https://twitter.com/emackey',
-					cameraPos: new THREE.Vector3( 2, 1, 15 ),
-					objectRotation: new THREE.Euler( 0, 0, 0 ),
+					cameraPos: new Vector3( 2, 1, 15 ),
+					objectRotation: new Euler( 0, 0, 0 ),
 					extensions: [ 'glTF', 'glTF-Embedded' ],
 					addEnvMap: true
 				},
@@ -75,7 +91,7 @@
 					url: './models/gltf/Duck/%s/Duck.gltf',
 					author: 'Sony',
 					authorURL: 'https://www.playstation.com/en-us/corporate/about/',
-					cameraPos: new THREE.Vector3( 0, 3, 5 ),
+					cameraPos: new Vector3( 0, 3, 5 ),
 					addLights: true,
 					addGround: true,
 					shadows: true,
@@ -86,10 +102,10 @@
 					url: './models/gltf/Monster/%s/Monster.gltf',
 					author: '3drt.com',
 					authorURL: 'http://www.3drt.com/downloads.htm',
-					cameraPos: new THREE.Vector3( 3, 1, 7 ),
-					objectScale: new THREE.Vector3( 0.04, 0.04, 0.04 ),
-					objectPosition: new THREE.Vector3( 0.2, 0.1, 0 ),
-					objectRotation: new THREE.Euler( 0, - 3 * Math.PI / 4, 0 ),
+					cameraPos: new Vector3( 3, 1, 7 ),
+					objectScale: new Vector3( 0.04, 0.04, 0.04 ),
+					objectPosition: new Vector3( 0.2, 0.1, 0 ),
+					objectRotation: new Euler( 0, - 3 * Math.PI / 4, 0 ),
 					animationTime: 3,
 					addLights: true,
 					shadows: true,
@@ -101,8 +117,8 @@
 					url: './models/gltf/CesiumMan/%s/CesiumMan.gltf',
 					author: 'Cesium',
 					authorURL: 'https://cesiumjs.org/',
-					cameraPos: new THREE.Vector3( 0, 3, 10 ),
-					objectRotation: new THREE.Euler( 0, 0, 0 ),
+					cameraPos: new Vector3( 0, 3, 10 ),
+					objectRotation: new Euler( 0, 0, 0 ),
 					addLights: true,
 					addGround: true,
 					shadows: true,
@@ -113,7 +129,7 @@
 					url: './models/gltf/CesiumMilkTruck/%s/CesiumMilkTruck.gltf',
 					author: 'Cesium',
 					authorURL: 'https://cesiumjs.org/',
-					cameraPos: new THREE.Vector3( 0, 3, 10 ),
+					cameraPos: new Vector3( 0, 3, 10 ),
 					addLights: true,
 					addGround: true,
 					shadows: true,
@@ -124,9 +140,9 @@
 					url: './models/gltf/OutlinedBox/OutlinedBox.gltf',
 					author: '@twittmann',
 					authorURL: 'https://github.com/twittmann',
-					cameraPos: new THREE.Vector3( 0, 5, 15 ),
-					objectScale: new THREE.Vector3( 0.01, 0.01, 0.01 ),
-					objectRotation: new THREE.Euler( 0, 90, 0 ),
+					cameraPos: new Vector3( 0, 5, 15 ),
+					objectScale: new Vector3( 0.01, 0.01, 0.01 ),
+					objectRotation: new Euler( 0, 90, 0 ),
 					addLights: true,
 					shadows: true,
 					extensions: [ 'glTF' ]
@@ -143,7 +159,7 @@
 
 				container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
@@ -154,34 +170,34 @@
 
 				// Load background and generate envMap
 
-				new THREE.RGBELoader()
-					.setType( THREE.UnsignedByteType )
+				new RGBELoader()
+					.setType( UnsignedByteType )
 					.setPath( 'textures/equirectangular/' )
 					.load( 'venice_sunset_2k.hdr', function ( texture ) {
 
-					var cubeGenerator = new THREE.EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
-					cubeGenerator.update( renderer );
+						var cubeGenerator = new EquirectangularToCubeGenerator( texture, { resolution: 1024 } );
+						cubeGenerator.update( renderer );
 
-					background = cubeGenerator.renderTarget;
+						background = cubeGenerator.renderTarget;
 
-					var pmremGenerator = new THREE.PMREMGenerator( cubeGenerator.renderTarget.texture );
-					pmremGenerator.update( renderer );
+						var pmremGenerator = new PMREMGenerator( cubeGenerator.renderTarget.texture );
+						pmremGenerator.update( renderer );
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
-					pmremCubeUVPacker.update( renderer );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						pmremCubeUVPacker.update( renderer );
 
-					envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
+						envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
 
-					pmremGenerator.dispose();
-					pmremCubeUVPacker.dispose();
+						pmremGenerator.dispose();
+						pmremCubeUVPacker.dispose();
 
-					//
+						//
 
-					buildGUI();
-					initScene( scenes[ state.scene ] );
-					animate();
+						buildGUI();
+						initScene( scenes[ state.scene ] );
+						animate();
 
-				} );
+					} );
 
 			}
 
@@ -195,24 +211,24 @@
 
 				}
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x222222 );
+				scene = new Scene();
+				scene.background = new Color( 0x222222 );
 
-				camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
+				camera = new PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 0.001, 1000 );
 				scene.add( camera );
 
 				var spot1;
 
 				if ( sceneInfo.addLights ) {
 
-					var ambient = new THREE.AmbientLight( 0x222222 );
+					var ambient = new AmbientLight( 0x222222 );
 					scene.add( ambient );
 
-					var directionalLight = new THREE.DirectionalLight( 0xdddddd, 4 );
+					var directionalLight = new DirectionalLight( 0xdddddd, 4 );
 					directionalLight.position.set( 0, 0, 1 ).normalize();
 					scene.add( directionalLight );
 
-					spot1 = new THREE.SpotLight( 0xffffff, 1 );
+					spot1 = new SpotLight( 0xffffff, 1 );
 					spot1.position.set( 5, 10, 5 );
 					spot1.angle = 0.50;
 					spot1.penumbra = 0.75;
@@ -235,18 +251,18 @@
 				if ( sceneInfo.shadows ) {
 
 					renderer.shadowMap.enabled = true;
-					renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+					renderer.shadowMap.type = PCFSoftShadowMap;
 
 				}
 
 				// TODO: Reuse existing OrbitControls, GLTFLoaders, and so on
 
-				orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
+				orbitControls = new OrbitControls( camera, renderer.domElement );
 
 				if ( sceneInfo.addGround ) {
 
-					var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xFFFFFF } );
-					var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 512, 512 ), groundMaterial );
+					var groundMaterial = new MeshPhongMaterial( { color: 0xFFFFFF } );
+					var ground = new Mesh( new PlaneBufferGeometry( 512, 512 ), groundMaterial );
 					ground.receiveShadow = !! sceneInfo.shadows;
 
 					if ( sceneInfo.groundPos ) {
@@ -265,11 +281,11 @@
 
 				}
 
-				loader = new THREE.GLTFLoader();
+				loader = new GLTFLoader();
 
-				THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
-				loader.setDRACOLoader( new THREE.DRACOLoader() );
-				loader.setDDSLoader( new THREE.DDSLoader() );
+				DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
+				loader.setDRACOLoader( new DRACOLoader() );
+				loader.setDDSLoader( new DDSLoader() );
 
 				var url = sceneInfo.url.replace( /%s/g, state.extension );
 
@@ -353,7 +369,7 @@
 
 					if ( animations && animations.length ) {
 
-						mixer = new THREE.AnimationMixer( object );
+						mixer = new AnimationMixer( object );
 
 						for ( var i = 0; i < animations.length; i ++ ) {
 
@@ -415,7 +431,7 @@
 
 			function buildGUI() {
 
-				gui = new dat.GUI( { width: 330 } );
+				gui = new GUI( { width: 330 } );
 				gui.domElement.parentElement.style.zIndex = 101;
 
 				var sceneCtrl = gui.add( state, 'scene', Object.keys( scenes ) );