Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: More module examples.

Mugen87 6 years ago
parent
d051742a1e
commit
aac68dffb4
40 changed files with 1765 additions and 1492 deletions
Split View Show Diff Stats
  1. 49 37
      examples/webgl_materials.html
  2. 39 33
      examples/webgl_materials_texture_anisotropy.html
  3. 18 18
      examples/webgl_materials_texture_canvas.html
  4. 49 47
      examples/webgl_materials_texture_filters.html
  5. 50 48
      examples/webgl_materials_texture_manualmipmap.html
  6. 31 25
      examples/webgl_materials_texture_partialupdate.html
  7. 24 25
      examples/webgl_materials_texture_rotation.html
  8. 43 34
      examples/webgl_materials_translucency.html
  9. 36 34
      examples/webgl_materials_transparency.html
  10. 53 42
      examples/webgl_materials_variations_basic.html
  11. 54 42
      examples/webgl_materials_variations_lambert.html
  12. 53 41
      examples/webgl_materials_variations_phong.html
  13. 89 81
      examples/webgl_materials_variations_physical.html
  14. 95 84
      examples/webgl_materials_variations_standard.html
  15. 55 44
      examples/webgl_materials_variations_toon.html
  16. 29 32
      examples/webgl_materials_video.html
  17. 19 18
      examples/webgl_materials_video_webcam.html
  18. 32 19
      examples/webgl_materials_wireframe.html
  19. 76 72
      examples/webgl_math_orientation_transform.html
  20. 45 32
      examples/webgl_mirror.html
  21. 20 14
      examples/webgl_modifier_simplifier.html
  22. 109 107
      examples/webgl_modifier_tessellation.html
  23. 34 29
      examples/webgl_morphtargets.html
  24. 30 20
      examples/webgl_morphtargets_horse.html
  25. 25 17
      examples/webgl_morphtargets_sphere.html
  26. 126 119
      examples/webgl_multiple_canvases_circle.html
  27. 39 34
      examples/webgl_multiple_canvases_complex.html
  28. 39 34
      examples/webgl_multiple_canvases_grid.html
  29. 30 24
      examples/webgl_multiple_elements.html
  30. 29 26
      examples/webgl_multiple_elements_text.html
  31. 44 39
      examples/webgl_multiple_renderers.html
  32. 29 22
      examples/webgl_multiple_scenes_comparison.html
  33. 43 37
      examples/webgl_multiple_views.html
  34. 40 22
      examples/webgl_nearestneighbour.html
  35. 72 64
      examples/webgl_panorama_cube.html
  36. 25 15
      examples/webgl_panorama_dualfisheye.html
  37. 23 14
      examples/webgl_panorama_equirectangular.html
  38. 19 11
      examples/webgl_performance.html
  39. 31 25
      examples/webgl_performance_doublesided.html
  40. 19 11
      examples/webgl_performance_static.html

+ 49 - 37
examples/webgl_materials.html
View File 

@@ -7,19 +7,31 @@
 
 		<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/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl materials
 
+		</div>
 
+
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				AdditiveBlending,
 
+				DirectionalLight,
 
+				GridHelper,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshLambertMaterial,
 
+				MeshPhongMaterial,
 
+				MeshNormalMaterial,
 
+				MeshDepthMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				Texture,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -36,39 +48,39 @@
 
 				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( 0, 200, 800 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				// Grid
 
 
-				var helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
 
+				var helper = new GridHelper( 1000, 40, 0x303030, 0x303030 );
 
 				helper.position.y = - 75;
 
 				scene.add( helper );
 
 
 				// Materials
 
 
-				var texture = new THREE.Texture( generateTexture() );
 
+				var texture = new Texture( generateTexture() );
 
 				texture.needsUpdate = true;
 
 
-				materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
 
-				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
 
-				materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ) );
 
-				materials.push( new THREE.MeshNormalMaterial() );
 
-				materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: THREE.AdditiveBlending } ) );
 
-				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd } ) );
 
-				materials.push( new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, map: texture, transparent: true } ) );
 
-				materials.push( new THREE.MeshNormalMaterial( { flatShading: true } ) );
 
-				materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
 
-				materials.push( new THREE.MeshDepthMaterial() );
 
-				materials.push( new THREE.MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000 } ) );
 
-				materials.push( new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, opacity: 0.9, transparent: true } ) );
 
-				materials.push( new THREE.MeshBasicMaterial( { map: texture, transparent: true } ) );
 
+				materials.push( new MeshLambertMaterial( { map: texture, transparent: true } ) );
 
+				materials.push( new MeshLambertMaterial( { color: 0xdddddd } ) );
 
+				materials.push( new MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ) );
 
+				materials.push( new MeshNormalMaterial() );
 
+				materials.push( new MeshBasicMaterial( { color: 0xffaa00, transparent: true, blending: AdditiveBlending } ) );
 
+				materials.push( new MeshLambertMaterial( { color: 0xdddddd } ) );
 
+				materials.push( new MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, map: texture, transparent: true } ) );
 
+				materials.push( new MeshNormalMaterial( { flatShading: true } ) );
 
+				materials.push( new MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
 
+				materials.push( new MeshDepthMaterial() );
 
+				materials.push( new MeshLambertMaterial( { color: 0x666666, emissive: 0xff0000 } ) );
 
+				materials.push( new MeshPhongMaterial( { color: 0x000000, specular: 0x666666, emissive: 0xff0000, shininess: 10, opacity: 0.9, transparent: true } ) );
 
+				materials.push( new MeshBasicMaterial( { map: texture, transparent: true } ) );
 
 
 				// Spheres geometry
 
 
-				var geometry = new THREE.SphereBufferGeometry( 70, 32, 16 );
 
+				var geometry = new SphereBufferGeometry( 70, 32, 16 );
 
 
 				for ( var i = 0, l = materials.length; i < l; i ++ ) {
 
 
@@ -78,9 +90,9 @@
 
 
 				// Lights
 
 
-				scene.add( new THREE.AmbientLight( 0x111111 ) );
 
+				scene.add( new AmbientLight( 0x111111 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 0.125 );
 
 
 				directionalLight.position.x = Math.random() - 0.5;
 
 				directionalLight.position.y = Math.random() - 0.5;
 
@@ -89,14 +101,14 @@
 
 
 				scene.add( directionalLight );
 
 
-				pointLight = new THREE.PointLight( 0xffffff, 1 );
 
+				pointLight = new PointLight( 0xffffff, 1 );
 
 				scene.add( pointLight );
 
 
-				pointLight.add( new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) ) );
 
+				pointLight.add( new Mesh( new SphereBufferGeometry( 4, 8, 8 ), new MeshBasicMaterial( { color: 0xffffff } ) ) );
 
 
 				//
 
 
-				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 );
 
@@ -114,7 +126,7 @@
 
 
 			function addMesh( geometry, material ) {
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 
 				mesh.position.x = ( objects.length % 4 ) * 200 - 400;
 
 				mesh.position.z = Math.floor( objects.length / 4 ) * 200 - 200;

+ 39 - 33
examples/webgl_materials_texture_anisotropy.html
View File 

@@ -53,18 +53,24 @@
 
 		anisotropy: <span class="c" id="val_right"></span><br/>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				DirectionalLight,
 
+				Fog,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				Scene,
 
+				TextureLoader,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
@@ -87,50 +93,50 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 
 				//
 
 
-				camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 25000 );
 
+				camera = new PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 25000 );
 
 				camera.position.z = 1500;
 
 
-				scene1 = new THREE.Scene();
 
-				scene1.background = new THREE.Color( 0xf2f7ff );
 
-				scene1.fog = new THREE.Fog( 0xf2f7ff, 1, 25000 );
 
+				scene1 = new Scene();
 
+				scene1.background = new Color( 0xf2f7ff );
 
+				scene1.fog = new Fog( 0xf2f7ff, 1, 25000 );
 
 
-				scene2 = new THREE.Scene();
 
-				scene2.background = new THREE.Color( 0xf2f7ff );
 
-				scene2.fog = new THREE.Fog( 0xf2f7ff, 1, 25000 );
 
+				scene2 = new Scene();
 
+				scene2.background = new Color( 0xf2f7ff );
 
+				scene2.fog = new Fog( 0xf2f7ff, 1, 25000 );
 
 
-				scene1.add( new THREE.AmbientLight( 0xeef0ff ) );
 
-				scene2.add( new THREE.AmbientLight( 0xeef0ff ) );
 
+				scene1.add( new AmbientLight( 0xeef0ff ) );
 
+				scene2.add( new AmbientLight( 0xeef0ff ) );
 
 
-				var light1 = new THREE.DirectionalLight( 0xffffff, 2 );
 
+				var light1 = new DirectionalLight( 0xffffff, 2 );
 
 				light1.position.set( 1, 1, 1 );
 
 				scene1.add( light1 );
 
 
-				var light2 = new THREE.DirectionalLight( 0xffffff, 2 );
 
+				var light2 = new DirectionalLight( 0xffffff, 2 );
 
 				light2.position.set( 1, 1, 1 );
 
 				scene2.add( light2 );
 
 
 				// GROUND
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 
 				var maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
 
 
 				var texture1 = textureLoader.load( "textures/crate.gif" );
 
-				var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
+				var material1 = new MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
 
 
 				texture1.anisotropy = maxAnisotropy;
 
-				texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;
 
+				texture1.wrapS = texture1.wrapT = RepeatWrapping;
 
 				texture1.repeat.set( 512, 512 );
 
 
 				var texture2 = textureLoader.load( "textures/crate.gif" );
 
-				var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
+				var material2 = new MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
 
 
 				texture2.anisotropy = 1;
 
-				texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
 
+				texture2.wrapS = texture2.wrapT = RepeatWrapping;
 
 				texture2.repeat.set( 512, 512 );
 
 
 				if ( maxAnisotropy > 0 ) {
 
@@ -147,13 +153,13 @@
 
 
 				//
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
 
-				var mesh1 = new THREE.Mesh( geometry, material1 );
 
+				var mesh1 = new Mesh( geometry, material1 );
 
 				mesh1.rotation.x = - Math.PI / 2;
 
 				mesh1.scale.set( 1000, 1000, 1000 );
 
 
-				var mesh2 = new THREE.Mesh( geometry, material2 );
 
+				var mesh2 = new Mesh( geometry, material2 );
 
 				mesh2.rotation.x = - Math.PI / 2;
 
 				mesh2.scale.set( 1000, 1000, 1000 );
 
 
@@ -199,7 +205,7 @@
 
 			function render() {
 
 
 				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y = THREE.Math.clamp( camera.position.y + ( - ( mouseY - 200 ) - camera.position.y ) * .05, 50, 1000 );
 
+				camera.position.y = _Math.clamp( camera.position.y + ( - ( mouseY - 200 ) - camera.position.y ) * .05, 50, 1000 );
 
 
 				camera.lookAt( scene1.position );

+ 18 - 18
examples/webgl_materials_texture_canvas.html
View File 

@@ -24,20 +24,20 @@
 
 		</div>
 
 		<canvas id="drawing-canvas" height="128" width="128"></canvas>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				CanvasTexture,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Vector2,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer, mesh, material;
 
-			var drawStartPos = new THREE.Vector2();
 
+			var drawStartPos = new Vector2();
 
 
 			init();
 
 			setupCanvasDrawing();
 
@@ -45,17 +45,17 @@
 
 
 			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 = 500;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				material = new THREE.MeshBasicMaterial();
 
+				material = new MeshBasicMaterial();
 
 
-				mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
 
+				mesh = new Mesh( new BoxBufferGeometry( 200, 200, 200 ), material );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
@@ -80,7 +80,7 @@
 
 
 				// set canvas as material.map (this could be done to any map, bump, displacement etc.)
 
 
-				material.map = new THREE.CanvasTexture( drawingCanvas );
 
+				material.map = new CanvasTexture( drawingCanvas );
 
 
 				// set the variable to keep track of when to draw

+ 49 - 47
examples/webgl_materials_texture_filters.html
View File 

@@ -43,23 +43,29 @@
 
 		min: <span class="c">Nearest</span>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				CanvasTexture,
 
+				Color,
 
+				Fog,
 
+				LinearFilter,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				NearestFilter,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				Scene,
 
+				Texture,
 
+				TextureLoader,
 
+				UVMapping,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 
-			var container, stats;
 
+			var container;
 
 
 			var camera, scene, scene2, renderer;
 
 
@@ -77,16 +83,16 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
 
+				camera = new PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
 
 				camera.position.z = 1500;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x000000 );
 
-				scene.fog = new THREE.Fog( 0x000000, 1500, 4000 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x000000 );
 
+				scene.fog = new Fog( 0x000000, 1500, 4000 );
 
 
-				scene2 = new THREE.Scene();
 
-				scene2.background = new THREE.Color( 0x000000 );
 
-				scene2.fog = new THREE.Fog( 0x000000, 1500, 4000 );
 
+				scene2 = new Scene();
 
+				scene2.background = new Color( 0x000000 );
 
+				scene2.fog = new Fog( 0x000000, 1500, 4000 );
 
 
 				// GROUND
 
 
@@ -102,25 +108,25 @@
 
 				context.fillRect( 0, 0, 64, 64 );
 
 				context.fillRect( 64, 64, 64, 64 );
 
 
-				var textureCanvas = new THREE.CanvasTexture( imageCanvas );
 
+				var textureCanvas = new CanvasTexture( imageCanvas );
 
 				textureCanvas.repeat.set( 1000, 1000 );
 
-				textureCanvas.wrapS = THREE.RepeatWrapping;
 
-				textureCanvas.wrapT = THREE.RepeatWrapping;
 
+				textureCanvas.wrapS = RepeatWrapping;
 
+				textureCanvas.wrapT = RepeatWrapping;
 
 
 				var textureCanvas2 = textureCanvas.clone();
 
-				textureCanvas2.magFilter = THREE.NearestFilter;
 
-				textureCanvas2.minFilter = THREE.NearestFilter;
 
+				textureCanvas2.magFilter = NearestFilter;
 
+				textureCanvas2.minFilter = NearestFilter;
 
 
-				var	materialCanvas = new THREE.MeshBasicMaterial( { map: textureCanvas } );
 
-				var materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
+				var	materialCanvas = new MeshBasicMaterial( { map: textureCanvas } );
 
+				var materialCanvas2 = new MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
 
-				var meshCanvas = new THREE.Mesh( geometry, materialCanvas );
 
+				var meshCanvas = new Mesh( geometry, materialCanvas );
 
 				meshCanvas.rotation.x = - Math.PI / 2;
 
 				meshCanvas.scale.set( 1000, 1000, 1000 );
 
 
-				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
 
+				var meshCanvas2 = new Mesh( geometry, materialCanvas2 );
 
 				meshCanvas2.rotation.x = - Math.PI / 2;
 
 				meshCanvas2.scale.set( 1000, 1000, 1000 );
 
 
@@ -137,9 +143,9 @@
 
 					scene.add( meshCanvas );
 
 					scene2.add( meshCanvas2 );
 
 
-					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-					var mesh = new THREE.Mesh( geometry, materialPainting );
 
-					var mesh2 = new THREE.Mesh( geometry, materialPainting2 );
 
+					var geometry = new PlaneBufferGeometry( 100, 100 );
 
+					var mesh = new Mesh( geometry, materialPainting );
 
+					var mesh2 = new Mesh( geometry, materialPainting2 );
 
 
 					addPainting( scene, mesh );
 
 					addPainting( scene2, mesh2 );
 
@@ -151,13 +157,13 @@
 
 
 						zscene.add( zmesh );
 
 
-						var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
 
+						var meshFrame = new Mesh( geometry, new MeshBasicMaterial( { color: 0x000000 } ) );
 
 						meshFrame.position.z = - 10.0;
 
 						meshFrame.scale.x = 1.1 * image.width / 100;
 
 						meshFrame.scale.y = 1.1 * image.height / 100;
 
 						zscene.add( meshFrame );
 
 
-						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
 
+						var meshShadow = new Mesh( geometry, new MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
 
 						meshShadow.position.y = - 1.1 * image.height / 2;
 
 						meshShadow.position.z = - 1.1 * image.height / 2;
 
 						meshShadow.rotation.x = - Math.PI / 2;
 
@@ -173,17 +179,17 @@
 
 
 				};
 
 
-				var texturePainting = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
 
-				var texturePainting2 = new THREE.Texture();
 
-				var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
 
-				var materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
+				var texturePainting = new TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
 
+				var texturePainting2 = new Texture();
 
+				var materialPainting = new MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );
 
+				var materialPainting2 = new MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
 
-				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
 
-				texturePainting.minFilter = texturePainting.magFilter = THREE.LinearFilter;
 
-				texturePainting.mapping = THREE.UVMapping;
 
+				texturePainting2.minFilter = texturePainting2.magFilter = NearestFilter;
 
+				texturePainting.minFilter = texturePainting.magFilter = LinearFilter;
 
+				texturePainting.mapping = UVMapping;
 
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.autoClear = false;
 
@@ -191,9 +197,6 @@
 
 				renderer.domElement.style.position = "relative";
 
 				container.appendChild( renderer.domElement );
 
 
-				stats = new Stats();
 
-				//container.appendChild( stats.dom );
 
-
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			}
 
@@ -212,7 +215,6 @@
 
 				requestAnimationFrame( animate );
 
 
 				render();
 
-				stats.update();
 
 
 			}

+ 50 - 48
examples/webgl_materials_texture_manualmipmap.html
View File 

@@ -43,23 +43,30 @@
 
 		min: <span class="c">Nearest</span>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				CanvasTexture,
 
+				Color,
 
+				Fog,
 
+				LinearFilter,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				NearestFilter,
 
+				NearestMipMapNearestFilter,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				Scene,
 
+				Texture,
 
+				TextureLoader,
 
+				UVMapping,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var SCREEN_WIDTH = window.innerWidth;
 
 			var SCREEN_HEIGHT = window.innerHeight;
 
 
-			var container, stats;
 
+			var container;
 
 
 			var camera, scene1, scene2, renderer;
 
 
@@ -77,16 +84,16 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
 
+				camera = new PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
 
 				camera.position.z = 1500;
 
 
-				scene1 = new THREE.Scene();
 
-				scene1.background = new THREE.Color( 0x000000 );
 
-				scene1.fog = new THREE.Fog( 0x000000, 1500, 4000 );
 
+				scene1 = new Scene();
 
+				scene1.background = new Color( 0x000000 );
 
+				scene1.fog = new Fog( 0x000000, 1500, 4000 );
 
 
-				scene2 = new THREE.Scene();
 
-				scene2.background = new THREE.Color( 0x000000 );
 
-				scene2.fog = new THREE.Fog( 0x000000, 1500, 4000 );
 
+				scene2 = new Scene();
 
+				scene2.background = new Color( 0x000000 );
 
+				scene2.fog = new Fog( 0x000000, 1500, 4000 );
 
 
 				// GROUND
 
 
@@ -108,7 +115,7 @@
 
 				}
 
 
 				var canvas = mipmap( 128, '#f00' );
 
-				var textureCanvas1 = new THREE.CanvasTexture( canvas );
 
+				var textureCanvas1 = new CanvasTexture( canvas );
 
 				textureCanvas1.mipmaps[ 0 ] = canvas;
 
 				textureCanvas1.mipmaps[ 1 ] = mipmap( 64, '#0f0' );
 
 				textureCanvas1.mipmaps[ 2 ] = mipmap( 32, '#00f' );
 
@@ -118,23 +125,23 @@
 
 				textureCanvas1.mipmaps[ 6 ] = mipmap( 2, '#044' );
 
 				textureCanvas1.mipmaps[ 7 ] = mipmap( 1, '#404' );
 
 				textureCanvas1.repeat.set( 1000, 1000 );
 
-				textureCanvas1.wrapS = THREE.RepeatWrapping;
 
-				textureCanvas1.wrapT = THREE.RepeatWrapping;
 
+				textureCanvas1.wrapS = RepeatWrapping;
 
+				textureCanvas1.wrapT = RepeatWrapping;
 
 
 				var textureCanvas2 = textureCanvas1.clone();
 
-				textureCanvas2.magFilter = THREE.NearestFilter;
 
-				textureCanvas2.minFilter = THREE.NearestMipMapNearestFilter;
 
+				textureCanvas2.magFilter = NearestFilter;
 
+				textureCanvas2.minFilter = NearestMipMapNearestFilter;
 
 
-				var materialCanvas1 = new THREE.MeshBasicMaterial( { map: textureCanvas1 } );
 
-				var materialCanvas2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
+				var materialCanvas1 = new MeshBasicMaterial( { map: textureCanvas1 } );
 
+				var materialCanvas2 = new MeshBasicMaterial( { color: 0xffccaa, map: textureCanvas2 } );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
 
-				var meshCanvas1 = new THREE.Mesh( geometry, materialCanvas1 );
 
+				var meshCanvas1 = new Mesh( geometry, materialCanvas1 );
 
 				meshCanvas1.rotation.x = - Math.PI / 2;
 
 				meshCanvas1.scale.set( 1000, 1000, 1000 );
 
 
-				var meshCanvas2 = new THREE.Mesh( geometry, materialCanvas2 );
 
+				var meshCanvas2 = new Mesh( geometry, materialCanvas2 );
 
 				meshCanvas2.rotation.x = - Math.PI / 2;
 
 				meshCanvas2.scale.set( 1000, 1000, 1000 );
 
 
@@ -151,9 +158,9 @@
 
 					scene1.add( meshCanvas1 );
 
 					scene2.add( meshCanvas2 );
 
 
-					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-					var mesh1 = new THREE.Mesh( geometry, materialPainting1 );
 
-					var mesh2 = new THREE.Mesh( geometry, materialPainting2 );
 
+					var geometry = new PlaneBufferGeometry( 100, 100 );
 
+					var mesh1 = new Mesh( geometry, materialPainting1 );
 
+					var mesh2 = new Mesh( geometry, materialPainting2 );
 
 
 					addPainting( scene1, mesh1 );
 
 					addPainting( scene2, mesh2 );
 
@@ -165,13 +172,13 @@
 
 
 						zscene.add( zmesh );
 
 
-						var meshFrame = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000 } ) );
 
+						var meshFrame = new Mesh( geometry, new MeshBasicMaterial( { color: 0x000000 } ) );
 
 						meshFrame.position.z = - 10.0;
 
 						meshFrame.scale.x = 1.1 * image.width / 100;
 
 						meshFrame.scale.y = 1.1 * image.height / 100;
 
 						zscene.add( meshFrame );
 
 
-						var meshShadow = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
 
+						var meshShadow = new Mesh( geometry, new MeshBasicMaterial( { color: 0x000000, opacity: 0.75, transparent: true } ) );
 
 						meshShadow.position.y = - 1.1 * image.height / 2;
 
 						meshShadow.position.z = - 1.1 * image.height / 2;
 
 						meshShadow.rotation.x = - Math.PI / 2;
 
@@ -187,16 +194,16 @@
 
 
 				};
 
 
-				var texturePainting1 = new THREE.TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
 
-				var texturePainting2 = new THREE.Texture();
 
-				var materialPainting1 = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } );
 
-				var materialPainting2 = new THREE.MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
+				var texturePainting1 = new TextureLoader().load( "textures/758px-Canestra_di_frutta_(Caravaggio).jpg", callbackPainting );
 
+				var texturePainting2 = new Texture();
 
+				var materialPainting1 = new MeshBasicMaterial( { color: 0xffffff, map: texturePainting1 } );
 
+				var materialPainting2 = new MeshBasicMaterial( { color: 0xffccaa, map: texturePainting2 } );
 
 
-				texturePainting2.minFilter = texturePainting2.magFilter = THREE.NearestFilter;
 
-				texturePainting1.minFilter = texturePainting1.magFilter = THREE.LinearFilter;
 
-				texturePainting1.mapping = THREE.UVMapping;
 
+				texturePainting2.minFilter = texturePainting2.magFilter = NearestFilter;
 
+				texturePainting1.minFilter = texturePainting1.magFilter = LinearFilter;
 
+				texturePainting1.mapping = UVMapping;
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.autoClear = false;
 
@@ -204,9 +211,6 @@
 
 				renderer.domElement.style.position = "relative";
 
 				container.appendChild( renderer.domElement );
 
 
-				stats = new Stats();
 
-				//container.appendChild( stats.dom );
 
-
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 			}
 
@@ -224,9 +228,7 @@
 
 
 				requestAnimationFrame( animate );
 
 
-				stats.begin();
 
 				render();
 
-				stats.end();
 
 
 			}

+ 31 - 25
examples/webgl_materials_texture_partialupdate.html
View File 

@@ -5,10 +5,6 @@
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-
 
 	</head>
 
 	<body>
 
 
@@ -17,13 +13,23 @@
 
 			replace parts of an existing texture with all data of another texture
 
 		</div>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				Clock,
 
+				Color,
 
+				DataTexture,
 
+				LinearFilter,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RGBFormat,
 
+				Scene,
 
+				TextureLoader,
 
+				Vector2,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer, clock, dataTexture, diffuseMap;
 
 
@@ -31,22 +37,22 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 
 				camera.position.z = 2;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
-				var loader = new THREE.TextureLoader();
 
+				var loader = new TextureLoader();
 
 				diffuseMap = loader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg', animate );
 
-				diffuseMap.minFilter = THREE.LinearFilter;
 
+				diffuseMap.minFilter = LinearFilter;
 
 				diffuseMap.generateMipmaps = false;
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
-				var material = new THREE.MeshBasicMaterial( { map: diffuseMap } );
 
+				var geometry = new PlaneBufferGeometry( 2, 2 );
 
+				var material = new MeshBasicMaterial( { map: diffuseMap } );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
 				//
 
@@ -55,11 +61,11 @@
 
 				var height = 32;
 
 
 				var data = new Uint8Array( width * height * 3 );
 
-				dataTexture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
 
+				dataTexture = new DataTexture( data, width, height, RGBFormat );
 
 
 				//
 
 
-				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 );
 
@@ -80,7 +86,7 @@
 
 			}
 
 
 			var last = 0;
 
-			var position = new THREE.Vector2();
 
+			var position = new Vector2();
 
 
 			function animate() {
 
 
@@ -92,8 +98,8 @@
 
 
 					last = elapsedTime;
 
 
-					position.x = ( 32 * THREE.Math.randInt( 1, 16 ) ) - 32;
 
-					position.y = ( 32 * THREE.Math.randInt( 1, 16 ) ) - 32;
 
+					position.x = ( 32 * _Math.randInt( 1, 16 ) ) - 32;
 
+					position.y = ( 32 * _Math.randInt( 1, 16 ) ) - 32;
 
 
 					// generate new color data
 
 
@@ -109,7 +115,7 @@
 
 
 			}
 
 
-			var color = new THREE.Color();
 
+			var color = new Color();
 
 
 			function updateDataTexture( texture ) {

+ 24 - 25
examples/webgl_materials_texture_rotation.html
View File 

@@ -12,21 +12,20 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - texture rotation
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				RepeatWrapping,
 
+				Scene,
 
+				TextureLoader,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var mesh, renderer, scene, camera;
 
 
@@ -46,35 +45,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 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 10, 15, 25 );
 
 				scene.add( camera );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.addEventListener( 'change', render );
 
 				controls.minDistance = 20;
 
 				controls.maxDistance = 50;
 
 				controls.maxPolarAngle = Math.PI / 2;
 
 
-				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 
+				var geometry = new BoxBufferGeometry( 10, 10, 10 );
 
 
-				new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg', function ( texture ) {
 
+				new TextureLoader().load( 'textures/UV_Grid_Sm.jpg', function ( texture ) {
 
 
-					texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
+					texture.wrapS = texture.wrapT = RepeatWrapping;
 
 					texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
 
 					//texture.matrixAutoUpdate = false; // default true; set to false to update texture.matrix manually
 
 
-					var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+					var material = new MeshBasicMaterial( { map: texture } );
 
 
-					mesh = new THREE.Mesh( geometry, material );
 
+					mesh = new Mesh( geometry, material );
 
 					scene.add( mesh );
 
 
 					updateUvTransform();
 
@@ -140,7 +139,7 @@
 
 
 			function initGui() {
 
 
-				gui = new dat.GUI();
 
+				gui = new GUI();
 
 
 				gui.add( API, 'offsetX', 0.0, 1.0 ).name( 'offset.x' ).onChange( updateUvTransform );
 
 				gui.add( API, 'offsetY', 0.0, 1.0 ).name( 'offset.y' ).onChange( updateUvTransform );

+ 43 - 34
examples/webgl_materials_translucency.html
View File 

@@ -13,22 +13,31 @@
 
 		<br/>Fast subsurface scattering in Blinn-Phong shading demo<br/>
 
 		[Thanks for the art support from <a href="https://github.com/shaochun" target="_blank" rel="noopener">Shaochun Lin</a>]
 
 	</div>
 
-	<script src="../build/three.js"></script>
 
-	<script src="js/controls/OrbitControls.js"></script>
 
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-	<script src="js/libs/dat.gui.min.js"></script>
 
-	<script src="js/loaders/FBXLoader.js"></script>
 
-	<script src="js/shaders/TranslucentShader.js"></script>
 
-
 
-	<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-		}
 
+	<script type="module">
 
+		import {
 
+			AmbientLight,
 
+			DirectionalLight,
 
+			Mesh,
 
+			MeshBasicMaterial,
 
+			PerspectiveCamera,
 
+			PointLight,
 
+			RepeatWrapping,
 
+			Scene,
 
+			ShaderMaterial,
 
+			SphereBufferGeometry,
 
+			TextureLoader,
 
+			UniformsUtils,
 
+			Vector3,
 
+			WebGLRenderer,
 
+		} from "../build/three.module.js";
 
+
 
+		import Stats from './jsm/libs/stats.module.js';
 
+
 
+		import { GUI } from './jsm/libs/dat.gui.module.js';
 
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+		import { TranslucentShader } from './jsm/shaders/TranslucentShader.js';
 
+		import { FBXLoader } from './jsm/loaders/FBXLoader.js';
 
 
 		var container, stats;
 
 		var camera, scene, renderer;
 
@@ -42,34 +51,34 @@
 
 			container = document.createElement( 'div' );
 
 			document.body.appendChild( container );
 
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
 
+			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
 
 			camera.position.set( 0.0, 300, 400 * 4 );
 
 
-			scene = new THREE.Scene();
 
+			scene = new Scene();
 
 
 			// Lights
 
 
-			scene.add( new THREE.AmbientLight( 0x888888 ) );
 
+			scene.add( new AmbientLight( 0x888888 ) );
 
 
-			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
 
+			var directionalLight = new DirectionalLight( 0xffffff, 0.03 );
 
 			directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
 
 			scene.add( directionalLight );
 
 
-			var pointLight1 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888888 } ) );
 
-			pointLight1.add( new THREE.PointLight( 0x888888, 7.0, 300 ) );
 
+			var pointLight1 = new Mesh( new SphereBufferGeometry( 4, 8, 8 ), new MeshBasicMaterial( { color: 0x888888 } ) );
 
+			pointLight1.add( new PointLight( 0x888888, 7.0, 300 ) );
 
 			scene.add( pointLight1 );
 
 			pointLight1.position.x = 0;
 
 			pointLight1.position.y = - 50;
 
 			pointLight1.position.z = 350;
 
 
-			var pointLight2 = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888800 } ) );
 
-			pointLight2.add( new THREE.PointLight( 0x888800, 1.0, 500 ) );
 
+			var pointLight2 = new Mesh( new SphereBufferGeometry( 4, 8, 8 ), new MeshBasicMaterial( { color: 0x888800 } ) );
 
+			pointLight2.add( new PointLight( 0x888800, 1.0, 500 ) );
 
 			scene.add( pointLight2 );
 
 			pointLight2.position.x = - 100;
 
 			pointLight2.position.y = 20;
 
 			pointLight2.position.z = - 260;
 
 
-			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 );
 
@@ -82,7 +91,7 @@
 
 			stats = new Stats();
 
 			container.appendChild( stats.dom );
 
 
-			var controls = new THREE.OrbitControls( camera, container );
 
+			var controls = new OrbitControls( camera, container );
 
 
 			window.addEventListener( 'resize', onWindowResize, false );
 
 
@@ -92,28 +101,28 @@
 
 
 		function initMaterial() {
 
 
-			var loader = new THREE.TextureLoader();
 
+			var loader = new TextureLoader();
 
 			var imgTexture = loader.load( 'models/fbx/white.jpg' );
 
 			var thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
 
-			imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+			imgTexture.wrapS = imgTexture.wrapT = RepeatWrapping;
 
 
-			var shader = THREE.TranslucentShader;
 
-			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
+			var shader = TranslucentShader;
 
+			var uniforms = UniformsUtils.clone( shader.uniforms );
 
 
 			uniforms[ 'map' ].value = imgTexture;
 
 
-			uniforms[ 'diffuse' ].value = new THREE.Vector3( 1.0, 0.2, 0.2 );
 
+			uniforms[ 'diffuse' ].value = new Vector3( 1.0, 0.2, 0.2 );
 
 			uniforms[ 'shininess' ].value = 500;
 
 
 			uniforms[ 'thicknessMap' ].value = thicknessTexture;
 
-			uniforms[ 'thicknessColor' ].value = new THREE.Vector3( 0.5, 0.3, 0.0 );
 
+			uniforms[ 'thicknessColor' ].value = new Vector3( 0.5, 0.3, 0.0 );
 
 			uniforms[ 'thicknessDistortion' ].value = 0.1;
 
 			uniforms[ 'thicknessAmbient' ].value = 0.4;
 
 			uniforms[ 'thicknessAttenuation' ].value = 0.8;
 
 			uniforms[ 'thicknessPower' ].value = 2.0;
 
 			uniforms[ 'thicknessScale' ].value = 16.0;
 
 
-			var material = new THREE.ShaderMaterial( {
 
+			var material = new ShaderMaterial( {
 
 				uniforms: uniforms,
 
 				vertexShader: shader.vertexShader,
 
 				fragmentShader: shader.fragmentShader,
 
@@ -123,7 +132,7 @@
 
 
 			// LOADER
 
 
-			var loader = new THREE.FBXLoader();
 
+			var loader = new FBXLoader();
 
 			loader.load( 'models/fbx/stanford-bunny.fbx', function ( object ) {
 
 
 				model = object.children[ 0 ];
 
@@ -140,7 +149,7 @@
 
 
 		function initGUI( uniforms ) {
 
 
-			var gui = new dat.GUI();
 
+			var gui = new GUI();
 
 
 			var ThicknessControls = function () {

+ 36 - 34
examples/webgl_materials_transparency.html
View File 

@@ -11,26 +11,28 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - Transparency with Premultiplied Alpha (right) and without (left)<br /> using RGBA8 Buffers by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.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 {
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				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';
 
 
 			var params = { opacity: 0.25 };
 
 
 			var container, stats;
 
-			var camera, scene, renderer, controls;
 
+			var camera, scene, renderer;
 
 
 			init();
 
 			animate();
 
@@ -40,27 +42,27 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 40, 40 * 3.5 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				//
 
 
-				var geometry = new THREE.SphereBufferGeometry( 18, 30, 30 );
 
+				var geometry = new SphereBufferGeometry( 18, 30, 30 );
 
 
-				var material1 = new THREE.MeshStandardMaterial( {
 
+				var material1 = new MeshStandardMaterial( {
 
 					opacity: params.opacity,
 
 					transparent: true
 
 				} );
 
 
-				var material2 = new THREE.MeshStandardMaterial( {
 
+				var material2 = new MeshStandardMaterial( {
 
 					opacity: params.opacity,
 
 					premultipliedAlpha: true,
 
 					transparent: true
 
 				} );
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 				textureLoader.load( "textures/hardwood2_diffuse.jpg", function ( map ) {
 
 
 					map.anisotropy = 8;
 
@@ -72,7 +74,7 @@
 
 
 				} );
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 				textureLoader.load( "textures/hardwood2_roughness.jpg", function ( map ) {
 
 
 					map.anisotropy = 8;
 
@@ -84,32 +86,32 @@
 
 
 				} );
 
 
-				var mesh = new THREE.Mesh( geometry, material1 );
 
+				var mesh = new Mesh( geometry, material1 );
 
 				mesh.position.x = - 25.0;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry, material2 );
 
+				var mesh = new Mesh( geometry, material2 );
 
 				mesh.position.x = 25.0;
 
 				scene.add( mesh );
 
 
 				//
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 800, 800 );
 
-				var material = new THREE.MeshStandardMaterial( { color: 0x333333 } );
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var geometry = new PlaneBufferGeometry( 800, 800 );
 
+				var material = new MeshStandardMaterial( { color: 0x333333 } );
 
+				var mesh = new Mesh( geometry, material );
 
 				mesh.position.y = - 50;
 
 				mesh.rotation.x = - Math.PI * 0.5;
 
 				scene.add( mesh );
 
 
 				// Lights
 
 
-				var spotLight = new THREE.SpotLight( 0xff8888 );
 
+				var spotLight = new SpotLight( 0xff8888 );
 
 				spotLight.position.set( 100, 200, 100 );
 
 				spotLight.angle = Math.PI / 6;
 
 				spotLight.penumbra = 0.9;
 
 				scene.add( spotLight );
 
 
-				var spotLight = new THREE.SpotLight( 0x8888ff );
 
+				var spotLight = new SpotLight( 0x8888ff );
 
 				spotLight.position.set( - 100, - 200, - 100 );
 
 				spotLight.angle = Math.PI / 6;
 
 				spotLight.penumbra = 0.9;
 
@@ -117,7 +119,7 @@
 
 
 				//
 
 
-				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;
 
@@ -129,11 +131,11 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 				gui.add( params, 'opacity', 0, 1 ).onChange( function () {
 
 
 					material1.opacity = params.opacity;
 
@@ -174,7 +176,7 @@
 
 
 					var object = scene.children[ i ];
 
 
-					if ( object.geometry instanceof THREE.SphereBufferGeometry ) {
 
+					if ( object.geometry instanceof SphereBufferGeometry ) {
 
 
 						object.rotation.x = performance.now() * 0.0002;
 
 						object.rotation.y = - performance.now() * 0.0002;

+ 53 - 42
examples/webgl_materials_variations_basic.html
View File 

@@ -11,26 +11,37 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Basic Material Variantions by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				CubeTextureLoader,
 
+				DirectionalLight,
 
+				FontLoader,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				TextBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer, controls;
 
+			var camera, scene, renderer;
 
 			var particleLight;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -43,23 +54,23 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 
 				//
 
 
-				var reflectionCube = new THREE.CubeTextureLoader()
 
+				var reflectionCube = new CubeTextureLoader()
 
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				reflectionCube.format = THREE.RGBFormat;
 
+				reflectionCube.format = RGBFormat;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 				scene.background = reflectionCube;
 
 
 				// Materials
 
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
-				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				var imgTexture = new TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = RepeatWrapping;
 
 				imgTexture.anisotropy = 16;
 
 				imgTexture = null;
 
 
@@ -68,7 +79,7 @@
 
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
 				var stepSize = 1.0 / numberOfSphersPerSide;
 
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+				var geometry = new SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
 				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
 
@@ -76,16 +87,16 @@
 
 
 						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
+							var diffuseColor = new Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
 
-							var material = new THREE.MeshBasicMaterial( {
 
+							var material = new MeshBasicMaterial( {
 
 								map: imgTexture,
 
 								color: diffuseColor,
 
 								reflectivity: beta,
 
 								envMap: alpha < 0.5 ? reflectionCube : null
 
 							} );
 
 
-							var mesh = new THREE.Mesh( geometry, material );
 
+							var mesh = new Mesh( geometry, material );
 
 
 							mesh.position.x = alpha * 400 - 200;
 
 							mesh.position.y = beta * 400 - 200;
 
@@ -101,7 +112,7 @@
 
 
 				function addLabel( name, location ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
 
+					var textGeo = new TextBufferGeometry( name, {
 
 
 						font: font,
 
 
@@ -111,42 +122,42 @@
 
 
 					} );
 
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var textMaterial = new MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new Mesh( textGeo, textMaterial );
 
 					textMesh.position.copy( location );
 
 					scene.add( textMesh );
 
 
 				}
 
 
-				addLabel( "+hue", new THREE.Vector3( - 350, 0, 0 ) );
 
-				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
 
+				addLabel( "+hue", new Vector3( - 350, 0, 0 ) );
 
+				addLabel( "-hue", new Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "-reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 
-				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "-reflectivity", new Vector3( 0, - 300, 0 ) );
 
+				addLabel( "+reflectivity", new Vector3( 0, 300, 0 ) );
 
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+				addLabel( "-diffuse", new Vector3( 0, 0, - 300 ) );
 
+				addLabel( "+diffuse", new Vector3( 0, 0, 300 ) );
 
 
-				addLabel( "envMap", new THREE.Vector3( - 350, 300, 0 ) );
 
-				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 
+				addLabel( "envMap", new Vector3( - 350, 300, 0 ) );
 
+				addLabel( "no envMap", new Vector3( 350, 300, 0 ) );
 
 
-				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
 
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+				scene.add( new AmbientLight( 0x222222 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				var pointLight = new PointLight( 0xffffff, 2, 800 );
 
 				particleLight.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 );
 
@@ -159,7 +170,7 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 54 - 42
examples/webgl_materials_variations_lambert.html
View File 

@@ -11,26 +11,38 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Lambert Material Variantions by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				CubeTextureLoader,
 
+				DirectionalLight,
 
+				FontLoader,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshLambertMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				TextBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer, controls;
 
+			var camera, scene, renderer;
 
 			var particleLight;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -43,23 +55,23 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 
 				//
 
 
-				var reflectionCube = new THREE.CubeTextureLoader()
 
+				var reflectionCube = new CubeTextureLoader()
 
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				reflectionCube.format = THREE.RGBFormat;
 
+				reflectionCube.format = RGBFormat;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 				scene.background = reflectionCube;
 
 
 				// Materials
 
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
-				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				var imgTexture = new TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = RepeatWrapping;
 
 				imgTexture.anisotropy = 16;
 
 				imgTexture = null;
 
 
@@ -68,7 +80,7 @@
 
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
 				var stepSize = 1.0 / numberOfSphersPerSide;
 
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+				var geometry = new SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
 				for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
 
@@ -76,16 +88,16 @@
 
 
 						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
+							var diffuseColor = new Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
 
-							var material = new THREE.MeshLambertMaterial( {
 
+							var material = new MeshLambertMaterial( {
 
 								map: imgTexture,
 
 								color: diffuseColor,
 
 								reflectivity: beta,
 
 								envMap: alpha < 0.5 ? reflectionCube : null
 
 							} );
 
 
-							var mesh = new THREE.Mesh( geometry, material );
 
+							var mesh = new Mesh( geometry, material );
 
 
 							mesh.position.x = alpha * 400 - 200;
 
 							mesh.position.y = beta * 400 - 200;
 
@@ -101,7 +113,7 @@
 
 
 				function addLabel( name, location ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
 
+					var textGeo = new TextBufferGeometry( name, {
 
 
 						font: font,
 
 
@@ -111,42 +123,42 @@
 
 
 					} );
 
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var textMaterial = new MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new Mesh( textGeo, textMaterial );
 
 					textMesh.position.copy( location );
 
 					scene.add( textMesh );
 
 
 				}
 
 
-				addLabel( "+hue", new THREE.Vector3( - 350, 0, 0 ) );
 
-				addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
 
+				addLabel( "+hue", new Vector3( - 350, 0, 0 ) );
 
+				addLabel( "-hue", new Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "-reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 
-				addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "-reflectivity", new Vector3( 0, - 300, 0 ) );
 
+				addLabel( "+reflectivity", new Vector3( 0, 300, 0 ) );
 
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+				addLabel( "-diffuse", new Vector3( 0, 0, - 300 ) );
 
+				addLabel( "+diffuse", new Vector3( 0, 0, 300 ) );
 
 
-				addLabel( "envMap", new THREE.Vector3( - 350, 300, 0 ) );
 
-				addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
 
+				addLabel( "envMap", new Vector3( - 350, 300, 0 ) );
 
+				addLabel( "no envMap", new Vector3( 350, 300, 0 ) );
 
 
-				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
 
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+				scene.add( new AmbientLight( 0x222222 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				var pointLight = new PointLight( 0xffffff, 2, 800 );
 
 				particleLight.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 );
 
@@ -159,7 +171,7 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 53 - 41
examples/webgl_materials_variations_phong.html
View File 

@@ -11,26 +11,38 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Phong Material Variantions by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				CubeTextureLoader,
 
+				DirectionalLight,
 
+				FontLoader,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				TextBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer, controls;
 
+			var camera, scene, renderer;
 
 			var particleLight;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -43,23 +55,23 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 
 				//
 
 
-				var reflectionCube = new THREE.CubeTextureLoader()
 
+				var reflectionCube = new CubeTextureLoader()
 
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				reflectionCube.format = THREE.RGBFormat;
 
+				reflectionCube.format = RGBFormat;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 				scene.background = reflectionCube;
 
 
 				// Materials
 
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
-				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				var imgTexture = new TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = RepeatWrapping;
 
 				imgTexture.anisotropy = 16;
 
 				imgTexture = null;
 
 
@@ -69,7 +81,7 @@
 
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
 				var stepSize = 1.0 / numberOfSphersPerSide;
 
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+				var geometry = new SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
 				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
 
@@ -77,14 +89,14 @@
 
 
 					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 
-						var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
 
+						var specularColor = new Color( beta * 0.2, beta * 0.2, beta * 0.2 );
 
 
 						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
 							// basic monochromatic energy preservation
 
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
+							var diffuseColor = new Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
 
-							var material = new THREE.MeshPhongMaterial( {
 
+							var material = new MeshPhongMaterial( {
 
 								map: imgTexture,
 
 								bumpMap: imgTexture,
 
 								bumpScale: bumpScale,
 
@@ -95,7 +107,7 @@
 
 								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
 
 							} );
 
 
-							var mesh = new THREE.Mesh( geometry, material );
 
+							var mesh = new Mesh( geometry, material );
 
 
 							mesh.position.x = alpha * 400 - 200;
 
 							mesh.position.y = beta * 400 - 200;
 
@@ -111,7 +123,7 @@
 
 
 				function addLabel( name, location ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
 
+					var textGeo = new TextBufferGeometry( name, {
 
 
 						font: font,
 
 
@@ -121,39 +133,39 @@
 
 
 					} );
 
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var textMaterial = new MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new Mesh( textGeo, textMaterial );
 
 					textMesh.position.copy( location );
 
 					scene.add( textMesh );
 
 
 				}
 
 
-				addLabel( "-shininess", new THREE.Vector3( - 350, 0, 0 ) );
 
-				addLabel( "+shininess", new THREE.Vector3( 350, 0, 0 ) );
 
+				addLabel( "-shininess", new Vector3( - 350, 0, 0 ) );
 
+				addLabel( "+shininess", new Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 
-				addLabel( "+specular, +reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "-specular, -reflectivity", new Vector3( 0, - 300, 0 ) );
 
+				addLabel( "+specular, +reflectivity", new Vector3( 0, 300, 0 ) );
 
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+				addLabel( "-diffuse", new Vector3( 0, 0, - 300 ) );
 
+				addLabel( "+diffuse", new Vector3( 0, 0, 300 ) );
 
 
-				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
 
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+				scene.add( new AmbientLight( 0x222222 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				var pointLight = new PointLight( 0xffffff, 2, 800 );
 
 				particleLight.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 );
 
@@ -166,7 +178,7 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 89 - 81
examples/webgl_materials_variations_physical.html
View File 

@@ -12,32 +12,40 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Physical Material Variations by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.<br/><br/>
 
 		Note: Every second sphere has an IBL environment map on it.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/RGBELoader.js"></script>
 
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
 
-
 
-		<script src="js/pmrem/PMREMGenerator.js"></script>
 
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				DirectionalLight,
 
+				FontLoader,
 
+				LinearFilter,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhysicalMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextBufferGeometry,
 
+				UnsignedByteType,
 
+				Uncharted2ToneMapping,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer, controls;
 
+			var camera, scene, renderer;
 
 			var particleLight;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -50,7 +58,7 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 
 				//
 
@@ -65,82 +73,82 @@
 
 
 				};
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 
 				var hdrCubeRenderTarget = null;
 
 
-				new THREE.HDRCubeTextureLoader()
 
-					.setType( THREE.UnsignedByteType )
 
+				new HDRCubeTextureLoader()
 
+					.setType( UnsignedByteType )
 
 					.load( hdrUrls, function ( hdrCubeMap ) {
 
 
-					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
 
-					pmremGenerator.update( renderer );
 
+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
 
+						pmremGenerator.update( renderer );
 
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
-					pmremCubeUVPacker.update( renderer );
 
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
+						pmremCubeUVPacker.update( renderer );
 
 
-					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
+						hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
 
-					// Materials
 
+						// Materials
 
 
-					var cubeWidth = 400;
 
-					var numberOfSphersPerSide = 5;
 
-					var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
-					var stepSize = 1.0 / numberOfSphersPerSide;
 
+						var cubeWidth = 400;
 
+						var numberOfSphersPerSide = 5;
 
+						var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
+						var stepSize = 1.0 / numberOfSphersPerSide;
 
 
-					var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+						var geometry = new SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
-					var index = 0;
 
+						var index = 0;
 
 
-					for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
+						for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
 
-						for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
+							for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 
-							for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
+								for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
-								var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.25 );
 
+									var diffuseColor = new Color().setHSL( alpha, 0.5, 0.25 );
 
 
-								var material = new THREE.MeshPhysicalMaterial( {
 
-									color: diffuseColor,
 
-									metalness: 0,
 
-									roughness: 0.5,
 
-									clearCoat: 1.0 - alpha,
 
-									clearCoatRoughness: 1.0 - beta,
 
-									reflectivity: 1.0 - gamma,
 
-									envMap: ( index % 2 ) == 1 ? hdrCubeRenderTarget.texture : null
 
-								} );
 
+									var material = new MeshPhysicalMaterial( {
 
+										color: diffuseColor,
 
+										metalness: 0,
 
+										roughness: 0.5,
 
+										clearCoat: 1.0 - alpha,
 
+										clearCoatRoughness: 1.0 - beta,
 
+										reflectivity: 1.0 - gamma,
 
+										envMap: ( index % 2 ) == 1 ? hdrCubeRenderTarget.texture : null
 
+									} );
 
 
-								index ++;
 
+									index ++;
 
+
 
+									var mesh = new Mesh( geometry, material );
 
 
-								var mesh = new THREE.Mesh( geometry, material );
 
+									mesh.position.x = alpha * 400 - 200;
 
+									mesh.position.y = beta * 400 - 200;
 
+									mesh.position.z = gamma * 400 - 200;
 
 
-								mesh.position.x = alpha * 400 - 200;
 
-								mesh.position.y = beta * 400 - 200;
 
-								mesh.position.z = gamma * 400 - 200;
 
+									scene.add( mesh );
 
 
-								scene.add( mesh );
 
+								}
 
+								index ++;
 
 
 							}
 
 							index ++;
 
 
 						}
 
-						index ++;
 
-
 
-					}
 
 
-					hdrCubeMap.magFilter = THREE.LinearFilter;
 
-					hdrCubeMap.needsUpdate = true;
 
-					scene.background = hdrCubeMap;
 
+						hdrCubeMap.magFilter = LinearFilter;
 
+						hdrCubeMap.needsUpdate = true;
 
+						scene.background = hdrCubeMap;
 
 
-					pmremGenerator.dispose();
 
-					pmremCubeUVPacker.dispose();
 
+						pmremGenerator.dispose();
 
+						pmremCubeUVPacker.dispose();
 
 
-				} );
 
+					} );
 
 
 				function addLabel( name, location ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
 
+					var textGeo = new TextBufferGeometry( name, {
 
 
 						font: font,
 
 
@@ -150,45 +158,45 @@
 
 
 					} );
 
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var textMaterial = new MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new Mesh( textGeo, textMaterial );
 
 					textMesh.position.copy( location );
 
 					scene.add( textMesh );
 
 
 				}
 
 
-				addLabel( "+clearCoat", new THREE.Vector3( - 350, 0, 0 ) );
 
-				addLabel( "-clearCoat", new THREE.Vector3( 350, 0, 0 ) );
 
+				addLabel( "+clearCoat", new Vector3( - 350, 0, 0 ) );
 
+				addLabel( "-clearCoat", new Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "+clearCoatRoughness", new THREE.Vector3( 0, - 300, 0 ) );
 
-				addLabel( "-clearCoatRoughness", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "+clearCoatRoughness", new Vector3( 0, - 300, 0 ) );
 
+				addLabel( "-clearCoatRoughness", new Vector3( 0, 300, 0 ) );
 
 
-				addLabel( "+reflectivity", new THREE.Vector3( 0, 0, - 300 ) );
 
-				addLabel( "-reflectivity", new THREE.Vector3( 0, 0, 300 ) );
 
+				addLabel( "+reflectivity", new Vector3( 0, 0, - 300 ) );
 
+				addLabel( "-reflectivity", new Vector3( 0, 0, 300 ) );
 
 
-				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
 
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+				scene.add( new AmbientLight( 0x222222 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				var pointLight = new PointLight( 0xffffff, 2, 800 );
 
 				particleLight.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 );
 
 
 				renderer.gammaOutput = true;
 
-				renderer.toneMapping = THREE.Uncharted2ToneMapping;
 
+				renderer.toneMapping = Uncharted2ToneMapping;
 
 				renderer.toneMappingExposure = 0.75;
 
 
 				//
 
@@ -196,7 +204,7 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 95 - 84
examples/webgl_materials_variations_standard.html
View File 

@@ -12,31 +12,42 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Standard Material Variations by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.<br/><br/>
 
 		Note: Every second sphere has an IBL environment map on it.</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/RGBELoader.js"></script>
 
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
 
-
 
-		<script src="js/pmrem/PMREMGenerator.js"></script>
 
-		<script src="js/pmrem/PMREMCubeUVPacker.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,
 
+				DirectionalLight,
 
+				FontLoader,
 
+				LinearFilter,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				TextBufferGeometry,
 
+				UnsignedByteType,
 
+				Uncharted2ToneMapping,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
 
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer, controls;
 
+			var camera, scene, renderer;
 
 			var particleLight;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -49,7 +60,7 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 
 				//
 
@@ -63,89 +74,89 @@
 
 
 				};
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
 
 				var hdrCubeRenderTarget = null;
 
 
 				// Materials
 
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
-				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				var imgTexture = new TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = RepeatWrapping;
 
 				imgTexture.anisotropy = 16;
 
 				imgTexture = null;
 
 
-				new THREE.HDRCubeTextureLoader()
 
-					.setType( THREE.UnsignedByteType )
 
+				new HDRCubeTextureLoader()
 
+					.setType( UnsignedByteType )
 
 					.load( hdrUrls, function ( hdrCubeMap ) {
 
 
-					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
 
-					pmremGenerator.update( renderer );
 
+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
 
+						pmremGenerator.update( renderer );
 
 
-					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
-					pmremCubeUVPacker.update( renderer );
 
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 
+						pmremCubeUVPacker.update( renderer );
 
 
-					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
+						hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
 
-					var bumpScale = 1;
 
-					var cubeWidth = 400;
 
-					var numberOfSphersPerSide = 5;
 
-					var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
-					var stepSize = 1.0 / numberOfSphersPerSide;
 
+						var bumpScale = 1;
 
+						var cubeWidth = 400;
 
+						var numberOfSphersPerSide = 5;
 
+						var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
+						var stepSize = 1.0 / numberOfSphersPerSide;
 
 
-					var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+						var geometry = new SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
-					var index = 0;
 
+						var index = 0;
 
 
-					for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
+						for ( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
 
 
-						for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
+							for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 
-							for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
+								for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
-								// basic monochromatic energy preservation
 
-								var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
+									// basic monochromatic energy preservation
 
+									var diffuseColor = new Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 );
 
 
-								var material = new THREE.MeshStandardMaterial( {
 
-									map: imgTexture,
 
-									bumpMap: imgTexture,
 
-									bumpScale: bumpScale,
 
-									color: diffuseColor,
 
-									metalness: beta,
 
-									roughness: 1.0 - alpha,
 
-									envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture
 
-								} );
 
+									var material = new MeshStandardMaterial( {
 
+										map: imgTexture,
 
+										bumpMap: imgTexture,
 
+										bumpScale: bumpScale,
 
+										color: diffuseColor,
 
+										metalness: beta,
 
+										roughness: 1.0 - alpha,
 
+										envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture
 
+									} );
 
 
-								index ++;
 
+									index ++;
 
 
-								var mesh = new THREE.Mesh( geometry, material );
 
+									var mesh = new Mesh( geometry, material );
 
 
-								mesh.position.x = alpha * 400 - 200;
 
-								mesh.position.y = beta * 400 - 200;
 
-								mesh.position.z = gamma * 400 - 200;
 
+									mesh.position.x = alpha * 400 - 200;
 
+									mesh.position.y = beta * 400 - 200;
 
+									mesh.position.z = gamma * 400 - 200;
 
 
-								scene.add( mesh );
 
+									scene.add( mesh );
 
 
-							}
 
+								}
 
 
-						}
 
+							}
 
 
-						index ++;
 
+							index ++;
 
 
-					}
 
+						}
 
 
-					hdrCubeMap.magFilter = THREE.LinearFilter;
 
-					hdrCubeMap.needsUpdate = true;
 
-					scene.background = hdrCubeMap;
 
+						hdrCubeMap.magFilter = LinearFilter;
 
+						hdrCubeMap.needsUpdate = true;
 
+						scene.background = hdrCubeMap;
 
 
-					pmremGenerator.dispose();
 
-					pmremCubeUVPacker.dispose();
 
+						pmremGenerator.dispose();
 
+						pmremCubeUVPacker.dispose();
 
 
-				} );
 
+					} );
 
 
 				function addLabel( name, location ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
 
+					var textGeo = new TextBufferGeometry( name, {
 
 
 						font: font,
 
 
@@ -155,45 +166,45 @@
 
 
 					} );
 
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var textMaterial = new MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new Mesh( textGeo, textMaterial );
 
 					textMesh.position.copy( location );
 
 					scene.add( textMesh );
 
 
 				}
 
 
-				addLabel( "+roughness", new THREE.Vector3( - 350, 0, 0 ) );
 
-				addLabel( "-roughness", new THREE.Vector3( 350, 0, 0 ) );
 
+				addLabel( "+roughness", new Vector3( - 350, 0, 0 ) );
 
+				addLabel( "-roughness", new Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "-metalness", new THREE.Vector3( 0, - 300, 0 ) );
 
-				addLabel( "+metalness", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "-metalness", new Vector3( 0, - 300, 0 ) );
 
+				addLabel( "+metalness", new Vector3( 0, 300, 0 ) );
 
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+				addLabel( "-diffuse", new Vector3( 0, 0, - 300 ) );
 
+				addLabel( "+diffuse", new Vector3( 0, 0, 300 ) );
 
 
-				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
 
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+				scene.add( new AmbientLight( 0x222222 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				var pointLight = new PointLight( 0xffffff, 2, 800 );
 
 				particleLight.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 );
 
 
 				renderer.gammaOutput = true;
 
-				renderer.toneMapping = THREE.Uncharted2ToneMapping;
 
+				renderer.toneMapping = Uncharted2ToneMapping;
 
 				renderer.toneMappingExposure = 0.75;
 
 
 				//
 
@@ -201,7 +212,7 @@
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 55 - 44
examples/webgl_materials_variations_toon.html
View File 

@@ -11,28 +11,39 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Toon Material Variantions with OutlineEffect</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/effects/OutlineEffect.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,
 
+				DirectionalLight,
 
+				FontLoader,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshToonMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RepeatWrapping,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				TextBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { OutlineEffect } from './jsm/effects/OutlineEffect.js';
 
 
 			var container, stats;
 
 
-			var camera, scene, renderer, controls, effect;
 
+			var camera, scene, renderer, effect;
 
 			var particleLight;
 
 
-			var loader = new THREE.FontLoader();
 
+			var loader = new FontLoader();
 
 			loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) {
 
 
 				init( font );
 
@@ -45,23 +56,23 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.set( 0.0, 400, 400 * 3.5 );
 
 
 				//
 
 
-				var reflectionCube = new THREE.CubeTextureLoader()
 
+				var reflectionCube = new CubeTextureLoader()
 
 					.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				reflectionCube.format = THREE.RGBFormat;
 
+				reflectionCube.format = RGBFormat;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 				scene.background = reflectionCube;
 
 
 				// Materials
 
 
-				var imgTexture = new THREE.TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
-				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
+				var imgTexture = new TextureLoader().load( "textures/planets/moon_1024.jpg" );
 
+				imgTexture.wrapS = imgTexture.wrapT = RepeatWrapping;
 
 				imgTexture.anisotropy = 16;
 
 				imgTexture = null;
 
 
@@ -71,7 +82,7 @@
 
 				var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
 
 				var stepSize = 1.0 / numberOfSphersPerSide;
 
 
-				var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
 
+				var geometry = new SphereBufferGeometry( sphereRadius, 32, 16 );
 
 
 				for ( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
 
 
@@ -79,14 +90,14 @@
 
 
 					for ( var beta = 0; beta <= 1.0; beta += stepSize ) {
 
 
-						var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
 
+						var specularColor = new Color( beta * 0.2, beta * 0.2, beta * 0.2 );
 
 
 						for ( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
 
 
 							// basic monochromatic energy preservation
 
-							var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
+							var diffuseColor = new Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
 
-							var material = new THREE.MeshToonMaterial( {
 
+							var material = new MeshToonMaterial( {
 
 								map: imgTexture,
 
 								bumpMap: imgTexture,
 
 								bumpScale: bumpScale,
 
@@ -97,7 +108,7 @@
 
 								envMap: alphaIndex % 2 === 0 ? null : reflectionCube
 
 							} );
 
 
-							var mesh = new THREE.Mesh( geometry, material );
 
+							var mesh = new Mesh( geometry, material );
 
 
 							mesh.position.x = alpha * 400 - 200;
 
 							mesh.position.y = beta * 400 - 200;
 
@@ -113,7 +124,7 @@
 
 
 				function addLabel( name, location ) {
 
 
-					var textGeo = new THREE.TextBufferGeometry( name, {
 
+					var textGeo = new TextBufferGeometry( name, {
 
 
 						font: font,
 
 
@@ -123,39 +134,39 @@
 
 
 					} );
 
 
-					var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
 
-					var textMesh = new THREE.Mesh( textGeo, textMaterial );
 
+					var textMaterial = new MeshBasicMaterial( { color: 0xffffff } );
 
+					var textMesh = new Mesh( textGeo, textMaterial );
 
 					textMesh.position.copy( location );
 
 					scene.add( textMesh );
 
 
 				}
 
 
-				addLabel( "-shininess", new THREE.Vector3( - 350, 0, 0 ) );
 
-				addLabel( "+shininess", new THREE.Vector3( 350, 0, 0 ) );
 
+				addLabel( "-shininess", new Vector3( - 350, 0, 0 ) );
 
+				addLabel( "+shininess", new Vector3( 350, 0, 0 ) );
 
 
-				addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, - 300, 0 ) );
 
-				addLabel( "+specular, +reflectivity", new THREE.Vector3( 0, 300, 0 ) );
 
+				addLabel( "-specular, -reflectivity", new Vector3( 0, - 300, 0 ) );
 
+				addLabel( "+specular, +reflectivity", new Vector3( 0, 300, 0 ) );
 
 
-				addLabel( "-diffuse", new THREE.Vector3( 0, 0, - 300 ) );
 
-				addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
 
+				addLabel( "-diffuse", new Vector3( 0, 0, - 300 ) );
 
+				addLabel( "+diffuse", new Vector3( 0, 0, 300 ) );
 
 
-				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
 
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
+				scene.add( new AmbientLight( 0x222222 ) );
 
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
+				var directionalLight = new DirectionalLight( 0xffffff, 1 );
 
 				directionalLight.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( directionalLight );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
 
+				var pointLight = new PointLight( 0xffffff, 2, 800 );
 
 				particleLight.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 );
 
@@ -163,14 +174,14 @@
 
 				renderer.gammaInput = true;
 
 				renderer.gammaOutput = true;
 
 
-				effect = new THREE.OutlineEffect( renderer );
 
+				effect = new OutlineEffect( renderer );
 
 
 				//
 
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 29 - 32
examples/webgl_materials_video.html
View File 

@@ -58,31 +58,28 @@
 
 			playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/shaders/ConvolutionShader.js"></script>
 
-		<script src="js/shaders/CopyShader.js"></script>
 
-
 
-		<script src="js/postprocessing/EffectComposer.js"></script>
 
-		<script src="js/postprocessing/RenderPass.js"></script>
 
-		<script src="js/postprocessing/MaskPass.js"></script>
 
-		<script src="js/postprocessing/BloomPass.js"></script>
 
-		<script src="js/postprocessing/ShaderPass.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
 		<video id="video" loop crossOrigin="anonymous" webkit-playsinline style="display:none">
 
 			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 
 			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 
 		</video>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshLambertMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				VideoTexture,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
 
+			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
 
+			import { BloomPass } from './jsm/postprocessing/BloomPass.js';
 
+			import { CopyShader } from './jsm/shaders/CopyShader.js';
 
 
 			var container;
 
 
@@ -122,16 +119,16 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 500;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0.5, 1, 1 ).normalize();
 
 				scene.add( light );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -139,7 +136,7 @@
 
 				video = document.getElementById( 'video' );
 
 				video.play();
 
 
-				texture = new THREE.VideoTexture( video );
 
+				texture = new VideoTexture( video );
 
 
 				//
 
 
@@ -163,11 +160,11 @@
 
 						ox = i;
 
 						oy = j;
 
 
-						geometry = new THREE.BoxBufferGeometry( xsize, ysize, xsize );
 
+						geometry = new BoxBufferGeometry( xsize, ysize, xsize );
 
 
 						change_uvs( geometry, ux, uy, ox, oy );
 
 
-						materials[ cube_count ] = new THREE.MeshLambertMaterial( parameters );
 
+						materials[ cube_count ] = new MeshLambertMaterial( parameters );
 
 
 						material = materials[ cube_count ];
 
 
@@ -176,7 +173,7 @@
 
 
 						material.color.setHSL( material.hue, material.saturation, 0.5 );
 
 
-						mesh = new THREE.Mesh( geometry, material );
 
+						mesh = new Mesh( geometry, material );
 
 
 						mesh.position.x = ( i - xgrid / 2 ) * xsize;
 
 						mesh.position.y = ( j - ygrid / 2 ) * ysize;
 
@@ -201,11 +198,11 @@
 
 
 				// postprocessing
 
 
-				var renderModel = new THREE.RenderPass( scene, camera );
 
-				var effectBloom = new THREE.BloomPass( 1.3 );
 
-				var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
 
+				var renderModel = new RenderPass( scene, camera );
 
+				var effectBloom = new BloomPass( 1.3 );
 
+				var effectCopy = new ShaderPass( CopyShader );
 
 
-				composer = new THREE.EffectComposer( renderer );
 
+				composer = new EffectComposer( renderer );
 
 
 				composer.addPass( renderModel );
 
 				composer.addPass( effectBloom );

+ 19 - 18
examples/webgl_materials_video_webcam.html
View File 

@@ -12,19 +12,20 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - video webcam input
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="../examples/js/controls/OrbitControls.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-
 
 		<video id="video" autoplay style="display:none"></video>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
+		<script type="module">
 
+			import {
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				VideoTexture,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var camera, scene, renderer, video;
 
 
@@ -33,18 +34,18 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 
 				camera.position.z = 0.01;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				video = document.getElementById( 'video' );
 
 
-				var texture = new THREE.VideoTexture( video );
 
+				var texture = new VideoTexture( video );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 16, 9 );
 
+				var geometry = new PlaneBufferGeometry( 16, 9 );
 
 				geometry.scale( 0.5, 0.5, 0.5 );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				var material = new MeshBasicMaterial( { map: texture } );
 
 
 				var count = 128;
 
 				var radius = 32;
 
@@ -54,19 +55,19 @@
 
 					var phi = Math.acos( - 1 + ( 2 * i ) / l );
 
 					var theta = Math.sqrt( l * Math.PI ) * phi;
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 					mesh.position.setFromSphericalCoords( radius, phi, theta );
 
 					mesh.lookAt( camera.position );
 
 					scene.add( mesh );
 
 
 				}
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.enableZoom = false;
 
 				controls.enablePan = false;

+ 32 - 19
examples/webgl_materials_wireframe.html
View File 

@@ -7,8 +7,9 @@
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl wireframe demo
 
+		</div>
 
 
 		<script type="x-shader/x-vertex" id="vertexShader">
 
 
@@ -44,7 +45,19 @@
 
 
 		</script>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				BufferAttribute,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				ShaderMaterial,
 
+				SphereBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 
@@ -57,28 +70,28 @@
 
 
 				var size = 150;
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.z = 800;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				//
 
 
-				geometry = new THREE.BoxBufferGeometry( size, size, size );
 
-				material = new THREE.MeshBasicMaterial( { wireframe: true } );
 
+				geometry = new BoxBufferGeometry( size, size, size );
 
+				material = new MeshBasicMaterial( { wireframe: true } );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.x = - 150;
 
 				scene.add( mesh );
 
 
 				//
 
 
-				geometry = new THREE.BoxBufferGeometry( size, size, size );
 
+				geometry = new BoxBufferGeometry( size, size, size );
 
 				geometry = geometry.toNonIndexed();
 
 
 				setupAttributes( geometry );
 
 
-				material = new THREE.ShaderMaterial( {
 
+				material = new ShaderMaterial( {
 
 					uniforms: {},
 
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
@@ -86,18 +99,18 @@
 
 
 				material.extensions.derivatives = true;
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.x = 150;
 
 				scene.add( mesh );
 
 
 				//
 
 
-				geometry = new THREE.SphereBufferGeometry( size / 2, 32, 16 );
 
+				geometry = new SphereBufferGeometry( size / 2, 32, 16 );
 
 				geometry = geometry.toNonIndexed();
 
 
 				setupAttributes( geometry );
 
 
-				material = new THREE.ShaderMaterial( {
 
+				material = new ShaderMaterial( {
 
 					uniforms: {},
 
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
@@ -105,13 +118,13 @@
 
 
 				material.extensions.derivatives = true;
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.position.x = - 150;
 
 				scene.add( mesh );
 
 
 				// 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 );
 
@@ -127,9 +140,9 @@
 
 				// TODO: Bring back quads
 
 
 				var vectors = [
 
-					new THREE.Vector3( 1, 0, 0 ),
 
-					new THREE.Vector3( 0, 1, 0 ),
 
-					new THREE.Vector3( 0, 0, 1 )
 
+					new Vector3( 1, 0, 0 ),
 
+					new Vector3( 0, 1, 0 ),
 
+					new Vector3( 0, 0, 1 )
 
 				];
 
 
 				var position = geometry.attributes.position;
 
@@ -141,7 +154,7 @@
 
 
 				}
 
 
-				geometry.addAttribute( 'center', new THREE.BufferAttribute( centers, 3 ) );
 
+				geometry.addAttribute( 'center', new BufferAttribute( centers, 3 ) );
 
 
 			}

+ 76 - 72
examples/webgl_math_orientation_transform.html
View File 

@@ -5,10 +5,6 @@
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-
 
 	</head>
 
 	<body>
 
 
@@ -17,114 +13,122 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - gradually transform an orientation to a target orientation
 
 		</div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				ConeBufferGeometry,
 
+				Clock,
 
+				Matrix4,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshNormalMaterial,
 
+				PerspectiveCamera,
 
+				Quaternion,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				Spherical,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var camera, scene, renderer, mesh, target;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var spherical = new Spherical();
 
+			var rotationMatrix = new Matrix4();
 
+			var targetRotation = new Quaternion();
 
+			var clock = new Clock();
 
+			var speed = 2;
 
 
-		}
 
+			init();
 
+			animate();
 
 
-		var camera, scene, renderer, mesh, target;
 
+			function init() {
 
 
-		var spherical = new THREE.Spherical();
 
-		var rotationMatrix = new THREE.Matrix4();
 
-		var targetRotation = new THREE.Quaternion();
 
-		var clock = new THREE.Clock();
 
-		var speed = 2;
 
+				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 
+				camera.position.z = 5;
 
 
-		init();
 
-		animate();
 
+				scene = new Scene();
 
 
-		function init() {
 
+				var geometry = new ConeBufferGeometry( 0.1, 0.5, 8 );
 
+				geometry.rotateX( Math.PI * 0.5 );
 
+				var material = new MeshNormalMaterial();
 
 
-			camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
 
-			camera.position.z = 5;
 
+				mesh = new Mesh( geometry, material );
 
+				scene.add( mesh );
 
 
-			scene = new THREE.Scene();
 
+				//
 
 
-			var geometry = new THREE.ConeBufferGeometry( 0.1, 0.5, 8 );
 
-			geometry.rotateX( Math.PI * 0.5 );
 
-			var material = new THREE.MeshNormalMaterial();
 
+				var targetGeometry = new SphereBufferGeometry( 0.05 );
 
+				var targetMaterial = new MeshBasicMaterial( { color: 0xff0000 } );
 
+				target = new Mesh( targetGeometry, targetMaterial );
 
+				scene.add( target );
 
 
-			mesh = new THREE.Mesh( geometry, material );
 
-			scene.add( mesh );
 
+				//
 
 
-			//
 
+				var sphereGeometry = new SphereBufferGeometry( 2, 32, 32 );
 
+				var sphereMaterial = new MeshBasicMaterial( { color: 0xcccccc, wireframe: true, transparent: true, opacity: 0.3 } );
 
+				var sphere = new Mesh( sphereGeometry, sphereMaterial );
 
+				scene.add( sphere );
 
 
-			var targetGeometry = new THREE.SphereBufferGeometry( 0.05 );
 
-			var targetMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-			target = new THREE.Mesh( targetGeometry, targetMaterial );
 
-			scene.add( target );
 
+				//
 
 
-			//
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
 
-			var sphereGeometry = new THREE.SphereBufferGeometry( 2, 32, 32 );
 
-			var sphereMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc, wireframe: true, transparent: true, opacity: 0.3 } );
 
-			var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 
-			scene.add( sphere );
 
+				//
 
 
-			//
 
+				window.addEventListener( 'resize', onResize, false );
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			document.body.appendChild( renderer.domElement );
 
+				//
 
 
-			//
 
+				generateTarget();
 
 
-			window.addEventListener( 'resize', onResize, false );
 
-
 
-			//
 
+			}
 
 
-			generateTarget();
 
+			function onResize() {
 
 
-		}
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-		function onResize() {
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+			}
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			function animate() {
 
 
-		}
 
+				requestAnimationFrame( animate );
 
 
-		function animate() {
 
+				var delta = clock.getDelta();
 
 
-			requestAnimationFrame( animate );
 
+				if ( ! mesh.quaternion.equals( targetRotation ) ) {
 
 
-			var delta = clock.getDelta();
 
+					var step = speed * delta;
 
+					mesh.quaternion.rotateTowards( targetRotation, step );
 
 
-			if ( ! mesh.quaternion.equals( targetRotation ) ) {
 
+				}
 
 
-				var step = speed * delta;
 
-				mesh.quaternion.rotateTowards( targetRotation, step );
 
+				renderer.render( scene, camera );
 
 
 			}
 
 
-			renderer.render( scene, camera );
 
-
 
-		}
 
+			function generateTarget() {
 
 
-		function generateTarget() {
 
+				// generate a random point on a sphere
 
 
-			// generate a random point on a sphere
 
+				spherical.theta = Math.random() * Math.PI * 2;
 
+				spherical.phi = Math.acos( ( 2 * Math.random() ) - 1 );
 
+				spherical.radius = 2;
 
 
-			spherical.theta = Math.random() * Math.PI * 2;
 
-			spherical.phi = Math.acos( ( 2 * Math.random() ) - 1 );
 
-			spherical.radius = 2;
 
+				target.position.setFromSpherical( spherical );
 
 
-			target.position.setFromSpherical( spherical );
 
+				// compute target rotation
 
 
-			// compute target rotation
 
+				rotationMatrix.lookAt( target.position, mesh.position, mesh.up );
 
+				targetRotation.setFromRotationMatrix( rotationMatrix );
 
 
-			rotationMatrix.lookAt( target.position, mesh.position, mesh.up );
 
-			targetRotation.setFromRotationMatrix( rotationMatrix );
 
+				setTimeout( generateTarget, 2000 );
 
 
-			setTimeout( generateTarget, 2000 );
 
-
 
-		}
 
+			}
 
 
 	</script>

+ 45 - 32
examples/webgl_mirror.html
View File 

@@ -20,11 +20,24 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - mirror
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/objects/Reflector.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				CircleBufferGeometry,
 
+				CylinderBufferGeometry,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				Object3D,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				PointLight,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { Reflector } from './jsm/objects/Reflector.js';
 
 
 			// scene size
 
 			var WIDTH = window.innerWidth;
 
@@ -50,19 +63,19 @@
 
 				var container = document.getElementById( 'container' );
 
 
 				// renderer
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( WIDTH, HEIGHT );
 
 				container.appendChild( renderer.domElement );
 
 
 				// scene
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				// camera
 
-				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 
+				camera = new PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 
 				camera.position.set( 0, 75, 160 );
 
 
-				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				cameraControls = new OrbitControls( camera, renderer.domElement );
 
 				cameraControls.target.set( 0, 40, 0 );
 
 				cameraControls.maxDistance = 400;
 
 				cameraControls.minDistance = 10;
 
@@ -70,12 +83,12 @@
 
 
 				//
 
 
-				var planeGeo = new THREE.PlaneBufferGeometry( 100.1, 100.1 );
 
+				var planeGeo = new PlaneBufferGeometry( 100.1, 100.1 );
 
 
 				// reflectors/mirrors
 
 
-				var geometry = new THREE.CircleBufferGeometry( 40, 64 );
 
-				var groundMirror = new THREE.Reflector( geometry, {
 
+				var geometry = new CircleBufferGeometry( 40, 64 );
 
+				var groundMirror = new Reflector( geometry, {
 
 					clipBias: 0.003,
 
 					textureWidth: WIDTH * window.devicePixelRatio,
 
 					textureHeight: HEIGHT * window.devicePixelRatio,
 
@@ -86,8 +99,8 @@
 
 				groundMirror.rotateX( - Math.PI / 2 );
 
 				scene.add( groundMirror );
 
 
-				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
 
-				var verticalMirror = new THREE.Reflector( geometry, {
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
+				var verticalMirror = new Reflector( geometry, {
 
 					clipBias: 0.003,
 
 					textureWidth: WIDTH * window.devicePixelRatio,
 
 					textureHeight: HEIGHT * window.devicePixelRatio,
 
@@ -99,17 +112,17 @@
 
 				scene.add( verticalMirror );
 
 
 
-				sphereGroup = new THREE.Object3D();
 
+				sphereGroup = new Object3D();
 
 				scene.add( sphereGroup );
 
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
 
-				var sphereCap = new THREE.Mesh( geometry, material );
 
+				var geometry = new CylinderBufferGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
 
+				var material = new MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
 
+				var sphereCap = new Mesh( geometry, material );
 
 				sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
 
 				sphereCap.rotateX( - Math.PI );
 
 
-				var geometry = new THREE.SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
 
-				var halfSphere = new THREE.Mesh( geometry, material );
 
+				var geometry = new SphereBufferGeometry( 15, 24, 24, Math.PI / 2, Math.PI * 2, 0, Math.PI / 180 * 120 );
 
+				var halfSphere = new Mesh( geometry, material );
 
 				halfSphere.add( sphereCap );
 
 				halfSphere.rotateX( - Math.PI / 180 * 135 );
 
 				halfSphere.rotateZ( - Math.PI / 180 * 20 );
 
@@ -117,53 +130,53 @@
 
 
 				sphereGroup.add( halfSphere );
 
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 5, 0 );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 
-				smallSphere = new THREE.Mesh( geometry, material );
 
+				var geometry = new IcosahedronBufferGeometry( 5, 0 );
 
+				var material = new MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
 
+				smallSphere = new Mesh( geometry, material );
 
 				scene.add( smallSphere );
 
 
 				// walls
 
-				var planeTop = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
 
+				var planeTop = new Mesh( planeGeo, new MeshPhongMaterial( { color: 0xffffff } ) );
 
 				planeTop.position.y = 100;
 
 				planeTop.rotateX( Math.PI / 2 );
 
 				scene.add( planeTop );
 
 
-				var planeBottom = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xffffff } ) );
 
+				var planeBottom = new Mesh( planeGeo, new MeshPhongMaterial( { color: 0xffffff } ) );
 
 				planeBottom.rotateX( - Math.PI / 2 );
 
 				scene.add( planeBottom );
 
 
-				var planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
 
+				var planeFront = new Mesh( planeGeo, new MeshPhongMaterial( { color: 0x7f7fff } ) );
 
 				planeFront.position.z = 50;
 
 				planeFront.position.y = 50;
 
 				planeFront.rotateY( Math.PI );
 
 				scene.add( planeFront );
 
 
-				var planeRight = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x00ff00 } ) );
 
+				var planeRight = new Mesh( planeGeo, new MeshPhongMaterial( { color: 0x00ff00 } ) );
 
 				planeRight.position.x = 50;
 
 				planeRight.position.y = 50;
 
 				planeRight.rotateY( - Math.PI / 2 );
 
 				scene.add( planeRight );
 
 
-				var planeLeft = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xff0000 } ) );
 
+				var planeLeft = new Mesh( planeGeo, new MeshPhongMaterial( { color: 0xff0000 } ) );
 
 				planeLeft.position.x = - 50;
 
 				planeLeft.position.y = 50;
 
 				planeLeft.rotateY( Math.PI / 2 );
 
 				scene.add( planeLeft );
 
 
 				// lights
 
-				var mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
 
+				var mainLight = new PointLight( 0xcccccc, 1.5, 250 );
 
 				mainLight.position.y = 60;
 
 				scene.add( mainLight );
 
 
-				var greenLight = new THREE.PointLight( 0x00ff00, 0.25, 1000 );
 
+				var greenLight = new PointLight( 0x00ff00, 0.25, 1000 );
 
 				greenLight.position.set( 550, 50, 0 );
 
 				scene.add( greenLight );
 
 
-				var redLight = new THREE.PointLight( 0xff0000, 0.25, 1000 );
 
+				var redLight = new PointLight( 0xff0000, 0.25, 1000 );
 
 				redLight.position.set( - 550, 50, 0 );
 
 				scene.add( redLight );
 
 
-				var blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
 
+				var blueLight = new PointLight( 0x7f7fff, 0.25, 1000 );
 
 				blueLight.position.set( 0, 50, 550 );
 
 				scene.add( blueLight );

+ 20 - 14
examples/webgl_modifier_simplifier.html
View File 

@@ -8,12 +8,18 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-		<script src="js/modifiers/SimplifyModifier.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Scene,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { SimplifyModifier } from './jsm/modifiers/SimplifyModifier.js';
 
 
 			var renderer, scene, camera;
 
 
@@ -29,35 +35,35 @@
 
 				info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Vertex Reduction using SimplifyModifier';
 
 				document.body.appendChild( info );
 
 
-				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 = new Scene();
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.z = 15;
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
 
 				controls.enablePan = false;
 
 				controls.enableZoom = false;
 
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
 
+				scene.add( new AmbientLight( 0xffffff, 0.2 ) );
 
 
-				var light = new THREE.PointLight( 0xffffff, 0.7 );
 
+				var light = new PointLight( 0xffffff, 0.7 );
 
 				camera.add( light );
 
 				scene.add( camera );
 
 
-				new THREE.GLTFLoader().load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
+				new GLTFLoader().load( "models/gltf/LeePerrySmith/LeePerrySmith.glb", function ( gltf ) {
 
 
 					var mesh = gltf.scene.children[ 0 ];
 
 					mesh.position.x = - 3;
 
 					mesh.rotation.y = Math.PI / 2;
 
 					scene.add( mesh );
 
 
-					var modifier = new THREE.SimplifyModifier();
 
+					var modifier = new SimplifyModifier();
 
 
 					var simplified = mesh.clone();
 
 					simplified.material = simplified.material.clone();

+ 109 - 107
examples/webgl_modifier_tessellation.html
View File 

@@ -11,15 +11,6 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - modifier tessellation</div>
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-
 
-		<script src="js/modifiers/TessellateModifier.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			uniform float amplitude;
 
@@ -62,179 +53,190 @@
 
 
 		</script>
 
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Color,
 
+				FontLoader,
 
+				Mesh,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextGeometry,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
+			import { TessellateModifier } from './jsm/modifiers/TessellateModifier.js';
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
 
-		}
 
+			var renderer, scene, camera, stats;
 
 
-		var renderer, scene, camera, stats;
 
+			var controls;
 
 
-		var controls;
 
+			var mesh, uniforms;
 
 
-		var mesh, uniforms;
 
+			var WIDTH = window.innerWidth,
 
+				HEIGHT = window.innerHeight;
 
 
-		var WIDTH = window.innerWidth,
 
-			HEIGHT = window.innerHeight;
 
+			var loader = new FontLoader();
 
+			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 
-		var loader = new THREE.FontLoader();
 
-		loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
+				init( font );
 
+				animate();
 
 
-			init( font );
 
-			animate();
 
+			} );
 
 
-		} );
 
+			function init( font ) {
 
 
-		function init( font ) {
 
+				camera = new PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 
+				camera.position.set( - 100, 100, 200 );
 
 
-			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 
-			camera.position.set( - 100, 100, 200 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x050505 );
 
 
-			scene = new THREE.Scene();
 
-			scene.background = new THREE.Color( 0x050505 );
 
+				//
 
 
-			//
 
+				var geometry = new TextGeometry( "THREE.JS", {
 
 
-			var geometry = new THREE.TextGeometry( "THREE.JS", {
 
+					font: font,
 
 
-				font: font,
 
+					size: 40,
 
+					height: 5,
 
+					curveSegments: 3,
 
 
-				size: 40,
 
-				height: 5,
 
-				curveSegments: 3,
 
+					bevelThickness: 2,
 
+					bevelSize: 1,
 
+					bevelEnabled: true
 
 
-				bevelThickness: 2,
 
-				bevelSize: 1,
 
-				bevelEnabled: true
 
+				} );
 
 
-			} );
 
+				geometry.center();
 
 
-			geometry.center();
 
+				var tessellateModifier = new TessellateModifier( 8 );
 
 
-			var tessellateModifier = new THREE.TessellateModifier( 8 );
 
+				for ( var i = 0; i < 6; i ++ ) {
 
 
-			for ( var i = 0; i < 6; i ++ ) {
 
+					tessellateModifier.modify( geometry );
 
 
-				tessellateModifier.modify( geometry );
 
+				}
 
 
-			}
 
+				//
 
 
-			//
 
+				geometry = new BufferGeometry().fromGeometry( geometry );
 
 
-			geometry = new THREE.BufferGeometry().fromGeometry( geometry );
 
+				var numFaces = geometry.attributes.position.count / 3;
 
 
-			var numFaces = geometry.attributes.position.count / 3;
 
+				var colors = new Float32Array( numFaces * 3 * 3 );
 
+				var displacement = new Float32Array( numFaces * 3 * 3 );
 
 
-			var colors = new Float32Array( numFaces * 3 * 3 );
 
-			var displacement = new Float32Array( numFaces * 3 * 3 );
 
+				var color = new Color();
 
 
-			var color = new THREE.Color();
 
+				for ( var f = 0; f < numFaces; f ++ ) {
 
 
-			for ( var f = 0; f < numFaces; f ++ ) {
 
+					var index = 9 * f;
 
 
-				var index = 9 * f;
 
+					var h = 0.2 * Math.random();
 
+					var s = 0.5 + 0.5 * Math.random();
 
+					var l = 0.5 + 0.5 * Math.random();
 
 
-				var h = 0.2 * Math.random();
 
-				var s = 0.5 + 0.5 * Math.random();
 
-				var l = 0.5 + 0.5 * Math.random();
 
+					color.setHSL( h, s, l );
 
 
-				color.setHSL( h, s, l );
 
+					var d = 10 * ( 0.5 - Math.random() );
 
 
-				var d = 10 * ( 0.5 - Math.random() );
 
+					for ( var i = 0; i < 3; i ++ ) {
 
 
-				for ( var i = 0; i < 3; i ++ ) {
 
+						colors[ index + ( 3 * i ) ] = color.r;
 
+						colors[ index + ( 3 * i ) + 1 ] = color.g;
 
+						colors[ index + ( 3 * i ) + 2 ] = color.b;
 
 
-					colors[ index + ( 3 * i ) ] = color.r;
 
-					colors[ index + ( 3 * i ) + 1 ] = color.g;
 
-					colors[ index + ( 3 * i ) + 2 ] = color.b;
 
+						displacement[ index + ( 3 * i ) ] = d;
 
+						displacement[ index + ( 3 * i ) + 1 ] = d;
 
+						displacement[ index + ( 3 * i ) + 2 ] = d;
 
 
-					displacement[ index + ( 3 * i ) ] = d;
 
-					displacement[ index + ( 3 * i ) + 1 ] = d;
 
-					displacement[ index + ( 3 * i ) + 2 ] = d;
 
+					}
 
 
 				}
 
 
-			}
 
-
 
-			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
 
-			geometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 3 ) );
 
+				geometry.addAttribute( 'customColor', new BufferAttribute( colors, 3 ) );
 
+				geometry.addAttribute( 'displacement', new BufferAttribute( displacement, 3 ) );
 
 
-			//
 
+				//
 
 
-			uniforms = {
 
+				uniforms = {
 
 
-				amplitude: { value: 0.0 }
 
+					amplitude: { value: 0.0 }
 
 
-			};
 
+				};
 
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
 
+				var shaderMaterial = new ShaderMaterial( {
 
 
-				uniforms: uniforms,
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
+					uniforms: uniforms,
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
 
-			} );
 
+				} );
 
 
-			//
 
+				//
 
 
-			mesh = new THREE.Mesh( geometry, shaderMaterial );
 
+				mesh = new Mesh( geometry, shaderMaterial );
 
 
-			scene.add( mesh );
 
+				scene.add( mesh );
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( WIDTH, HEIGHT );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( WIDTH, HEIGHT );
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			//
 
+				//
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-		}
 
+			}
 
 
-		function onWindowResize() {
 
+			function onWindowResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate() {
 
+			function animate() {
 
 
-			requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-			render();
 
+				render();
 
 
-			stats.update();
 
+				stats.update();
 
 
-		}
 
+			}
 
 
-		function render() {
 
+			function render() {
 
 
-			var time = Date.now() * 0.001;
 
+				var time = Date.now() * 0.001;
 
 
-			uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );
 
+				uniforms.amplitude.value = 1.0 + Math.sin( time * 0.5 );
 
 
-			controls.update();
 
+				controls.update();
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
 
-	</script>
 
+		</script>
 
 
 </body>

+ 34 - 29
examples/webgl_morphtargets.html
View File 

@@ -12,26 +12,31 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGL morph target example
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BoxGeometry,
 
+				BufferGeometry,
 
+				Color,
 
+				Fog,
 
+				Mesh,
 
+				MeshLambertMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Raycaster,
 
+				Scene,
 
+				Vector2,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container;
 
 
 			var camera, scene, renderer, raycaster;
 
 
-			var mesh, mouse = new THREE.Vector2();
 
+			var mesh, mouse = new Vector2();
 
 
 			init();
 
 			animate();
 
@@ -40,23 +45,23 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
 				camera.position.z = 500;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x222222 );
 
-				scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x222222 );
 
+				scene.fog = new Fog( 0x000000, 1, 15000 );
 
 
-				var light = new THREE.PointLight( 0xffffff );
 
+				var light = new PointLight( 0xffffff );
 
 				light.position.z = 500;
 
 				camera.add( light );
 
 				scene.add( camera );
 
 
-				var light = new THREE.AmbientLight( 0x111111 );
 
+				var light = new AmbientLight( 0x111111 );
 
 				scene.add( light );
 
 
-				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xff0000, morphTargets: true } );
 
+				var geometry = new BoxGeometry( 100, 100, 100 );
 
+				var material = new MeshLambertMaterial( { color: 0xff0000, morphTargets: true } );
 
 
 				// construct 8 blend shapes
 
 
@@ -82,9 +87,9 @@
 
 
 				}
 
 
-				geometry = new THREE.BufferGeometry().fromGeometry( geometry );
 
+				geometry = new BufferGeometry().fromGeometry( geometry );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 
 				scene.add( mesh );
 
 
@@ -101,7 +106,7 @@
 
 					influence8: 0
 
 				};
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				var folder = gui.addFolder( 'Morph Targets' );
 
 				folder.add( params, 'influence1', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
 
@@ -148,16 +153,16 @@
 
 
 				//
 
 
-				raycaster = new THREE.Raycaster();
 
+				raycaster = new Raycaster();
 
 
-				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 );
 
 				controls.minDistance = 400;
 
 				controls.maxDistance = 1000;

+ 30 - 20
examples/webgl_morphtargets_horse.html
View File 

@@ -22,14 +22,24 @@
 
 			model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AnimationMixer,
 
+				Color,
 
+				DirectionalLight,
 
+				Math as _Math,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var container, stats;
 
-			var camera, scene, projector, renderer;
 
+			var camera, scene, renderer;
 
 			var mesh, mixer;
 
 
 			init();
 
@@ -42,31 +52,31 @@
 
 
 				//
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.y = 300;
 
-				camera.target = new THREE.Vector3( 0, 150, 0 );
 
+				camera.target = new Vector3( 0, 150, 0 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xf0f0f0 );
 
 
 				//
 
 
-				var light = new THREE.DirectionalLight( 0xefefff, 1.5 );
 
+				var light = new DirectionalLight( 0xefefff, 1.5 );
 
 				light.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( light );
 
 
-				var light = new THREE.DirectionalLight( 0xffefef, 1.5 );
 
-				light.position.set( -1, -1, -1 ).normalize();
 
+				var light = new DirectionalLight( 0xffefef, 1.5 );
 
+				light.position.set( - 1, - 1, - 1 ).normalize();
 
 				scene.add( light );
 
 
-				var loader = new THREE.GLTFLoader();
 
-				loader.load( "models/gltf/Horse.glb", function( gltf ) {
 
+				var loader = new GLTFLoader();
 
+				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
 
 					mesh = gltf.scene.children[ 0 ];
 
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 
 					scene.add( mesh );
 
 
-					mixer = new THREE.AnimationMixer( mesh );
 
+					mixer = new AnimationMixer( mesh );
 
 
 					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 
 
@@ -74,14 +84,14 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 				renderer.gammaOutput = true;
 
 				renderer.gammaFactor = 2.2;
 
 
-				container.appendChild(renderer.domElement);
 
+				container.appendChild( renderer.domElement );
 
 
 				//
 
 
@@ -123,8 +133,8 @@
 
 
 				theta += 0.1;
 
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 
+				camera.position.x = radius * Math.sin( _Math.degToRad( theta ) );
 
+				camera.position.z = radius * Math.cos( _Math.degToRad( theta ) );
 
 
 				camera.lookAt( camera.target );

+ 25 - 17
examples/webgl_morphtargets_sphere.html
View File 

@@ -13,12 +13,20 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGL morph target example
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Points,
 
+				PointsMaterial,
 
+				Scene,
 
+				TextureLoader,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var container;
 
 
@@ -35,23 +43,23 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.2, 100 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.2, 100 );
 
 				camera.position.set( 0, 5, 5 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var light = new THREE.PointLight( 0xff2200, 0.7 );
 
+				var light = new PointLight( 0xff2200, 0.7 );
 
 				light.position.set( 100, 100, 100 );
 
 				scene.add( light );
 
 
-				light = new THREE.PointLight( 0x22ff00, 0.7 );
 
+				light = new PointLight( 0x22ff00, 0.7 );
 
 				light.position.set( - 100, - 100, - 100 );
 
 				scene.add( light );
 
 
-				light = new THREE.AmbientLight( 0x111111 );
 
+				light = new AmbientLight( 0x111111 );
 
 				scene.add( light );
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 				loader.load( 'models/gltf/AnimatedMorphSphere/glTF/AnimatedMorphSphere.gltf', function ( gltf ) {
 
 
 					gltf.scene.traverse( function ( node ) {
 
@@ -70,17 +78,17 @@
 
 
 					//
 
 
-					var pointsMaterial = new THREE.PointsMaterial( {
 
+					var pointsMaterial = new PointsMaterial( {
 
 
 						size: 10,
 
 						sizeAttenuation: false,
 
-						map: new THREE.TextureLoader().load( 'textures/sprites/disc.png' ),
 
+						map: new TextureLoader().load( 'textures/sprites/disc.png' ),
 
 						alphaTest: 0.5,
 
 						morphTargets: true
 
 
 					} );
 
 
-					var points = new THREE.Points( mesh.geometry, pointsMaterial );
 
+					var points = new Points( mesh.geometry, pointsMaterial );
 
 
 					points.morphTargetInfluences = mesh.morphTargetInfluences;
 
 					points.morphTargetDictionary = mesh.morphTargetDictionary;
 
@@ -91,14 +99,14 @@
 
 
 				//
 
 
-				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 );
 
 				controls.minDistance = 1;
 
 				controls.maxDistance = 20;

+ 126 - 119
examples/webgl_multiple_canvases_circle.html
View File 

@@ -131,188 +131,195 @@
 
 		</div>
 
 	</div>
 
 
-		<script src="../build/three.js"></script>
 
+	<script type="module">
 
+		import {
 
+			BufferAttribute,
 
+			Camera,
 
+			CanvasTexture,
 
+			Color,
 
+			DirectionalLight,
 
+			IcosahedronBufferGeometry,
 
+			Math as _Math,
 
+			Mesh,
 
+			MeshBasicMaterial,
 
+			MeshPhongMaterial,
 
+			PerspectiveCamera,
 
+			PlaneBufferGeometry,
 
+			Scene,
 
+			VertexColors,
 
+			WebGLRenderer,
 
+		} from "../build/three.module.js";
 
 
-		<script src="js/WebGL.js"></script>
 
+		var views = [];
 
 
-		<script>
 
+		var scene, renderer;
 
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
+		var mouseX = 0, mouseY = 0;
 
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+		var windowHalfX = window.innerWidth / 2;
 
+		var windowHalfY = window.innerHeight / 2;
 
 
-			}
 
-
 
-			var views = [];
 
+		init();
 
+		animate();
 
 
-			var scene, renderer;
 
+		//
 
 
-			var mouseX = 0, mouseY = 0;
 
+		function View( canvas, rotateY ) {
 
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
+			canvas.width = canvas.clientWidth * window.devicePixelRatio;
 
+			canvas.height = canvas.clientHeight * window.devicePixelRatio;
 
 
-			init();
 
-			animate();
 
+			var context = canvas.getContext( '2d' );
 
 
-			//
 
+			var camera = new PerspectiveCamera( 20, canvas.clientWidth / canvas.clientHeight, 1, 20000 );
 
+			camera.rotation.y = rotateY;
 
 
-			function View( canvas, rotateY ) {
 
+			// Think of the virtual camera as a post with 5 cameras on it (even though those cameras happen to live in difference scenes)
 
+			// You need to move the post (ie, the virtualCamera) to move all 5 cameras together.
 
 
-				canvas.width = canvas.clientWidth * window.devicePixelRatio;
 
-				canvas.height = canvas.clientHeight * window.devicePixelRatio;
 
+			var virtualCamera = new Camera();
 
+			virtualCamera.add( camera );
 
 
-				var context = canvas.getContext( '2d' );
 
+			this.render = function () {
 
 
-				var camera = new THREE.PerspectiveCamera( 20, canvas.clientWidth / canvas.clientHeight, 1, 20000 );
 
-				camera.rotation.y = rotateY;
 
+				virtualCamera.position.x = - mouseX * 4;
 
+				virtualCamera.position.y = - mouseY * 4;
 
+				virtualCamera.position.z = 1800;
 
 
-				// Think of the virtual camera as a post with 5 cameras on it (even though those cameras happen to live in difference scenes)
 
-				// You need to move the post (ie, the virtualCamera) to move all 5 cameras together.
 
+				virtualCamera.lookAt( scene.position );
 
+				virtualCamera.updateMatrixWorld( true );
 
 
-				var virtualCamera = new THREE.Camera();
 
-				virtualCamera.add( camera );
 
+				renderer.render( scene, camera );
 
 
-				this.render = function () {
 
+				context.drawImage( renderer.domElement, 0, 0 );
 
 
-					virtualCamera.position.x = - mouseX * 4;
 
-					virtualCamera.position.y = - mouseY * 4;
 
-					virtualCamera.position.z = 1800;
 
+			};
 
 
-					virtualCamera.lookAt( scene.position );
 
-					virtualCamera.updateMatrixWorld( true );
 
+		}
 
 
-					renderer.render( scene, camera );
 
+		function init() {
 
 
-					context.drawImage( renderer.domElement, 0, 0 );
 
+			var canvas1 = document.getElementById( 'canvas1' );
 
+			var canvas2 = document.getElementById( 'canvas2' );
 
+			var canvas3 = document.getElementById( 'canvas3' );
 
+			var canvas4 = document.getElementById( 'canvas4' );
 
+			var canvas5 = document.getElementById( 'canvas5' );
 
 
-				};
 
+			var fudge = 0.45; // I don't know why this is needed :-(
 
+			var rot = 30 * _Math.DEG2RAD;
 
 
-			}
 
+			views.push( new View( canvas1, rot * - 2 * fudge ) );
 
+			views.push( new View( canvas2, rot * - 1 * fudge ) );
 
+			views.push( new View( canvas3, rot *	0 * fudge ) );
 
+			views.push( new View( canvas4, rot *	1 * fudge ) );
 
+			views.push( new View( canvas5, rot *	2 * fudge ) );
 
 
-			function init() {
 
+			//
 
 
-				var canvas1 = document.getElementById( 'canvas1' );
 
-				var canvas2 = document.getElementById( 'canvas2' );
 
-				var canvas3 = document.getElementById( 'canvas3' );
 
-				var canvas4 = document.getElementById( 'canvas4' );
 
-				var canvas5 = document.getElementById( 'canvas5' );
 
+			scene = new Scene();
 
+			scene.background = new Color( 0xffffff );
 
 
-				var fudge = 0.45; // I don't know why this is needed :-(
 
-				var rot = 30 * THREE.Math.DEG2RAD;
 
+			var light = new DirectionalLight( 0xffffff );
 
+			light.position.set( 0, 0, 1 ).normalize();
 
+			scene.add( light );
 
 
-				views.push( new View( canvas1, rot * - 2 * fudge ) );
 
-				views.push( new View( canvas2, rot * - 1 * fudge ) );
 
-				views.push( new View( canvas3, rot *	0 * fudge ) );
 
-				views.push( new View( canvas4, rot *	1 * fudge ) );
 
-				views.push( new View( canvas5, rot *	2 * fudge ) );
 
+			var noof_balls = 51;
 
 
-				//
 
+			// shadow
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+			var canvas = document.createElement( 'canvas' );
 
+			canvas.width = 128;
 
+			canvas.height = 128;
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
-				light.position.set( 0, 0, 1 ).normalize();
 
-				scene.add( light );
 
+			var context = canvas.getContext( '2d' );
 
+			var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 
+			gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 
+			gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
 
-				var noof_balls = 51;
 
+			context.fillStyle = gradient;
 
+			context.fillRect( 0, 0, canvas.width, canvas.height );
 
 
-				// shadow
 
+			var shadowTexture = new CanvasTexture( canvas );
 
 
-				var canvas = document.createElement( 'canvas' );
 
-				canvas.width = 128;
 
-				canvas.height = 128;
 
+			var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
 
+			var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
 
 
-				var context = canvas.getContext( '2d' );
 
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 
-				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 
-				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
+			for ( var i = 0; i < noof_balls; i ++ ) { // create shadows
 
 
-				context.fillStyle = gradient;
 
-				context.fillRect( 0, 0, canvas.width, canvas.height );
 
+				var shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 
+				shadowMesh.position.y = - 250;
 
+				shadowMesh.rotation.x = - Math.PI / 2;
 
+				scene.add( shadowMesh );
 
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
 
+			}
 
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
+			var radius = 200;
 
 
-				for ( var i = 0; i < noof_balls; i ++ ) { // create shadows
 
+			var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
 
 
-					var shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
-					shadowMesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 
-					shadowMesh.position.y = - 250;
 
-					shadowMesh.rotation.x = - Math.PI / 2;
 
-					scene.add( shadowMesh );
 
+			var count = geometry1.attributes.position.count;
 
+			geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 
-				}
 
+			var color = new Color();
 
+			var positions = geometry1.attributes.position;
 
+			var colors = geometry1.attributes.color;
 
 
-				var radius = 200;
 
+			for ( var i = 0; i < count; i ++ ) {
 
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
+				color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 
 
-				var count = geometry1.attributes.position.count;
 
-				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
+				colors.setXYZ( i, color.r, color.g, color.b );
 
 
-				var color = new THREE.Color();
 
-				var positions = geometry1.attributes.position;
 
-				var colors = geometry1.attributes.color;
 
+			}
 
 
-				for ( var i = 0; i < count; i ++ ) {
 
+			var material = new MeshPhongMaterial( {
 
+				color: 0xffffff,
 
+				flatShading: true,
 
+				vertexColors: VertexColors,
 
+				shininess: 0
 
+			} );
 
 
-					color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 
+			var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 
-					colors.setXYZ( i, color.r, color.g, color.b );
 
+			for ( var i = 0; i < noof_balls; i ++ ) { // create balls
 
 
-				}
 
+				var mesh = new Mesh( geometry1, material );
 
+				var wireframe = new Mesh( geometry1, wireframeMaterial );
 
+				mesh.add( wireframe );
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
-					color: 0xffffff,
 
-					flatShading: true,
 
-					vertexColors: THREE.VertexColors,
 
-					shininess: 0
 
-				} );
 
+				mesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 
+				mesh.rotation.x = i * 0.5;
 
+				scene.add( mesh );
 
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
+			}
 
 
-				for ( var i = 0; i < noof_balls; i ++ ) { // create balls
 
+			renderer = new WebGLRenderer( { antialias: true } );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			renderer.setSize( 200, 300 );
 
 
-					var mesh = new THREE.Mesh( geometry1, material );
 
-					var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 
-					mesh.add( wireframe );
 
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
-					mesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 
-					mesh.rotation.x = i * 0.5;
 
-					scene.add( mesh );
 
+		}
 
 
-				}
 
+		function onDocumentMouseMove( event ) {
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( 200, 300 );
 
+			mouseX = event.clientX - windowHalfX;
 
+			mouseY = event.clientY - windowHalfY;
 
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+		}
 
 
-			}
 
+		function animate() {
 
 
-			function onDocumentMouseMove( event ) {
 
+			for ( var i = 0; i < views.length; ++ i ) {
 
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
+				views[ i ].render();
 
 
 			}
 
 
-			function animate() {
 
-
 
-				for ( var i = 0; i < views.length; ++ i ) {
 
-
 
-					views[ i ].render();
 
+			requestAnimationFrame( animate );
 
 
-				}
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-			}
 
+		}
 
 
 		</script>
 
 </body>

+ 39 - 34
examples/webgl_multiple_canvases_complex.html
View File 

@@ -48,17 +48,22 @@
 
 		</div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - multiple canvases - complex</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				CanvasTexture,
 
+				Color,
 
+				DirectionalLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				VertexColors,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var views = [];
 
 
@@ -81,7 +86,7 @@
 
 
 				var context = canvas.getContext( '2d' );
 
 
-				var camera = new THREE.PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
 
+				var camera = new PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
 
 				camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
 
 				camera.position.z = 1800;
 
 
@@ -117,10 +122,10 @@
 
 
 				//
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0, 1 ).normalize();
 
 				scene.add( light );
 
 
@@ -138,24 +143,24 @@
 
 				context.fillStyle = gradient;
 
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
 
+				var shadowTexture = new CanvasTexture( canvas );
 
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
+				var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
 
+				var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
 
 				var shadowMesh;
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = - 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
@@ -163,15 +168,15 @@
 
 
 				var radius = 200;
 
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
+				var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
 
 
 				var count = geometry1.attributes.position.count;
 
-				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
+				geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 
 				var geometry2 = geometry1.clone();
 
 				var geometry3 = geometry1.clone();
 
 
-				var color = new THREE.Color();
 
+				var color = new Color();
 
 				var positions1 = geometry1.attributes.position;
 
 				var positions2 = geometry2.attributes.position;
 
 				var positions3 = geometry3.attributes.position;
 
@@ -192,34 +197,34 @@
 
 
 				}
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xffffff,
 
 					flatShading: true,
 
-					vertexColors: THREE.VertexColors,
 
+					vertexColors: VertexColors,
 
 					shininess: 0
 
 				} );
 
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
+				var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 
-				var mesh = new THREE.Mesh( geometry1, material );
 
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 
+				var mesh = new Mesh( geometry1, material );
 
+				var wireframe = new Mesh( geometry1, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				mesh.position.x = - 400;
 
 				mesh.rotation.x = - 1.87;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry2, material );
 
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 
+				var mesh = new Mesh( geometry2, material );
 
+				var wireframe = new Mesh( geometry2, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				mesh.position.x = 400;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry3, material );
 
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 
+				var mesh = new Mesh( geometry3, material );
 
+				var wireframe = new Mesh( geometry3, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( fullWidth, fullHeight );

+ 39 - 34
examples/webgl_multiple_canvases_grid.html
View File 

@@ -65,17 +65,22 @@
 
 		</div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl -  multiple canvases - grid</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				CanvasTexture,
 
+				Color,
 
+				DirectionalLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				VertexColors,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var views = [];
 
 
@@ -98,7 +103,7 @@
 
 
 				var context = canvas.getContext( '2d' );
 
 
-				var camera = new THREE.PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
 
+				var camera = new PerspectiveCamera( 20, viewWidth / viewHeight, 1, 10000 );
 
 				camera.setViewOffset( fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight );
 
 				camera.position.z = 1800;
 
 
@@ -137,10 +142,10 @@
 
 
 				//
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0, 1 ).normalize();
 
 				scene.add( light );
 
 
@@ -158,25 +163,25 @@
 
 				context.fillStyle = gradient;
 
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
 
+				var shadowTexture = new CanvasTexture( canvas );
 
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
+				var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
 
+				var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
 
 
 				var shadowMesh;
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = - 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
@@ -184,15 +189,15 @@
 
 
 				var radius = 200;
 
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
+				var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
 
 
 				var count = geometry1.attributes.position.count;
 
-				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
+				geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 
 				var geometry2 = geometry1.clone();
 
 				var geometry3 = geometry1.clone();
 
 
-				var color = new THREE.Color();
 
+				var color = new Color();
 
 				var positions1 = geometry1.attributes.position;
 
 				var positions2 = geometry2.attributes.position;
 
 				var positions3 = geometry3.attributes.position;
 
@@ -213,34 +218,34 @@
 
 
 				}
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xffffff,
 
 					flatShading: true,
 
-					vertexColors: THREE.VertexColors,
 
+					vertexColors: VertexColors,
 
 					shininess: 0
 
 				} );
 
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
+				var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 
-				var mesh = new THREE.Mesh( geometry1, material );
 
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 
+				var mesh = new Mesh( geometry1, material );
 
+				var wireframe = new Mesh( geometry1, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				mesh.position.x = - 400;
 
 				mesh.rotation.x = - 1.87;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry2, material );
 
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 
+				var mesh = new Mesh( geometry2, material );
 
+				var wireframe = new Mesh( geometry2, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				mesh.position.x = 400;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry3, material );
 
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 
+				var mesh = new Mesh( geometry3, material );
 
+				var wireframe = new Mesh( geometry3, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( 300, 200 );

+ 30 - 24
examples/webgl_multiple_elements.html
View File 

@@ -63,22 +63,28 @@
 
 			<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements - webgl</div>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
 		<script id="template" type="notjs">
 
 			<div class="scene"></div>
 
 			<div class="description">Scene $</div>
 
 		</script>
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Color,
 
+				CylinderBufferGeometry,
 
+				DirectionalLight,
 
+				DodecahedronBufferGeometry,
 
+				HemisphereLight,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var canvas;
 
 
@@ -92,10 +98,10 @@
 
 				canvas = document.getElementById( "c" );
 
 
 				var geometries = [
 
-					new THREE.BoxBufferGeometry( 1, 1, 1 ),
 
-					new THREE.SphereBufferGeometry( 0.5, 12, 8 ),
 
-					new THREE.DodecahedronBufferGeometry( 0.5 ),
 
-					new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 12 )
 
+					new BoxBufferGeometry( 1, 1, 1 ),
 
+					new SphereBufferGeometry( 0.5, 12, 8 ),
 
+					new DodecahedronBufferGeometry( 0.5 ),
 
+					new CylinderBufferGeometry( 0.5, 0.5, 1, 12 )
 
 				];
 
 
 				var template = document.getElementById( "template" ).text;
 
@@ -103,7 +109,7 @@
 
 
 				for ( var i = 0; i < 40; i ++ ) {
 
 
-					var scene = new THREE.Scene();
 
+					var scene = new Scene();
 
 
 					// make a list item
 
 					var element = document.createElement( "div" );
 
@@ -115,11 +121,11 @@
 
 					scene.userData.element = element.querySelector( ".scene" );
 
 					content.appendChild( element );
 
 
-					var camera = new THREE.PerspectiveCamera( 50, 1, 1, 10 );
 
+					var camera = new PerspectiveCamera( 50, 1, 1, 10 );
 
 					camera.position.z = 2;
 
 					scene.userData.camera = camera;
 
 
-					var controls = new THREE.OrbitControls( scene.userData.camera, scene.userData.element );
 
+					var controls = new OrbitControls( scene.userData.camera, scene.userData.element );
 
 					controls.minDistance = 2;
 
 					controls.maxDistance = 5;
 
 					controls.enablePan = false;
 
@@ -129,20 +135,20 @@
 
 					// add one random mesh to each scene
 
 					var geometry = geometries[ geometries.length * Math.random() | 0 ];
 
 
-					var material = new THREE.MeshStandardMaterial( {
 
+					var material = new MeshStandardMaterial( {
 
 
-						color: new THREE.Color().setHSL( Math.random(), 1, 0.75 ),
 
+						color: new Color().setHSL( Math.random(), 1, 0.75 ),
 
 						roughness: 0.5,
 
 						metalness: 0,
 
 						flatShading: true
 
 
 					} );
 
 
-					scene.add( new THREE.Mesh( geometry, material ) );
 
+					scene.add( new Mesh( geometry, material ) );
 
 
-					scene.add( new THREE.HemisphereLight( 0xaaaaaa, 0x444444 ) );
 
+					scene.add( new HemisphereLight( 0xaaaaaa, 0x444444 ) );
 
 
-					var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
 
+					var light = new DirectionalLight( 0xffffff, 0.5 );
 
 					light.position.set( 1, 1, 1 );
 
 					scene.add( light );
 
 
@@ -151,7 +157,7 @@
 
 				}
 
 
 
-				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
 
+				renderer = new WebGLRenderer( { canvas: canvas, antialias: true } );
 
 				renderer.setClearColor( 0xffffff, 1 );
 
 				renderer.setPixelRatio( window.devicePixelRatio );

+ 29 - 26
examples/webgl_multiple_elements_text.html
View File 

@@ -79,18 +79,21 @@
 
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements with text - webgl</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferGeometry,
 
+				CanvasTexture,
 
+				Color,
 
+				Float32BufferAttribute,
 
+				PerspectiveCamera,
 
+				Points,
 
+				PointsMaterial,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var scenes = [], views, t, canvas, renderer;
 
 
@@ -108,18 +111,18 @@
 
 
 				canvas = document.getElementById( 'c' );
 
 
-				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
 
+				renderer = new WebGLRenderer( { canvas: canvas, antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 
 				views = document.querySelectorAll( '.view' );
 
 
 				for ( var n = 0; n < views.length; n ++ ) {
 
 
-					var scene = new THREE.Scene();
 
-					scene.background = new THREE.Color( 0xffffff );
 
+					var scene = new Scene();
 
+					scene.background = new Color( 0xffffff );
 
 
-					var geometry0 = new THREE.BufferGeometry();
 
-					var geometry1 = new THREE.BufferGeometry();
 
+					var geometry0 = new BufferGeometry();
 
+					var geometry1 = new BufferGeometry();
 
 
 					var vertices = [];
 
 
@@ -154,8 +157,8 @@
 
 
 					}
 
 
-					geometry0.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-					geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices.slice(), 3 ) );
 
+					geometry0.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
 
+					geometry1.addAttribute( 'position', new Float32BufferAttribute( vertices.slice(), 3 ) );
 
 
 					var index = Math.floor( colors.length * Math.random() );
 
 
@@ -166,20 +169,20 @@
 
 					context.arc( 64, 64, 64, 0, 2 * Math.PI );
 
 					context.fillStyle = colors[ index ];
 
 					context.fill();
 
-					var texture = new THREE.CanvasTexture( canvas2 );
 
+					var texture = new CanvasTexture( canvas2 );
 
 
-					var material = new THREE.PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );
 
+					var material = new PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );
 
 
-					scene.add( new THREE.Points( geometry0, material ) );
 
+					scene.add( new Points( geometry0, material ) );
 
 
 					scene.userData.view = views[ n ];
 
 					scene.userData.geometry1 = geometry1;
 
 
-					var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
 
+					var camera = new PerspectiveCamera( 75, 1, 0.1, 100 );
 
 					camera.position.set( 0, 0, 1.2 * balls );
 
 					scene.userData.camera = camera;
 
 
-					var controls = new THREE.OrbitControls( camera, views[ n ] );
 
+					var controls = new OrbitControls( camera, views[ n ] );
 
 					scene.userData.controls = controls;
 
 
 					scenes.push( scene );
 
@@ -246,8 +249,8 @@
 
 					var points = scene.children[ 0 ];
 
 					var position = points.geometry.attributes.position;
 
 
-					var point = new THREE.Vector3();
 
-					var offset = new THREE.Vector3();
 
+					var point = new Vector3();
 
+					var offset = new Vector3();
 
 
 					for ( var i = 0; i < position.count; i ++ ) {

+ 44 - 39
examples/webgl_multiple_renderers.html
View File 

@@ -19,39 +19,44 @@
 
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - multiple renderers</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				CanvasTexture,
 
+				Color,
 
+				DirectionalLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				Vector3,
 
+				VertexColors,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer1, renderer2;
 
 
 			var mesh1, mesh2, mesh3;
 
-			var color = new THREE.Color();
 
+			var color = new Color();
 
 
 			init();
 
 			animate();
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / ( window.innerHeight / 2 ), 1, 10000 );
 
+				camera = new PerspectiveCamera( 20, window.innerWidth / ( window.innerHeight / 2 ), 1, 10000 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0, 1 );
 
 				scene.add( light );
 
 
-				var light = new THREE.DirectionalLight( 0xffff00, 0.75 );
 
+				var light = new DirectionalLight( 0xffff00, 0.75 );
 
 				light.position.set( 0, 0, - 1 );
 
 				scene.add( light );
 
 
@@ -69,25 +74,25 @@
 
 				context.fillStyle = gradient;
 
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
 
+				var shadowTexture = new CanvasTexture( canvas );
 
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
 
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
+				var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
 
+				var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
 
 
 				var shadowMesh;
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = - 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
@@ -95,10 +100,10 @@
 
 
 				var radius = 200;
 
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
+				var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
 
 
 				var count = geometry1.attributes.position.count;
 
-				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
+				geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 
 				var geometry2 = geometry1.clone();
 
 				var geometry3 = geometry1.clone();
 
@@ -123,44 +128,44 @@
 
 
 				}
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xffffff,
 
 					flatShading: true,
 
-					vertexColors: THREE.VertexColors,
 
+					vertexColors: VertexColors,
 
 					shininess: 0
 
 				} );
 
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
+				var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 
-				mesh1 = new THREE.Mesh( geometry1, material );
 
+				mesh1 = new Mesh( geometry1, material );
 
 				mesh1.position.x = - 400;
 
 				mesh1.rotation.x = - 1.87;
 
 				scene.add( mesh1 );
 
 
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 
+				var wireframe = new Mesh( geometry1, wireframeMaterial );
 
 				mesh1.add( wireframe );
 
 
-				mesh2 = new THREE.Mesh( geometry2, material );
 
+				mesh2 = new Mesh( geometry2, material );
 
 				mesh2.position.x = 400;
 
 				scene.add( mesh2 );
 
 
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 
+				var wireframe = new Mesh( geometry2, wireframeMaterial );
 
 				mesh2.add( wireframe );
 
 
-				mesh3 = new THREE.Mesh( geometry3, material );
 
+				mesh3 = new Mesh( geometry3, material );
 
 				scene.add( mesh3 );
 
 
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 
+				var wireframe = new Mesh( geometry3, wireframeMaterial );
 
 				mesh3.add( wireframe );
 
 
 				//
 
 
-				renderer1 = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer1 = new WebGLRenderer( { antialias: true } );
 
 				renderer1.setPixelRatio( window.devicePixelRatio );
 
 				renderer1.setSize( window.innerWidth, window.innerHeight / 2 );
 
 				document.body.appendChild( renderer1.domElement );
 
 
-				renderer2 = new THREE.WebGLRenderer();
 
+				renderer2 = new WebGLRenderer();
 
 				renderer2.setPixelRatio( window.devicePixelRatio );
 
 				renderer2.setSize( window.innerWidth, window.innerHeight / 2 );
 
 				document.body.appendChild( renderer2.domElement );
 
@@ -177,8 +182,8 @@
 
 				mesh2.rotation.z += Math.PI / 500;
 
 				mesh3.rotation.z += Math.PI / 500;
 
 
-				var position = new THREE.Vector3();
 
-				var color = new THREE.Color();
 
+				var position = new Vector3();
 
+				var color = new Color();
 
 
 				var time = performance.now() / 500;

+ 29 - 22
examples/webgl_multiple_scenes_comparison.html
View File 

@@ -39,13 +39,20 @@
 
 			<div class="slider"></div>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshStandardMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container, camera, renderer, controls;
 
 			var sceneL, sceneR;
 
@@ -57,21 +64,21 @@
 
 
 				container = document.querySelector( '.container' );
 
 
-				sceneL = new THREE.Scene();
 
-				sceneL.background = new THREE.Color( 0xff00ff );
 
+				sceneL = new Scene();
 
+				sceneL.background = new Color( 0xff00ff );
 
 
-				sceneR = new THREE.Scene();
 
-				sceneR.background = new THREE.Color( 0x8FBCD4 );
 
+				sceneR = new Scene();
 
+				sceneR.background = new Color( 0x8FBCD4 );
 
 
-				camera = new THREE.PerspectiveCamera( 35, container.clientWidth / container.clientHeight, 0.1, 10 );
 
+				camera = new PerspectiveCamera( 35, container.clientWidth / container.clientHeight, 0.1, 10 );
 
 				camera.position.set( 2, 4, 7 );
 
 
-				controls = new THREE.OrbitControls( camera, container );
 
+				controls = new OrbitControls( camera, container );
 
 
 				initMeshes();
 
 				initLights();
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setSize( container.clientWidth, container.clientHeight );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setScissorTest( true );
 
@@ -90,26 +97,26 @@
 
 
 			function initMeshes() {
 
 
-				var geoB = new THREE.BoxBufferGeometry( 2, 2, 2 );
 
-				var matB = new THREE.MeshStandardMaterial( { color: 0x0000ff } );
 
-				var meshB = new THREE.Mesh( geoB, matB );
 
+				var geoB = new BoxBufferGeometry( 2, 2, 2 );
 
+				var matB = new MeshStandardMaterial( { color: 0x0000ff } );
 
+				var meshB = new Mesh( geoB, matB );
 
 				sceneL.add( meshB );
 
 
-				var geoA = new THREE.IcosahedronBufferGeometry( 1, 0 );
 
-				var matA = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
 
-				var meshA = new THREE.Mesh( geoA, matA );
 
+				var geoA = new IcosahedronBufferGeometry( 1, 0 );
 
+				var matA = new MeshStandardMaterial( { color: 0xff0000 } );
 
+				var meshA = new Mesh( geoA, matA );
 
 				sceneR.add( meshA );
 
 
 			}
 
 
 			function initLights() {
 
 
-				var light1 = new THREE.DirectionalLight();
 
+				var light1 = new DirectionalLight();
 
 				light1.position.set( 20, 20, 20 );
 
 				sceneL.add( light1 );
 
 				sceneR.add( light1.clone() );
 
 
-				var light2 = new THREE.DirectionalLight();
 
+				var light2 = new DirectionalLight();
 
 				light2.position.set( - 20, 20, 20 );
 
 				sceneL.add( light2 );
 
 				sceneR.add( light2.clone() );

+ 43 - 37
examples/webgl_multiple_views.html
View File 

@@ -11,18 +11,24 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple views - webgl</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				CanvasTexture,
 
+				Color,
 
+				DirectionalLight,
 
+				IcosahedronBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				VertexColors,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -38,7 +44,7 @@
 
 					bottom: 0,
 
 					width: 0.5,
 
 					height: 1.0,
 
-					background: new THREE.Color( 0.5, 0.5, 0.7 ),
 
+					background: new Color( 0.5, 0.5, 0.7 ),
 
 					eye: [ 0, 300, 1800 ],
 
 					up: [ 0, 1, 0 ],
 
 					fov: 30,
 
@@ -55,7 +61,7 @@
 
 					bottom: 0,
 
 					width: 0.5,
 
 					height: 0.5,
 
-					background: new THREE.Color( 0.7, 0.5, 0.5 ),
 
+					background: new Color( 0.7, 0.5, 0.5 ),
 
 					eye: [ 0, 1800, 0 ],
 
 					up: [ 0, 0, 1 ],
 
 					fov: 45,
 
@@ -72,7 +78,7 @@
 
 					bottom: 0.5,
 
 					width: 0.5,
 
 					height: 0.5,
 
-					background: new THREE.Color( 0.5, 0.7, 0.7 ),
 
+					background: new Color( 0.5, 0.7, 0.7 ),
 
 					eye: [ 1400, 800, 1400 ],
 
 					up: [ 0, 1, 0 ],
 
 					fov: 60,
 
@@ -96,16 +102,16 @@
 
 				for ( var ii = 0; ii < views.length; ++ ii ) {
 
 
 					var view = views[ ii ];
 
-					var camera = new THREE.PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
 
+					var camera = new PerspectiveCamera( view.fov, window.innerWidth / window.innerHeight, 1, 10000 );
 
 					camera.position.fromArray( view.eye );
 
 					camera.up.fromArray( view.up );
 
 					view.camera = camera;
 
 
 				}
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var light = new THREE.DirectionalLight( 0xffffff );
 
+				var light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0, 1 );
 
 				scene.add( light );
 
 
@@ -123,25 +129,25 @@
 
 				context.fillStyle = gradient;
 
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
 
-				var shadowTexture = new THREE.CanvasTexture( canvas );
 
+				var shadowTexture = new CanvasTexture( canvas );
 
 
-				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture, transparent: true } );
 
-				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
+				var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture, transparent: true } );
 
+				var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
 
 
 				var shadowMesh;
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = - 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
 				scene.add( shadowMesh );
 
 
-				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 
+				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
 
 				shadowMesh.position.x = 400;
 
 				shadowMesh.position.y = - 250;
 
 				shadowMesh.rotation.x = - Math.PI / 2;
 
@@ -149,15 +155,15 @@
 
 
 				var radius = 200;
 
 
-				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
+				var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
 
 
 				var count = geometry1.attributes.position.count;
 
-				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
+				geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 
 				var geometry2 = geometry1.clone();
 
 				var geometry3 = geometry1.clone();
 
 
-				var color = new THREE.Color();
 
+				var color = new Color();
 
 				var positions1 = geometry1.attributes.position;
 
 				var positions2 = geometry2.attributes.position;
 
 				var positions3 = geometry3.attributes.position;
 
@@ -178,34 +184,34 @@
 
 
 				}
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xffffff,
 
 					flatShading: true,
 
-					vertexColors: THREE.VertexColors,
 
+					vertexColors: VertexColors,
 
 					shininess: 0
 
 				} );
 
 
-				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
+				var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 
-				var mesh = new THREE.Mesh( geometry1, material );
 
-				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 
+				var mesh = new Mesh( geometry1, material );
 
+				var wireframe = new Mesh( geometry1, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				mesh.position.x = - 400;
 
 				mesh.rotation.x = - 1.87;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry2, material );
 
-				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 
+				var mesh = new Mesh( geometry2, material );
 
+				var wireframe = new Mesh( geometry2, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				mesh.position.x = 400;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( geometry3, material );
 
-				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 
+				var mesh = new Mesh( geometry3, material );
 
+				var wireframe = new Mesh( geometry3, wireframeMaterial );
 
 				mesh.add( wireframe );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

+ 40 - 22
examples/webgl_nearestneighbour.html
View File 

@@ -13,9 +13,6 @@
 
 			nearest neighbour for 500,000 sprites
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/utils/TypedArrayUtils.js"></script>
 
-		<script src="js/controls/FirstPersonControls.js"></script>
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			//uniform float zoom;
 
@@ -52,7 +49,28 @@
 
 			}
 
 
 		</script>
 
-		<script>
 
+
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Clock,
 
+				CubeTextureLoader,
 
+				Frustum,
 
+				LinearFilter,
 
+				LinearMipMapLinearFilter,
 
+				Matrix4,
 
+				PerspectiveCamera,
 
+				Points,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextureLoader,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
+
 
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
+			import { TypedArrayUtils } from './jsm/utils/TypedArrayUtils.js';
 
 
 			var camera, scene, renderer;
 
 			var controls;
 
@@ -61,15 +79,15 @@
 
 			var positions, alphas, particles, _particleGeom;
 
 			var kdtree;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000000 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000000 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				controls = new THREE.FirstPersonControls( camera );
 
+				controls = new FirstPersonControls( camera );
 
 				controls.movementSpeed = 100;
 
 				controls.lookSpeed = 0.1;
 
 
@@ -77,7 +95,7 @@
 
 
 
 				// add a skybox background
 
-				var cubeTextureLoader = new THREE.CubeTextureLoader();
 
+				var cubeTextureLoader = new CubeTextureLoader();
 
 
 				cubeTextureLoader.setPath( 'textures/cube/skybox/' );
 
 
@@ -91,21 +109,21 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
 				// create the custom shader
 
 
-				var textureLoader = new THREE.TextureLoader();
 
+				var textureLoader = new TextureLoader();
 
 
 				var imagePreviewTexture = textureLoader.load( 'textures/crate.gif' );
 
 
-				imagePreviewTexture.minFilter = THREE.LinearMipMapLinearFilter;
 
-				imagePreviewTexture.magFilter = THREE.LinearFilter;
 
+				imagePreviewTexture.minFilter = LinearMipMapLinearFilter;
 
+				imagePreviewTexture.magFilter = LinearFilter;
 
 
-				var pointShaderMaterial = new THREE.ShaderMaterial( {
 
+				var pointShaderMaterial = new ShaderMaterial( {
 
 					uniforms: {
 
 						tex1: { value: imagePreviewTexture },
 
 						zoom: { value: 9.0 }
 
@@ -126,11 +144,11 @@
 
 				positions = new Float32Array( amountOfParticles * 3 );
 
 				alphas = new Float32Array( amountOfParticles );
 
 
-				_particleGeom = new THREE.BufferGeometry();
 
-				_particleGeom.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-				_particleGeom.addAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
 
+				_particleGeom = new BufferGeometry();
 
+				_particleGeom.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
 
+				_particleGeom.addAttribute( 'alpha', new BufferAttribute( alphas, 1 ) );
 
 
-				particles = new THREE.Points( _particleGeom, pointShaderMaterial );
 
+				particles = new Points( _particleGeom, pointShaderMaterial );
 
 
 				for ( var x = 0; x < amountOfParticles; x ++ ) {
 
 
@@ -146,7 +164,7 @@
 
 				var measureStart = new Date().getTime();
 
 
 				// creating the kdtree takes a lot of time to execute, in turn the nearest neighbour search will be much faster
 
-				kdtree = new THREE.TypedArrayUtils.Kdtree( positions, distanceFunction, 3 );
 
+				kdtree = new TypedArrayUtils.Kdtree( positions, distanceFunction, 3 );
 
 
 				console.log( 'TIME building kdtree', new Date().getTime() - measureStart );
 
 
@@ -187,8 +205,8 @@
 
 				var imagePositionsInRange = kdtree.nearest( [ position.x, position.y, position.z ], 100, maxDistance );
 
 
 				// We combine the nearest neighbour with a view frustum. Doesn't make sense if we change the sprites not in our view... well maybe it does. Whatever you want.
 
-				var _frustum = new THREE.Frustum();
 
-				var _projScreenMatrix = new THREE.Matrix4();
 
+				var _frustum = new Frustum();
 
+				var _projScreenMatrix = new Matrix4();
 
 
 				_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 
 				_frustum.setFromMatrix( _projScreenMatrix );
 
@@ -196,7 +214,7 @@
 
 				for ( var i = 0, il = imagePositionsInRange.length; i < il; i ++ ) {
 
 
 					var object = imagePositionsInRange[ i ];
 
-					var objectPoint = new THREE.Vector3().fromArray( object[ 0 ].obj );
 
+					var objectPoint = new Vector3().fromArray( object[ 0 ].obj );
 
 
 					if ( _frustum.containsPoint( objectPoint ) ) {

+ 72 - 64
examples/webgl_panorama_cube.html
View File 

@@ -12,111 +12,119 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - cube panorama demo
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
+		<script type="module">
 
+			import {
 
+				BoxBufferGeometry,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Texture,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
-		var camera, controls;
 
-		var renderer;
 
-		var scene;
 
+			var camera, controls;
 
+			var renderer;
 
+			var scene;
 
 
-		init();
 
-		animate();
 
+			init();
 
+			animate();
 
 
-		function init() {
 
+			function init() {
 
 
-			var container = document.getElementById( 'container' );
 
+				var container = document.getElementById( 'container' );
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			container.appendChild( renderer.domElement );
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
 
-			scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-			camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
 
-			camera.position.z = 0.01;
 
+				camera = new PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+				camera.position.z = 0.01;
 
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-			controls.enableZoom = false;
 
-			controls.enablePan = false;
 
-			controls.enableDamping = true;
 
-			controls.rotateSpeed = - 0.25;
 
+				controls = new OrbitControls( camera, renderer.domElement );
 
+				controls.enableZoom = false;
 
+				controls.enablePan = false;
 
+				controls.enableDamping = true;
 
+				controls.rotateSpeed = - 0.25;
 
 
-			var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe.jpg", 6 );
 
+				var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe.jpg", 6 );
 
 
-			var materials = [];
 
+				var materials = [];
 
 
-			for ( var i = 0; i < 6; i ++ ) {
 
+				for ( var i = 0; i < 6; i ++ ) {
 
 
-				materials.push( new THREE.MeshBasicMaterial( { map: textures[ i ] } ) );
 
+					materials.push( new MeshBasicMaterial( { map: textures[ i ] } ) );
 
 
-			}
 
+				}
 
 
-			var skyBox = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 1 ), materials );
 
-			skyBox.geometry.scale( 1, 1, - 1 );
 
-			scene.add( skyBox );
 
+				var skyBox = new Mesh( new BoxBufferGeometry( 1, 1, 1 ), materials );
 
+				skyBox.geometry.scale( 1, 1, - 1 );
 
+				scene.add( skyBox );
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-		}
 
+			}
 
 
-		function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
 
+			function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
 
 
-			var textures = [];
 
+				var textures = [];
 
 
-			for ( var i = 0; i < tilesNum; i ++ ) {
 
+				for ( var i = 0; i < tilesNum; i ++ ) {
 
 
-				textures[ i ] = new THREE.Texture();
 
+					textures[ i ] = new Texture();
 
 
-			}
 
+				}
 
 
-			var imageObj = new Image();
 
+				var imageObj = new Image();
 
 
-			imageObj.onload = function () {
 
+				imageObj.onload = function () {
 
 
-				var canvas, context;
 
-				var tileWidth = imageObj.height;
 
+					var canvas, context;
 
+					var tileWidth = imageObj.height;
 
 
-				for ( var i = 0; i < textures.length; i ++ ) {
 
+					for ( var i = 0; i < textures.length; i ++ ) {
 
 
-					canvas = document.createElement( 'canvas' );
 
-					context = canvas.getContext( '2d' );
 
-					canvas.height = tileWidth;
 
-					canvas.width = tileWidth;
 
-					context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
 
-					textures[ i ].image = canvas;
 
-					textures[ i ].needsUpdate = true;
 
+						canvas = document.createElement( 'canvas' );
 
+						context = canvas.getContext( '2d' );
 
+						canvas.height = tileWidth;
 
+						canvas.width = tileWidth;
 
+						context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
 
+						textures[ i ].image = canvas;
 
+						textures[ i ].needsUpdate = true;
 
 
-				}
 
+					}
 
 
-			};
 
+				};
 
 
-			imageObj.src = atlasImgUrl;
 
+				imageObj.src = atlasImgUrl;
 
 
-			return textures;
 
+				return textures;
 
 
-		}
 
+			}
 
 
-		function onWindowResize() {
 
+			function onWindowResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate() {
 
+			function animate() {
 
 
-			requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-			controls.update(); // required when damping is enabled
 
+				controls.update(); // required when damping is enabled
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
 		</script>
 
 	</body>

+ 25 - 15
examples/webgl_panorama_dualfisheye.html
View File 

@@ -22,9 +22,19 @@
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - dualfisheye panorama
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				LinearFilter,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 
@@ -47,11 +57,11 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
 
+				var geometry = new SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
 
 				// invert the geometry on the x-axis so that all of the faces point inward
 
 				geometry.scale( - 1, 1, 1 );
 
 
@@ -86,16 +96,16 @@
 
 
 				//
 
 
-				var texture = new THREE.TextureLoader().load( 'textures/ricoh_theta_s.jpg' );
 
-				texture.minFilter = THREE.LinearFilter;
 
-				texture.format = THREE.RGBFormat;
 
+				var texture = new TextureLoader().load( 'textures/ricoh_theta_s.jpg' );
 
+				texture.minFilter = LinearFilter;
 
+				texture.format = RGBFormat;
 
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				var material = new MeshBasicMaterial( { map: texture } );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -155,7 +165,7 @@
 
 
 				distance += event.deltaY * 0.05;
 
 
-				distance = THREE.Math.clamp( distance, 400, 1000 );
 
+				distance = _Math.clamp( distance, 400, 1000 );
 
 
 			}
 
 
@@ -175,8 +185,8 @@
 
 				}
 
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.Math.degToRad( 90 - lat );
 
-				theta = THREE.Math.degToRad( lon - 180 );
 
+				phi = _Math.degToRad( 90 - lat );
 
+				theta = _Math.degToRad( lon - 180 );
 
 
 				camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );
 
 				camera.position.y = distance * Math.cos( phi );

+ 23 - 14
examples/webgl_panorama_equirectangular.html
View File 

@@ -14,9 +14,18 @@
 
 			drag equirectangular texture into the page.
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshBasicMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				Vector3,
 
+				WebGLRenderer,
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 
@@ -35,23 +44,23 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-				camera.target = new THREE.Vector3( 0, 0, 0 );
 
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
+				camera.target = new Vector3( 0, 0, 0 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 
+				var geometry = new SphereBufferGeometry( 500, 60, 40 );
 
 				// invert the geometry on the x-axis so that all of the faces point inward
 
 				geometry.scale( - 1, 1, 1 );
 
 
-				var texture = new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
+				var texture = new TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' );
 
+				var material = new MeshBasicMaterial( { map: texture } );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -158,7 +167,7 @@
 
 
 				var fov = camera.fov + event.deltaY * 0.05;
 
 
-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
+				camera.fov = _Math.clamp( fov, 10, 75 );
 
 
 				camera.updateProjectionMatrix();
 
 
@@ -180,8 +189,8 @@
 
 				}
 
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.Math.degToRad( 90 - lat );
 
-				theta = THREE.Math.degToRad( lon );
 
+				phi = _Math.degToRad( 90 - lat );
 
+				theta = _Math.degToRad( lon );
 
 
 				camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
 
 				camera.target.y = 500 * Math.cos( phi );

+ 19 - 11
examples/webgl_performance.html
View File 

@@ -13,10 +13,18 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BufferGeometryLoader,
 
+				Color,
 
+				Mesh,
 
+				MeshNormalMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -40,24 +48,24 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 3200;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 
 				objects = [];
 
 
-				var material = new THREE.MeshNormalMaterial();
 
+				var material = new MeshNormalMaterial();
 
 
-				var loader = new THREE.BufferGeometryLoader();
 
+				var loader = new BufferGeometryLoader();
 
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 
 					geometry.computeVertexNormals();
 
 
 					for ( var i = 0; i < 5000; i ++ ) {
 
 
-						var mesh = new THREE.Mesh( geometry, material );
 
+						var mesh = new Mesh( geometry, material );
 
 
 						mesh.position.x = Math.random() * 8000 - 4000;
 
 						mesh.position.y = Math.random() * 8000 - 4000;
 
@@ -74,7 +82,7 @@
 
 
 				} );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

+ 31 - 25
examples/webgl_performance_doublesided.html
View File 

@@ -8,18 +8,24 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				Color,
 
+				CubeTextureLoader,
 
+				DoubleSide,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				MixOperation,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				RGBFormat,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -42,23 +48,23 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 20000 );
 
+				camera = new PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 20000 );
 
 				camera.position.z = 3200;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x050505 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x050505 );
 
 
-				scene.add( new THREE.AmbientLight( 0x050505 ) );
 
+				scene.add( new AmbientLight( 0x050505 ) );
 
 
-				var light = new THREE.PointLight( 0x0011ff, 1, 5500 );
 
+				var light = new PointLight( 0x0011ff, 1, 5500 );
 
 				light.position.set( 4000, 0, 0 );
 
 				scene.add( light );
 
 
-				var light = new THREE.PointLight( 0xff1100, 1, 5500 );
 
+				var light = new PointLight( 0xff1100, 1, 5500 );
 
 				light.position.set( - 4000, 0, 0 );
 
 				scene.add( light );
 
 
-				var light = new THREE.PointLight( 0xffaa00, 2, 3000 );
 
+				var light = new PointLight( 0xffaa00, 2, 3000 );
 
 				light.position.set( 0, 0, 0 );
 
 				scene.add( light );
 
 
@@ -70,16 +76,16 @@
 
 					path + 'pz' + format, path + 'nz' + format
 
 				];
 
 
-				var reflectionCube = new THREE.CubeTextureLoader().load( urls );
 
-				reflectionCube.format = THREE.RGBFormat;
 
+				var reflectionCube = new CubeTextureLoader().load( urls );
 
+				reflectionCube.format = RGBFormat;
 
 
-				var material = new THREE.MeshPhongMaterial( { specular: 0x101010, shininess: 100, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.1, side: THREE.DoubleSide } );
 
+				var material = new MeshPhongMaterial( { specular: 0x101010, shininess: 100, envMap: reflectionCube, combine: MixOperation, reflectivity: 0.1, side: DoubleSide } );
 
 
-				var geometry = new THREE.SphereBufferGeometry( 1, 32, 16, 0, Math.PI );
 
+				var geometry = new SphereBufferGeometry( 1, 32, 16, 0, Math.PI );
 
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
 
-					var mesh = new THREE.Mesh( geometry, material );
 
+					var mesh = new Mesh( geometry, material );
 
 
 					mesh.position.x = Math.random() * 10000 - 5000;
 
 					mesh.position.y = Math.random() * 10000 - 5000;
 
@@ -96,7 +102,7 @@
 
 
 				}
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

+ 19 - 11
examples/webgl_performance_static.html
View File 

@@ -13,10 +13,18 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				BufferGeometryLoader,
 
+				Color,
 
+				Mesh,
 
+				MeshNormalMaterial,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -38,23 +46,23 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 3200;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xffffff );
 
 				scene.matrixAutoUpdate = false;
 
 
-				var material = new THREE.MeshNormalMaterial();
 
+				var material = new MeshNormalMaterial();
 
 
-				var loader = new THREE.BufferGeometryLoader();
 
+				var loader = new BufferGeometryLoader();
 
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
 
 
 					geometry.computeVertexNormals();
 
 
 					for ( var i = 0; i < 7700; i ++ ) {
 
 
-						var mesh = new THREE.Mesh( geometry, material );
 
+						var mesh = new Mesh( geometry, material );
 
 
 						mesh.position.x = Math.random() * 10000 - 5000;
 
 						mesh.position.y = Math.random() * 10000 - 5000;
 
@@ -71,7 +79,7 @@
 
 
 				} );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				//renderer.sortObjects = false;