update sea3d examples to modules

examples/webgl_loader_sea3d.html

@@ -13,35 +13,34 @@
 			Geometry Compression with <a href="https://github.com/google/draco" target="_blank" rel="noopener">Google Draco</a> and content with LZMA using <a href="http://sunag.github.io/sea3d/IO/index.html" style="color:#FFFFFF" target="_blank">SEA3D I.O.</a> Tools<br>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
-
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
-
 		<script src="js/libs/draco/draco_decoder.js"></script>
-		<script src="js/loaders/sea3d/SEA3DDraco.js"></script>
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script type="module">
 
-		<script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-			}
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
+			import './jsm/loaders/sea3d/SEA3DDraco.js'; // sea3d draco extension
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -59,7 +58,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: true, // Auto play animations
 				container: scene, // Container to add models
@@ -86,42 +85,42 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				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( 1000, 1000, 1000 );
 				camera.lookAt( 0, 0, 0 );
 
-				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 );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -146,7 +145,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -155,7 +154,7 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );
 

examples/webgl_loader_sea3d_bvh.html

@@ -12,35 +12,42 @@
 			Runtime convertion of BVH Animation to SEA3D Skeleton Animation
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
-
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
-
-		<script src="js/loaders/BVHLoader.js"></script>
-		<script src="js/utils/SkeletonUtils.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 {
+				Vector3,
+				Color,
+				Matrix4,
+				Euler,
+				Math,
+				Clock,
+				Group,
+				Object3D,
+				AnimationMixer,
+				SkeletonHelper,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
+
+			import { BVHLoader } from './jsm/loaders/BVHLoader.js';
+
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
+
+			import { SkeletonUtils } from './jsm/utils/SkeletonUtils.js';
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -60,7 +67,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: true, // Auto play animations
 				container: scene, // Container to add models
@@ -77,7 +84,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera, renderer.domElement );
+				new OrbitControls( camera, renderer.domElement );
 
 				// get meshes
 				player = loader.getMesh( "Player" );
@@ -128,49 +135,49 @@
 				};
 
 				// Automatic offset: get offsets when it is in T-Pose
-				options.offsets = THREE.SkeletonUtils.getSkeletonOffsets( player, bvhSkeletonHelper, options );
+				options.offsets = SkeletonUtils.getSkeletonOffsets( player, bvhSkeletonHelper, options );
 
 				/*
 				// Manual offsets: compensates the difference in skeletons ( T-Pose )
 				options.offsets = {
-					"lShldr": new THREE.Matrix4().makeRotationFromEuler(
-						new THREE.Euler(
+					"lShldr": new Matrix4().makeRotationFromEuler(
+						new Euler(
 							0,
-							THREE.Math.degToRad( - 45 ),
-							THREE.Math.degToRad( - 80 )
+							Math.degToRad( - 45 ),
+							Math.degToRad( - 80 )
 						)
 					),
-					"rShldr": new THREE.Matrix4().makeRotationFromEuler(
-						new THREE.Euler(
+					"rShldr": new Matrix4().makeRotationFromEuler(
+						new Euler(
 							0,
-							THREE.Math.degToRad( 45 ),
-							THREE.Math.degToRad( 80 )
+							Math.degToRad( 45 ),
+							Math.degToRad( 80 )
 						)
 					),
-					"lFoot": new THREE.Matrix4().makeRotationFromEuler(
-						new THREE.Euler(
+					"lFoot": new Matrix4().makeRotationFromEuler(
+						new Euler(
 							0,
-							THREE.Math.degToRad( 15 ),
+							Math.degToRad( 15 ),
 							0
 						)
 					),
-					"rFoot": new THREE.Matrix4().makeRotationFromEuler(
-						new THREE.Euler(
+					"rFoot": new Matrix4().makeRotationFromEuler(
+						new Euler(
 							0,
-							THREE.Math.degToRad( 15 ),
+							Math.degToRad( 15 ),
 							0
 						)
 					)
 				};
 				*/
 
-				var clip = THREE.SkeletonUtils.retargetClip( player, result.skeleton, result.clip, options );
+				var clip = SkeletonUtils.retargetClip( player, result.skeleton, result.clip, options );
 
 				clip.name = "dance";
 
-				clip = THREE.SEA3D.AnimationClip.fromClip( clip );
+				clip = SEA3D.AnimationClip.fromClip( clip );
 
-				player.addAnimation( new THREE.SEA3D.Animation( clip ) );
+				player.addAnimation( new SEA3D.Animation( clip ) );
 
 				player.play( "dance" );
 
@@ -179,13 +186,13 @@
 
 			function loadBVH() {
 
-				var loader = new THREE.BVHLoader();
+				var loader = new BVHLoader();
 				loader.load( "models/bvh/pirouette.bvh", function ( result ) {
 
-					bvhSkeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
+					bvhSkeletonHelper = new SkeletonHelper( result.skeleton.bones[ 0 ] );
 					bvhSkeletonHelper.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 ] );
 					boneContainer.position.y = - 100;
 
@@ -193,7 +200,7 @@
 					scene.add( boneContainer );
 
 					// play animation
-					bvhMixer = new THREE.AnimationMixer( bvhSkeletonHelper );
+					bvhMixer = new AnimationMixer( bvhSkeletonHelper );
 					bvhMixer.clipAction( result.clip ).setEffectiveWeight( 1.0 ).play();
 
 					bvhToSEA3D( result );
@@ -204,16 +211,16 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -223,20 +230,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -260,7 +267,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -269,7 +276,7 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				if ( bvhMixer ) bvhMixer.update( delta );
 

examples/webgl_loader_sea3d_bvh_retarget.html

@@ -12,35 +12,39 @@
 			Runtime retarget of BVH Animation to SEA3D Skeleton
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
 
-		<script src="js/controls/OrbitControls.js"></script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				Group,
+				Object3D,
+				AnimationMixer,
+				SkeletonHelper,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-		<script src="js/loaders/BVHLoader.js"></script>
-		<script src="js/utils/SkeletonUtils.js"></script>
+			import { BVHLoader } from './jsm/loaders/BVHLoader.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
 
-		<script>
+			import { SkeletonUtils } from './jsm/utils/SkeletonUtils.js';
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -60,7 +64,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: false, // Auto play animations
 				container: scene, // Container to add models
@@ -77,7 +81,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera, renderer.domElement );
+				new OrbitControls( camera, renderer.domElement );
 
 				// get meshes
 				player = loader.getMesh( "Player" );
@@ -126,13 +130,13 @@
 
 			function loadBVH() {
 
-				var loader = new THREE.BVHLoader();
+				var loader = new BVHLoader();
 				loader.load( "models/bvh/pirouette.bvh", function ( result ) {
 
-					bvhSkeletonHelper = new THREE.SkeletonHelper( result.skeleton.bones[ 0 ] );
+					bvhSkeletonHelper = new SkeletonHelper( result.skeleton.bones[ 0 ] );
 					bvhSkeletonHelper.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 ] );
 					boneContainer.position.z = - 100;
 					boneContainer.position.y = - 100;
@@ -141,10 +145,10 @@
 					scene.add( boneContainer );
 
 					// get offsets when it is in T-Pose
-					options.offsets = THREE.SkeletonUtils.getSkeletonOffsets( player, bvhSkeletonHelper, options );
+					options.offsets = SkeletonUtils.getSkeletonOffsets( player, bvhSkeletonHelper, options );
 
 					// play animation
-					bvhMixer = new THREE.AnimationMixer( bvhSkeletonHelper );
+					bvhMixer = new AnimationMixer( bvhSkeletonHelper );
 					bvhMixer.clipAction( result.clip ).setEffectiveWeight( 1.0 ).play();
 
 				} );
@@ -153,16 +157,16 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -172,20 +176,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -209,7 +213,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -218,13 +222,13 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				if ( bvhMixer ) {
 
 					bvhMixer.update( delta );
 
-					THREE.SkeletonUtils.retarget( player, bvhSkeletonHelper, options );
+					SkeletonUtils.retarget( player, bvhSkeletonHelper, options );
 
 				}
 

examples/webgl_loader_sea3d_hierarchy.html

@@ -9,38 +9,35 @@
 	<body>
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Exported by <a href="https://github.com/sunag/sea3d" target="_blank" rel="noopener">SEA3D Exporter</a> and edited by <a href="https://github.com/sunag/sea3d" target="_blank" rel="noopener">SEA3D Studio</a>.<br/>Asset by <a href="http://vhalldez.cgsociety.org/" target="_blank" rel="noopener">Valdez Araujo</a>.
-			High geometry compression with <a href="https://github.com/amd/rest3d/tree/master/server/o3dgc" target="_blank" rel="noopener">Open3DGC</a> and LZMA.
+			Geometry compression lossless with LZMA.
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
 
-		<script src="js/controls/OrbitControls.js"></script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				PerspectiveCamera,
+				PCFSoftShadowMap,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-		<script src="js/libs/o3dgc.js"></script>
-		<script src="js/loaders/sea3d/o3dgc/SEA3DGC.js"></script>
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
 
-		<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 Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -58,7 +55,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: false, // Auto play animations
 				container: scene // Container to add models
@@ -83,7 +80,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera, renderer.domElement );
+				new OrbitControls( camera, renderer.domElement );
 
 				animate();
 
@@ -96,19 +93,19 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				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 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				renderer.shadowMap.type = PCFSoftShadowMap;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
@@ -116,23 +113,23 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
+				var renderPass = new RenderPass( scene, camera );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( copyPass );
 
 				// events
@@ -154,7 +151,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -163,7 +160,7 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );
 

examples/webgl_loader_sea3d_keyframe.html

@@ -12,32 +12,31 @@
 			<div id="description">Click to play</div>
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
 
-		<script src="js/controls/OrbitControls.js"></script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -55,7 +54,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: false, // Manual play animations
 				container: scene // Container to add models
@@ -71,7 +70,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera, renderer.domElement );
+				new OrbitControls( camera, renderer.domElement );
 
 				// events
 
@@ -126,16 +125,16 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				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( 1000, - 300, 1000 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -145,20 +144,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -255,7 +254,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -264,7 +263,7 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );
 

examples/webgl_loader_sea3d_morph.html

@@ -12,32 +12,31 @@
 			<div id="description">Flag is Vertex Animation / Teapot is Morpher</div>
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
 
-		<script src="js/controls/OrbitControls.js"></script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -55,7 +54,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: true, // Auto play animations
 				scripts: false, // Disable embed scripts
@@ -72,7 +71,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				new THREE.OrbitControls( camera, renderer.domElement );
+				new OrbitControls( camera, renderer.domElement );
 
 				// get mesh
 
@@ -92,16 +91,16 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				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( 1000, - 300, 1000 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -111,20 +110,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -160,7 +159,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -169,7 +168,7 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );
 

examples/webgl_loader_sea3d_physics.html

@@ -13,37 +13,35 @@
 			<div id="description">Right click to clone</div>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
-
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
-
 		<script src="js/libs/ammo.js"></script>
-		<script src="js/loaders/sea3d/physics/SEA3DRigidBody.js"></script>
-		<script src="js/loaders/sea3d/physics/SEA3DAmmo.js"></script>
-		<script src="js/loaders/sea3d/physics/SEA3DAmmoLoader.js"></script>
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+		<script type="module">
 
-		<script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-			}
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import { AMMO } from './jsm/loaders/sea3d/physics/SEA3DAmmoLoader.js'; // sea3d ammo.js extension
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
+			import './jsm/loaders/sea3d/physics/SEA3DSDKRigidBody.js'; // sea3d physics extension
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -62,13 +60,13 @@
 				// Initialize Physics Engine
 
 				Ammo = AmmoLib;
-				SEA3D.AMMO.init();
+				AMMO.init();
 
 				//
 				// SEA3D Loader
 				//
 
-				loader = new THREE.SEA3D( {
+				loader = new SEA3D( {
 
 					container: scene // Container to add models
 
@@ -76,7 +74,7 @@
 
 				loader.onComplete = function () {
 
-					new THREE.OrbitControls( camera, renderer.domElement );
+					new OrbitControls( camera, renderer.domElement );
 
 					// events
 
@@ -104,7 +102,7 @@
 
 					return function () {
 
-						var domain = this.loader.clone( { lights: false, runScripts: false, autoPlay: false, enabledPhysics: false } );
+						var domain = loader.clone( { lights: false, runScripts: false, autoPlay: false, enabledPhysics: false } );
 
 						offset -= 180;
 
@@ -113,29 +111,28 @@
 						domain.enabledPhysics( true );
 						domain.runScripts();
 
-						this.scene.add( domain.container );
+						scene.add( domain.container );
 
 					};
 
 				}();
 
-
 			} );
 
 			//
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.set( 300, 200, - 300 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -145,20 +142,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -182,7 +179,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -192,11 +189,11 @@
 
 				// Update Physics Engine ( fix delta-time in 60fps for more stability )
 
-				SEA3D.AMMO.update( 1 / 60 );
+				AMMO.update( 1 / 60 );
 
 				// Update SEA3D Animations
 
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );
 

examples/webgl_loader_sea3d_skinning.html

@@ -14,32 +14,32 @@
 			<div id="playercount"></div>
 		</div>
 
-		<script src="../build/three.js"></script>
+		<script type="module">
 
-		<script src="js/controls/OrbitControls.js"></script>
+			import {
+				Vector3,
+				Color,
+				Clock,
+				Object3D,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.js"></script>
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
 
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
 
-		<script>
-
-			if ( WEBGL.isWebGLAvailable() === false ) {
-
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
-
-			}
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -57,7 +57,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: true, // Auto play animations
 				container: scene, // Container to add models
@@ -74,7 +74,7 @@
 				camera.position.copy( cam.position );
 				camera.rotation.copy( cam.rotation );
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				// get meshes
 				player = loader.getMesh( "Player" );
@@ -86,7 +86,7 @@
 
 				// or
 
-				player.animation[ 'pass#1' ].addEventListener( THREE.SEA3D.Animation.COMPLETE, function ( e ) {
+				player.animation[ 'pass#1' ].addEventListener( SEA3D.Animation.COMPLETE, function ( e ) {
 
 					console.log( "Animation completed!", e );
 
@@ -122,7 +122,7 @@
 					var PHI = Math.PI * 2 * ( Math.sqrt( 5 ) + 1 ) / 2; // golden ratio
 					var angle = PHI * count ++;
 
-					var container = new THREE.Object3D();
+					var container = new Object3D();
 					container.position.z = ( size * count ) * Math.cos( angle );
 					container.position.x = ( size * count ) * Math.sin( angle );
 
@@ -140,16 +140,16 @@
 
 			function init() {
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.set( 1000, - 300, 1000 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -159,20 +159,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -222,7 +222,7 @@
 
 			//
 
-			var clock = new THREE.Clock();
+			var clock = new Clock();
 
 			function animate() {
 
@@ -231,7 +231,7 @@
 				requestAnimationFrame( animate );
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );
 

examples/webgl_loader_sea3d_sound.html

@@ -57,32 +57,35 @@
 
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src="js/controls/PointerLockControls.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/ColorCorrectionShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
-
-		<script src="js/loaders/sea3d/SEA3D.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLZMA.js"></script>
-		<script src="js/loaders/sea3d/SEA3DLoader.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 {
+				Vector3,
+				Color,
+				Euler,
+				Clock,
+				AudioAnalyser,
+				AudioLoader,
+				Raycaster,
+				PerspectiveCamera,
+				Scene,
+				WebGLRenderer
+			} from "../build/three.module.js";
+
+			import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
+
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
+			import { MaskPass } from './jsm/postprocessing/MaskPass.js';
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from './jsm/shaders/ColorCorrectionShader.js';
+			import { VignetteShader } from './jsm/shaders/VignetteShader.js';
+
+			import { SEA3D } from './jsm/loaders/sea3d/SEA3DLoader.js';
+			import './jsm/loaders/sea3d/SEA3DLZMA.js'; // sea3d lzma extension
+
+			import Stats from './jsm/libs/stats.module.js';
 
 			console.log( "Visit https://github.com/sunag/sea3d to all codes and builds under development." );
 
@@ -105,7 +108,7 @@
 			// SEA3D Loader
 			//
 
-			loader = new THREE.SEA3D( {
+			loader = new SEA3D( {
 
 				autoPlay: true, // Auto play animations
 				container: scene // Container to add models
@@ -128,14 +131,14 @@
 				lightOutside = loader.getLight( "Light1" );
 
 				var soundOutside = loader.getSound3D( "Point001" );
-				soundOutsideAnalyser = new THREE.AudioAnalyser( soundOutside, 32 );
+				soundOutsideAnalyser = new AudioAnalyser( soundOutside, 32 );
 
 				// sound asset 2 + area
 
 				lightArea = loader.getLight( "Light2" );
 
 				soundArea = loader.getSound3D( "Point002" );
-				soundAreaAnalyser = new THREE.AudioAnalyser( soundArea, 512 );
+				soundAreaAnalyser = new AudioAnalyser( soundArea, 512 );
 
 				collisionArea = loader.getMesh( "Torus003" );
 
@@ -280,25 +283,25 @@
 
 			function init() {
 
-				raycaster = new THREE.Raycaster();
+				raycaster = new Raycaster();
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x333333 );
+				scene = new Scene();
+				scene.background = new Color( 0x333333 );
 
-				velocity = new THREE.Vector3();
+				velocity = new Vector3();
 
 				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 );
 
-				controls = new THREE.PointerLockControls( camera );
+				controls = new PointerLockControls( camera );
 				scene.add( controls.getObject() );
 
 				controls.getObject().translateX( 250 );
 				controls.getObject().translateZ( 250 );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -308,20 +311,20 @@
 
 				// post-processing
 
-				composer = new THREE.EffectComposer( renderer );
+				composer = new EffectComposer( renderer );
 
-				var renderPass = new THREE.RenderPass( scene, camera );
-				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				var renderPass = new RenderPass( scene, camera );
+				var copyPass = new ShaderPass( CopyShader );
 				composer.addPass( renderPass );
 
 				var vh = 1.4, vl = 1.2;
 
-				var colorCorrectionPass = new THREE.ShaderPass( THREE.ColorCorrectionShader );
-				colorCorrectionPass.uniforms[ "powRGB" ].value = new THREE.Vector3( vh, vh, vh );
-				colorCorrectionPass.uniforms[ "mulRGB" ].value = new THREE.Vector3( vl, vl, vl );
+				var colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
+				colorCorrectionPass.uniforms[ "powRGB" ].value = new Vector3( vh, vh, vh );
+				colorCorrectionPass.uniforms[ "mulRGB" ].value = new Vector3( vl, vl, vl );
 				composer.addPass( colorCorrectionPass );
 
-				var vignettePass = new THREE.ShaderPass( THREE.VignetteShader );
+				var vignettePass = new ShaderPass( VignetteShader );
 				vignettePass.uniforms[ "darkness" ].value = 1.0;
 				composer.addPass( vignettePass );
 
@@ -366,14 +369,14 @@
 
 			}
 
-			var clock = new THREE.Clock();
-			var audioPos = new THREE.Vector3();
-			var audioRot = new THREE.Euler();
+			var clock = new Clock();
+			var audioPos = new Vector3();
+			var audioRot = new Euler();
 
 			function updateSoundFilter() {
 
 				// difference position between sound and listener
-				var difPos = new THREE.Vector3().setFromMatrixPosition( soundArea.matrixWorld ).sub( audioPos );
+				var difPos = new Vector3().setFromMatrixPosition( soundArea.matrixWorld ).sub( audioPos );
 				var length = difPos.length();
 
 				// pick a vector from camera to sound
@@ -412,7 +415,7 @@
 				lightArea.intensity = soundAreaAnalyser.getAverageFrequency() / 50;
 
 				// Update SEA3D Animations
-				THREE.SEA3D.AnimationHandler.update( delta );
+				SEA3D.AnimationHandler.update( delta );
 
 				render( delta );