Examples: Bring namespace back.

examples/css2d_label.html

@@ -18,27 +18,15 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
 		<script type="module">
-			import {
-				AxesHelper,
-				Clock,
-				DirectionalLight,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				TextureLoader,
-				Vector2,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
 			var camera, scene, renderer, labelRenderer;
 
-			var clock = new Clock();
-			var textureLoader = new TextureLoader();
+			var clock = new THREE.Clock();
+			var textureLoader = new THREE.TextureLoader();
 
 			var earth, moon;
 
@@ -50,38 +38,38 @@
 				var EARTH_RADIUS = 1;
 				var MOON_RADIUS = 0.27;
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 10, 5, 20 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				var dirLight = new DirectionalLight( 0xffffff );
+				var dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( 0, 0, 1 );
 				scene.add( dirLight );
 
-				var axesHelper = new AxesHelper( 5 );
+				var axesHelper = new THREE.AxesHelper( 5 );
 				scene.add( axesHelper );
 
 				//
 
-				var earthGeometry = new SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
-				var earthMaterial = new MeshPhongMaterial( {
+				var earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
+				var earthMaterial = new THREE.MeshPhongMaterial( {
 					specular: 0x333333,
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
 					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
 					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
-					normalScale: new Vector2( 0.85, 0.85 )
+					normalScale: new THREE.Vector2( 0.85, 0.85 )
 				} );
-				earth = new Mesh( earthGeometry, earthMaterial );
+				earth = new THREE.Mesh( earthGeometry, earthMaterial );
 				scene.add( earth );
 
-				var moonGeometry = new SphereBufferGeometry( MOON_RADIUS, 16, 16 );
-				var moonMaterial = new MeshPhongMaterial( {
+				var moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
+				var moonMaterial = new THREE.MeshPhongMaterial( {
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 				} );
-				moon = new Mesh( moonGeometry, moonMaterial );
+				moon = new THREE.Mesh( moonGeometry, moonMaterial );
 				scene.add( moon );
 
 				//
@@ -104,7 +92,7 @@
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/css3d_molecules.html

@@ -65,14 +65,7 @@
 		<div id="menu"></div>
 
 		<script type="module">
-			import {
-				Color,
-				PerspectiveCamera,
-				Matrix4,
-				Object3D,
-				Scene,
-				Vector3
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
@@ -83,11 +76,11 @@
 			var root;
 
 			var objects = [];
-			var tmpVec1 = new Vector3();
-			var tmpVec2 = new Vector3();
-			var tmpVec3 = new Vector3();
-			var tmpVec4 = new Vector3();
-			var offset = new Vector3();
+			var tmpVec1 = new THREE.Vector3();
+			var tmpVec2 = new THREE.Vector3();
+			var tmpVec3 = new THREE.Vector3();
+			var tmpVec4 = new THREE.Vector3();
+			var offset = new THREE.Vector3();
 
 			var visualizationType = 2;
 
@@ -123,12 +116,12 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1500;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				root = new Object3D();
+				root = new THREE.Object3D();
 				scene.add( root );
 
 				//
@@ -343,8 +336,8 @@
 					var positions = geometryAtoms.getAttribute( 'position' );
 					var colors = geometryAtoms.getAttribute( 'color' );
 
-					var position = new Vector3();
-					var color = new Color();
+					var position = new THREE.Vector3();
+					var color = new THREE.Color();
 
 					for ( var i = 0; i < positions.count; i ++ ) {
 
@@ -392,8 +385,8 @@
 
 					positions = geometryBonds.getAttribute( 'position' );
 
-					var start = new Vector3();
-					var end = new Vector3();
+					var start = new THREE.Vector3();
+					var end = new THREE.Vector3();
 
 					for ( var i = 0; i < positions.count; i += 2 ) {
 
@@ -429,7 +422,7 @@
 						var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
 						var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
 
-						var objMatrix = new Matrix4().makeRotationAxis( axis.normalize(), radians );
+						var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
 						object.matrix = objMatrix;
 						object.rotation.setFromRotationMatrix( object.matrix, object.rotation.order );
 
@@ -446,7 +439,7 @@
 						bond.className = "bond";
 						bond.style.height = bondLength + "px";
 
-						var joint = new Object3D( bond );
+						var joint = new THREE.Object3D( bond );
 						joint.position.copy( start );
 						joint.position.lerp( end, 0.5 );
 

examples/css3d_orthographic.html

@@ -21,19 +21,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
 
 		<script type="module">
-			import {
-				Color,
-				DoubleSide,
-				Euler,
-				Math as _Math,
-				Mesh,
-				MeshBasicMaterial,
-				OrthographicCamera,
-				PlaneBufferGeometry,
-				Scene,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -49,49 +37,49 @@
 
 				var frustumSize = 500;
 				var aspect = window.innerWidth / window.innerHeight;
-				camera = new OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
+				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
 				camera.position.set( - 200, 200, 200 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene2 = new Scene();
+				scene2 = new THREE.Scene();
 
-				var material = new MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: DoubleSide } );
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
 				// left
 				createPlane(
 					100, 100,
 					'chocolate',
-					new Vector3( - 50, 0, 0 ),
-					new Euler( 0, - 90 * _Math.DEG2RAD, 0 )
+					new THREE.Vector3( - 50, 0, 0 ),
+					new THREE.Euler( 0, - 90 * THREE.Math.DEG2RAD, 0 )
 				);
 				// right
 				createPlane(
 					100, 100,
 					'saddlebrown',
-					new Vector3( 0, 0, 50 ),
-					new Euler( 0, 0, 0 )
+					new THREE.Vector3( 0, 0, 50 ),
+					new THREE.Euler( 0, 0, 0 )
 				);
 				// top
 				createPlane(
 					100, 100,
 					'yellowgreen',
-					new Vector3( 0, 50, 0 ),
-					new Euler( - 90 * _Math.DEG2RAD, 0, 0 )
+					new THREE.Vector3( 0, 50, 0 ),
+					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 				);
 				// bottom
 				createPlane(
 					300, 300,
 					'seagreen',
-					new Vector3( 0, - 50, 0 ),
-					new Euler( - 90 * _Math.DEG2RAD, 0, 0 )
+					new THREE.Vector3( 0, - 50, 0 ),
+					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 				);
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -117,8 +105,8 @@
 					object.rotation.copy( rot );
 					scene2.add( object );
 
-					var geometry = new PlaneBufferGeometry( width, height );
-					var mesh = new Mesh( geometry, material );
+					var geometry = new THREE.PlaneBufferGeometry( width, height );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
 					scene.add( mesh );

examples/css3d_panorama.html

@@ -10,17 +10,12 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama demo. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Math as _Math,
-				Scene,
-				Vector3
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 			var camera, scene, renderer;
-			var target = new Vector3();
+			var target = new THREE.Vector3();
 
 			var lon = 90, lat = 0;
 			var phi = 0, theta = 0;
@@ -32,9 +27,9 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var sides = [
 					{
@@ -139,7 +134,7 @@
 
 				var fov = camera.fov + event.deltaY * 0.05;
 
-				camera.fov = _Math.clamp( fov, 10, 75 );
+				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
 				camera.updateProjectionMatrix();
 
@@ -176,8 +171,8 @@
 
 				lon += 0.1;
 				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = _Math.degToRad( 90 - lat );
-				theta = _Math.degToRad( lon );
+				phi = THREE.Math.degToRad( 90 - lat );
+				theta = THREE.Math.degToRad( lon );
 
 				target.x = Math.sin( phi ) * Math.cos( theta );
 				target.y = Math.cos( phi );

examples/css3d_panorama_deviceorientation.html

@@ -10,11 +10,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Object3D,
-				Scene
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -27,11 +23,11 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				controls = new DeviceOrientationControls( camera );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var sides = [
 					{
@@ -66,7 +62,7 @@
 					}
 				];
 
-				var cube = new Object3D();
+				var cube = new THREE.Object3D();
 				scene.add( cube );
 
 				for ( var i = 0; i < sides.length; i ++ ) {

examples/css3d_periodictable.html

@@ -93,12 +93,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Object3D,
-				Scene,
-				Vector3
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -235,10 +230,10 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 3000;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				// table
 
@@ -273,7 +268,7 @@
 
 					//
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 					object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
 					object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
 
@@ -283,14 +278,14 @@
 
 				// sphere
 
-				var vector = new Vector3();
+				var vector = new THREE.Vector3();
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 					var phi = Math.acos( - 1 + ( 2 * i ) / l );
 					var theta = Math.sqrt( l * Math.PI ) * phi;
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 
 					object.position.setFromSphericalCoords( 800, phi, theta );
 
@@ -304,14 +299,14 @@
 
 				// helix
 
-				var vector = new Vector3();
+				var vector = new THREE.Vector3();
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 					var theta = i * 0.175 + Math.PI;
 					var y = - ( i * 8 ) + 450;
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 
 					object.position.setFromCylindricalCoords( 900, theta, y );
 
@@ -329,7 +324,7 @@
 
 				for ( var i = 0; i < objects.length; i ++ ) {
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 
 					object.position.x = ( ( i % 5 ) * 400 ) - 800;
 					object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;

examples/css3d_sandbox.html

@@ -17,16 +17,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</div>
 
 		<script type="module">
-			import {
-				Color,
-				DoubleSide,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Mesh,
-				MeshBasicMaterial,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -42,15 +33,15 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 200, 200 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene2 = new Scene();
+				scene2 = new THREE.Scene();
 
-				var material = new MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: DoubleSide } );
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
 				//
 
@@ -60,7 +51,7 @@
 					element.style.width = '100px';
 					element.style.height = '100px';
 					element.style.opacity = ( i < 5 ) ? 0.5 : 1;
-					element.style.background = new Color( Math.random() * 0xffffff ).getStyle();
+					element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
 
 					var object = new CSS3DObject( element );
 					object.position.x = Math.random() * 200 - 100;
@@ -73,8 +64,8 @@
 					object.scale.y = Math.random() + 0.5;
 					scene2.add( object );
 
-					var geometry = new PlaneBufferGeometry( 100, 100 );
-					var mesh = new Mesh( geometry, material );
+					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
 					mesh.scale.copy( object.scale );
@@ -84,7 +75,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/css3d_sprites.html

@@ -22,10 +22,7 @@
 		<div id="container"></div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Scene
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
@@ -43,11 +40,11 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.set( 600, 400, 1500 );
 				camera.lookAt( 0, 0, 0 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function () {

examples/css3d_youtube.html

@@ -24,11 +24,7 @@
 		<div id="blocker"></div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Group,
-				Scene
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -65,16 +61,16 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.set( 500, 350, 750 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				renderer = new CSS3DRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
-				var group = new Group();
+				var group = new THREE.Group();
 				group.add( new Element( 'SJOz3qjfQXU', 0, 0, 240, 0 ) );
 				group.add( new Element( 'Y2-xZ-1HE-Q', 240, 0, 0, Math.PI / 2 ) );
 				group.add( new Element( 'IrydklNpcFI', 0, 0, - 240, Math.PI ) );

examples/misc_animation_authoring.html

@@ -16,23 +16,7 @@
 		<script src="js/libs/timeliner_gui.min.js"></script>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				DirectionalLight,
-				GridHelper,
-				InterpolateLinear,
-				InterpolateSmooth,
-				Math as _Math,
-				MeshLambertMaterial,
-				Mesh,
-				PerspectiveCamera,
-				QuaternionKeyframeTrack,
-				Scene,
-				TextureLoader,
-				UVMapping,
-				VectorKeyframeTrack,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TransformControls } from './jsm/controls/TransformControls.js';
 			import { TimelinerController } from './jsm/animation/TimelinerController.js';
@@ -44,36 +28,36 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.set( 1000, 500, 1000 );
 				camera.lookAt( 0, 200, 0 );
 
-				scene = new Scene();
-				scene.add( new GridHelper( 1000, 10 ) );
+				scene = new THREE.Scene();
+				scene.add( new THREE.GridHelper( 1000, 10 ) );
 
-				var light = new DirectionalLight( 0xffffff, 2 );
+				var light = new THREE.DirectionalLight( 0xffffff, 2 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
 
-				var texture = new TextureLoader().load( 'textures/crate.gif', render );
-				texture.mapping = UVMapping;
+				var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
+				texture.mapping = THREE.UVMapping;
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				var geometry = new BoxBufferGeometry( 200, 200, 200 );
-				var material = new MeshLambertMaterial( { map: texture } );
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				var material = new THREE.MeshLambertMaterial( { map: texture } );
 
 				control = new TransformControls( camera, renderer.domElement );
 				control.addEventListener( 'change', render );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				mesh.name = "MyBox";
 				scene.add( mesh );
 
@@ -92,7 +76,7 @@
 
 						case 17: // Ctrl
 							control.setTranslationSnap( 100 );
-							control.setRotationSnap( _Math.degToRad( 15 ) );
+							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
 							break;
 
 						case 87: // W
@@ -137,17 +121,17 @@
 				var trackInfo = [
 
 					{
-						type: VectorKeyframeTrack,
+						type: THREE.VectorKeyframeTrack,
 						propertyPath: 'MyBox.position',
 						initialValue: [ 0, 0, 0 ],
-						interpolation: InterpolateSmooth
+						interpolation: THREE.InterpolateSmooth
 					},
 
 					{
-						type: QuaternionKeyframeTrack,
+						type: THREE.QuaternionKeyframeTrack,
 						propertyPath: 'MyBox.quaternion',
 						initialValue: [ 0, 0, 0, 1 ],
-						interpolation: InterpolateLinear
+						interpolation: THREE.InterpolateLinear
 
 					}
 

examples/misc_animation_groups.html

@@ -13,24 +13,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AnimationClip,
-				AnimationMixer,
-				AnimationObjectGroup,
-				BoxBufferGeometry,
-				Clock,
-				ColorKeyframeTrack,
-				InterpolateDiscrete,
-				Mesh,
-				MeshBasicMaterial,
-				NumberKeyframeTrack,
-				PerspectiveCamera,
-				Quaternion,
-				QuaternionKeyframeTrack,
-				Scene,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -42,22 +25,22 @@
 
 			function init() {
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				//
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 50, 50, 100 );
 				camera.lookAt( scene.position );
 
 				// all objects of this animation group share a common animation state
 
-				var animationGroup = new AnimationObjectGroup();
+				var animationGroup = new THREE.AnimationObjectGroup();
 
 				//
 
-				var geometry = new BoxBufferGeometry( 5, 5, 5 );
-				var material = new MeshBasicMaterial( { transparent: true } );
+				var geometry = new THREE.BoxBufferGeometry( 5, 5, 5 );
+				var material = new THREE.MeshBasicMaterial( { transparent: true } );
 
 				//
 
@@ -65,7 +48,7 @@
 
 					for ( var j = 0; j < 5; j ++ ) {
 
-						var mesh = new Mesh( geometry, material );
+						var mesh = new THREE.Mesh( geometry, material );
 
 						mesh.position.x = 32 - ( 16 * i );
 						mesh.position.y = 0;
@@ -80,28 +63,28 @@
 
 				// create some keyframe tracks
 
-				var xAxis = new Vector3( 1, 0, 0 );
-				var qInitial = new Quaternion().setFromAxisAngle( xAxis, 0 );
-				var qFinal = new Quaternion().setFromAxisAngle( xAxis, Math.PI );
-				var quaternionKF = new QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
+				var xAxis = new THREE.Vector3( 1, 0, 0 );
+				var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
+				var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
+				var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );
 
-				var colorKF = new ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], InterpolateDiscrete );
-				var opacityKF = new NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
+				var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );
+				var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );
 
 				// create clip
 
-				var clip = new AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
+				var clip = new THREE.AnimationClip( 'default', 3, [ quaternionKF, colorKF, opacityKF ] );
 
 				// apply the animation group to the mixer as the root object
 
-				mixer = new AnimationMixer( animationGroup );
+				mixer = new THREE.AnimationMixer( animationGroup );
 
 				var clipAction = mixer.clipAction( clip );
 				clipAction.play();
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -113,7 +96,7 @@
 
 				//
 
-				clock = new Clock();
+				clock = new THREE.Clock();
 
 				//
 

examples/misc_animation_keys.html

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

examples/misc_boxselection.html

@@ -29,18 +29,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				Color,
-				Mesh,
-				MeshLambertMaterial,
-				PCFShadowMap,
-				PerspectiveCamera,
-				Scene,
-				SpotLight,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -58,15 +47,15 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1000;
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
-				var light = new SpotLight( 0xffffff, 1.5 );
+				var light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				light.angle = Math.PI / 9;
 
@@ -78,11 +67,11 @@
 
 				scene.add( light );
 
-				var geometry = new BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 
-					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 1600 - 800;
 					object.position.y = Math.random() * 900 - 450;
@@ -103,12 +92,12 @@
 
 				}
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = PCFShadowMap;
+				renderer.shadowMap.type = THREE.PCFShadowMap;
 
 				container.appendChild( renderer.domElement );
 
@@ -152,7 +141,7 @@
 
 				for ( var item of selectionBox.collection ) {
 
-					item.material.emissive = new Color( 0x000000 );
+					item.material.emissive = new THREE.Color( 0x000000 );
 
 				}
 
@@ -169,7 +158,7 @@
 
 					for ( var i = 0; i < selectionBox.collection.length; i ++ ) {
 
-						selectionBox.collection[ i ].material.emissive = new Color( 0x000000 );
+						selectionBox.collection[ i ].material.emissive = new THREE.Color( 0x000000 );
 
 					}
 
@@ -182,7 +171,7 @@
 
 					for ( var i = 0; i < allSelected.length; i ++ ) {
 
-						allSelected[ i ].material.emissive = new Color( 0x0000ff );
+						allSelected[ i ].material.emissive = new THREE.Color( 0x0000ff );
 
 					}
 
@@ -201,7 +190,7 @@
 
 				for ( var i = 0; i < allSelected.length; i ++ ) {
 
-					allSelected[ i ].material.emissive = new Color( 0x0000ff );
+					allSelected[ i ].material.emissive = new THREE.Color( 0x0000ff );
 
 				}
 

examples/misc_controls_deviceorientation.html

@@ -14,16 +14,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 
@@ -34,31 +25,31 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
 				controls = new DeviceOrientationControls( camera );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				var geometry = new SphereBufferGeometry( 500, 60, 40 );
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
 				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
-				var material = new MeshBasicMaterial( {
-					map: new TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
+				var material = new THREE.MeshBasicMaterial( {
+					map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
 				} );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				var helperGeometry = new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
-				var helperMaterial = new MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
-				var helper = new Mesh( helperGeometry, helperMaterial );
+				var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
+				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
+				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
 				scene.add( helper );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/misc_controls_fly.html

@@ -28,25 +28,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Clock,
-				DirectionalLight,
-				Float32BufferAttribute,
-				FogExp2,
-				Mesh,
-				MeshLambertMaterial,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Points,
-				PointsMaterial,
-				Scene,
-				SphereBufferGeometry,
-				TextureLoader,
-				Vector2,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -72,82 +54,82 @@
 
 			var composer;
 
-			var textureLoader = new TextureLoader();
+			var textureLoader = new THREE.TextureLoader();
 
-			var d, dPlanet, dMoon, dMoonVec = new Vector3();
+			var d, dPlanet, dMoon, dMoonVec = new THREE.Vector3();
 
-			var clock = new Clock();
+			var clock = new THREE.Clock();
 
 			init();
 			animate();
 
 			function init() {
 
-				camera = new PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
+				camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
 				camera.position.z = radius * 5;
 
-				scene = new Scene();
-				scene.fog = new FogExp2( 0x000000, 0.00000025 );
+				scene = new THREE.Scene();
+				scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
 
-				dirLight = new DirectionalLight( 0xffffff );
+				dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 1, 0, 1 ).normalize();
 				scene.add( dirLight );
 
-				var materialNormalMap = new MeshPhongMaterial( {
+				var materialNormalMap = new THREE.MeshPhongMaterial( {
 
 					specular: 0x333333,
 					shininess: 15,
 					map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
 					specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
 					normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
-					normalScale: new Vector2( 0.85, 0.85 )
+					normalScale: new THREE.Vector2( 0.85, 0.85 )
 
 				} );
 
 				// planet
 
-				geometry = new SphereBufferGeometry( radius, 100, 50 );
+				geometry = new THREE.SphereBufferGeometry( radius, 100, 50 );
 
-				meshPlanet = new Mesh( geometry, materialNormalMap );
+				meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
 				meshPlanet.rotation.y = 0;
 				meshPlanet.rotation.z = tilt;
 				scene.add( meshPlanet );
 
 				// clouds
 
-				var materialClouds = new MeshLambertMaterial( {
+				var materialClouds = new THREE.MeshLambertMaterial( {
 
 					map: textureLoader.load( "textures/planets/earth_clouds_1024.png" ),
 					transparent: true
 
 				} );
 
-				meshClouds = new Mesh( geometry, materialClouds );
+				meshClouds = new THREE.Mesh( geometry, materialClouds );
 				meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
 				meshClouds.rotation.z = tilt;
 				scene.add( meshClouds );
 
 				// moon
 
-				var materialMoon = new MeshPhongMaterial( {
+				var materialMoon = new THREE.MeshPhongMaterial( {
 
 					map: textureLoader.load( "textures/planets/moon_1024.jpg" )
 
 				} );
 
-				meshMoon = new Mesh( geometry, materialMoon );
+				meshMoon = new THREE.Mesh( geometry, materialMoon );
 				meshMoon.position.set( radius * 5, 0, 0 );
 				meshMoon.scale.set( moonScale, moonScale, moonScale );
 				scene.add( meshMoon );
 
 				// stars
 
-				var i, r = radius, starsGeometry = [ new BufferGeometry(), new BufferGeometry() ];
+				var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];
 
 				var vertices1 = [];
 				var vertices2 = [];
 
-				var vertex = new Vector3();
+				var vertex = new THREE.Vector3();
 
 				for ( i = 0; i < 250; i ++ ) {
 
@@ -171,22 +153,22 @@
 
 				}
 
-				starsGeometry[ 0 ].addAttribute( 'position', new Float32BufferAttribute( vertices1, 3 ) );
-				starsGeometry[ 1 ].addAttribute( 'position', new Float32BufferAttribute( vertices2, 3 ) );
+				starsGeometry[ 0 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices1, 3 ) );
+				starsGeometry[ 1 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
 
 				var stars;
 				var starsMaterials = [
-					new PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
-					new PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
-					new PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
-					new PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
-					new PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
-					new PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
+					new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 				];
 
 				for ( i = 10; i < 30; i ++ ) {
 
-					stars = new Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
+					stars = new THREE.Points( starsGeometry[ i % 2 ], starsMaterials[ i % 6 ] );
 
 					stars.rotation.x = Math.random() * 6;
 					stars.rotation.y = Math.random() * 6;
@@ -200,7 +182,7 @@
 
 				}
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				document.body.appendChild( renderer.domElement );

examples/misc_controls_map.html

@@ -23,18 +23,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				Color,
-				DirectionalLight,
-				FogExp2,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
@@ -48,16 +37,16 @@
 
 			function init() {
 
-				scene = new Scene();
-				scene.background = new Color( 0xcccccc );
-				scene.fog = new FogExp2( 0xcccccc, 0.002 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcccccc );
+				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 400, 200, 0 );
 
 				// controls
@@ -78,13 +67,13 @@
 
 				// world
 
-				var geometry = new BoxBufferGeometry( 1, 1, 1 );
+				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 				geometry.translate( 0, 0.5, 0 );
-				var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 1600 - 800;
 					mesh.position.y = 0;
 					mesh.position.z = Math.random() * 1600 - 800;
@@ -99,15 +88,15 @@
 
 				// lights
 
-				var light = new DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new DirectionalLight( 0x002288 );
+				var light = new THREE.DirectionalLight( 0x002288 );
 				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
-				var light = new AmbientLight( 0x222222 );
+				var light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
 				//

examples/misc_controls_orbit.html

@@ -23,18 +23,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				CylinderBufferGeometry,
-				DirectionalLight,
-				FogExp2,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
@@ -46,16 +35,16 @@
 
 			function init() {
 
-				scene = new Scene();
-				scene.background = new Color( 0xcccccc );
-				scene.fog = new FogExp2( 0xcccccc, 0.002 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcccccc );
+				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 400, 200, 0 );
 
 				// controls
@@ -76,12 +65,12 @@
 
 				// world
 
-				var geometry = new CylinderBufferGeometry( 0, 10, 30, 4, 1 );
-				var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 1600 - 800;
 					mesh.position.y = 0;
 					mesh.position.z = Math.random() * 1600 - 800;
@@ -93,15 +82,15 @@
 
 				// lights
 
-				var light = new DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new DirectionalLight( 0x002288 );
+				var light = new THREE.DirectionalLight( 0x002288 );
 				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
-				var light = new AmbientLight( 0x222222 );
+				var light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
 				//

examples/misc_controls_pointerlock.html

@@ -57,23 +57,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Color,
-				Float32BufferAttribute,
-				Fog,
-				HemisphereLight,
-				Mesh,
-				MeshBasicMaterial,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Raycaster,
-				Scene,
-				Vector3,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
 
@@ -90,24 +74,24 @@
 			var canJump = false;
 
 			var prevTime = performance.now();
-			var velocity = new Vector3();
-			var direction = new Vector3();
-			var vertex = new Vector3();
-			var color = new Color();
+			var velocity = new THREE.Vector3();
+			var direction = new THREE.Vector3();
+			var vertex = new THREE.Vector3();
+			var color = new THREE.Color();
 
 			init();
 			animate();
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.y = 10;
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
-				scene.fog = new Fog( 0xffffff, 0, 750 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
+				scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
 
-				var light = new HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
+				var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
 				light.position.set( 0.5, 1, 0.75 );
 				scene.add( light );
 
@@ -202,11 +186,11 @@
 				document.addEventListener( 'keydown', onKeyDown, false );
 				document.addEventListener( 'keyup', onKeyUp, false );
 
-				raycaster = new Raycaster( new Vector3(), new Vector3( 0, - 1, 0 ), 0, 10 );
+				raycaster = new THREE.Raycaster( new THREE.Vector3(), new THREE.Vector3( 0, - 1, 0 ), 0, 10 );
 
 				// floor
 
-				var floorGeometry = new PlaneBufferGeometry( 2000, 2000, 100, 100 );
+				var floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
 				floorGeometry.rotateX( - Math.PI / 2 );
 
 				// vertex displacement
@@ -237,16 +221,16 @@
 
 				}
 
-				floorGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				floorGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var floorMaterial = new MeshBasicMaterial( { vertexColors: VertexColors } );
+				var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
-				var floor = new Mesh( floorGeometry, floorMaterial );
+				var floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				scene.add( floor );
 
 				// objects
 
-				var boxGeometry = new BoxBufferGeometry( 20, 20, 20 );
+				var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 				boxGeometry = boxGeometry.toNonIndexed(); // ensure each face has unique vertices
 
 				position = boxGeometry.attributes.position;
@@ -259,14 +243,14 @@
 
 				}
 
-				boxGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var boxMaterial = new MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: VertexColors } );
+					var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
 					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					var box = new Mesh( boxGeometry, boxMaterial );
+					var box = new THREE.Mesh( boxGeometry, boxMaterial );
 					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
 					box.position.y = Math.floor( Math.random() * 20 ) * 20 + 10;
 					box.position.z = Math.floor( Math.random() * 20 - 10 ) * 20;
@@ -278,7 +262,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/misc_controls_trackball.html

@@ -23,18 +23,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				CylinderBufferGeometry,
-				DirectionalLight,
-				FogExp2,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -48,21 +37,21 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
 				// world
 
-				scene = new Scene();
-				scene.background = new Color( 0xcccccc );
-				scene.fog = new FogExp2( 0xcccccc, 0.002 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcccccc );
+				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
-				var geometry = new CylinderBufferGeometry( 0, 10, 30, 4, 1 );
-				var material = new MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = ( Math.random() - 0.5 ) * 1000;
 					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
 					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
@@ -75,21 +64,21 @@
 
 				// lights
 
-				var light = new DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var light = new DirectionalLight( 0x002288 );
+				var light = new THREE.DirectionalLight( 0x002288 );
 				light.position.set( - 1, - 1, - 1 );
 				scene.add( light );
 
-				var light = new AmbientLight( 0x222222 );
+				var light = new THREE.AmbientLight( 0x222222 );
 				scene.add( light );
 
 
 				// renderer
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/misc_controls_transform.html

@@ -15,17 +15,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				DirectionalLight,
-				GridHelper,
-				Mesh,
-				MeshLambertMaterial,
-				PerspectiveCamera,
-				Scene,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { TransformControls } from './jsm/controls/TransformControls.js';
@@ -37,29 +27,29 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				//
 
-				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.set( 1000, 500, 1000 );
 				camera.lookAt( 0, 200, 0 );
 
-				scene = new Scene();
-				scene.add( new GridHelper( 1000, 10 ) );
+				scene = new THREE.Scene();
+				scene.add( new THREE.GridHelper( 1000, 10 ) );
 
-				var light = new DirectionalLight( 0xffffff, 2 );
+				var light = new THREE.DirectionalLight( 0xffffff, 2 );
 				light.position.set( 1, 1, 1 );
 				scene.add( light );
 
-				var texture = new TextureLoader().load( 'textures/crate.gif', render );
+				var texture = new THREE.TextureLoader().load( 'textures/crate.gif', render );
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-				var geometry = new BoxBufferGeometry( 200, 200, 200 );
-				var material = new MeshLambertMaterial( { map: texture, transparent: true } );
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				var material = new THREE.MeshLambertMaterial( { map: texture, transparent: true } );
 
 				orbit = new OrbitControls( camera, renderer.domElement );
 				orbit.update();
@@ -74,7 +64,7 @@
 
 				} );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				control.attach( mesh );

examples/misc_exporter_collada.html

@@ -13,22 +13,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				CubeTextureLoader,
-				DoubleSide,
-				DirectionalLight,
-				MeshBasicMaterial,
-				MeshLambertMaterial,
-				MeshPhongMaterial,
-				Mesh,
-				PerspectiveCamera,
-				RepeatWrapping,
-				Scene,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
@@ -59,8 +44,8 @@
 			var teapot, textureCube;
 
 			// allocate these just once
-			var diffuseColor = new Color();
-			var specularColor = new Color();
+			var diffuseColor = new THREE.Color();
+			var specularColor = new THREE.Color();
 
 			init();
 			render();
@@ -74,17 +59,17 @@
 				var canvasHeight = window.innerHeight;
 
 				// CAMERA
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 80000 );
 				camera.position.set( - 600, 550, 1300 );
 
 				// LIGHTS
-				ambientLight = new AmbientLight( 0x333333 );	// 0.2
+				ambientLight = new THREE.AmbientLight( 0x333333 );	// 0.2
 
-				light = new DirectionalLight( 0xFFFFFF, 1.0 );
+				light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
 				// direction is set in GUI
 
 				// RENDERER
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( canvasWidth, canvasHeight );
 				renderer.gammaInput = true;
@@ -99,8 +84,8 @@
 				cameraControls.addEventListener( 'change', render );
 
 				// TEXTURE MAP
-				var textureMap = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				textureMap.wrapS = textureMap.wrapT = RepeatWrapping;
+				var textureMap = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				textureMap.wrapS = textureMap.wrapT = THREE.RepeatWrapping;
 				textureMap.anisotropy = 16;
 
 				// REFLECTION MAP
@@ -111,27 +96,27 @@
 					path + "pz.jpg", path + "nz.jpg"
 				];
 
-				textureCube = new CubeTextureLoader().load( urls );
+				textureCube = new THREE.CubeTextureLoader().load( urls );
 
 				// MATERIALS
-				var materialColor = new Color();
+				var materialColor = new THREE.Color();
 				materialColor.setRGB( 1.0, 1.0, 1.0 );
 
-				wireMaterial = new MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
+				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } );
 
-				flatMaterial = new MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: DoubleSide } );
+				flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );
 
-				gouraudMaterial = new MeshLambertMaterial( { color: materialColor, side: DoubleSide } );
+				gouraudMaterial = new THREE.MeshLambertMaterial( { color: materialColor, side: THREE.DoubleSide } );
 
-				phongMaterial = new MeshPhongMaterial( { color: materialColor, side: DoubleSide } );
+				phongMaterial = new THREE.MeshPhongMaterial( { color: materialColor, side: THREE.DoubleSide } );
 
-				texturedMaterial = new MeshPhongMaterial( { color: materialColor, map: textureMap, side: DoubleSide } );
+				texturedMaterial = new THREE.MeshPhongMaterial( { color: materialColor, map: textureMap, side: THREE.DoubleSide } );
 
-				reflectiveMaterial = new MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: DoubleSide } );
+				reflectiveMaterial = new THREE.MeshPhongMaterial( { color: materialColor, envMap: textureCube, side: THREE.DoubleSide } );
 
 				// scene itself
-				scene = new Scene();
-				scene.background = new Color( 0xAAAAAA );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xAAAAAA );
 
 				scene.add( ambientLight );
 				scene.add( light );
@@ -336,7 +321,7 @@
 					effectController.fitLid,
 					! effectController.nonblinn );
 
-				teapot = new Mesh(
+				teapot = new THREE.Mesh(
 					teapotGeometry,
 					shading === "wireframe" ? wireMaterial : (
 						shading === "flat" ? flatMaterial : (

examples/misc_exporter_draco.html

@@ -27,21 +27,7 @@
 		<script src="js/libs/draco/draco_encoder.js"></script>
 
 		<script type="module">
-			import {
-				Color,
-				DirectionalLight,
-				Fog,
-				HemisphereLight,
-				GridHelper,
-				MeshPhongMaterial,
-				Mesh,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				TorusKnotGeometry,
-				TorusKnotBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { DRACOExporter } from './jsm/exporters/DRACOExporter.js';
@@ -55,9 +41,9 @@
 
 				scene.remove( mesh );
 
-				var geometry = new TorusKnotBufferGeometry( 50, 15, 200, 30 );
-				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
-				mesh = new Mesh( geometry, material );
+				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
@@ -68,9 +54,9 @@
 
 				scene.remove( mesh );
 
-				var geometry = new TorusKnotGeometry( 50, 15, 200, 30 );
-				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
-				mesh = new Mesh( geometry, material );
+				var geometry = new THREE.TorusKnotGeometry( 50, 15, 200, 30 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
@@ -79,22 +65,22 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 100, 200 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xa0a0a0 );
-				scene.fog = new Fog( 0xa0a0a0, 200, 1000 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xa0a0a0 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
 
 				exporter = new DRACOExporter();
 
 				//
 
-				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new DirectionalLight( 0xffffff, 0.5 );
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -105,16 +91,16 @@
 
 				// ground
 
-				var ground = new Mesh(
-					new PlaneBufferGeometry( 2000, 2000 ),
-					new MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
+				var ground = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 2000, 2000 ),
+					new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } )
 				);
 				ground.rotation.x = - Math.PI / 2;
 				ground.position.y = - 75;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new GridHelper( 2000, 20, 0x000000, 0x000000 );
+				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				grid.position.y = - 75;
@@ -122,16 +108,16 @@
 
 				// export mesh
 
-				var geometry = new TorusKnotBufferGeometry( 50, 15, 200, 30 );
-				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
-				mesh = new Mesh( geometry, material );
+				var geometry = new THREE.TorusKnotBufferGeometry( 50, 15, 200, 30 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;

examples/misc_exporter_gltf.html

@@ -10,7 +10,7 @@
 		<div id="info">
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - gltf<br/><br/>
 			<button id="export_scene">Export Scene1</button>
-			<button id="export_scenes">Export Scene1 and Scene 2</button>
+			<button id="export_scenes">Export Scene1 and THREE.Scene 2</button>
 			<button id="export_object">Export Sphere</button><br/>
 			<button id="export_obj">Export WaltHead</button>
 			<button id="export_objects">Export Sphere and Grid</button>
@@ -25,44 +25,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				AxesHelper,
-				BoxBufferGeometry,
-				BufferAttribute,
-				BufferGeometry,
-				CircleBufferGeometry,
-				CylinderBufferGeometry,
-				DirectionalLight,
-				DoubleSide,
-				GridHelper,
-				Group,
-				IcosahedronBufferGeometry,
-				LatheBufferGeometry,
-				Line,
-				LineBasicMaterial,
-				LineLoop,
-				Mesh,
-				MeshBasicMaterial,
-				MeshLambertMaterial,
-				MeshStandardMaterial,
-				OctahedronBufferGeometry,
-				OrthographicCamera,
-				PerspectiveCamera,
-				Points,
-				PointsMaterial,
-				RepeatWrapping,
-				RingBufferGeometry,
-				Scene,
-				SphereBufferGeometry,
-				TetrahedronBufferGeometry,
-				TextureLoader,
-				TorusKnotBufferGeometry,
-				TriangleStripDrawMode,
-				Vector2,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OBJLoader } from './jsm/loaders/OBJLoader.js';
 			import { GLTFExporter } from './jsm/exporters/GLTFExporter.js';
@@ -174,13 +137,13 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				scene1 = new Scene();
+				scene1 = new THREE.Scene();
 				scene1.name = 'Scene1';
 
 				// ---------------------------------------------------------------------
 				// Perspective Camera
 				// ---------------------------------------------------------------------
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.set( 600, 400, 0 );
 
 				camera.name = "PerspectiveCamera";
@@ -189,14 +152,14 @@
 				// ---------------------------------------------------------------------
 				// Ambient light
 				// ---------------------------------------------------------------------
-				var light = new AmbientLight( 0xffffff, 0.2 );
+				var light = new THREE.AmbientLight( 0xffffff, 0.2 );
 				light.name = 'AmbientLight';
 				scene1.add( light );
 
 				// ---------------------------------------------------------------------
 				// DirectLight
 				// ---------------------------------------------------------------------
-				light = new DirectionalLight( 0xffffff, 1 );
+				light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.target.position.set( 0, 0, - 1 );
 				light.add( light.target );
 				light.lookAt( - 1, - 1, 0 );
@@ -206,7 +169,7 @@
 				// ---------------------------------------------------------------------
 				// Grid
 				// ---------------------------------------------------------------------
-				gridHelper = new GridHelper( 2000, 20 );
+				gridHelper = new THREE.GridHelper( 2000, 20 );
 				gridHelper.position.y = - 50;
 				gridHelper.name = "Grid";
 				scene1.add( gridHelper );
@@ -214,7 +177,7 @@
 				// ---------------------------------------------------------------------
 				// Axes
 				// ---------------------------------------------------------------------
-				var axes = new AxesHelper( 500 );
+				var axes = new THREE.AxesHelper( 500 );
 				axes.name = "AxesHelper";
 				scene1.add( axes );
 
@@ -222,36 +185,36 @@
 				// Simple geometry with basic material
 				// ---------------------------------------------------------------------
 				// Icosahedron
-				var mapGrid = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				mapGrid.wrapS = mapGrid.wrapT = RepeatWrapping;
-				var material = new MeshBasicMaterial( {
+				var mapGrid = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				mapGrid.wrapS = mapGrid.wrapT = THREE.RepeatWrapping;
+				var material = new THREE.MeshBasicMaterial( {
 					color: 0xffffff,
 					map: mapGrid
 				} );
 
-				object = new Mesh( new IcosahedronBufferGeometry( 75, 0 ), material );
+				object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( - 200, 0, 200 );
 				object.name = 'Icosahedron';
 				scene1.add( object );
 
 				// Octahedron
-				material = new MeshBasicMaterial( {
+				material = new THREE.MeshBasicMaterial( {
 					color: 0x0000ff,
 					wireframe: true
 				} );
-				object = new Mesh( new OctahedronBufferGeometry( 75, 1 ), material );
+				object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 1 ), material );
 				object.position.set( 0, 0, 200 );
 				object.name = 'Octahedron';
 				scene1.add( object );
 
 				// Tetrahedron
-				material = new MeshBasicMaterial( {
+				material = new THREE.MeshBasicMaterial( {
 					color: 0xff0000,
 					transparent: true,
 					opacity: 0.5
 				} );
 
-				object = new Mesh( new TetrahedronBufferGeometry( 75, 0 ), material );
+				object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( 200, 0, 200 );
 				object.name = 'Tetrahedron';
 				scene1.add( object );
@@ -260,33 +223,33 @@
 				// Buffered geometry primitives
 				// ---------------------------------------------------------------------
 				// Sphere
-				material = new MeshStandardMaterial( {
+				material = new THREE.MeshStandardMaterial( {
 					color: 0xffff00,
 					metalness: 0.5,
 					roughness: 1.0,
 					flatShading: true
 				} );
-				sphere = new Mesh( new SphereBufferGeometry( 70, 10, 10 ), material );
+				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 70, 10, 10 ), material );
 				sphere.position.set( 0, 0, 0 );
 				sphere.name = "Sphere";
 				scene1.add( sphere );
 
 				// Cylinder
-				material = new MeshStandardMaterial( {
+				material = new THREE.MeshStandardMaterial( {
 					color: 0xff00ff,
 					flatShading: true
 				} );
-				object = new Mesh( new CylinderBufferGeometry( 10, 80, 100 ), material );
+				object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 10, 80, 100 ), material );
 				object.position.set( 200, 0, 0 );
 				object.name = "Cylinder";
 				scene1.add( object );
 
 				// TorusKnot
-				material = new MeshStandardMaterial( {
+				material = new THREE.MeshStandardMaterial( {
 					color: 0xff0000,
 					roughness: 1
 				} );
-				object = new Mesh( new TorusKnotBufferGeometry( 50, 15, 40, 10 ), material );
+				object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 15, 40, 10 ), material );
 				object.position.set( - 200, 0, 0 );
 				object.name = "Cylinder";
 				scene1.add( object );
@@ -295,15 +258,15 @@
 				// ---------------------------------------------------------------------
 				// Hierarchy
 				// ---------------------------------------------------------------------
-				var mapWood = new TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
-				material = new MeshStandardMaterial( { map: mapWood, side: DoubleSide } );
+				var mapWood = new THREE.TextureLoader().load( 'textures/hardwood2_diffuse.jpg' );
+				material = new THREE.MeshStandardMaterial( { map: mapWood, side: THREE.DoubleSide } );
 
-				object = new Mesh( new BoxBufferGeometry( 40, 100, 100 ), material );
+				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 100, 100 ), material );
 				object.position.set( - 200, 0, 400 );
 				object.name = "Cube";
 				scene1.add( object );
 
-				var object2 = new Mesh( new BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
+				var object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 40, 40, 40, 2, 2, 2 ), material );
 				object2.position.set( 0, 0, 50 );
 				object2.rotation.set( 0, 45, 0 );
 				object2.name = "SubCube";
@@ -313,16 +276,16 @@
 				// ---------------------------------------------------------------------
 				// Groups
 				// ---------------------------------------------------------------------
-				var group1 = new Group();
+				var group1 = new THREE.Group();
 				group1.name = "Group";
 				scene1.add( group1 );
 
-				var group2 = new Group();
+				var group2 = new THREE.Group();
 				group2.name = "subGroup";
 				group2.position.set( 0, 50, 0 );
 				group1.add( group2 );
 
-				object2 = new Mesh( new BoxBufferGeometry( 30, 30, 30 ), material );
+				object2 = new THREE.Mesh( new THREE.BoxBufferGeometry( 30, 30, 30 ), material );
 				object2.name = "Cube in group";
 				object2.position.set( 0, 0, 400 );
 				group2.add( object2 );
@@ -330,7 +293,7 @@
 				// ---------------------------------------------------------------------
 				// Triangle Strip
 				// ---------------------------------------------------------------------
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 				var positions = new Float32Array( [
 					0, 0, 0,
 					0, 80, 0,
@@ -349,11 +312,11 @@
 					0, 0, 1,
 				] );
 
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
-				object = new Mesh( geometry, new MeshBasicMaterial( { side: DoubleSide, vertexColors: VertexColors } ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+				object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) );
 				object.position.set( 140, - 40, - 250 );
-				object.setDrawMode( TriangleStripDrawMode );
+				object.setDrawMode( THREE.TriangleStripDrawMode );
 				object.name = 'Custom buffered';
 				object.userData = { data: 'customdata', list: [ 1, 2, 3, 4 ] };
 
@@ -361,9 +324,9 @@
 
 
 				// ---------------------------------------------------------------------
-				// Line Strip
+				// THREE.Line Strip
 				// ---------------------------------------------------------------------
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 				var numPoints = 100;
 				var positions = new Float32Array( numPoints * 3 );
 
@@ -375,16 +338,16 @@
 
 				}
 
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				object = new Line( geometry, new LineBasicMaterial( { color: 0xffff00 } ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
 				object.position.set( - 50, 0, - 200 );
 				scene1.add( object );
 
 
 				// ---------------------------------------------------------------------
-				// Line Loop
+				// THREE.Line Loop
 				// ---------------------------------------------------------------------
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 				var numPoints = 5;
 				var radius = 70;
 				var positions = new Float32Array( numPoints * 3 );
@@ -398,8 +361,8 @@
 
 				}
 
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				object = new LineLoop( geometry, new LineBasicMaterial( { color: 0xffff00 } ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				object = new THREE.LineLoop( geometry, new THREE.LineBasicMaterial( { color: 0xffff00 } ) );
 				object.position.set( 0, 0, - 200 );
 
 				scene1.add( object );
@@ -407,7 +370,7 @@
 				// ---------------------------------------------------------------------
 				// Buffer geometry truncated (DrawRange)
 				// ---------------------------------------------------------------------
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 				var numElements = 6;
 				var outOfRange = 3;
 
@@ -432,18 +395,18 @@
 					0, 0, 1,
 				] );
 
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 				geometry.setDrawRange( 0, numElements );
 
-				object = new Mesh( geometry, new MeshBasicMaterial( { side: DoubleSide, vertexColors: VertexColors } ) );
+				object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, vertexColors: THREE.VertexColors } ) );
 				object.name = 'Custom buffered truncated';
 				object.position.set( 340, - 40, - 200 );
 
 				scene1.add( object );
 
 				// ---------------------------------------------------------------------
-				// Points
+				// THREE.Points
 				// ---------------------------------------------------------------------
 				var numPoints = 100;
 				var pointsArray = new Float32Array( numPoints * 3 );
@@ -455,11 +418,11 @@
 
 				}
 
-				var pointsGeo = new BufferGeometry();
-				pointsGeo.addAttribute( 'position', new BufferAttribute( pointsArray, 3 ) );
+				var pointsGeo = new THREE.BufferGeometry();
+				pointsGeo.addAttribute( 'position', new THREE.BufferAttribute( pointsArray, 3 ) );
 
-				var pointsMaterial = new PointsMaterial( { color: 0xffff00, size: 5 } );
-				var points = new Points( pointsGeo, pointsMaterial );
+				var pointsMaterial = new THREE.PointsMaterial( { color: 0xffff00, size: 5 } );
+				var points = new THREE.Points( pointsGeo, pointsMaterial );
 				points.name = "Points";
 				points.position.set( - 200, 0, - 200 );
 				scene1.add( points );
@@ -467,24 +430,24 @@
 				// ---------------------------------------------------------------------
 				// Ortho camera
 				// ---------------------------------------------------------------------
-				var cameraOrtho = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
+				var cameraOrtho = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 10 );
 				scene1.add( cameraOrtho );
 				cameraOrtho.name = 'OrthographicCamera';
 
-				material = new MeshLambertMaterial( {
+				material = new THREE.MeshLambertMaterial( {
 					color: 0xffff00,
-					side: DoubleSide
+					side: THREE.DoubleSide
 				} );
 
-				object = new Mesh( new CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
+				object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
 				object.position.set( 200, 0, - 400 );
 				scene1.add( object );
 
-				object = new Mesh( new RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
+				object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
 				object.position.set( 0, 0, - 400 );
 				scene1.add( object );
 
-				object = new Mesh( new CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
+				object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
 				object.position.set( - 200, 0, - 400 );
 				scene1.add( object );
 
@@ -493,21 +456,21 @@
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					points.push( new Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
+					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
 				}
 
-				object = new Mesh( new LatheBufferGeometry( points, 20 ), material );
+				object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
 				object.position.set( 200, 0, 400 );
 				scene1.add( object );
 
 				// ---------------------------------------------------------------------
 				// Big red box hidden just for testing `onlyVisible` option
 				// ---------------------------------------------------------------------
-				material = new MeshBasicMaterial( {
+				material = new THREE.MeshBasicMaterial( {
 					color: 0xff0000
 				} );
-				object = new Mesh( new BoxBufferGeometry( 200, 200, 200 ), material );
+				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
 				object.position.set( 0, 0, 0 );
 				object.name = "CubeHidden";
 				object.visible = false;
@@ -528,10 +491,10 @@
 
 
 				// ---------------------------------------------------------------------
-				// 2nd Scene
+				// 2nd THREE.Scene
 				// ---------------------------------------------------------------------
-				scene2 = new Scene();
-				object = new Mesh( new BoxBufferGeometry( 100, 100, 100 ), material );
+				scene2 = new THREE.Scene();
+				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100 ), material );
 				object.position.set( 0, 0, 0 );
 				object.name = "Cube2ndScene";
 				scene2.name = 'Scene2';
@@ -539,7 +502,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/misc_exporter_obj.html

@@ -34,18 +34,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				BufferGeometry,
-				CylinderBufferGeometry,
-				DirectionalLight,
-				Float32BufferAttribute,
-				Mesh,
-				MeshLambertMaterial,
-				PerspectiveCamera,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OBJExporter } from './jsm/exporters/OBJExporter.js';
 
@@ -80,39 +69,39 @@
 
 				if ( type === 1 ) {
 
-					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
+					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
 					var geometry = generateTriangleGeometry();
 
-					scene.add( new Mesh( geometry, material ) );
+					scene.add( new THREE.Mesh( geometry, material ) );
 
 
 				} else if ( type === 2 ) {
 
-					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = new BoxBufferGeometry( 100, 100, 100 );
-					scene.add( new Mesh( geometry, material ) );
+					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+					scene.add( new THREE.Mesh( geometry, material ) );
 
 				} else if ( type === 3 ) {
 
-					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
-					var geometry = new CylinderBufferGeometry( 50, 50, 100, 30, 1 );
-					scene.add( new Mesh( geometry, material ) );
+					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
+					var geometry = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
+					scene.add( new THREE.Mesh( geometry, material ) );
 
 				} else if ( type === 4 || type === 5 ) {
 
-					var material = new MeshLambertMaterial( { color: 0x00cc00 } );
+					var material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
 					var geometry = generateTriangleGeometry();
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = - 200;
 					scene.add( mesh );
 
-					var geometry2 = new BoxBufferGeometry( 100, 100, 100 );
-					var mesh2 = new Mesh( geometry2, material );
+					var geometry2 = new THREE.BoxBufferGeometry( 100, 100, 100 );
+					var mesh2 = new THREE.Mesh( geometry2, material );
 					scene.add( mesh2 );
 
-					var geometry3 = new CylinderBufferGeometry( 50, 50, 100, 30, 1 );
-					var mesh3 = new Mesh( geometry3, material );
+					var geometry3 = new THREE.CylinderBufferGeometry( 50, 50, 100, 30, 1 );
+					var mesh3 = new THREE.Mesh( geometry3, material );
 					mesh3.position.x = 200;
 					scene.add( mesh3 );
 
@@ -130,17 +119,17 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 400 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				light = new DirectionalLight( 0xffffff );
+				light = new THREE.DirectionalLight( 0xffffff );
 				scene.add( light );
 
 				addGeometry( 1 );
@@ -248,14 +237,14 @@
 
 			function generateTriangleGeometry() {
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 				var vertices = [];
 
 				vertices.push( - 50, - 50, 0 );
 				vertices.push( 50, - 50, 0 );
 				vertices.push( 50, 50, 0 );
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 				geometry.computeVertexNormals();
 
 				return geometry;

examples/misc_exporter_stl.html

@@ -13,20 +13,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Color,
-				DirectionalLight,
-				Fog,
-				GridHelper,
-				HemisphereLight,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { STLExporter } from './jsm/exporters/STLExporter.js';
@@ -38,22 +25,22 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 100, 200 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xa0a0a0 );
-				scene.fog = new Fog( 0xa0a0a0, 200, 1000 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xa0a0a0 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );
 
 				exporter = new STLExporter();
 
 				//
 
-				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 200, 0 );
 				scene.add( hemiLight );
 
-				var directionalLight = new DirectionalLight( 0xffffff );
+				var directionalLight = new THREE.DirectionalLight( 0xffffff );
 				directionalLight.position.set( 0, 200, 100 );
 				directionalLight.castShadow = true;
 				directionalLight.shadow.camera.top = 180;
@@ -64,29 +51,29 @@
 
 				// ground
 
-				var ground = new Mesh( new PlaneBufferGeometry( 2000, 2000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.receiveShadow = true;
 				scene.add( ground );
 
-				var grid = new GridHelper( 2000, 20, 0x000000, 0x000000 );
+				var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
 
 				// export mesh
 
-				var geometry = new BoxBufferGeometry( 50, 50, 50 );
-				var material = new MeshPhongMaterial( { color: 0x00ff00 } );
+				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.position.y = 25;
 				scene.add( mesh );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;

examples/misc_fps.html

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

examples/misc_lookat.html

@@ -20,16 +20,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Object3D.lookAt() example</div>
 
 		<script type="module">
-			import {
-				Color,
-				CylinderBufferGeometry,
-				Mesh,
-				MeshNormalMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -50,23 +41,23 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 3200;
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
-				sphere = new Mesh( new SphereBufferGeometry( 100, 20, 20 ), new MeshNormalMaterial() );
+				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
 				scene.add( sphere );
 
-				var geometry = new CylinderBufferGeometry( 0, 10, 100, 12 );
+				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 100, 12 );
 				geometry.rotateX( Math.PI / 2 );
 
-				var material = new MeshNormalMaterial();
+				var material = new THREE.MeshNormalMaterial();
 
 				for ( var i = 0; i < 1000; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 4000 - 2000;
 					mesh.position.y = Math.random() * 4000 - 2000;
 					mesh.position.z = Math.random() * 4000 - 2000;
@@ -75,7 +66,7 @@
 
 				}
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/misc_uv_tests.html

@@ -9,18 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				CylinderBufferGeometry,
-				IcosahedronBufferGeometry,
-				PlaneBufferGeometry,
-				LatheBufferGeometry,
-				OctahedronBufferGeometry,
-				SphereBufferGeometry,
-				TorusBufferGeometry,
-				TorusKnotBufferGeometry,
-				Vector2
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { UVsDebug } from './jsm/utils/UVsDebug.js';
 
@@ -45,29 +34,29 @@
 
 			for ( var i = 0; i < 10; i ++ ) {
 
-				points.push( new Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
+				points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
 			}
 
 			//
 
-			test( 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new PlaneBufferGeometry( 100, 100, 4, 4 ) );
+			test( 'new THREE.PlaneBufferGeometry( 100, 100, 4, 4 )', new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ) );
 
-			test( 'new THREE.SphereBufferGeometry( 75, 12, 6 )', new SphereBufferGeometry( 75, 12, 6 ) );
+			test( 'new THREE.SphereBufferGeometry( 75, 12, 6 )', new THREE.SphereBufferGeometry( 75, 12, 6 ) );
 
-			test( 'new THREE.IcosahedronBufferGeometry( 30, 1 )', new IcosahedronBufferGeometry( 30, 1 ) );
+			test( 'new THREE.IcosahedronBufferGeometry( 30, 1 )', new THREE.IcosahedronBufferGeometry( 30, 1 ) );
 
-			test( 'new THREE.OctahedronBufferGeometry( 30, 2 )', new OctahedronBufferGeometry( 30, 2 ) );
+			test( 'new THREE.OctahedronBufferGeometry( 30, 2 )', new THREE.OctahedronBufferGeometry( 30, 2 ) );
 
-			test( 'new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new CylinderBufferGeometry( 25, 75, 100, 10, 5 ) );
+			test( 'new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderBufferGeometry( 25, 75, 100, 10, 5 ) );
 
-			test( 'new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ) );
+			test( 'new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ) );
 
-			test( 'new THREE.LatheBufferGeometry( points, 8 )', new LatheBufferGeometry( points, 8 ) );
+			test( 'new THREE.LatheBufferGeometry( points, 8 )', new THREE.LatheBufferGeometry( points, 8 ) );
 
-			test( 'new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new TorusBufferGeometry( 50, 20, 8, 8 ) );
+			test( 'new THREE.TorusBufferGeometry( 50, 20, 8, 8 )', new THREE.TorusBufferGeometry( 50, 20, 8, 8 ) );
 
-			test( 'new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new TorusKnotBufferGeometry( 50, 10, 12, 6 ) );
+			test( 'new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotBufferGeometry( 50, 10, 12, 6 ) );
 
 		</script>
 

examples/raytracing_sandbox.html

@@ -15,18 +15,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Color,
-				Group,
-				Mesh,
-				MeshPhongMaterial,
-				NoColors,
-				PerspectiveCamera,
-				PointLight,
-				Scene,
-				SphereBufferGeometry
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { RaytracingRenderer } from './jsm/renderers/RaytracingRenderer.js';
 
@@ -42,99 +31,99 @@
 
 			function initScene( width, height ) {
 
-				camera = new PerspectiveCamera( 60, width / height, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
 				camera.position.z = 600;
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// materials
 
-				var phongMaterial = new MeshPhongMaterial( {
+				var phongMaterial = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					specular: 0x222222,
 					shininess: 150,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: false
 				} );
 
-				var phongMaterialBox = new MeshPhongMaterial( {
+				var phongMaterialBox = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 
-				var phongMaterialBoxBottom = new MeshPhongMaterial( {
+				var phongMaterialBoxBottom = new THREE.MeshPhongMaterial( {
 					color: 0x666666,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 
-				var phongMaterialBoxLeft = new MeshPhongMaterial( {
+				var phongMaterialBoxLeft = new THREE.MeshPhongMaterial( {
 					color: 0x990000,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 
-				var phongMaterialBoxRight = new MeshPhongMaterial( {
+				var phongMaterialBoxRight = new THREE.MeshPhongMaterial( {
 					color: 0x0066ff,
 					specular: 0x111111,
 					shininess: 100,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 
-				var mirrorMaterialFlat = new MeshPhongMaterial( {
+				var mirrorMaterialFlat = new THREE.MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0xff8888,
 					shininess: 10000,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 				mirrorMaterialFlat.mirror = true;
 				mirrorMaterialFlat.reflectivity = 1;
 
-				var mirrorMaterialFlatDark = new MeshPhongMaterial( {
+				var mirrorMaterialFlatDark = new THREE.MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0xaaaaaa,
 					shininess: 10000,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 				mirrorMaterialFlatDark.mirror = true;
 				mirrorMaterialFlatDark.reflectivity = 1;
 
-				var mirrorMaterialSmooth = new MeshPhongMaterial( {
+				var mirrorMaterialSmooth = new THREE.MeshPhongMaterial( {
 					color: 0xffaa00,
 					specular: 0x222222,
 					shininess: 10000,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: false
 				} );
 				mirrorMaterialSmooth.mirror = true;
 				mirrorMaterialSmooth.reflectivity = 0.3;
 
-				var glassMaterialFlat = new MeshPhongMaterial( {
+				var glassMaterialFlat = new THREE.MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0x00ff00,
 					shininess: 10000,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: true
 				} );
 				glassMaterialFlat.glass = true;
 				glassMaterialFlat.reflectivity = 0.5;
 
-				var glassMaterialSmooth = new MeshPhongMaterial( {
+				var glassMaterialSmooth = new THREE.MeshPhongMaterial( {
 					color: 0x000000,
 					specular: 0xffaa55,
 					shininess: 10000,
-					vertexColors: NoColors,
+					vertexColors: THREE.NoColors,
 					flatShading: false
 				} );
 				glassMaterialSmooth.glass = true;
@@ -143,37 +132,37 @@
 
 				//
 
-				group = new Group();
+				group = new THREE.Group();
 				scene.add( group );
 
 				// geometries
 
-				var sphereGeometry = new SphereBufferGeometry( 100, 16, 8 );
-				var planeGeometry = new BoxBufferGeometry( 600, 5, 600 );
-				var boxGeometry = new BoxBufferGeometry( 100, 100, 100 );
+				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 16, 8 );
+				var planeGeometry = new THREE.BoxBufferGeometry( 600, 5, 600 );
+				var boxGeometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
 				// Sphere
 
-				var sphere = new Mesh( sphereGeometry, phongMaterial );
+				var sphere = new THREE.Mesh( sphereGeometry, phongMaterial );
 				sphere.scale.multiplyScalar( 0.5 );
 				sphere.position.set( - 50, - 250 + 5, - 50 );
 				group.add( sphere );
 
-				var sphere2 = new Mesh( sphereGeometry, mirrorMaterialSmooth );
+				var sphere2 = new THREE.Mesh( sphereGeometry, mirrorMaterialSmooth );
 				sphere2.scale.multiplyScalar( 0.5 );
 				sphere2.position.set( 175, - 250 + 5, - 150 );
 				group.add( sphere2 );
 
 				// Box
 
-				var box = new Mesh( boxGeometry, mirrorMaterialFlat );
+				var box = new THREE.Mesh( boxGeometry, mirrorMaterialFlat );
 				box.position.set( - 175, - 250 + 2.5, - 150 );
 				box.rotation.y = 0.5;
 				group.add( box );
 
 				// Glass
 
-				var glass = new Mesh( sphereGeometry, glassMaterialSmooth );
+				var glass = new THREE.Mesh( sphereGeometry, glassMaterialSmooth );
 				glass.scale.multiplyScalar( 0.5 );
 				glass.position.set( 75, - 250 + 5, - 75 );
 				glass.rotation.y = 0.5;
@@ -181,24 +170,24 @@
 
 				// bottom
 
-				var plane = new Mesh( planeGeometry, phongMaterialBoxBottom );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxBottom );
 				plane.position.set( 0, - 300 + 2.5, - 300 );
 				scene.add( plane );
 
 				// top
 
-				var plane = new Mesh( planeGeometry, phongMaterialBox );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
 				plane.position.set( 0, 300 - 2.5, - 300 );
 				scene.add( plane );
 
 				// back
 
-				var plane = new Mesh( planeGeometry, phongMaterialBox );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBox );
 				plane.rotation.x = 1.57;
 				plane.position.set( 0, 0, - 300 );
 				scene.add( plane );
 
-				var plane = new Mesh( planeGeometry, mirrorMaterialFlatDark );
+				var plane = new THREE.Mesh( planeGeometry, mirrorMaterialFlatDark );
 				plane.rotation.x = 1.57;
 				plane.position.set( 0, 0, - 300 + 10 );
 				plane.scale.multiplyScalar( 0.85 );
@@ -206,14 +195,14 @@
 
 				// left
 
-				var plane = new Mesh( planeGeometry, phongMaterialBoxLeft );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxLeft );
 				plane.rotation.z = 1.57;
 				plane.position.set( - 300, 0, - 300 );
 				scene.add( plane );
 
 				// right
 
-				var plane = new Mesh( planeGeometry, phongMaterialBoxRight );
+				var plane = new THREE.Mesh( planeGeometry, phongMaterialBoxRight );
 				plane.rotation.z = 1.57;
 				plane.position.set( 300, 0, - 300 );
 				scene.add( plane );
@@ -222,17 +211,17 @@
 
 				var intensity = 70000;
 
-				var light = new PointLight( 0xffaa55, intensity );
+				var light = new THREE.PointLight( 0xffaa55, intensity );
 				light.position.set( - 200, 100, 100 );
 				light.physicalAttenuation = true;
 				scene.add( light );
 
-				var light = new PointLight( 0x55aaff, intensity );
+				var light = new THREE.PointLight( 0x55aaff, intensity );
 				light.position.set( 200, 100, 100 );
 				light.physicalAttenuation = true;
 				scene.add( light );
 
-				var light = new PointLight( 0xffffff, intensity * 1.5 );
+				var light = new THREE.PointLight( 0xffffff, intensity * 1.5 );
 				light.position.set( 0, 0, 300 );
 				light.physicalAttenuation = true;
 				scene.add( light );

examples/software_geometry_earth.html

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

examples/software_lines_splines.html

@@ -14,18 +14,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				CatmullRomCurve3,
-				Color,
-				Float32BufferAttribute,
-				Line,
-				LineBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				Vector3,
-				VertexColors
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
 			import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
@@ -45,10 +34,10 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 700;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				renderer = new SoftwareRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -57,11 +46,11 @@
 
 				//
 
-				var hilbertPoints = GeometryUtils.hilbert3D( new Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
+				var hilbertPoints = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var geometry1 = new BufferGeometry();
-				var geometry2 = new BufferGeometry();
-				var geometry3 = new BufferGeometry();
+				var geometry1 = new THREE.BufferGeometry();
+				var geometry2 = new THREE.BufferGeometry();
+				var geometry3 = new THREE.BufferGeometry();
 
 				var subdivisions = 6;
 
@@ -70,10 +59,10 @@
 				var colors2 = [];
 				var colors3 = [];
 
-				var point = new Vector3();
-				var color = new Color();
+				var point = new THREE.Vector3();
+				var color = new THREE.Color();
 
-				var spline = new CatmullRomCurve3( hilbertPoints );
+				var spline = new THREE.CatmullRomCurve3( hilbertPoints );
 
 				for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
 
@@ -93,17 +82,17 @@
 
 				}
 
-				geometry1.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-				geometry2.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-				geometry3.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry2.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry3.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				geometry1.addAttribute( 'color', new Float32BufferAttribute( colors1, 3 ) );
-				geometry2.addAttribute( 'color', new Float32BufferAttribute( colors2, 3 ) );
-				geometry3.addAttribute( 'color', new Float32BufferAttribute( colors3, 3 ) );
+				geometry1.addAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
+				geometry2.addAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
+				geometry3.addAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
 
 				// lines
 
-				var material = new LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: VertexColors } );
+				var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
 
 				var line, p, scale = 0.3, d = 225;
 				var parameters = [
@@ -115,7 +104,7 @@
 				for ( var i = 0; i < parameters.length; ++ i ) {
 
 					p = parameters[ i ];
-					line = new Line( p[ 3 ], p[ 0 ] );
+					line = new THREE.Line( p[ 3 ], p[ 0 ] );
 					line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
 					line.position.x = p[ 2 ][ 0 ];
 					line.position.y = p[ 2 ][ 1 ];
@@ -197,7 +186,7 @@
 
 					var object = scene.children[ i ];
 
-					if ( object instanceof Line ) {
+					if ( object instanceof THREE.Line ) {
 
 						object.rotation.y = time * ( i % 2 ? 1 : - 1 );
 

examples/software_sandbox.html

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

examples/svg_lines.html

@@ -21,16 +21,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Color,
-				Float32BufferAttribute,
-				Line,
-				LineBasicMaterial,
-				LineDashedMaterial,
-				PerspectiveCamera,
-				Scene
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { SVGRenderer } from './jsm/renderers/SVGRenderer.js';
 
@@ -41,11 +32,11 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.z = 10;
 
-				scene = new Scene();
-				scene.background = new Color( 0, 0, 0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0, 0, 0 );
 
 				renderer = new SVGRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -67,30 +58,30 @@
 
 				}
 
-				var geometry = new BufferGeometry();
-				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
 				//
 
 				for ( var i = 1; i <= 3; i ++ ) {
 
-					var material = new LineBasicMaterial( {
+					var material = new THREE.LineBasicMaterial( {
 						color: Math.random() * 0xffffff,
 						linewidth: 10
 					} );
-					var line = new Line( geometry, material );
+					var line = new THREE.Line( geometry, material );
 					line.scale.setScalar( i / 3 );
 					scene.add( line );
 
 				}
 
-				var material = new LineDashedMaterial( {
+				var material = new THREE.LineDashedMaterial( {
 					color: 'blue',
 					linewidth: 1,
 					dashSize: 10,
 					gapSize: 10
 				} );
-				var line = new Line( geometry, material );
+				var line = new THREE.Line( geometry, material );
 				line.scale.setScalar( 2 );
 				scene.add( line );
 

examples/svg_sandbox.html

@@ -14,28 +14,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				BufferGeometry,
-				BufferGeometryLoader,
-				Color,
-				CylinderBufferGeometry,
-				DirectionalLight,
-				DoubleSide,
-				FileLoader,
-				Float32BufferAttribute,
-				Mesh,
-				MeshBasicMaterial,
-				MeshLambertMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				Sprite,
-				SpriteMaterial,
-				Vector3,
-				VertexColors
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -50,18 +29,18 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// QRCODE
 
-				var loader = new BufferGeometryLoader();
+				var loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/QRCode_buffergeometry.json', function ( geometry ) {
 
-					mesh = new Mesh( geometry, new MeshLambertMaterial( { vertexColors: VertexColors } ) );
+					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { vertexColors: THREE.VertexColors } ) );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 					scene.add( mesh );
 
@@ -69,16 +48,16 @@
 
 				// CUBES
 
-				var cube = new BoxBufferGeometry( 100, 100, 100 );
+				var cube = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
-				mesh = new Mesh( cube, new MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
+				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
 				mesh.position.x = 500;
 				mesh.rotation.x = Math.random();
 				mesh.rotation.y = Math.random();
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				scene.add( mesh );
 
-				mesh = new Mesh( cube, new MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
+				mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = 500;
 				mesh.position.y = 500;
 				mesh.rotation.x = Math.random();
@@ -88,14 +67,14 @@
 
 				// PLANE
 
-				mesh = new Mesh( new PlaneBufferGeometry( 100, 100 ), new MeshBasicMaterial( { color: Math.random() * 0xffffff, side: DoubleSide } ) );
+				mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
 				mesh.position.y = - 500;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
 				scene.add( mesh );
 
 				// CYLINDER
 
-				mesh = new Mesh( new CylinderBufferGeometry( 20, 100, 200, 10 ), new MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
+				mesh = new THREE.Mesh( new THREE.CylinderBufferGeometry( 20, 100, 200, 10 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
 				mesh.position.x = - 500;
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
@@ -103,14 +82,14 @@
 
 				// POLYFIELD
 
-				var geometry = new BufferGeometry();
-				var material = new MeshBasicMaterial( { vertexColors: VertexColors, side: DoubleSide } );
+				var geometry = new THREE.BufferGeometry();
+				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors, side: THREE.DoubleSide } );
 
-				var v = new Vector3();
-				var v0 = new Vector3();
-				var v1 = new Vector3();
-				var v2 = new Vector3();
-				var color = new Color();
+				var v = new THREE.Vector3();
+				var v0 = new THREE.Vector3();
+				var v1 = new THREE.Vector3();
+				var v2 = new THREE.Vector3();
+				var color = new THREE.Color();
 
 				var vertices = [];
 				var colors = [];
@@ -159,10 +138,10 @@
 
 				}
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				group = new Mesh( geometry, material );
+				group = new THREE.Mesh( geometry, material );
 				group.scale.set( 2, 2, 2 );
 				scene.add( group );
 
@@ -170,8 +149,8 @@
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					var material = new SpriteMaterial( { color: Math.random() * 0xffffff } );
-					var sprite = new Sprite( material );
+					var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
+					var sprite = new THREE.Sprite( material );
 					sprite.position.x = Math.random() * 1000 - 500;
 					sprite.position.y = Math.random() * 1000 - 500;
 					sprite.position.z = Math.random() * 1000 - 500;
@@ -199,7 +178,7 @@
 
 				// CUSTOM FROM FILE
 
-				var fileLoader = new FileLoader();
+				var fileLoader = new THREE.FileLoader();
 				fileLoader.load( 'models/svg/hexagon.svg', function ( svg ) {
 
 					var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
@@ -216,10 +195,10 @@
 
 				// LIGHTS
 
-				var ambient = new AmbientLight( 0x80ffff );
+				var ambient = new THREE.AmbientLight( 0x80ffff );
 				scene.add( ambient );
 
-				var directional = new DirectionalLight( 0xffff00 );
+				var directional = new THREE.DirectionalLight( 0xffff00 );
 				directional.position.set( - 1, 0.5, 0 );
 				scene.add( directional );
 

examples/webaudio_orientation.html

@@ -60,26 +60,7 @@
 	</div>
 
 	<script type="module">
-		import {
-			AudioListener as _AudioListener, // we don't want to override the native AudioListener function
-			BoxBufferGeometry,
-			Color,
-			CubeTextureLoader,
-			DirectionalLight,
-			Fog,
-			HemisphereLight,
-			GridHelper,
-			MeshBasicMaterial,
-			MeshPhongMaterial,
-			Mesh,
-			PerspectiveCamera,
-			PlaneBufferGeometry,
-			PositionalAudio,
-			PositionalAudioHelper,
-			RGBFormat,
-			Scene,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
@@ -98,25 +79,25 @@
 
 			//
 
-			camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 			camera.position.set( 3, 2, 3 );
 
-			var reflectionCube = new CubeTextureLoader()
+			var reflectionCube = new THREE.CubeTextureLoader()
 				.setPath( 'textures/cube/SwedishRoyalCastle/' )
 				.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
-			reflectionCube.format = RGBFormat;
+			reflectionCube.format = THREE.RGBFormat;
 
-			scene = new Scene();
-			scene.background = new Color( 0xa0a0a0 );
-			scene.fog = new Fog( 0xa0a0a0, 2, 20 );
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xa0a0a0 );
+			scene.fog = new THREE.Fog( 0xa0a0a0, 2, 20 );
 
 			//
 
-			var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
+			var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 			hemiLight.position.set( 0, 20, 0 );
 			scene.add( hemiLight );
 
-			var dirLight = new DirectionalLight( 0xffffff );
+			var dirLight = new THREE.DirectionalLight( 0xffffff );
 			dirLight.position.set( 5, 5, 0 );
 			dirLight.castShadow = true;
 			dirLight.shadow.camera.top = 1;
@@ -131,28 +112,28 @@
 
 			//
 
-			var mesh = new Mesh( new PlaneBufferGeometry( 50, 50 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+			var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50, 50 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 			mesh.rotation.x = - Math.PI / 2;
 			mesh.receiveShadow = true;
 			scene.add( mesh );
 
-			var grid = new GridHelper( 50, 50, 0x888888, 0x888888 );
+			var grid = new THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
 			scene.add( grid );
 
 			//
 
-			var listener = new _AudioListener();
+			var listener = new THREE.AudioListener();
 			camera.add( listener );
 
 			var audioElement = document.getElementById( 'music' );
 			audioElement.play();
 
-			var positionalAudio = new PositionalAudio( listener );
+			var positionalAudio = new THREE.PositionalAudio( listener );
 			positionalAudio.setMediaElementSource( audioElement );
 			positionalAudio.setRefDistance( 1 );
 			positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
-			var helper = new PositionalAudioHelper( positionalAudio, 0.1 );
+			var helper = new THREE.PositionalAudioHelper( positionalAudio, 0.1 );
 			positionalAudio.add( helper );
 
 			//
@@ -184,17 +165,17 @@
 
 			// sound is damped behind this wall
 
-			var wallGeometry = new BoxBufferGeometry( 2, 1, 0.1 );
-			var wallMaterial = new MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
+			var wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
+			var wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
 
-			var wall = new Mesh( wallGeometry, wallMaterial );
+			var wall = new THREE.Mesh( wallGeometry, wallMaterial );
 			wall.position.set( 0, 0.5, - 0.5 );
 			scene.add( wall );
 
 
 			//
 
-			renderer = new WebGLRenderer( { antialias: true } );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.gammaOutput = true;

examples/webaudio_sandbox.html

@@ -57,23 +57,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				Audio as _Audio,
-				AudioAnalyser,
-				AudioListener as _AudioListener,
-				AudioLoader,
-				Clock,
-				DirectionalLight,
-				FogExp2,
-				GridHelper,
-				MeshPhongMaterial,
-				Mesh,
-				PerspectiveCamera,
-				PositionalAudio,
-				SphereBufferGeometry,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
@@ -85,7 +69,7 @@
 
 			var analyser1, analyser2, analyser3;
 
-			var clock = new Clock();
+			var clock = new THREE.Clock();
 
 			var startButton = document.getElementById( 'startButton' );
 			startButton.addEventListener( 'click', init );
@@ -95,34 +79,34 @@
 				var overlay = document.getElementById( 'overlay' );
 				overlay.remove();
 
-				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 0, 25, 0 );
 
-				var listener = new _AudioListener();
+				var listener = new THREE.AudioListener();
 				camera.add( listener );
 
-				scene = new Scene();
-				scene.fog = new FogExp2( 0x000000, 0.0025 );
+				scene = new THREE.Scene();
+				scene.fog = new THREE.FogExp2( 0x000000, 0.0025 );
 
-				light = new DirectionalLight( 0xffffff );
+				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0.5, 1 ).normalize();
 				scene.add( light );
 
-				var sphere = new SphereBufferGeometry( 20, 32, 16 );
+				var sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
 
-				material1 = new MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );
-				material2 = new MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );
-				material3 = new MeshPhongMaterial( { color: 0x6622aa, flatShading: true, shininess: 0 } );
+				material1 = new THREE.MeshPhongMaterial( { color: 0xffaa00, flatShading: true, shininess: 0 } );
+				material2 = new THREE.MeshPhongMaterial( { color: 0xff2200, flatShading: true, shininess: 0 } );
+				material3 = new THREE.MeshPhongMaterial( { color: 0x6622aa, flatShading: true, shininess: 0 } );
 
 				// sound spheres
 
-				var audioLoader = new AudioLoader();
+				var audioLoader = new THREE.AudioLoader();
 
-				var mesh1 = new Mesh( sphere, material1 );
+				var mesh1 = new THREE.Mesh( sphere, material1 );
 				mesh1.position.set( - 250, 30, 0 );
 				scene.add( mesh1 );
 
-				var sound1 = new PositionalAudio( listener );
+				var sound1 = new THREE.PositionalAudio( listener );
 				audioLoader.load( 'sounds/358232_j_s_song.ogg', function ( buffer ) {
 
 					sound1.setBuffer( buffer );
@@ -134,11 +118,11 @@
 
 				//
 
-				var mesh2 = new Mesh( sphere, material2 );
+				var mesh2 = new THREE.Mesh( sphere, material2 );
 				mesh2.position.set( 250, 30, 0 );
 				scene.add( mesh2 );
 
-				var sound2 = new PositionalAudio( listener );
+				var sound2 = new THREE.PositionalAudio( listener );
 				audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function ( buffer ) {
 
 					sound2.setBuffer( buffer );
@@ -150,11 +134,11 @@
 
 				//
 
-				var mesh3 = new Mesh( sphere, material3 );
+				var mesh3 = new THREE.Mesh( sphere, material3 );
 				mesh3.position.set( 0, 30, - 250 );
 				scene.add( mesh3 );
 
-				var sound3 = new PositionalAudio( listener );
+				var sound3 = new THREE.PositionalAudio( listener );
 				var oscillator = listener.context.createOscillator();
 				oscillator.type = 'sine';
 				oscillator.frequency.setValueAtTime( 144, sound3.context.currentTime );
@@ -166,13 +150,13 @@
 
 				// analysers
 
-				analyser1 = new AudioAnalyser( sound1, 32 );
-				analyser2 = new AudioAnalyser( sound2, 32 );
-				analyser3 = new AudioAnalyser( sound3, 32 );
+				analyser1 = new THREE.AudioAnalyser( sound1, 32 );
+				analyser2 = new THREE.AudioAnalyser( sound2, 32 );
+				analyser3 = new THREE.AudioAnalyser( sound3, 32 );
 
 				// global ambient audio
 
-				var sound4 = new _Audio( listener );
+				var sound4 = new THREE.Audio( listener );
 				audioLoader.load( 'sounds/Project_Utopia.ogg', function ( buffer ) {
 
 					sound4.setBuffer( buffer );
@@ -184,7 +168,7 @@
 
 				// ground
 
-				var helper = new GridHelper( 1000, 10, 0x444444, 0x444444 );
+				var helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );
 				helper.position.y = 0.1;
 				scene.add( helper );
 
@@ -255,7 +239,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webaudio_timing.html

@@ -56,20 +56,7 @@
 	</div>
 
 	<script type="module">
-		import {
-			AmbientLight,
-			AudioListener as _AudioListener,
-			AudioLoader,
-			DirectionalLight,
-			Mesh,
-			MeshLambertMaterial,
-			PerspectiveCamera,
-			PlaneBufferGeometry,
-			PositionalAudio,
-			SphereBufferGeometry,
-			Scene,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
@@ -87,19 +74,19 @@
 
 			var container = document.getElementById( 'container' );
 
-			scene = new Scene();
+			scene = new THREE.Scene();
 
 			//
 
-			camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
+			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 			camera.position.set( 7, 3, 7 );
 
 			// lights
 
-			var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
+			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 			scene.add( ambientLight );
 
-			var directionalLight = new DirectionalLight( 0xffffff, 0.7 );
+			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
 			directionalLight.position.set( 0, 5, 5 );
 			scene.add( directionalLight );
 
@@ -118,17 +105,17 @@
 
 			// audio
 
-			var audioLoader = new AudioLoader();
+			var audioLoader = new THREE.AudioLoader();
 
-			var listener = new _AudioListener();
+			var listener = new THREE.AudioListener();
 			camera.add( listener );
 
 			// floor
 
-			var floorGeometry = new PlaneBufferGeometry( 10, 10 );
-			var floorMaterial = new MeshLambertMaterial( { color: 0x4676b6 } );
+			var floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
+			var floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );
 
-			var floor = new Mesh( floorGeometry, floorMaterial );
+			var floor = new THREE.Mesh( floorGeometry, floorMaterial );
 			floor.rotation.x = Math.PI * - 0.5;
 			floor.receiveShadow = true;
 			scene.add( floor );
@@ -138,9 +125,9 @@
 			var count = 5;
 			var radius = 3;
 
-			var ballGeometry = new SphereBufferGeometry( 0.3, 32, 16 );
+			var ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );
 			ballGeometry.translate( 0, 0.3, 0 );
-			var ballMaterial = new MeshLambertMaterial( { color: 0xcccccc } );
+			var ballMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );
 
 			// create objects when audio buffer is loaded
 
@@ -150,14 +137,14 @@
 
 					var s = i / count * Math.PI * 2;
 
-					var ball = new Mesh( ballGeometry, ballMaterial );
+					var ball = new THREE.Mesh( ballGeometry, ballMaterial );
 					ball.castShadow = true;
 					ball.userData.down = false;
 
 					ball.position.x = radius * Math.cos( s );
 					ball.position.z = radius * Math.sin( s );
 
-					var audio = new PositionalAudio( listener );
+					var audio = new THREE.PositionalAudio( listener );
 					audio.setBuffer( buffer );
 					ball.add( audio );
 
@@ -172,7 +159,7 @@
 
 			//
 
-			renderer = new WebGLRenderer( { antialias: true } );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.shadowMap.enabled = true;
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setClearColor( 0x000000 );

examples/webaudio_visualizer.html

@@ -90,19 +90,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				Audio as _Audio,
-				AudioAnalyser,
-				AudioListener as _AudioListener,
-				Camera,
-				DataTexture,
-				LuminanceFormat,
-				Mesh,
-				PlaneBufferGeometry,
-				Scene,
-				ShaderMaterial,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			var scene, camera, renderer, analyser, uniforms;
 
@@ -122,21 +110,21 @@
 
 				var container = document.getElementById( 'container' );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setClearColor( 0x000000 );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				camera = new Camera();
+				camera = new THREE.Camera();
 
 				//
 
-				var listener = new _AudioListener();
+				var listener = new THREE.AudioListener();
 
-				var audio = new _Audio( listener );
+				var audio = new THREE.Audio( listener );
 
 				var mediaElement = new Audio( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3' );
 				mediaElement.loop = true;
@@ -144,17 +132,17 @@
 
 				audio.setMediaElementSource( mediaElement );
 
-				analyser = new AudioAnalyser( audio, fftSize );
+				analyser = new THREE.AudioAnalyser( audio, fftSize );
 
 				//
 
 				uniforms = {
 
-					tAudioData: { value: new DataTexture( analyser.data, fftSize / 2, 1, LuminanceFormat ) }
+					tAudioData: { value: new THREE.DataTexture( analyser.data, fftSize / 2, 1, THREE.LuminanceFormat ) }
 
 				};
 
-				var material = new ShaderMaterial( {
+				var material = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -162,9 +150,9 @@
 
 				} );
 
-				var geometry = new PlaneBufferGeometry( 1, 1 );
+				var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//

examples/webgl2_materials_texture2darray.html

@@ -58,19 +58,7 @@
 		<script src="js/WebGL.js"></script>
 
 		<script type="module">
-			import {
-				DataTexture2DArray,
-				FileLoader,
-				Mesh,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				RedFormat,
-				Scene,
-				ShaderMaterial,
-				Vector2,
-				UnsignedByteType,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -95,40 +83,40 @@
 				var container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
 				camera.position.z = 70;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				// width 256, height 256, depth 109, 8-bit, zip archived raw data
 
-				new FileLoader()
+				new THREE.FileLoader()
 					.setResponseType( 'arraybuffer' )
 					.load( 'textures/3d/head256x256x109.zip', function ( data ) {
 
 						var zip = new JSZip( data );
 						var array = zip.files[ 'head256x256x109' ].asUint8Array();
 
-						var texture = new DataTexture2DArray( array, 256, 256, 109 );
+						var texture = new THREE.DataTexture2DArray( array, 256, 256, 109 );
 
-						texture.format = RedFormat;
-						texture.type = UnsignedByteType;
+						texture.format = THREE.RedFormat;
+						texture.type = THREE.UnsignedByteType;
 
 						texture.needsUpdate = true;
 
-						var material = new ShaderMaterial( {
+						var material = new THREE.ShaderMaterial( {
 							uniforms: {
 								diffuse: { value: texture },
 								depth: { value: 0 },
-								size: { value: new Vector2( planeWidth, planeHeight ) }
+								size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
 							},
 							vertexShader: document.getElementById( 'vs' ).textContent.trim(),
 							fragmentShader: document.getElementById( 'fs' ).textContent.trim()
 						} );
 
-						var geometry = new PlaneBufferGeometry( planeWidth, planeHeight );
+						var geometry = new THREE.PlaneBufferGeometry( planeWidth, planeHeight );
 
-						mesh = new Mesh( geometry, material );
+						mesh = new THREE.Mesh( geometry, material );
 
 						scene.add( mesh );
 
@@ -139,7 +127,7 @@
 				var canvas = document.createElement( 'canvas' );
 				var context = canvas.getContext( 'webgl2' );
 
-				renderer = new WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas, context: context } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl2_materials_texture3d.html

@@ -16,21 +16,7 @@
 	<script src="js/WebGL.js"></script>
 
 	<script type="module">
-		import {
-			BackSide,
-			BoxBufferGeometry,
-			DataTexture3D,
-			FloatType,
-			LinearFilter,
-			Mesh,
-			OrthographicCamera,
-			RedFormat,
-			Scene,
-			ShaderMaterial,
-			TextureLoader,
-			UniformsUtils,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import { GUI } from './jsm/libs/dat.gui.module.js';
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
@@ -55,12 +41,12 @@
 
 		function init() {
 
-			scene = new Scene();
+			scene = new THREE.Scene();
 
 			// Create renderer
 			var canvas = document.createElement( 'canvas' );
 			var context = canvas.getContext( 'webgl2' );
-			renderer = new WebGLRenderer( { canvas: canvas, context: context } );
+			renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
@@ -68,7 +54,7 @@
 			// Create camera (The volume renderer does not work very well with perspective yet)
 			var h = 512; // frustum height
 			var aspect = window.innerWidth / window.innerHeight;
-			camera = new OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
+			camera = new THREE.OrthographicCamera( - h * aspect / 2, h * aspect / 2, h / 2, - h / 2, 1, 1000 );
 			camera.position.set( 0, 0, 128 );
 			camera.up.set( 0, 0, 1 ); // In our data, z is up
 
@@ -98,26 +84,26 @@
 			new NRRDLoader().load( "models/nrrd/stent.nrrd", function ( volume ) {
 
 				// Texture to hold the volume. We have scalars, so we put our data in the red channel.
-				// THREEJS will select R32F (33326) based on the RedFormat and FloatType.
+				// THREEJS will select R32F (33326) based on the THREE.RedFormat and THREE.FloatType.
 				// Also see https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE
 				// TODO: look the dtype up in the volume metadata
-				var texture = new DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
-				texture.format = RedFormat;
-				texture.type = FloatType;
-				texture.minFilter = texture.magFilter = LinearFilter;
+				var texture = new THREE.DataTexture3D( volume.data, volume.xLength, volume.yLength, volume.zLength );
+				texture.format = THREE.RedFormat;
+				texture.type = THREE.FloatType;
+				texture.minFilter = texture.magFilter = THREE.LinearFilter;
 				texture.unpackAlignment = 1;
 				texture.needsUpdate = true;
 
 				// Colormap textures
 				cmtextures = {
-					viridis: new TextureLoader().load( 'textures/cm_viridis.png', render ),
-					gray: new TextureLoader().load( 'textures/cm_gray.png', render )
+					viridis: new THREE.TextureLoader().load( 'textures/cm_viridis.png', render ),
+					gray: new THREE.TextureLoader().load( 'textures/cm_gray.png', render )
 				};
 
 				// Material
 				var shader = VolumeRenderShader1;
 
-				var uniforms = UniformsUtils.clone( shader.uniforms );
+				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 				uniforms[ "u_data" ].value = texture;
 				uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
@@ -126,18 +112,18 @@
 				uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
 				uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
-				material = new ShaderMaterial( {
+				material = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
 					vertexShader: shader.vertexShader,
 					fragmentShader: shader.fragmentShader,
-					side: BackSide // The volume shader uses the backface as its "reference point"
+					side: THREE.BackSide // The volume shader uses the backface as its "reference point"
 				} );
 
-				// Mesh
-				var geometry = new BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
+				// THREE.Mesh
+				var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
 				geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				render();

examples/webgl2_multisampled_renderbuffers.html

@@ -36,23 +36,7 @@
 		<script src="js/WebGL.js"></script>
 
 		<script type="module">
-			import {
-				Clock,
-				Color,
-				DirectionalLight,
-				HemisphereLight,
-				PerspectiveCamera,
-				Fog,
-				Group,
-				IcosahedronBufferGeometry,
-				Mesh,
-				MeshStandardMaterial,
-				RGBFormat,
-				Scene,
-				Vector2,
-				WebGLRenderer,
-				WebGLMultisampleRenderTarget
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
 			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
@@ -76,35 +60,35 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, ( container.offsetWidth * 0.5 ) / container.offsetHeight, 1, 2000 );
 				camera.position.z = 500;
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
-				scene.fog = new Fog( 0xcccccc, 100, 1500 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
+				scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
 
-				clock = new Clock();
+				clock = new THREE.Clock();
 
 				//
 
-				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 1000, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new DirectionalLight( 0xffffff, 0.8 );
+				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
 				dirLight.position.set( - 3000, 1000, - 1000 );
 				scene.add( dirLight );
 
 				//
 
-				group = new Group();
+				group = new THREE.Group();
 
-				var geometry = new IcosahedronBufferGeometry( 10, 2 );
-				var material = new MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
+				var geometry = new THREE.IcosahedronBufferGeometry( 10, 2 );
+				var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 500 - 250;
 					mesh.position.y = Math.random() * 500 - 250;
 					mesh.position.z = Math.random() * 500 - 250;
@@ -120,7 +104,7 @@
 				var canvas = document.createElement( 'canvas' );
 				var context = canvas.getContext( 'webgl2', { antialias: false } );
 
-				renderer = new WebGLRenderer( { canvas: canvas, context: context } );
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 				renderer.autoClear = false;
 				renderer.setSize( container.offsetWidth, container.offsetHeight );
 				container.appendChild( renderer.domElement );
@@ -128,12 +112,12 @@
 				//
 
 				var parameters = {
-					format: RGBFormat,
+					format: THREE.RGBFormat,
 					stencilBuffer: false
 				};
 
-				var size = renderer.getDrawingBufferSize( new Vector2() );
-				var renderTarget = new WebGLMultisampleRenderTarget( size.width, size.height, parameters );
+				var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
+				var renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
 
 				var renderPass = new RenderPass( scene, camera );
 				var copyPass = new ShaderPass( CopyShader );

examples/webgl2_sandbox.html

@@ -13,17 +13,7 @@
 		<script src="js/WebGL.js"></script>
 
 		<script type="module">
-			import {
-				Color,
-				PerspectiveCamera,
-				Fog,
-				Mesh,
-				MeshNormalMaterial,
-				PointLight,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
@@ -43,22 +33,22 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.z = 3;
 
-				scene = new Scene();
-				scene.background = new Color( 0, 0, 0.5 );
-				scene.fog = new Fog( 0x000000, 0.1, 3 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0, 0, 0.5 );
+				scene.fog = new THREE.Fog( 0x000000, 0.1, 3 );
 
-				var light = new PointLight( 0xffffff );
+				var light = new THREE.PointLight( 0xffffff );
 				scene.add( light );
 
-				var geometry = new SphereBufferGeometry( 0.05, 32, 16 );
-				var material = new MeshNormalMaterial();
+				var geometry = new THREE.SphereBufferGeometry( 0.05, 32, 16 );
+				var material = new THREE.MeshNormalMaterial();
 
 				for ( var i = 0; i < 5000; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -75,7 +65,7 @@
 				var canvas = document.createElement( 'canvas' );
 				var context = canvas.getContext( 'webgl2' );
 
-				renderer = new WebGLRenderer( { canvas: canvas, context: context } );
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_animation_cloth.html

@@ -22,27 +22,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				Color,
-				DirectionalLight,
-				DoubleSide,
-				Fog,
-				Mesh,
-				MeshDepthMaterial,
-				MeshLambertMaterial,
-				ParametricBufferGeometry,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				RepeatWrapping,
-				RGBADepthPacking,
-				SphereBufferGeometry,
-				Scene,
-				TextureLoader,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -80,7 +60,7 @@
 			var cloth = new Cloth( xSegs, ySegs );
 
 			var GRAVITY = 981 * 1.4;
-			var gravity = new Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
+			var gravity = new THREE.Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
 
 
 			var TIMESTEP = 18 / 1000;
@@ -88,12 +68,12 @@
 
 			var pins = [];
 
-			var windForce = new Vector3( 0, 0, 0 );
+			var windForce = new THREE.Vector3( 0, 0, 0 );
 
-			var ballPosition = new Vector3( 0, - 45, 0 );
+			var ballPosition = new THREE.Vector3( 0, - 45, 0 );
 			var ballSize = 60; //40
 
-			var tmpForce = new Vector3();
+			var tmpForce = new THREE.Vector3();
 
 			var lastTime;
 
@@ -114,14 +94,14 @@
 
 			function Particle( x, y, z, mass ) {
 
-				this.position = new Vector3();
-				this.previous = new Vector3();
-				this.original = new Vector3();
-				this.a = new Vector3( 0, 0, 0 ); // acceleration
+				this.position = new THREE.Vector3();
+				this.previous = new THREE.Vector3();
+				this.original = new THREE.Vector3();
+				this.a = new THREE.Vector3( 0, 0, 0 ); // acceleration
 				this.mass = mass;
 				this.invMass = 1 / mass;
-				this.tmp = new Vector3();
-				this.tmp2 = new Vector3();
+				this.tmp = new THREE.Vector3();
+				this.tmp2 = new THREE.Vector3();
 
 				// init
 
@@ -159,7 +139,7 @@
 			};
 
 
-			var diff = new Vector3();
+			var diff = new THREE.Vector3();
 
 			function satisfyConstraints( p1, p2, distance ) {
 
@@ -298,7 +278,7 @@
 				if ( params.enableWind ) {
 
 					var indx;
-					var normal = new Vector3();
+					var normal = new THREE.Vector3();
 					var indices = clothGeometry.index;
 					var normals = clothGeometry.attributes.normal;
 
@@ -443,20 +423,20 @@
 
 				// scene
 
-				scene = new Scene();
-				scene.background = new Color( 0xcce0ff );
-				scene.fog = new Fog( 0xcce0ff, 500, 10000 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xcce0ff );
+				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
 
 				// camera
 
-				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 1000, 50, 1500 );
 
 				// lights
 
-				scene.add( new AmbientLight( 0x666666 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
-				var light = new DirectionalLight( 0xdfebff, 1 );
+				var light = new THREE.DirectionalLight( 0xdfebff, 1 );
 				light.position.set( 50, 200, 100 );
 				light.position.multiplyScalar( 1.3 );
 
@@ -478,39 +458,39 @@
 
 				// cloth material
 
-				var loader = new TextureLoader();
+				var loader = new THREE.TextureLoader();
 				var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
 				clothTexture.anisotropy = 16;
 
-				var clothMaterial = new MeshLambertMaterial( {
+				var clothMaterial = new THREE.MeshLambertMaterial( {
 					map: clothTexture,
-					side: DoubleSide,
+					side: THREE.DoubleSide,
 					alphaTest: 0.5
 				} );
 
 				// cloth geometry
 
-				clothGeometry = new ParametricBufferGeometry( clothFunction, cloth.w, cloth.h );
+				clothGeometry = new THREE.ParametricBufferGeometry( clothFunction, cloth.w, cloth.h );
 
 				// cloth mesh
 
-				object = new Mesh( clothGeometry, clothMaterial );
+				object = new THREE.Mesh( clothGeometry, clothMaterial );
 				object.position.set( 0, 0, 0 );
 				object.castShadow = true;
 				scene.add( object );
 
-				object.customDepthMaterial = new MeshDepthMaterial( {
-					depthPacking: RGBADepthPacking,
+				object.customDepthMaterial = new THREE.MeshDepthMaterial( {
+					depthPacking: THREE.RGBADepthPacking,
 					map: clothTexture,
 					alphaTest: 0.5
 				} );
 
 				// sphere
 
-				var ballGeo = new SphereBufferGeometry( ballSize, 32, 16 );
-				var ballMaterial = new MeshLambertMaterial();
+				var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
+				var ballMaterial = new THREE.MeshLambertMaterial();
 
-				sphere = new Mesh( ballGeo, ballMaterial );
+				sphere = new THREE.Mesh( ballGeo, ballMaterial );
 				sphere.castShadow = true;
 				sphere.receiveShadow = true;
 				sphere.visible = false;
@@ -519,13 +499,13 @@
 				// ground
 
 				var groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
-				groundTexture.wrapS = groundTexture.wrapT = RepeatWrapping;
+				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
 				groundTexture.repeat.set( 25, 25 );
 				groundTexture.anisotropy = 16;
 
-				var groundMaterial = new MeshLambertMaterial( { map: groundTexture } );
+				var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
 
-				var mesh = new Mesh( new PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
+				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
 				mesh.position.y = - 250;
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
@@ -533,39 +513,39 @@
 
 				// poles
 
-				var poleGeo = new BoxBufferGeometry( 5, 375, 5 );
-				var poleMat = new MeshLambertMaterial();
+				var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
+				var poleMat = new THREE.MeshLambertMaterial();
 
-				var mesh = new Mesh( poleGeo, poleMat );
+				var mesh = new THREE.Mesh( poleGeo, poleMat );
 				mesh.position.x = - 125;
 				mesh.position.y = - 62;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new Mesh( poleGeo, poleMat );
+				var mesh = new THREE.Mesh( poleGeo, poleMat );
 				mesh.position.x = 125;
 				mesh.position.y = - 62;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new Mesh( new BoxBufferGeometry( 255, 5, 5 ), poleMat );
+				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
 				mesh.position.y = - 250 + ( 750 / 2 );
 				mesh.position.x = 0;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var gg = new BoxBufferGeometry( 10, 10, 10 );
-				var mesh = new Mesh( gg, poleMat );
+				var gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
+				var mesh = new THREE.Mesh( gg, poleMat );
 				mesh.position.y = - 250;
 				mesh.position.x = 125;
 				mesh.receiveShadow = true;
 				mesh.castShadow = true;
 				scene.add( mesh );
 
-				var mesh = new Mesh( gg, poleMat );
+				var mesh = new THREE.Mesh( gg, poleMat );
 				mesh.position.y = - 250;
 				mesh.position.x = - 125;
 				mesh.receiveShadow = true;
@@ -574,7 +554,7 @@
 
 				// renderer
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_animation_keyframes.html

@@ -28,17 +28,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				AnimationMixer,
-				Clock,
-				Color,
-				CubeTextureLoader,
-				PerspectiveCamera,
-				PointLight,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -49,39 +39,39 @@
 			var scene, camera, pointLight, stats;
 			var renderer, mixer, controls;
 
-			var clock = new Clock();
+			var clock = new THREE.Clock();
 			var container = document.getElementById( 'container' );
 
 			stats = new Stats();
 			container.appendChild( stats.dom );
 
-			renderer = new WebGLRenderer( { antialias: true } );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.gammaOutput = true;
 			renderer.gammaFactor = 2.2;
 			container.appendChild( renderer.domElement );
 
-			scene = new Scene();
-			scene.background = new Color( 0xbfe3dd );
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0xbfe3dd );
 
-			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
+			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 			camera.position.set( 5, 2, 8 );
 
 			controls = new OrbitControls( camera, renderer.domElement );
 			controls.target.set( 0, 0.5, 0 );
 			controls.enablePan = false;
 
-			scene.add( new AmbientLight( 0x404040 ) );
+			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
-			pointLight = new PointLight( 0xffffff, 1 );
+			pointLight = new THREE.PointLight( 0xffffff, 1 );
 			pointLight.position.copy( camera.position );
 			scene.add( pointLight );
 
 			// envmap
 			var path = 'textures/cube/Park2/';
 			var format = '.jpg';
-			var envMap = new CubeTextureLoader().load( [
+			var envMap = new THREE.CubeTextureLoader().load( [
 				path + 'posx' + format, path + 'negx' + format,
 				path + 'posy' + format, path + 'negy' + format,
 				path + 'posz' + format, path + 'negz' + format
@@ -104,7 +94,7 @@
 
 				scene.add( model );
 
-				mixer = new AnimationMixer( model );
+				mixer = new THREE.AnimationMixer( model );
 				mixer.clipAction( gltf.animations[ 0 ] ).play();
 
 				animate();

examples/webgl_animation_multiple.html

@@ -15,22 +15,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AnimationClip,
-				AnimationMixer,
-				Clock,
-				Color,
-				DirectionalLight,
-				Fog,
-				HemisphereLight,
-				Mesh,
-				MeshPhongMaterial,
-				PCFSoftShadowMap,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { SkeletonUtils } from './jsm/utils/SkeletonUtils.js';
@@ -42,7 +27,7 @@
 			var renderer = null;
 			var camera = null;
 			var clock = null;
-			var mixers = []; // All the AnimationMixer objects for all the animations in the scene
+			var mixers = []; // All the THREE.AnimationMixer objects for all the animations in the scene
 			//////////////////////////////
 
 
@@ -163,7 +148,7 @@
 
 						if ( clonedScene ) {
 
-							// Scene is cloned properly, let's find one mesh and launch animation for it
+							// THREE.Scene is cloned properly, let's find one mesh and launch animation for it
 							var clonedMesh = clonedScene.getObjectByName( u.meshName );
 
 							if ( clonedMesh ) {
@@ -229,8 +214,8 @@
 			 */
 			function startAnimation( skinnedMesh, animations, animationName ) {
 
-				var mixer = new AnimationMixer( skinnedMesh );
-				var clip = AnimationClip.findByName( animations, animationName );
+				var mixer = new THREE.AnimationMixer( skinnedMesh );
+				var clip = THREE.AnimationClip.findByName( animations, animationName );
 
 				if ( clip ) {
 
@@ -335,37 +320,37 @@
 			function initRenderer() {
 
 				var container = document.getElementById( 'container' );
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
 				renderer.gammaFactor = 2.2;
 				renderer.shadowMap.enabled = true;
-				renderer.shadowMap.type = PCFSoftShadowMap;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 				container.appendChild( renderer.domElement );
 
 			}
 
 			/**
-			 * Initialize ThreeJS Scene
+			 * Initialize ThreeJS THREE.Scene
 			 */
 			function initScene() {
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.set( 3, 6, - 10 );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new Clock();
+				clock = new THREE.Clock();
 
-				worldScene = new Scene();
-				worldScene.background = new Color( 0xa0a0a0 );
-				worldScene.fog = new Fog( 0xa0a0a0, 10, 22 );
+				worldScene = new THREE.Scene();
+				worldScene.background = new THREE.Color( 0xa0a0a0 );
+				worldScene.fog = new THREE.Fog( 0xa0a0a0, 10, 22 );
 
-				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				worldScene.add( hemiLight );
 
-				var dirLight = new DirectionalLight( 0xffffff );
+				var dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 10;
@@ -377,9 +362,9 @@
 				worldScene.add( dirLight );
 
 				// ground
-				var groundMesh = new Mesh(
-					new PlaneBufferGeometry( 40, 40 ),
-					new MeshPhongMaterial( {
+				var groundMesh = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 40, 40 ),
+					new THREE.MeshPhongMaterial( {
 						color: 0x999999,
 						depthWrite: false
 					} )

examples/webgl_animation_skinning_blending.html

@@ -33,21 +33,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AnimationMixer,
-				Clock,
-				Color,
-				DirectionalLight,
-				Fog,
-				HemisphereLight,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				SkeletonHelper,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -72,21 +58,21 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 1, 2, - 3 );
 				camera.lookAt( 0, 1, 0 );
 
-				clock = new Clock();
+				clock = new THREE.Clock();
 
-				scene = new Scene();
-				scene.background = new Color( 0xa0a0a0 );
-				scene.fog = new Fog( 0xa0a0a0, 10, 50 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xa0a0a0 );
+				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
-				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				hemiLight.position.set( 0, 20, 0 );
 				scene.add( hemiLight );
 
-				var dirLight = new DirectionalLight( 0xffffff );
+				var dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( - 3, 10, - 10 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.top = 2;
@@ -101,7 +87,7 @@
 
 				// ground
 
-				var mesh = new Mesh( new PlaneBufferGeometry( 100, 100 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
@@ -120,7 +106,7 @@
 
 					//
 
-					skeleton = new SkeletonHelper( model );
+					skeleton = new THREE.SkeletonHelper( model );
 					skeleton.visible = false;
 					scene.add( skeleton );
 
@@ -133,7 +119,7 @@
 
 					var animations = gltf.animations;
 
-					mixer = new AnimationMixer( model );
+					mixer = new THREE.AnimationMixer( model );
 
 					idleAction = mixer.clipAction( animations[ 0 ] );
 					walkAction = mixer.clipAction( animations[ 3 ] );
@@ -147,7 +133,7 @@
 
 				} );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;

examples/webgl_animation_skinning_morph.html

@@ -35,23 +35,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AnimationMixer,
-				Clock,
-				Color,
-				DirectionalLight,
-				Fog,
-				GridHelper,
-				HemisphereLight,
-				LoopOnce,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -71,33 +55,33 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
 				camera.position.set( - 5, 3, 10 );
-				camera.lookAt( new Vector3( 0, 2, 0 ) );
+				camera.lookAt( new THREE.Vector3( 0, 2, 0 ) );
 
-				scene = new Scene();
-				scene.background = new Color( 0xe0e0e0 );
-				scene.fog = new Fog( 0xe0e0e0, 20, 100 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xe0e0e0 );
+				scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
 
-				clock = new Clock();
+				clock = new THREE.Clock();
 
 				// lights
 
-				var light = new HemisphereLight( 0xffffff, 0x444444 );
+				var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 				light.position.set( 0, 20, 0 );
 				scene.add( light );
 
-				light = new DirectionalLight( 0xffffff );
+				light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 20, 10 );
 				scene.add( light );
 
 				// ground
 
-				var mesh = new Mesh( new PlaneBufferGeometry( 2000, 2000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 				mesh.rotation.x = - Math.PI / 2;
 				scene.add( mesh );
 
-				var grid = new GridHelper( 200, 40, 0x000000, 0x000000 );
+				var grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );
 				grid.material.opacity = 0.2;
 				grid.material.transparent = true;
 				scene.add( grid );
@@ -118,7 +102,7 @@
 
 				} );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.gammaOutput = true;
@@ -140,7 +124,7 @@
 
 				gui = new GUI();
 
-				mixer = new AnimationMixer( model );
+				mixer = new THREE.AnimationMixer( model );
 
 				actions = {};
 
@@ -153,7 +137,7 @@
 					if ( emotes.indexOf( clip.name ) >= 0 || states.indexOf( clip.name ) >= 4 ) {
 
 						action.clampWhenFinished = true;
-						action.loop = LoopOnce;
+						action.loop = THREE.LoopOnce;
 
 					}
 

examples/webgl_buffergeometry.html

@@ -12,22 +12,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BufferGeometry,
-				Color,
-				DirectionalLight,
-				DoubleSide,
-				Float32BufferAttribute,
-				Fog,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				Vector3,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -46,22 +31,22 @@
 
 				//
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
 				camera.position.z = 2750;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
-				scene.fog = new Fog( 0x050505, 2000, 3500 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
+				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
 
-				scene.add( new AmbientLight( 0x444444 ) );
+				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
-				var light1 = new DirectionalLight( 0xffffff, 0.5 );
+				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var light2 = new DirectionalLight( 0xffffff, 1.5 );
+				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
@@ -69,23 +54,23 @@
 
 				var triangles = 160000;
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
 				var positions = [];
 				var normals = [];
 				var colors = [];
 
-				var color = new Color();
+				var color = new THREE.Color();
 
 				var n = 800, n2 = n / 2;	// triangles spread in the cube
 				var d = 12, d2 = d / 2;	// individual triangle size
 
-				var pA = new Vector3();
-				var pB = new Vector3();
-				var pC = new Vector3();
+				var pA = new THREE.Vector3();
+				var pB = new THREE.Vector3();
+				var pC = new THREE.Vector3();
 
-				var cb = new Vector3();
-				var ab = new Vector3();
+				var cb = new THREE.Vector3();
+				var ab = new THREE.Vector3();
 
 				for ( var i = 0; i < triangles; i ++ ) {
 
@@ -151,23 +136,23 @@
 
 				}
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
-				geometry.addAttribute( 'normal', new Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
+				geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
 
 				geometry.computeBoundingSphere();
 
-				var material = new MeshPhongMaterial( {
+				var material = new THREE.MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
-					side: DoubleSide, vertexColors: VertexColors
+					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
 				} );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_constructed_from_geometry.html

@@ -18,23 +18,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BufferGeometry,
-				Color,
-				ExtrudeGeometry,
-				Float32BufferAttribute,
-				Geometry,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PointLight,
-				Scene,
-				Shape,
-				Vector3,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -47,14 +31,14 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				camera = new PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 );
+				camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 );
 				camera.position.z = 480.0;
 				scene.add( camera );
 
@@ -63,9 +47,9 @@
 				controls.maxDistance = 800.0;
 				controls.dynamicDampingFactor = 0.1;
 
-				scene.add( new AmbientLight( 0xffffff, 0.2 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
 
-				var light = new PointLight( 0xffffff, 0.7 );
+				var light = new THREE.PointLight( 0xffffff, 0.7 );
 				camera.add( light );
 
 				createScene();
@@ -79,7 +63,7 @@
 
 			function createGeometry() {
 
-				var heartShape = new Shape(); // From http://blog.burlock.org/html5/130-paths
+				var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
 				var x = 0, y = 0;
 
 				heartShape.moveTo( x + 25, y + 25 );
@@ -99,7 +83,7 @@
 					bevelThickness: 1
 				};
 
-				var geometry = new ExtrudeGeometry( heartShape, extrudeSettings );
+				var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
 				geometry.rotateX( Math.PI );
 				geometry.scale( 0.4, 0.4, 0.4 );
 
@@ -109,7 +93,7 @@
 
 			function createScene() {
 
-				var bufferGeometry = new BufferGeometry();
+				var bufferGeometry = new THREE.BufferGeometry();
 
 				var radius = 125;
 				var count = 80;
@@ -118,11 +102,11 @@
 				var normals = [];
 				var colors = [];
 
-				var vector = new Vector3();
+				var vector = new THREE.Vector3();
 
-				var color = new Color( 0xffffff );
+				var color = new THREE.Color( 0xffffff );
 				var heartGeometry = createGeometry();
-				var geometry = new Geometry();
+				var geometry = new THREE.Geometry();
 
 				for ( var i = 1, l = count; i <= l; i ++ ) {
 
@@ -173,13 +157,13 @@
 
 				}
 
-				bufferGeometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-				bufferGeometry.addAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
-				bufferGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				bufferGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				bufferGeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+				bufferGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new MeshPhongMaterial( { shininess: 80, vertexColors: VertexColors } );
+				var material = new THREE.MeshPhongMaterial( { shininess: 80, vertexColors: THREE.VertexColors } );
 
-				var mesh = new Mesh( bufferGeometry, material );
+				var mesh = new THREE.Mesh( bufferGeometry, material );
 				scene.add( mesh );
 
 			}

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -47,18 +47,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				AdditiveBlending,
-				BufferGeometry,
-				Color,
-				Float32BufferAttribute,
-				PerspectiveCamera,
-				Points,
-				Scene,
-				ShaderMaterial,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -73,24 +62,24 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 300;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				uniforms = {
 
-					pointTexture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
+					pointTexture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 
 				};
 
-				var shaderMaterial = new ShaderMaterial( {
+				var shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-					blending: AdditiveBlending,
+					blending: THREE.AdditiveBlending,
 					depthTest: false,
 					transparent: true,
 					vertexColors: true
@@ -100,13 +89,13 @@
 
 				var radius = 200;
 
-				geometry = new BufferGeometry();
+				geometry = new THREE.BufferGeometry();
 
 				var positions = [];
 				var colors = [];
 				var sizes = [];
 
-				var color = new Color();
+				var color = new THREE.Color();
 
 				for ( var i = 0; i < particles; i ++ ) {
 
@@ -122,15 +111,15 @@
 
 				}
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
-				geometry.addAttribute( 'size', new Float32BufferAttribute( sizes, 1 ).setDynamic( true ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ).setDynamic( true ) );
 
-				particleSystem = new Points( geometry, shaderMaterial );
+				particleSystem = new THREE.Points( geometry, shaderMaterial );
 
 				scene.add( particleSystem );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_drawcalls.html

@@ -20,24 +20,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AdditiveBlending,
-				BoxBufferGeometry,
-				BoxHelper,
-				BufferAttribute,
-				BufferGeometry,
-				Group,
-				LineBasicMaterial,
-				LineSegments,
-				Mesh,
-				PerspectiveCamera,
-				Points,
-				PointsMaterial,
-				Scene,
-				Vector3,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -103,20 +86,20 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.z = 1750;
 
 				var controls = new OrbitControls( camera, container );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 
-				group = new Group();
+				group = new THREE.Group();
 				scene.add( group );
 
-				var helper = new BoxHelper( new Mesh( new BoxBufferGeometry( r, r, r ) ) );
+				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
 				helper.material.color.setHex( 0x101010 );
-				helper.material.blending = AdditiveBlending;
+				helper.material.blending = THREE.AdditiveBlending;
 				helper.material.transparent = true;
 				group.add( helper );
 
@@ -125,15 +108,15 @@
 				positions = new Float32Array( segments * 3 );
 				colors = new Float32Array( segments * 3 );
 
-				var pMaterial = new PointsMaterial( {
+				var pMaterial = new THREE.PointsMaterial( {
 					color: 0xFFFFFF,
 					size: 3,
-					blending: AdditiveBlending,
+					blending: THREE.AdditiveBlending,
 					transparent: true,
 					sizeAttenuation: false
 				} );
 
-				particles = new BufferGeometry();
+				particles = new THREE.BufferGeometry();
 				particlePositions = new Float32Array( maxParticleCount * 3 );
 
 				for ( var i = 0; i < maxParticleCount; i ++ ) {
@@ -148,40 +131,40 @@
 
 					// add it to the geometry
 					particlesData.push( {
-						velocity: new Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
+						velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
 						numConnections: 0
 					} );
 
 				}
 
 				particles.setDrawRange( 0, particleCount );
-				particles.addAttribute( 'position', new BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
+				particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
 
 				// create the particle system
-				pointCloud = new Points( particles, pMaterial );
+				pointCloud = new THREE.Points( particles, pMaterial );
 				group.add( pointCloud );
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ).setDynamic( true ) );
-				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ).setDynamic( true ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );
+				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
 
 				geometry.computeBoundingSphere();
 
 				geometry.setDrawRange( 0, 0 );
 
-				var material = new LineBasicMaterial( {
-					vertexColors: VertexColors,
-					blending: AdditiveBlending,
+				var material = new THREE.LineBasicMaterial( {
+					vertexColors: THREE.VertexColors,
+					blending: THREE.AdditiveBlending,
 					transparent: true
 				} );
 
-				linesMesh = new LineSegments( geometry, material );
+				linesMesh = new THREE.LineSegments( geometry, material );
 				group.add( linesMesh );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_indexed.html

@@ -17,19 +17,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - indexed</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Color,
-				DoubleSide,
-				Float32BufferAttribute,
-				HemisphereLight,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -45,20 +33,20 @@
 
 				//
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
 				camera.position.z = 64;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 
 				//
 
-				var light = new HemisphereLight();
+				var light = new THREE.HemisphereLight();
 				scene.add( light );
 
 				//
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
 				var indices = [];
 
@@ -117,21 +105,21 @@
 				//
 
 				geometry.setIndex( indices );
-				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
-				geometry.addAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new MeshPhongMaterial( {
-					side: DoubleSide,
-					vertexColors: VertexColors
+				var material = new THREE.MeshPhongMaterial( {
+					side: THREE.DoubleSide,
+					vertexColors: THREE.VertexColors
 				} );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing.html

@@ -79,18 +79,7 @@
 	</script>
 
 	<script type="module">
-		import {
-			DoubleSide,
-			Float32BufferAttribute,
-			InstancedBufferAttribute,
-			InstancedBufferGeometry,
-			Mesh,
-			PerspectiveCamera,
-			RawShaderMaterial,
-			Scene,
-			Vector4,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
 		import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -106,14 +95,14 @@
 
 			container = document.getElementById( 'container' );
 
-			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
 			camera.position.z = 2;
 
-			scene = new Scene();
+			scene = new THREE.Scene();
 
 			// geometry
 
-			var vector = new Vector4();
+			var vector = new THREE.Vector4();
 
 			var instances = 50000;
 
@@ -155,19 +144,19 @@
 
 			}
 
-			var geometry = new InstancedBufferGeometry();
+			var geometry = new THREE.InstancedBufferGeometry();
 			geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
 
-			geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 
-			geometry.addAttribute( 'offset', new InstancedBufferAttribute( new Float32Array( offsets ), 3 ) );
-			geometry.addAttribute( 'color', new InstancedBufferAttribute( new Float32Array( colors ), 4 ) );
-			geometry.addAttribute( 'orientationStart', new InstancedBufferAttribute( new Float32Array( orientationsStart ), 4 ) );
-			geometry.addAttribute( 'orientationEnd', new InstancedBufferAttribute( new Float32Array( orientationsEnd ), 4 ) );
+			geometry.addAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) );
+			geometry.addAttribute( 'color', new THREE.InstancedBufferAttribute( new Float32Array( colors ), 4 ) );
+			geometry.addAttribute( 'orientationStart', new THREE.InstancedBufferAttribute( new Float32Array( orientationsStart ), 4 ) );
+			geometry.addAttribute( 'orientationEnd', new THREE.InstancedBufferAttribute( new Float32Array( orientationsEnd ), 4 ) );
 
 			// material
 
-			var material = new RawShaderMaterial( {
+			var material = new THREE.RawShaderMaterial( {
 
 				uniforms: {
 					"time": { value: 1.0 },
@@ -175,19 +164,19 @@
 				},
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-				side: DoubleSide,
+				side: THREE.DoubleSide,
 				transparent: true
 
 			} );
 
 			//
 
-			var mesh = new Mesh( geometry, material );
+			var mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
 			//
 
-			renderer = new WebGLRenderer();
+			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing2.html

@@ -69,19 +69,7 @@
 	</script>
 
 	<script type="module">
-		import {
-			Float32BufferAttribute,
-			IcosahedronBufferGeometry,
-			InstancedBufferAttribute,
-			InstancedBufferGeometry,
-			Mesh,
-			MeshBasicMaterial,
-			PerspectiveCamera,
-			Scene,
-			ShaderMaterial,
-			VertexColors,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
 
@@ -100,14 +88,14 @@
 
 			container = document.getElementById( 'container' );
 
-			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 			camera.position.z = 4;
 
-			scene = new Scene();
+			scene = new THREE.Scene();
 
 			//
 
-			var geometry = new IcosahedronBufferGeometry( 0.1, 1 );
+			var geometry = new THREE.IcosahedronBufferGeometry( 0.1, 1 );
 
 			var colors = [];
 
@@ -117,9 +105,9 @@
 
 			}
 
-			geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-			var material = new MeshBasicMaterial( { color: 0xff0000, vertexColors: VertexColors } );
+			var material = new THREE.MeshBasicMaterial( { color: 0xff0000, vertexColors: THREE.VertexColors } );
 
 			//
 
@@ -135,7 +123,7 @@
 
 				// the red meshes are drawn with separate draw calls
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				var position = mesh.position;
@@ -157,17 +145,17 @@
 
 			}
 
-			var instancedGeometry = new InstancedBufferGeometry();
+			var instancedGeometry = new THREE.InstancedBufferGeometry();
 			instancedGeometry.attributes.position = geometry.attributes.position;
 			instancedGeometry.attributes.color = geometry.attributes.color;
 
-			instancedGeometry.addAttribute( 'instancePosition', new InstancedBufferAttribute( new Float32Array( instancePositions ), 3 ) );
-			instancedGeometry.addAttribute( 'instanceQuaternion', new InstancedBufferAttribute( new Float32Array( instanceQuaternions ), 4 ) );
-			instancedGeometry.addAttribute( 'instanceScale', new InstancedBufferAttribute( new Float32Array( instanceScales ), 3 ) );
+			instancedGeometry.addAttribute( 'instancePosition', new THREE.InstancedBufferAttribute( new Float32Array( instancePositions ), 3 ) );
+			instancedGeometry.addAttribute( 'instanceQuaternion', new THREE.InstancedBufferAttribute( new Float32Array( instanceQuaternions ), 4 ) );
+			instancedGeometry.addAttribute( 'instanceScale', new THREE.InstancedBufferAttribute( new Float32Array( instanceScales ), 3 ) );
 
 			//
 
-			var shaderMaterial = new ShaderMaterial( {
+			var shaderMaterial = new THREE.ShaderMaterial( {
 
 				uniforms: {},
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
@@ -178,13 +166,13 @@
 
 			// counterparts are drawn all at once with a single draw call (via instanced rendering)
 
-			var instancedMesh = new Mesh( instancedGeometry, shaderMaterial );
+			var instancedMesh = new THREE.Mesh( instancedGeometry, shaderMaterial );
 			instancedMesh.position.x = 0.1;
 			scene.add( instancedMesh );
 
 			//
 
-			renderer = new WebGLRenderer();
+			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing_billboards.html

@@ -83,17 +83,7 @@
 	</script>
 
 	<script type="module">
-		import {
-			CircleBufferGeometry,
-			InstancedBufferAttribute,
-			InstancedBufferGeometry,
-			Mesh,
-			PerspectiveCamera,
-			RawShaderMaterial,
-			Scene,
-			TextureLoader,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
 
@@ -104,7 +94,7 @@
 
 		function init() {
 
-			renderer = new WebGLRenderer();
+			renderer = new THREE.WebGLRenderer();
 
 			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
@@ -116,14 +106,14 @@
 			container = document.createElement( 'div' );
 			document.body.appendChild( container );
 
-			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 			camera.position.z = 1400;
 
-			scene = new Scene();
+			scene = new THREE.Scene();
 
-			var circleGeometry = new CircleBufferGeometry( 1, 6 );
+			var circleGeometry = new THREE.CircleBufferGeometry( 1, 6 );
 
-			geometry = new InstancedBufferGeometry();
+			geometry = new THREE.InstancedBufferGeometry();
 			geometry.index = circleGeometry.index;
 			geometry.attributes = circleGeometry.attributes;
 
@@ -139,11 +129,11 @@
 
 			}
 
-			geometry.addAttribute( 'translate', new InstancedBufferAttribute( translateArray, 3 ) );
+			geometry.addAttribute( 'translate', new THREE.InstancedBufferAttribute( translateArray, 3 ) );
 
-			material = new RawShaderMaterial( {
+			material = new THREE.RawShaderMaterial( {
 				uniforms: {
-					"map": { value: new TextureLoader().load( 'textures/sprites/circle.png' ) },
+					"map": { value: new THREE.TextureLoader().load( 'textures/sprites/circle.png' ) },
 					"time": { value: 0.0 }
 				},
 				vertexShader: document.getElementById( 'vshader' ).textContent,
@@ -152,7 +142,7 @@
 				depthWrite: true
 			} );
 
-			mesh = new Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			mesh.scale.set( 500, 500, 500 );
 			scene.add( mesh );
 

examples/webgl_buffergeometry_instancing_dynamic.html

@@ -73,20 +73,7 @@
 	</script>
 
 	<script type="module">
-		import {
-			BoxBufferGeometry,
-			Color,
-			InstancedBufferAttribute,
-			InstancedBufferGeometry,
-			Mesh,
-			PerspectiveCamera,
-			Quaternion,
-			RawShaderMaterial,
-			Scene,
-			TextureLoader,
-			Vector4,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
 
@@ -96,9 +83,9 @@
 
 		var lastTime = 0;
 
-		var moveQ = new Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
-		var tmpQ = new Quaternion();
-		var currentQ = new Quaternion();
+		var moveQ = new THREE.Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
+		var tmpQ = new THREE.Quaternion();
+		var currentQ = new THREE.Quaternion();
 
 		init();
 		animate();
@@ -107,20 +94,20 @@
 
 			container = document.getElementById( 'container' );
 
-			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-			scene = new Scene();
-			scene.background = new Color( 0x101010 );
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x101010 );
 
 			// geometry
 
 			var instances = 5000;
 
-			var bufferGeometry = new BoxBufferGeometry( 2, 2, 2 );
+			var bufferGeometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
 
 			// copying data from a simple box geometry, but you can specify a custom geometry if you want
 
-			var geometry = new InstancedBufferGeometry();
+			var geometry = new THREE.InstancedBufferGeometry();
 			geometry.index = bufferGeometry.index;
 			geometry.attributes.position = bufferGeometry.attributes.position;
 			geometry.attributes.uv = bufferGeometry.attributes.uv;
@@ -130,7 +117,7 @@
 			var offsets = [];
 			var orientations = [];
 
-			var vector = new Vector4();
+			var vector = new THREE.Vector4();
 			var x, y, z, w;
 
 			for ( var i = 0; i < instances; i ++ ) {
@@ -159,28 +146,28 @@
 
 			}
 
-			offsetAttribute = new InstancedBufferAttribute( new Float32Array( offsets ), 3 );
-			orientationAttribute = new InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setDynamic( true );
+			offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 );
+			orientationAttribute = new THREE.InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setDynamic( true );
 
 			geometry.addAttribute( 'offset', offsetAttribute );
 			geometry.addAttribute( 'orientation', orientationAttribute );
 
 			// material
 
-			var material = new RawShaderMaterial( {
+			var material = new THREE.RawShaderMaterial( {
 
 				uniforms: {
-					map: { value: new TextureLoader().load( 'textures/crate.gif' ) }
+					map: { value: new THREE.TextureLoader().load( 'textures/crate.gif' ) }
 				},
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
 			} );
 
-			mesh = new Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			scene.add( mesh );
 
-			renderer = new WebGLRenderer();
+			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_instancing_interleaved_dynamic.html

@@ -75,23 +75,7 @@
 	</script>
 
 	<script type="module">
-		import {
-			BufferAttribute,
-			Color,
-			DoubleSide,
-			InstancedBufferGeometry,
-			InstancedInterleavedBuffer,
-			InterleavedBuffer,
-			InterleavedBufferAttribute,
-			Mesh,
-			PerspectiveCamera,
-			Quaternion,
-			Scene,
-			RawShaderMaterial,
-			TextureLoader,
-			Vector4,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
 
@@ -105,22 +89,22 @@
 
 			container = document.getElementById( 'container' );
 
-			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-			scene = new Scene();
-			scene.background = new Color( 0x101010 );
+			scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x101010 );
 
-			renderer = new WebGLRenderer();
+			renderer = new THREE.WebGLRenderer();
 
 			// geometry
 
 			var instances = 5000;
 
-			var geometry = new InstancedBufferGeometry();
+			var geometry = new THREE.InstancedBufferGeometry();
 
 			// per mesh data x,y,z,w,u,v,s,t for 4-element alignment
 			// only use x,y,z and u,v; but x, y, z, nx, ny, nz, u, v would be a good layout
-			var vertexBuffer = new InterleavedBuffer( new Float32Array( [
+			var vertexBuffer = new THREE.InterleavedBuffer( new Float32Array( [
 				// Front
 				- 1, 1, 1, 0, 0, 0, 0, 0,
 				1, 1, 1, 0, 1, 0, 0, 0,
@@ -154,10 +138,10 @@
 			] ), 8 );
 
 			// Use vertexBuffer, starting at offset 0, 3 items in position attribute
-			var positions = new InterleavedBufferAttribute( vertexBuffer, 3, 0 );
+			var positions = new THREE.InterleavedBufferAttribute( vertexBuffer, 3, 0 );
 			geometry.addAttribute( 'position', positions );
 			// Use vertexBuffer, starting at offset 4, 2 items in uv attribute
-			var uvs = new InterleavedBufferAttribute( vertexBuffer, 2, 4 );
+			var uvs = new THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
 			geometry.addAttribute( 'uv', uvs );
 
 			var indices = new Uint16Array( [
@@ -175,13 +159,13 @@
 				22, 21, 23
 			] );
 
-			geometry.setIndex( new BufferAttribute( indices, 1 ) );
+			geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
 
 			// per instance data
-			instanceBuffer = new InstancedInterleavedBuffer( new Float32Array( instances * 8 ), 8, 1 ).setDynamic( true );
-			var offsets = new InterleavedBufferAttribute( instanceBuffer, 3, 0 );
+			instanceBuffer = new THREE.InstancedInterleavedBuffer( new Float32Array( instances * 8 ), 8, 1 ).setDynamic( true );
+			var offsets = new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 0 );
 
-			var vector = new Vector4();
+			var vector = new THREE.Vector4();
 			for ( var i = 0, ul = offsets.count; i < ul; i ++ ) {
 
 				var x = Math.random() * 100 - 50;
@@ -195,7 +179,7 @@
 
 			geometry.addAttribute( 'offset', offsets ); // per mesh translation
 
-			orientations = new InterleavedBufferAttribute( instanceBuffer, 4, 4 );
+			orientations = new THREE.InterleavedBufferAttribute( instanceBuffer, 4, 4 );
 
 			for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
 
@@ -209,22 +193,22 @@
 			geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
 
 			// material
-			var texture = new TextureLoader().load( 'textures/crate.gif' );
+			var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
 			texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
-			var material = new RawShaderMaterial( {
+			var material = new THREE.RawShaderMaterial( {
 
 				uniforms: {
 					map: { value: texture }
 				},
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-				side: DoubleSide,
+				side: THREE.DoubleSide,
 				transparent: false
 
 			} );
 
-			var mesh = new Mesh( geometry, material );
+			var mesh = new THREE.Mesh( geometry, material );
 			mesh.frustumCulled = false;
 			scene.add( mesh );
 
@@ -269,9 +253,9 @@
 
 		var lastTime = 0;
 
-		var moveQ = ( new Quaternion( .5, .5, .5, 0.0 ) ).normalize();
-		var tmpQ = new Quaternion();
-		var currentQ = new Quaternion();
+		var moveQ = ( new THREE.Quaternion( .5, .5, .5, 0.0 ) ).normalize();
+		var tmpQ = new THREE.Quaternion();
+		var currentQ = new THREE.Quaternion();
 		function render() {
 
 			var time = performance.now();

examples/webgl_buffergeometry_instancing_lambert.html

@@ -27,40 +27,16 @@
 	</div>
 
 	<script type="module">
-		import {
-			AmbientLight,
-			DirectionalLight,
-			FogExp2,
-			InstancedBufferAttribute,
-			InstancedBufferGeometry,
-			Mesh,
-			MeshLambertMaterial,
-			MeshPhongMaterial,
-			MultiplyOperation,
-			PerspectiveCamera,
-			PlaneBufferGeometry,
-			RGBADepthPacking,
-			Scene,
-			ShaderChunk,
-			ShaderLib,
-			ShaderMaterial,
-			SphericalReflectionMapping,
-			sRGBEncoding,
-			TextureLoader,
-			TorusBufferGeometry,
-			UniformsUtils,
-			VertexColors,
-			WebGLRenderer
-		} from "../build/three.module.js";
+		import * as THREE from '../build/three.module.js';
 
 		import Stats from './jsm/libs/stats.module.js';
 
 		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 		import { Curves } from './jsm/curves/CurveExtras.js';
 
-		ShaderLib.customDepthRGBA = { // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
+		THREE.ShaderLib.customDepthRGBA = { // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
 
-			uniforms: ShaderLib.depth.uniforms,
+			uniforms: THREE.ShaderLib.depth.uniforms,
 
 			vertexShader:
 				`
@@ -114,13 +90,13 @@
 				}
 			`,
 
-			fragmentShader: ShaderChunk.depth_frag
+			fragmentShader: THREE.ShaderChunk.depth_frag
 
 		};
 
-		ShaderLib.lambert = { // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
+		THREE.ShaderLib.lambert = { // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
 
-			uniforms: ShaderLib.lambert.uniforms,
+			uniforms: THREE.ShaderLib.lambert.uniforms,
 
 			vertexShader:
 				`
@@ -196,7 +172,7 @@
 				}
 				`,
 
-			fragmentShader: ShaderLib.lambert.fragmentShader
+			fragmentShader: THREE.ShaderLib.lambert.fragmentShader
 
 		};
 
@@ -211,19 +187,19 @@
 
 		function init() {
 
-			renderer = new WebGLRenderer( { antialias: true } );
+			renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.shadowMap.enabled = true;
 			document.body.appendChild( renderer.domElement );
 
 			renderer.gammaOutput = true;
 
-			scene = new Scene();
+			scene = new THREE.Scene();
 
-			scene.fog = new FogExp2( 0x000000, 0.004 );
+			scene.fog = new THREE.FogExp2( 0x000000, 0.004 );
 			renderer.setClearColor( scene.fog.color, 1 );
 
-			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 			camera.position.set( 80, 40, 80 );
 
 			scene.add( camera );
@@ -232,9 +208,9 @@
 			controls.enableZoom = false;
 			controls.maxPolarAngle = Math.PI / 2;
 
-			scene.add( new AmbientLight( 0xffffff, 0.7 ) );
+			scene.add( new THREE.AmbientLight( 0xffffff, 0.7 ) );
 
-			var light = new DirectionalLight( 0xffffff, 0.4 );
+			var light = new THREE.DirectionalLight( 0xffffff, 0.4 );
 			light.position.set( 50, 40, 0 );
 
 			light.castShadow = true;
@@ -258,8 +234,8 @@
 
 			// instanced buffer geometry
 
-			var geometry = new InstancedBufferGeometry();
-			geometry.copy( new TorusBufferGeometry( 2, 0.5, 8, 128 ) );
+			var geometry = new THREE.InstancedBufferGeometry();
+			geometry.copy( new THREE.TorusBufferGeometry( 2, 0.5, 8, 128 ) );
 
 			const INSTANCES = 256;
 
@@ -289,29 +265,29 @@
 
 			}
 
-			geometry.addAttribute( 'instanceOffset', new InstancedBufferAttribute( offsets, 3 ) );
-			geometry.addAttribute( 'instanceColor', new InstancedBufferAttribute( colors, 3 ) );
-			geometry.addAttribute( 'instanceScale', new InstancedBufferAttribute( scales, 1 ) );
+			geometry.addAttribute( 'instanceOffset', new THREE.InstancedBufferAttribute( offsets, 3 ) );
+			geometry.addAttribute( 'instanceColor', new THREE.InstancedBufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'instanceScale', new THREE.InstancedBufferAttribute( scales, 1 ) );
 
 
 			// material
 
-			var envMap = new TextureLoader().load( `textures/metal.jpg`, function ( texture ) {
+			var envMap = new THREE.TextureLoader().load( `textures/metal.jpg`, function ( texture ) {
 
-				texture.mapping = SphericalReflectionMapping;
-				texture.encoding = sRGBEncoding;
+				texture.mapping = THREE.SphericalReflectionMapping;
+				texture.encoding = THREE.sRGBEncoding;
 				if ( mesh ) mesh.material.needsUpdate = true;
 
 			} );
 
-			var material = new MeshLambertMaterial( {
+			var material = new THREE.MeshLambertMaterial( {
 
 				color: 0xffb54a,
 				envMap: envMap,
-				combine: MultiplyOperation,
+				combine: THREE.MultiplyOperation,
 				reflectivity: 0.8,
 
-				vertexColors: VertexColors,
+				vertexColors: THREE.VertexColors,
 				fog: true
 
 			} );
@@ -322,15 +298,15 @@
 
 			// custom depth material - required for instanced shadows
 
-			var shader = ShaderLib[ 'customDepthRGBA' ];
+			var shader = THREE.ShaderLib[ 'customDepthRGBA' ];
 
-			var uniforms = UniformsUtils.clone( shader.uniforms );
+			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
-			var customDepthMaterial = new ShaderMaterial( {
+			var customDepthMaterial = new THREE.ShaderMaterial( {
 
 				defines: {
 					'INSTANCED': "",
-					'DEPTH_PACKING': RGBADepthPacking
+					'DEPTH_PACKING': THREE.RGBADepthPacking
 				},
 				uniforms: uniforms,
 				vertexShader: shader.vertexShader,
@@ -340,7 +316,7 @@
 
 			//
 
-			mesh = new Mesh( geometry, material );
+			mesh = new THREE.Mesh( geometry, material );
 			mesh.scale.set( 1, 1, 2 );
 			mesh.castShadow = true;
 			mesh.receiveShadow = true;
@@ -351,9 +327,9 @@
 
 			//
 
-			var ground = new Mesh(
-				new PlaneBufferGeometry( 800, 800 ).rotateX( - Math.PI / 2 ),
-				new MeshPhongMaterial( { color: 0x888888 } )
+			var ground = new THREE.Mesh(
+				new THREE.PlaneBufferGeometry( 800, 800 ).rotateX( - Math.PI / 2 ),
+				new THREE.MeshPhongMaterial( { color: 0x888888 } )
 			);
 			ground.position.set( 0, - 40, 0 );
 			ground.receiveShadow = true;

examples/webgl_buffergeometry_lines.html

@@ -17,16 +17,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - lines</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Float32BufferAttribute,
-				Line,
-				LineBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			var container, stats;
@@ -44,15 +35,15 @@
 
 				//
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 4000 );
 				camera.position.z = 2750;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var segments = 10000;
 
-				var geometry = new BufferGeometry();
-				var material = new LineBasicMaterial( { vertexColors: VertexColors } );
+				var geometry = new THREE.BufferGeometry();
+				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 				var positions = [];
 				var colors = [];
@@ -77,17 +68,17 @@
 
 				}
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 
-				line = new Line( geometry, material );
+				line = new THREE.Line( geometry, material );
 				scene.add( line );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_lines_indexed.html

@@ -18,18 +18,7 @@
 
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Float32BufferAttribute,
-				LineBasicMaterial,
-				LineSegments,
-				Object3D,
-				PerspectiveCamera,
-				Scene,
-				Vector3,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -46,13 +35,13 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 9000;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				var geometry = new BufferGeometry();
-				var material = new LineBasicMaterial( { vertexColors: VertexColors } );
+				var geometry = new THREE.BufferGeometry();
+				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 				var indices = [];
 				var positions = [];
@@ -138,8 +127,8 @@
 				var y = 0;
 				snowflake(
 					[
-						new Vector3( 0, y, 0 ),
-						new Vector3( 500, y, 0 )
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 500, y, 0 )
 					],
 					false, 600
 				);
@@ -147,9 +136,9 @@
 				y += 600;
 				snowflake(
 					[
-						new Vector3( 0, y, 0 ),
-						new Vector3( 250, y + 400, 0 ),
-						new Vector3( 500, y, 0 )
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 250, y + 400, 0 ),
+						new THREE.Vector3( 500, y, 0 )
 					],
 					true, 600
 				);
@@ -157,10 +146,10 @@
 				y += 600;
 				snowflake(
 					[
-						new Vector3( 0, y, 0 ),
-						new Vector3( 500, y, 0 ),
-						new Vector3( 500, y + 500, 0 ),
-						new Vector3( 0, y + 500, 0 )
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 500, y, 0 ),
+						new THREE.Vector3( 500, y + 500, 0 ),
+						new THREE.Vector3( 0, y + 500, 0 )
 					],
 					true, 600
 				);
@@ -168,15 +157,15 @@
 				y += 1000;
 				snowflake(
 					[
-						new Vector3( 250, y, 0 ),
-						new Vector3( 500, y, 0 ),
-						new Vector3( 250, y, 0 ),
-						new Vector3( 250, y + 250, 0 ),
-						new Vector3( 250, y, 0 ),
-						new Vector3( 0, y, 0 ),
-						new Vector3( 250, y, 0 ),
-						new Vector3( 250, y - 250, 0 ),
-						new Vector3( 250, y, 0 )
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 500, y, 0 ),
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 250, y + 250, 0 ),
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 250, y - 250, 0 ),
+						new THREE.Vector3( 250, y, 0 )
 					],
 					false, 600
 				);
@@ -184,20 +173,20 @@
 				//
 
 				geometry.setIndex( indices );
-				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 				geometry.computeBoundingSphere();
 
-				var lineSegments = new LineSegments( geometry, material );
+				var lineSegments = new THREE.LineSegments( geometry, material );
 				lineSegments.position.x -= 1200;
 				lineSegments.position.y -= 1200;
 
-				parent_node = new Object3D();
+				parent_node = new THREE.Object3D();
 				parent_node.add( lineSegments );
 
 				scene.add( parent_node );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_morphtargets.html

@@ -20,19 +20,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				Color,
-				Float32BufferAttribute,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PointLight,
-				Scene,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
@@ -41,35 +29,35 @@
 
 			function init() {
 
-				scene = new Scene();
-				scene.background = new Color( 0x8FBCD4 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x8FBCD4 );
 
-				scene.add( new AmbientLight( 0x8FBCD4, 0.4 ) );
+				scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
 
 				container = document.getElementById( 'container' );
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 				camera.position.z = 8;
 				scene.add( camera );
 
 				var controls = new OrbitControls( camera, container );
 
-				var pointLight = new PointLight( 0xffffff, 1 );
+				var pointLight = new THREE.PointLight( 0xffffff, 1 );
 				camera.add( pointLight );
 
 				var geometry = createGeometry();
 
-				var material = new MeshPhongMaterial( {
+				var material = new THREE.MeshPhongMaterial( {
 					color: 0xff0000,
 					flatShading: true,
 					morphTargets: true
 				} );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				initGUI();
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -88,7 +76,7 @@
 
 			function createGeometry() {
 
-				var geometry = new BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
+				var geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
 
 				// create an empty array to  hold targets for the attribute we want to morph
 				// morphing positions and normals is supported
@@ -102,8 +90,8 @@
 
 				// for the second morph target, we'll twist the cubes vertices
 				var twistPositions = [];
-				var direction = new Vector3( 1, 0, 0 ).normalize();
-				var vertex = new Vector3();
+				var direction = new THREE.Vector3( 1, 0, 0 ).normalize();
+				var vertex = new THREE.Vector3();
 
 				for ( var i = 0; i < positions.length; i += 3 ) {
 
@@ -127,10 +115,10 @@
 				}
 
 				// add the spherical positions as the first morph target
-				geometry.morphAttributes.position[ 0 ] = new Float32BufferAttribute( spherePositions, 3 );
+				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );
 
 				// add the twisted positions as the second morph target
-				geometry.morphAttributes.position[ 1 ] = new Float32BufferAttribute( twistPositions, 3 );
+				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );
 
 				return geometry;
 

examples/webgl_buffergeometry_points.html

@@ -12,18 +12,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - particles</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Color,
-				Float32BufferAttribute,
-				Fog,
-				PerspectiveCamera,
-				Points,
-				PointsMaterial,
-				Scene,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -42,23 +31,23 @@
 
 				//
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
 				camera.position.z = 2750;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
-				scene.fog = new Fog( 0x050505, 2000, 3500 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
+				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
 
 				var particles = 500000;
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
 				var positions = [];
 				var colors = [];
 
-				var color = new Color();
+				var color = new THREE.Color();
 
 				var n = 1000, n2 = n / 2; // particles spread in the cube
 
@@ -84,21 +73,21 @@
 
 				}
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 
 				//
 
-				var material = new PointsMaterial( { size: 15, vertexColors: VertexColors } );
+				var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
 
-				points = new Points( geometry, material );
+				points = new THREE.Points( geometry, material );
 				scene.add( points );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_points_interleaved.html

@@ -12,19 +12,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - particles</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Color,
-				Fog,
-				InterleavedBuffer,
-				InterleavedBufferAttribute,
-				PerspectiveCamera,
-				Points,
-				PointsMaterial,
-				Scene,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -41,18 +29,18 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 5, 3500 );
 				camera.position.z = 2750;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
-				scene.fog = new Fog( 0x050505, 2000, 3500 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
+				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
 
 				var particles = 500000;
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
 				// create a generic buffer of binary data (a single particle has 16 bytes of data)
 
@@ -65,7 +53,7 @@
 
 				//
 
-				var color = new Color();
+				var color = new THREE.Color();
 
 				var n = 1000, n2 = n / 2; // particles spread in the cube
 
@@ -98,22 +86,22 @@
 
 				}
 
-				var interleavedBuffer32 = new InterleavedBuffer( interleavedFloat32Buffer, 4 );
-				var interleavedBuffer8 = new InterleavedBuffer( interleavedUint8Buffer, 16 );
+				var interleavedBuffer32 = new THREE.InterleavedBuffer( interleavedFloat32Buffer, 4 );
+				var interleavedBuffer8 = new THREE.InterleavedBuffer( interleavedUint8Buffer, 16 );
 
-				geometry.addAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );
-				geometry.addAttribute( 'color', new InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );
+				geometry.addAttribute( 'position', new THREE.InterleavedBufferAttribute( interleavedBuffer32, 3, 0, false ) );
+				geometry.addAttribute( 'color', new THREE.InterleavedBufferAttribute( interleavedBuffer8, 3, 12, true ) );
 
 				//
 
-				var material = new PointsMaterial( { size: 15, vertexColors: VertexColors } );
+				var material = new THREE.PointsMaterial( { size: 15, vertexColors: THREE.VertexColors } );
 
-				points = new Points( geometry, material );
+				points = new THREE.Points( geometry, material );
 				scene.add( points );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_buffergeometry_rawshader.html

@@ -58,18 +58,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				Color,
-				DoubleSide,
-				Float32BufferAttribute,
-				Mesh,
-				PerspectiveCamera,
-				RawShaderMaterial,
-				Scene,
-				Uint8BufferAttribute,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -84,17 +73,17 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
 				camera.position.z = 2;
 
-				scene = new Scene();
-				scene.background = new Color( 0x101010 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x101010 );
 
 				// geometry
 
 				var triangles = 500;
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
 				var positions = [];
 				var colors = [];
@@ -112,8 +101,8 @@
 
 				}
 
-				var positionAttribute = new Float32BufferAttribute( positions, 3 );
-				var colorAttribute = new Uint8BufferAttribute( colors, 4 );
+				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
 
 				colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
 
@@ -122,22 +111,22 @@
 
 				// material
 
-				var material = new RawShaderMaterial( {
+				var material = new THREE.RawShaderMaterial( {
 
 					uniforms: {
 						time: { value: 1.0 }
 					},
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
-					side: DoubleSide,
+					side: THREE.DoubleSide,
 					transparent: true
 
 				} );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_selective_draw.html

@@ -47,17 +47,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BufferAttribute,
-				BufferGeometry,
-				Color,
-				LineSegments,
-				PerspectiveCamera,
-				Scene,
-				ShaderMaterial,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -72,17 +62,17 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
 				camera.position.z = 3.5;
 
-				scene.add( new AmbientLight( 0x444444 ) );
+				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
@@ -101,7 +91,7 @@
 
 			function addLines( radius ) {
 
-				geometry = new BufferGeometry();
+				geometry = new THREE.BufferGeometry();
 				var linePositions = new Float32Array( numLat * numLng * 3 * 2 );
 				var lineColors = new Float32Array( numLat * numLng * 3 * 2 );
 				var visible = new Float32Array( numLat * numLng * 2 );
@@ -122,7 +112,7 @@
 						linePositions[ index * 6 + 4 ] = radius * Math.cos( lat );
 						linePositions[ index * 6 + 5 ] = radius * Math.sin( lat ) * Math.sin( lng );
 
-						var color = new Color( 0xffffff );
+						var color = new THREE.Color( 0xffffff );
 
 						color.setHSL( lat / Math.PI, 1.0, 0.2 );
 						lineColors[ index * 6 + 0 ] = color.r;
@@ -142,19 +132,19 @@
 
 				}
 
-				geometry.addAttribute( 'position', new BufferAttribute( linePositions, 3 ) );
-				geometry.addAttribute( 'vertColor', new BufferAttribute( lineColors, 3 ) );
-				geometry.addAttribute( 'visible', new BufferAttribute( visible, 1 ) );
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( linePositions, 3 ) );
+				geometry.addAttribute( 'vertColor', new THREE.BufferAttribute( lineColors, 3 ) );
+				geometry.addAttribute( 'visible', new THREE.BufferAttribute( visible, 1 ) );
 
 				geometry.computeBoundingSphere();
 
-				var shaderMaterial = new ShaderMaterial( {
+				var shaderMaterial = new THREE.ShaderMaterial( {
 
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 				} );
 
-				mesh = new LineSegments( geometry, shaderMaterial );
+				mesh = new THREE.LineSegments( geometry, shaderMaterial );
 				scene.add( mesh );
 
 				updateCount();

examples/webgl_buffergeometry_uint.html

@@ -12,24 +12,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - uint</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BufferGeometry,
-				Color,
-				DirectionalLight,
-				DoubleSide,
-				Float32BufferAttribute,
-				Fog,
-				Int16BufferAttribute,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				Uint8BufferAttribute,
-				Vector3,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -48,22 +31,22 @@
 
 				//
 
-				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
 				camera.position.z = 2750;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
-				scene.fog = new Fog( 0x050505, 2000, 3500 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
+				scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
 
 				//
 
-				scene.add( new AmbientLight( 0x444444 ) );
+				scene.add( new THREE.AmbientLight( 0x444444 ) );
 
-				var light1 = new DirectionalLight( 0xffffff, 0.5 );
+				var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
 				light1.position.set( 1, 1, 1 );
 				scene.add( light1 );
 
-				var light2 = new DirectionalLight( 0xffffff, 1.5 );
+				var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
 				light2.position.set( 0, - 1, 0 );
 				scene.add( light2 );
 
@@ -71,23 +54,23 @@
 
 				var triangles = 500000;
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 
 				var positions = [];
 				var normals = [];
 				var colors = [];
 
-				var color = new Color();
+				var color = new THREE.Color();
 
 				var n = 800, n2 = n / 2;	// triangles spread in the cube
 				var d = 12, d2 = d / 2;	// individual triangle size
 
-				var pA = new Vector3();
-				var pB = new Vector3();
-				var pC = new Vector3();
+				var pA = new THREE.Vector3();
+				var pB = new THREE.Vector3();
+				var pC = new THREE.Vector3();
 
-				var cb = new Vector3();
-				var ab = new Vector3();
+				var cb = new THREE.Vector3();
+				var ab = new THREE.Vector3();
 
 				for ( var i = 0; i < triangles; i ++ ) {
 
@@ -147,9 +130,9 @@
 
 				}
 
-				var positionAttribute = new Float32BufferAttribute( positions, 3 );
-				var normalAttribute = new Int16BufferAttribute( normals, 3 );
-				var colorAttribute = new Uint8BufferAttribute( colors, 3 );
+				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				var normalAttribute = new THREE.Int16BufferAttribute( normals, 3 );
+				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 );
 
 				normalAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
 				colorAttribute.normalized = true;
@@ -160,17 +143,17 @@
 
 				geometry.computeBoundingSphere();
 
-				var material = new MeshPhongMaterial( {
+				var material = new THREE.MeshPhongMaterial( {
 					color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
-					side: DoubleSide, vertexColors: VertexColors
+					side: THREE.DoubleSide, vertexColors: THREE.VertexColors
 				} );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_camera.html

@@ -20,22 +20,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BufferGeometry,
-				CameraHelper,
-				Float32BufferAttribute,
-				Group,
-				Math as _Math,
-				Mesh,
-				MeshBasicMaterial,
-				OrthographicCamera,
-				PerspectiveCamera,
-				Points,
-				PointsMaterial,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -58,22 +43,22 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				//
 
-				camera = new PerspectiveCamera( 50, 0.5 * aspect, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 50, 0.5 * aspect, 1, 10000 );
 				camera.position.z = 2500;
 
-				cameraPerspective = new PerspectiveCamera( 50, 0.5 * aspect, 150, 1000 );
+				cameraPerspective = new THREE.PerspectiveCamera( 50, 0.5 * aspect, 150, 1000 );
 
-				cameraPerspectiveHelper = new CameraHelper( cameraPerspective );
+				cameraPerspectiveHelper = new THREE.CameraHelper( cameraPerspective );
 				scene.add( cameraPerspectiveHelper );
 
 				//
-				cameraOrtho = new OrthographicCamera( 0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 150, 1000 );
+				cameraOrtho = new THREE.OrthographicCamera( 0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 150, 1000 );
 
-				cameraOrthoHelper = new CameraHelper( cameraOrtho );
+				cameraOrthoHelper = new THREE.CameraHelper( cameraOrtho );
 				scene.add( cameraOrthoHelper );
 
 				//
@@ -87,7 +72,7 @@
 				cameraOrtho.rotation.y = Math.PI;
 				cameraPerspective.rotation.y = Math.PI;
 
-				cameraRig = new Group();
+				cameraRig = new THREE.Group();
 
 				cameraRig.add( cameraPerspective );
 				cameraRig.add( cameraOrtho );
@@ -96,47 +81,47 @@
 
 				//
 
-				mesh = new Mesh(
-					new SphereBufferGeometry( 100, 16, 8 ),
-					new MeshBasicMaterial( { color: 0xffffff, wireframe: true } )
+				mesh = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 100, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } )
 				);
 				scene.add( mesh );
 
-				var mesh2 = new Mesh(
-					new SphereBufferGeometry( 50, 16, 8 ),
-					new MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
+				var mesh2 = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 50, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } )
 				);
 				mesh2.position.y = 150;
 				mesh.add( mesh2 );
 
-				var mesh3 = new Mesh(
-					new SphereBufferGeometry( 5, 16, 8 ),
-					new MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )
+				var mesh3 = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 5, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } )
 				);
 				mesh3.position.z = 150;
 				cameraRig.add( mesh3 );
 
 				//
 
-				var geometry = new BufferGeometry();
+				var geometry = new THREE.BufferGeometry();
 				var vertices = [];
 
 				for ( var i = 0; i < 10000; i ++ ) {
 
-					vertices.push( _Math.randFloatSpread( 2000 ) ); // x
-					vertices.push( _Math.randFloatSpread( 2000 ) ); // y
-					vertices.push( _Math.randFloatSpread( 2000 ) ); // z
+					vertices.push( THREE.Math.randFloatSpread( 2000 ) ); // x
+					vertices.push( THREE.Math.randFloatSpread( 2000 ) ); // y
+					vertices.push( THREE.Math.randFloatSpread( 2000 ) ); // z
 
 				}
 
-				geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				var particles = new Points( geometry, new PointsMaterial( { color: 0x888888 } ) );
+				var particles = new THREE.Points( geometry, new THREE.PointsMaterial( { color: 0x888888 } ) );
 				scene.add( particles );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				container.appendChild( renderer.domElement );

examples/webgl_camera_array.html

@@ -9,19 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				ArrayCamera,
-				CylinderBufferGeometry,
-				DirectionalLight,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				Vector4,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			var camera, scene, renderer;
 			var mesh;
@@ -43,8 +31,8 @@
 
 					for ( var x = 0; x < AMOUNT; x ++ ) {
 
-						var subcamera = new PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
-						subcamera.viewport = new Vector4( Math.floor( x * WIDTH ), Math.floor( y * HEIGHT ), Math.ceil( WIDTH ), Math.ceil( HEIGHT ) );
+						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
+						subcamera.viewport = new THREE.Vector4( Math.floor( x * WIDTH ), Math.floor( y * HEIGHT ), Math.ceil( WIDTH ), Math.ceil( HEIGHT ) );
 						subcamera.position.x = ( x / AMOUNT ) - 0.5;
 						subcamera.position.y = 0.5 - ( y / AMOUNT );
 						subcamera.position.z = 1.5;
@@ -57,36 +45,36 @@
 
 				}
 
-				camera = new ArrayCamera( cameras );
+				camera = new THREE.ArrayCamera( cameras );
 				camera.position.z = 3;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				scene.add( new AmbientLight( 0x222244 ) );
+				scene.add( new THREE.AmbientLight( 0x222244 ) );
 
-				var light = new DirectionalLight();
+				var light = new THREE.DirectionalLight();
 				light.position.set( 0.5, 0.5, 1 );
 				light.castShadow = true;
 				light.shadow.camera.zoom = 4; // tighter shadow map
 				scene.add( light );
 
-				var geometry = new PlaneBufferGeometry( 100, 100 );
-				var material = new MeshPhongMaterial( { color: 0x000066 } );
+				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+				var material = new THREE.MeshPhongMaterial( { color: 0x000066 } );
 
-				var background = new Mesh( geometry, material );
+				var background = new THREE.Mesh( geometry, material );
 				background.receiveShadow = true;
 				background.position.set( 0, 0, - 1 );
 				scene.add( background );
 
-				var geometry = new CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
-				var material = new MeshPhongMaterial( { color: 0xff0000 } );
+				var geometry = new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
+				var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				mesh.castShadow = true;
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.shadowMap.enabled = true;

examples/webgl_camera_cinematic.html

@@ -22,19 +22,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				Color,
-				DirectionalLight,
-				Math as _Math,
-				Mesh,
-				MeshLambertMaterial,
-				Raycaster,
-				Scene,
-				Vector2,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -43,7 +31,7 @@
 
 			var camera, scene, raycaster, renderer, stats;
 
-			var mouse = new Vector2(), INTERSECTED;
+			var mouse = new THREE.Vector2(), INTERSECTED;
 			var radius = 100, theta = 0;
 
 			init();
@@ -55,20 +43,20 @@
 				camera.setLens( 5 );
 				camera.position.set( 2, 1, 500 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene.add( new AmbientLight( 0xffffff, 0.3 ) );
+				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
 
-				var light = new DirectionalLight( 0xffffff, 0.35 );
+				var light = new THREE.DirectionalLight( 0xffffff, 0.35 );
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new BoxBufferGeometry( 20, 20, 20 );
+				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
 				for ( var i = 0; i < 1500; i ++ ) {
 
-					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
+					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 					object.position.x = Math.random() * 800 - 400;
 					object.position.y = Math.random() * 800 - 400;
@@ -78,9 +66,9 @@
 
 				}
 
-				raycaster = new Raycaster();
+				raycaster = new THREE.Raycaster();
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -186,9 +174,9 @@
 
 				theta += 0.1;
 
-				camera.position.x = radius * Math.sin( _Math.degToRad( theta ) );
-				camera.position.y = radius * Math.sin( _Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( _Math.degToRad( theta ) );
+				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
+				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
+				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 				camera.lookAt( scene.position );
 
 				camera.updateMatrixWorld();

examples/webgl_camera_logarithmicdepthbuffer.html

@@ -60,21 +60,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				DirectionalLight,
-				FontLoader,
-				Group,
-				Math as _Math,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				TextBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -119,7 +105,7 @@
 
 				container = document.getElementById( 'container' );
 
-				var loader = new FontLoader();
+				var loader = new THREE.FontLoader();
 				loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
 					var scene = initScene( font );
@@ -149,10 +135,10 @@
 
 				var framecontainer = document.getElementById( 'container_' + name );
 
-				var camera = new PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
+				var camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 				scene.add( camera );
 
-				var renderer = new WebGLRenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
+				var renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
 				renderer.domElement.style.position = "relative";
@@ -165,11 +151,11 @@
 
 			function initScene( font ) {
 
-				var scene = new Scene();
+				var scene = new THREE.Scene();
 
-				scene.add( new AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new DirectionalLight( 0xffffff, 1 );
+				var light = new THREE.DirectionalLight( 0xffffff, 1 );
 				light.position.set( 100, 100, 100 );
 				scene.add( light );
 
@@ -180,13 +166,13 @@
 					emissive: 0x000000
 				};
 
-				var geometry = new SphereBufferGeometry( 0.5, 24, 12 );
+				var geometry = new THREE.SphereBufferGeometry( 0.5, 24, 12 );
 
 				for ( var i = 0; i < labeldata.length; i ++ ) {
 
 					var scale = labeldata[ i ].scale || 1;
 
-					var labelgeo = new TextBufferGeometry( labeldata[ i ].label, {
+					var labelgeo = new THREE.TextBufferGeometry( labeldata[ i ].label, {
 						font: font,
 						size: labeldata[ i ].size,
 						height: labeldata[ i ].size / 2
@@ -197,21 +183,21 @@
 					// center text
 					labelgeo.translate( - labelgeo.boundingSphere.radius, 0, 0 );
 
-					materialargs.color = new Color().setHSL( Math.random(), 0.5, 0.5 );
+					materialargs.color = new THREE.Color().setHSL( Math.random(), 0.5, 0.5 );
 
-					var material = new MeshPhongMaterial( materialargs );
+					var material = new THREE.MeshPhongMaterial( materialargs );
 
-					var group = new Group();
+					var group = new THREE.Group();
 					group.position.z = - labeldata[ i ].size * scale;
 					scene.add( group );
 
-					var textmesh = new Mesh( labelgeo, material );
+					var textmesh = new THREE.Mesh( labelgeo, material );
 					textmesh.scale.set( scale, scale, scale );
 					textmesh.position.z = - labeldata[ i ].size * scale;
 					textmesh.position.y = labeldata[ i ].size / 4 * scale;
 					group.add( textmesh );
 
-					var dotmesh = new Mesh( geometry, material );
+					var dotmesh = new THREE.Mesh( geometry, material );
 					dotmesh.position.y = - labeldata[ i ].size / 4 * scale;
 					dotmesh.scale.multiplyScalar( labeldata[ i ].size * scale );
 					group.add( dotmesh );
@@ -262,7 +248,7 @@
 				var damping = ( Math.abs( zoomspeed ) > minzoomspeed ? .95 : 1.0 );
 
 				// Zoom out faster the further out you go
-				var zoom = _Math.clamp( Math.pow( Math.E, zoompos ), minzoom, maxzoom );
+				var zoom = THREE.Math.clamp( Math.pow( Math.E, zoompos ), minzoom, maxzoom );
 				zoompos = Math.log( zoom );
 
 				// Slow down quickly at the zoom limits

examples/webgl_clipping.html

@@ -9,21 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				DirectionalLight,
-				DoubleSide,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Plane,
-				PlaneBufferGeometry,
-				Scene,
-				SpotLight,
-				TorusKnotBufferGeometry,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -37,17 +23,17 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );
+				camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
 				camera.position.set( 0, 1.3, 3 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				// Lights
 
-				scene.add( new AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
-				var spotLight = new SpotLight( 0xffffff );
+				var spotLight = new THREE.SpotLight( 0xffffff );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.2;
 				spotLight.position.set( 2, 3, 3 );
@@ -58,7 +44,7 @@
 				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
-				var dirLight = new DirectionalLight( 0x55505a, 1 );
+				var dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
 				dirLight.position.set( 0, 3, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 1;
@@ -75,15 +61,15 @@
 
 				// ***** Clipping planes: *****
 
-				var localPlane = new Plane( new Vector3( 0, - 1, 0 ), 0.8 );
-				var globalPlane = new Plane( new Vector3( - 1, 0, 0 ), 0.1 );
+				var localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
+				var globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
 
 				// Geometry
 
-				var material = new MeshPhongMaterial( {
+				var material = new THREE.MeshPhongMaterial( {
 					color: 0x80ee10,
 					shininess: 100,
-					side: DoubleSide,
+					side: THREE.DoubleSide,
 
 					// ***** Clipping setup (material): *****
 					clippingPlanes: [ localPlane ],
@@ -91,15 +77,15 @@
 
 				} );
 
-				var geometry = new TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
 
-				object = new Mesh( geometry, material );
+				object = new THREE.Mesh( geometry, material );
 				object.castShadow = true;
 				scene.add( object );
 
-				var ground = new Mesh(
-					new PlaneBufferGeometry( 9, 9, 1, 1 ),
-					new MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
+				var ground = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
+					new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
 				);
 
 				ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
@@ -113,7 +99,7 @@
 
 				// Renderer
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgl_clipping_advanced.html

@@ -9,25 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				Color,
-				DirectionalLight,
-				DoubleSide,
-				Group,
-				Matrix4,
-				Mesh,
-				MeshBasicMaterial,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Plane,
-				PlaneBufferGeometry,
-				Scene,
-				SpotLight,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -48,7 +30,7 @@
 						b = vertices[ indices[ j + 1 ] ],
 						c = vertices[ indices[ j + 2 ] ];
 
-					result[ i ] = new Plane().
+					result[ i ] = new THREE.Plane().
 						setFromCoplanarPoints( a, b, c );
 
 				}
@@ -64,7 +46,7 @@
 				var result = new Array( n );
 
 				for ( var i = 0; i !== n; ++ i )
-					result[ i ] = new Plane();
+					result[ i ] = new THREE.Plane();
 
 				return result;
 
@@ -104,14 +86,14 @@
 				// creates a matrix that aligns X/Y to a given plane
 
 				// temporaries:
-				var xAxis = new Vector3(),
-					yAxis = new Vector3(),
-					trans = new Vector3();
+				var xAxis = new THREE.Vector3(),
+					yAxis = new THREE.Vector3(),
+					trans = new THREE.Vector3();
 
 				return function planeToMatrix( plane ) {
 
 					var zAxis = plane.normal,
-						matrix = new Matrix4();
+						matrix = new THREE.Matrix4();
 
 					// Hughes & Moeller '99
 					// "Building an Orthonormal Basis from a Unit Vector."
@@ -143,10 +125,10 @@
 			// A regular tetrahedron for the clipping volume:
 
 			var Vertices = [
-					new Vector3( + 1, 0, + Math.SQRT1_2 ),
-					new Vector3( - 1, 0, + Math.SQRT1_2 ),
-					new Vector3( 0, + 1, - Math.SQRT1_2 ),
-					new Vector3( 0, - 1, - Math.SQRT1_2 )
+					new THREE.Vector3( + 1, 0, + Math.SQRT1_2 ),
+					new THREE.Vector3( - 1, 0, + Math.SQRT1_2 ),
+					new THREE.Vector3( 0, + 1, - Math.SQRT1_2 ),
+					new THREE.Vector3( 0, - 1, - Math.SQRT1_2 )
 				],
 
 				Indices = [
@@ -169,18 +151,18 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera(
+				camera = new THREE.PerspectiveCamera(
 					36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
 				camera.position.set( 0, 1.5, 3 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				// Lights
 
-				scene.add( new AmbientLight( 0x505050 ) );
+				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
-				var spotLight = new SpotLight( 0xffffff );
+				var spotLight = new THREE.SpotLight( 0xffffff );
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.2;
 				spotLight.position.set( 2, 3, 3 );
@@ -191,7 +173,7 @@
 				spotLight.shadow.mapSize.height = 1024;
 				scene.add( spotLight );
 
-				var dirLight = new DirectionalLight( 0x55505a, 1 );
+				var dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
 				dirLight.position.set( 0, 2, 0 );
 				dirLight.castShadow = true;
 				dirLight.shadow.camera.near = 1;
@@ -208,24 +190,24 @@
 
 				// Geometry
 
-				clipMaterial = new MeshPhongMaterial( {
+				clipMaterial = new THREE.MeshPhongMaterial( {
 					color: 0xee0a10,
 					shininess: 100,
-					side: DoubleSide,
+					side: THREE.DoubleSide,
 					// Clipping setup:
 					clippingPlanes: createPlanes( Planes.length ),
 					clipShadows: true
 				} );
 
-				object = new Group();
+				object = new THREE.Group();
 
-				var geometry = new BoxBufferGeometry( 0.18, 0.18, 0.18 );
+				var geometry = new THREE.BoxBufferGeometry( 0.18, 0.18, 0.18 );
 
 				for ( var z = - 2; z <= 2; ++ z )
 					for ( var y = - 2; y <= 2; ++ y )
 						for ( var x = - 2; x <= 2; ++ x ) {
 
-							var mesh = new Mesh( geometry, clipMaterial );
+							var mesh = new THREE.Mesh( geometry, clipMaterial );
 							mesh.position.set( x / 5, y / 5, z / 5 );
 							mesh.castShadow = true;
 							object.add( mesh );
@@ -236,18 +218,18 @@
 
 
 				var planeGeometry =
-						new PlaneBufferGeometry( 3, 3, 1, 1 ),
+						new THREE.PlaneBufferGeometry( 3, 3, 1, 1 ),
 
-					color = new Color();
+					color = new THREE.Color();
 
-				volumeVisualization = new Group();
+				volumeVisualization = new THREE.Group();
 				volumeVisualization.visible = false;
 
 				for ( var i = 0, n = Planes.length; i !== n; ++ i ) {
 
-					var material = new MeshBasicMaterial( {
+					var material = new THREE.MeshBasicMaterial( {
 						color: color.setHSL( i / n, 0.5, 0.5 ).getHex(),
-						side: DoubleSide,
+						side: THREE.DoubleSide,
 
 						opacity: 0.2,
 						transparent: true,
@@ -267,15 +249,15 @@
 					} );
 
 					volumeVisualization.add(
-						new Mesh( planeGeometry, material ) );
+						new THREE.Mesh( planeGeometry, material ) );
 
 				}
 
 				scene.add( volumeVisualization );
 
 
-				var ground = new Mesh( planeGeometry,
-					new MeshPhongMaterial( {
+				var ground = new THREE.Mesh( planeGeometry,
+					new THREE.MeshPhongMaterial( {
 						color: 0xa0adaf, shininess: 150 } ) );
 				ground.rotation.x = - Math.PI / 2;
 				ground.scale.multiplyScalar( 3 );
@@ -286,7 +268,7 @@
 
 				var container = document.body;
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -395,8 +377,8 @@
 
 			}
 
-			var transform = new Matrix4(),
-				tmpMatrix = new Matrix4();
+			var transform = new THREE.Matrix4(),
+				tmpMatrix = new THREE.Matrix4();
 
 			function animate() {
 

examples/webgl_clipping_intersection.html

@@ -9,21 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				Color,
-				DoubleSide,
-				Group,
-				HemisphereLight,
-				Mesh,
-				MeshLambertMaterial,
-				PerspectiveCamera,
-				Plane,
-				PlaneHelper,
-				Scene,
-				SphereBufferGeometry,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
@@ -38,9 +24,9 @@
 			};
 
 			var clipPlanes = [
-				new Plane( new Vector3( 1, 0, 0 ), 0 ),
-				new Plane( new Vector3( 0, - 1, 0 ), 0 ),
-				new Plane( new Vector3( 0, 0, - 1 ), 0 )
+				new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 0 ),
+				new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0 ),
+				new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0 )
 			];
 
 			init();
@@ -48,15 +34,15 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.localClippingEnabled = true;
 				document.body.appendChild( renderer.domElement );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 
 				camera.position.set( - 1.5, 2.5, 3.0 );
 
@@ -66,7 +52,7 @@
 				controls.maxDistance = 10;
 				controls.enablePan = false;
 
-				var light = new HemisphereLight( 0xffffff, 0x080808, 1.5 );
+				var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
 				light.position.set( - 1.25, 1, 1.25 );
 				scene.add( light );
 
@@ -75,22 +61,22 @@
 
 				//
 
-				var group = new Group();
+				var group = new THREE.Group();
 
 				for ( var i = 1; i <= 30; i += 2 ) {
 
-					var geometry = new SphereBufferGeometry( i / 30, 48, 24 );
+					var geometry = new THREE.SphereBufferGeometry( i / 30, 48, 24 );
 
-					var material = new MeshLambertMaterial( {
+					var material = new THREE.MeshLambertMaterial( {
 
-						color: new Color().setHSL( Math.random(), 0.5, 0.5 ),
-						side: DoubleSide,
+						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5 ),
+						side: THREE.DoubleSide,
 						clippingPlanes: clipPlanes,
 						clipIntersection: params.clipIntersection
 
 					} );
 
-					group.add( new Mesh( geometry, material ) );
+					group.add( new THREE.Mesh( geometry, material ) );
 
 				}
 
@@ -98,10 +84,10 @@
 
 				// helpers
 
-				var helpers = new Group();
-				helpers.add( new PlaneHelper( clipPlanes[ 0 ], 2, 0xff0000 ) );
-				helpers.add( new PlaneHelper( clipPlanes[ 1 ], 2, 0x00ff00 ) );
-				helpers.add( new PlaneHelper( clipPlanes[ 2 ], 2, 0x0000ff ) );
+				var helpers = new THREE.Group();
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 0 ], 2, 0xff0000 ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 1 ], 2, 0x00ff00 ) );
+				helpers.add( new THREE.PlaneHelper( clipPlanes[ 2 ], 2, 0x0000ff ) );
 				helpers.visible = false;
 				scene.add( helpers );
 

examples/webgl_custom_attributes.html

@@ -57,19 +57,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				BufferAttribute,
-				Color,
-				Math as _Math,
-				Mesh,
-				PerspectiveCamera,
-				RepeatWrapping,
-				Scene,
-				ShaderMaterial,
-				SphereBufferGeometry,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -84,23 +72,23 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 300;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 
 				uniforms = {
 
 					"amplitude": { value: 1.0 },
-					"color": { value: new Color( 0xff2200 ) },
-					"colorTexture": { value: new TextureLoader().load( "textures/water.jpg" ) }
+					"color": { value: new THREE.Color( 0xff2200 ) },
+					"colorTexture": { value: new THREE.TextureLoader().load( "textures/water.jpg" ) }
 
 				};
 
-				uniforms[ "colorTexture" ].value.wrapS = uniforms[ "colorTexture" ].value.wrapT = RepeatWrapping;
+				uniforms[ "colorTexture" ].value.wrapS = uniforms[ "colorTexture" ].value.wrapT = THREE.RepeatWrapping;
 
-				var shaderMaterial = new ShaderMaterial( {
+				var shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -111,7 +99,7 @@
 
 				var radius = 50, segments = 128, rings = 64;
 
-				var geometry = new SphereBufferGeometry( radius, segments, rings );
+				var geometry = new THREE.SphereBufferGeometry( radius, segments, rings );
 
 				displacement = new Float32Array( geometry.attributes.position.count );
 				noise = new Float32Array( geometry.attributes.position.count );
@@ -122,12 +110,12 @@
 
 				}
 
-				geometry.addAttribute( 'displacement', new BufferAttribute( displacement, 1 ) );
+				geometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 1 ) );
 
-				sphere = new Mesh( geometry, shaderMaterial );
+				sphere = new THREE.Mesh( geometry, shaderMaterial );
 				scene.add( sphere );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -175,7 +163,7 @@
 					displacement[ i ] = Math.sin( 0.1 * i + time );
 
 					noise[ i ] += 0.5 * ( 0.5 - Math.random() );
-					noise[ i ] = _Math.clamp( noise[ i ], - 5, 5 );
+					noise[ i ] = THREE.Math.clamp( noise[ i ], - 5, 5 );
 
 					displacement[ i ] += noise[ i ];
 

examples/webgl_custom_attributes_lines.html

@@ -48,18 +48,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				AdditiveBlending,
-				Color,
-				Float32BufferAttribute,
-				FontLoader,
-				Line,
-				PerspectiveCamera,
-				Scene,
-				ShaderMaterial,
-				TextBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -67,7 +56,7 @@
 
 			var line, uniforms;
 
-			var loader = new FontLoader();
+			var loader = new THREE.FontLoader();
 			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 				init( font );
@@ -77,33 +66,33 @@
 
 			function init( font ) {
 
-				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 400;
 
-				scene = new Scene();
-				scene.background = new Color( 0x050505 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x050505 );
 
 				uniforms = {
 
 					amplitude: { value: 5.0 },
 					opacity: { value: 0.3 },
-					color: { value: new Color( 0xffffff ) }
+					color: { value: new THREE.Color( 0xffffff ) }
 
 				};
 
-				var shaderMaterial = new ShaderMaterial( {
+				var shaderMaterial = new THREE.ShaderMaterial( {
 
 					uniforms: uniforms,
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
-					blending: AdditiveBlending,
+					blending: THREE.AdditiveBlending,
 					depthTest: false,
 					transparent: true
 
 				} );
 
 
-				var geometry = new TextBufferGeometry( 'three.js', {
+				var geometry = new THREE.TextBufferGeometry( 'three.js', {
 
 					font: font,
 
@@ -122,13 +111,13 @@
 
 				var count = geometry.attributes.position.count;
 
-				var displacement = new Float32BufferAttribute( count * 3, 3 );
+				var displacement = new THREE.Float32BufferAttribute( count * 3, 3 );
 				geometry.addAttribute( 'displacement', displacement );
 
-				var customColor = new Float32BufferAttribute( count * 3, 3 );
+				var customColor = new THREE.Float32BufferAttribute( count * 3, 3 );
 				geometry.addAttribute( 'customColor', customColor );
 
-				var color = new Color( 0xffffff );
+				var color = new THREE.Color( 0xffffff );
 
 				for ( var i = 0, l = customColor.count; i < l; i ++ ) {
 
@@ -137,11 +126,11 @@
 
 				}
 
-				line = new Line( geometry, shaderMaterial );
+				line = new THREE.Line( geometry, shaderMaterial );
 				line.rotation.x = 0.2;
 				scene.add( line );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_custom_attributes_points.html

@@ -49,19 +49,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				AdditiveBlending,
-				BufferAttribute,
-				BufferGeometry,
-				Color,
-				PerspectiveCamera,
-				Points,
-				Scene,
-				ShaderMaterial,
-				TextureLoader,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -77,10 +65,10 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 				camera.position.z = 300;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var amount = 100000;
 				var radius = 200;
@@ -89,8 +77,8 @@
 				var colors = new Float32Array( amount * 3 );
 				var sizes = new Float32Array( amount );
 
-				var vertex = new Vector3();
-				var color = new Color( 0xffffff );
+				var vertex = new THREE.Vector3();
+				var color = new THREE.Color( 0xffffff );
 
 				for ( var i = 0; i < amount; i ++ ) {
 
@@ -115,23 +103,23 @@
 
 				}
 
-				var geometry = new BufferGeometry();
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'customColor', new BufferAttribute( colors, 3 ) );
-				geometry.addAttribute( 'size', new BufferAttribute( sizes, 1 ) );
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
 				//
 
-				var material = new ShaderMaterial( {
+				var material = new THREE.ShaderMaterial( {
 
 					uniforms: {
-						color: { value: new Color( 0xffffff ) },
-						pointTexture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
+						color: { value: new THREE.Color( 0xffffff ) },
+						pointTexture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-					blending: AdditiveBlending,
+					blending: THREE.AdditiveBlending,
 					depthTest: false,
 					transparent: true
 
@@ -139,12 +127,12 @@
 
 				//
 
-				sphere = new Points( geometry, material );
+				sphere = new THREE.Points( geometry, material );
 				scene.add( sphere );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 

examples/webgl_custom_attributes_points2.html

@@ -50,22 +50,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				BoxGeometry,
-				BufferAttribute,
-				BufferGeometry,
-				Color,
-				Matrix4,
-				PerspectiveCamera,
-				Points,
-				RepeatWrapping,
-				Scene,
-				ShaderMaterial,
-				SphereGeometry,
-				TextureLoader,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -80,15 +65,15 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 10000 );
 				camera.position.z = 300;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var radius = 100, segments = 68, rings = 38;
 
-				var vertices1 = new SphereGeometry( radius, segments, rings ).vertices;
-				var vertices2 = new BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 ).vertices;
+				var vertices1 = new THREE.SphereGeometry( radius, segments, rings ).vertices;
+				var vertices2 = new THREE.BoxGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 ).vertices;
 
 				length1 = vertices1.length;
 
@@ -99,7 +84,7 @@
 				var sizes = new Float32Array( vertices.length );
 
 				var vertex;
-				var color = new Color();
+				var color = new THREE.Color();
 
 				for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
@@ -122,21 +107,21 @@
 
 				}
 
-				var geometry = new BufferGeometry();
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'size', new BufferAttribute( sizes, 1 ) );
-				geometry.addAttribute( 'ca', new BufferAttribute( colors, 3 ) );
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+				geometry.addAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
 
 				//
 
-				var texture = new TextureLoader().load( "textures/sprites/disc.png" );
-				texture.wrapS = RepeatWrapping;
-				texture.wrapT = RepeatWrapping;
+				var texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
+				texture.wrapS = THREE.RepeatWrapping;
+				texture.wrapT = THREE.RepeatWrapping;
 
-				var material = new ShaderMaterial( {
+				var material = new THREE.ShaderMaterial( {
 
 					uniforms: {
-						color: { value: new Color( 0xffffff ) },
+						color: { value: new THREE.Color( 0xffffff ) },
 						pointTexture: { value: texture }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -147,12 +132,12 @@
 
 				//
 
-				sphere = new Points( geometry, material );
+				sphere = new THREE.Points( geometry, material );
 				scene.add( sphere );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 
@@ -179,11 +164,11 @@
 
 			function sortPoints() {
 
-				var vector = new Vector3();
+				var vector = new THREE.Vector3();
 
 				// Model View Projection matrix
 
-				var matrix = new Matrix4();
+				var matrix = new THREE.Matrix4();
 				matrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 				matrix.multiply( sphere.matrixWorld );
 
@@ -205,7 +190,7 @@
 
 					}
 
-					index = new BufferAttribute( array, 1 );
+					index = new THREE.BufferAttribute( array, 1 );
 
 					geometry.setIndex( index );
 

examples/webgl_custom_attributes_points3.html

@@ -58,23 +58,7 @@
 		</script>
 
 		<script type="module">
-			import {
-				BoxGeometry,
-				BufferAttribute,
-				BufferGeometry,
-				Color,
-				Euler,
-				Matrix4,
-				PerspectiveCamera,
-				Points,
-				Quaternion,
-				RepeatWrapping,
-				Scene,
-				ShaderMaterial,
-				TextureLoader,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -92,17 +76,17 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 1000 );
 				camera.position.z = 500;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var radius = 100, inner = 0.6 * radius;
 				var vertices = [];
 
 				for ( var i = 0; i < 100000; i ++ ) {
 
-					var vertex = new Vector3();
+					var vertex = new THREE.Vector3();
 					vertex.x = Math.random() * 2 - 1;
 					vertex.y = Math.random() * 2 - 1;
 					vertex.z = Math.random() * 2 - 1;
@@ -119,13 +103,13 @@
 				vertices1 = vertices.length;
 
 				radius = 200;
-				var geometry2 = new BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
+				var geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
 
-				var matrix = new Matrix4();
-				var position = new Vector3();
-				var rotation = new Euler();
-				var quaternion = new Quaternion();
-				var scale = new Vector3( 1, 1, 1 );
+				var matrix = new THREE.Matrix4();
+				var position = new THREE.Vector3();
+				var rotation = new THREE.Euler();
+				var quaternion = new THREE.Quaternion();
+				var scale = new THREE.Vector3( 1, 1, 1 );
 
 				function addGeo( geo, x, y, z, ry ) {
 
@@ -159,7 +143,7 @@
 
 				// corner edges
 
-				var geometry3 = new BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
+				var geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
 
 				addGeo( geometry3, 110, 0, 110, 0 );
 				addGeo( geometry3, 110, 0, - 110, 0 );
@@ -171,7 +155,7 @@
 				var sizes = new Float32Array( vertices.length );
 
 				var vertex;
-				var color = new Color();
+				var color = new THREE.Color();
 
 				for ( var i = 0; i < vertices.length; i ++ ) {
 
@@ -194,22 +178,22 @@
 
 				}
 
-				var geometry = new BufferGeometry();
-				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'ca', new BufferAttribute( colors, 3 ) );
-				geometry.addAttribute( 'size', new BufferAttribute( sizes, 1 ) );
+				var geometry = new THREE.BufferGeometry();
+				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'ca', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
 
 				//
 
-				var texture = new TextureLoader().load( "textures/sprites/ball.png" );
-				texture.wrapS = RepeatWrapping;
-				texture.wrapT = RepeatWrapping;
+				var texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
+				texture.wrapS = THREE.RepeatWrapping;
+				texture.wrapT = THREE.RepeatWrapping;
 
-				var material = new ShaderMaterial( {
+				var material = new THREE.ShaderMaterial( {
 
 					uniforms: {
 						amplitude: { value: 1.0 },
-						color: { value: new Color( 0xffffff ) },
+						color: { value: new THREE.Color( 0xffffff ) },
 						pointTexture: { value: texture }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
@@ -219,12 +203,12 @@
 
 				//
 
-				object = new Points( geometry, material );
+				object = new THREE.Points( geometry, material );
 				scene.add( object );
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( WIDTH, HEIGHT );
 

examples/webgl_decals.html

@@ -15,25 +15,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				BufferGeometry,
-				DirectionalLight,
-				Euler,
-				Line,
-				LineBasicMaterial,
-				Mesh,
-				MeshNormalMaterial,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Raycaster,
-				Scene,
-				TextureLoader,
-				Vector2,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -51,20 +33,20 @@
 
 			var intersection = {
 				intersects: false,
-				point: new Vector3(),
-				normal: new Vector3()
+				point: new THREE.Vector3(),
+				normal: new THREE.Vector3()
 			};
-			var mouse = new Vector2();
+			var mouse = new THREE.Vector2();
 
-			var textureLoader = new TextureLoader();
+			var textureLoader = new THREE.TextureLoader();
 			var decalDiffuse = textureLoader.load( 'textures/decal/decal-diffuse.png' );
 			var decalNormal = textureLoader.load( 'textures/decal/decal-normal.jpg' );
 
-			var decalMaterial = new MeshPhongMaterial( {
+			var decalMaterial = new THREE.MeshPhongMaterial( {
 				specular: 0x444444,
 				map: decalDiffuse,
 				normalMap: decalNormal,
-				normalScale: new Vector2( 1, 1 ),
+				normalScale: new THREE.Vector2( 1, 1 ),
 				shininess: 30,
 				transparent: true,
 				depthTest: true,
@@ -76,9 +58,9 @@
 
 			var decals = [];
 			var mouseHelper;
-			var position = new Vector3();
-			var orientation = new Euler();
-			var size = new Vector3( 10, 10, 10 );
+			var position = new THREE.Vector3();
+			var orientation = new THREE.Euler();
+			var size = new THREE.Vector3( 10, 10, 10 );
 
 			var params = {
 				minScale: 10,
@@ -95,7 +77,7 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -103,37 +85,37 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 120;
-				camera.target = new Vector3();
+				camera.target = new THREE.Vector3();
 
 				var controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 200;
 
-				scene.add( new AmbientLight( 0x443333 ) );
+				scene.add( new THREE.AmbientLight( 0x443333 ) );
 
-				var light = new DirectionalLight( 0xffddcc, 1 );
+				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
 				light.position.set( 1, 0.75, 0.5 );
 				scene.add( light );
 
-				var light = new DirectionalLight( 0xccccff, 1 );
+				var light = new THREE.DirectionalLight( 0xccccff, 1 );
 				light.position.set( - 1, 0.75, - 0.5 );
 				scene.add( light );
 
-				var geometry = new BufferGeometry();
-				geometry.setFromPoints( [ new Vector3(), new Vector3() ] );
+				var geometry = new THREE.BufferGeometry();
+				geometry.setFromPoints( [ new THREE.Vector3(), new THREE.Vector3() ] );
 
-				line = new Line( geometry, new LineBasicMaterial() );
+				line = new THREE.Line( geometry, new THREE.LineBasicMaterial() );
 				scene.add( line );
 
 				loadLeePerrySmith();
 
-				raycaster = new Raycaster();
+				raycaster = new THREE.Raycaster();
 
-				mouseHelper = new Mesh( new BoxBufferGeometry( 1, 1, 10 ), new MeshNormalMaterial() );
+				mouseHelper = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
 				mouseHelper.visible = false;
 				scene.add( mouseHelper );
 
@@ -243,7 +225,7 @@
 				loader.load( 'models/gltf/LeePerrySmith/LeePerrySmith.glb', function ( gltf ) {
 
 					mesh = gltf.scene.children[ 0 ];
-					mesh.material = new MeshPhongMaterial( {
+					mesh.material = new THREE.MeshPhongMaterial( {
 						specular: 0x111111,
 						map: textureLoader.load( 'models/gltf/LeePerrySmith/Map-COL.jpg' ),
 						specularMap: textureLoader.load( 'models/gltf/LeePerrySmith/Map-SPEC.jpg' ),
@@ -271,7 +253,7 @@
 				var material = decalMaterial.clone();
 				material.color.setHex( Math.random() * 0xffffff );
 
-				var m = new Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
+				var m = new THREE.Mesh( new DecalGeometry( mesh, position, orientation, size ), material );
 
 				decals.push( m );
 				scene.add( m );

examples/webgl_depth_texture.html

@@ -64,22 +64,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				DepthTexture,
-				Mesh,
-				MeshBasicMaterial,
-				NearestFilter,
-				OrthographicCamera,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				RGBFormat,
-				Scene,
-				ShaderMaterial,
-				TorusKnotBufferGeometry,
-				UnsignedShortType,
-				WebGLRenderer,
-				WebGLRenderTarget
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -95,7 +80,7 @@
 
 			function init() {
 
-				renderer = new WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
+				renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } );
 
 				if ( ! renderer.extensions.get( 'WEBGL_depth_texture' ) ) {
 
@@ -113,7 +98,7 @@
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
 				camera.position.z = 4;
 
 				var controls = new OrbitControls( camera, renderer.domElement );
@@ -122,18 +107,18 @@
 				controls.rotateSpeed = 0.35;
 
 				// Create a multi render target with Float buffers
-				target = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-				target.texture.format = RGBFormat;
-				target.texture.minFilter = NearestFilter;
-				target.texture.magFilter = NearestFilter;
+				target = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight );
+				target.texture.format = THREE.RGBFormat;
+				target.texture.minFilter = THREE.NearestFilter;
+				target.texture.magFilter = THREE.NearestFilter;
 				target.texture.generateMipmaps = false;
 				target.stencilBuffer = false;
 				target.depthBuffer = true;
-				target.depthTexture = new DepthTexture();
-				target.depthTexture.type = UnsignedShortType;
+				target.depthTexture = new THREE.DepthTexture();
+				target.depthTexture.type = THREE.UnsignedShortType;
 
 				// Our scene
-				scene = new Scene();
+				scene = new THREE.Scene();
 				setupScene();
 
 				// Setup post-processing step
@@ -147,8 +132,8 @@
 			function setupPost() {
 
 				// Setup post processing stage
-				postCamera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-				var postMaterial = new ShaderMaterial( {
+				postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+				var postMaterial = new THREE.ShaderMaterial( {
 					vertexShader: document.querySelector( '#post-vert' ).textContent.trim(),
 					fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
 					uniforms: {
@@ -158,9 +143,9 @@
 						tDepth: { value: target.depthTexture }
 					}
 				} );
-				var postPlane = new PlaneBufferGeometry( 2, 2 );
-				var postQuad = new Mesh( postPlane, postMaterial );
-				postScene = new Scene();
+				var postPlane = new THREE.PlaneBufferGeometry( 2, 2 );
+				var postQuad = new THREE.Mesh( postPlane, postMaterial );
+				postScene = new THREE.Scene();
 				postScene.add( postQuad );
 
 			}
@@ -171,8 +156,8 @@
 				//diffuse.wrapS = diffuse.wrapT = RepeatWrapping;
 
 				// Setup some geometries
-				var geometry = new TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
-				var material = new MeshBasicMaterial( { color: 'blue' } );
+				var geometry = new THREE.TorusKnotBufferGeometry( 1, 0.3, 128, 64 );
+				var material = new THREE.MeshBasicMaterial( { color: 'blue' } );
 
 				var count = 50;
 				var scale = 5;
@@ -183,7 +168,7 @@
 					var z = ( Math.random() * 2.0 ) - 1.0;
 					var zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.set(
 						Math.cos( r ) * zScale,
 						Math.sin( r ) * zScale,

examples/webgl_effects_anaglyph.html

@@ -13,15 +13,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				CubeTextureLoader,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { AnaglyphEffect } from './jsm/effects/AnaglyphEffect.js';
 
@@ -45,7 +37,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
@@ -57,17 +49,17 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var textureCube = new CubeTextureLoader().load( urls );
+				var textureCube = new THREE.CubeTextureLoader().load( urls );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 				scene.background = textureCube;
 
-				var geometry = new SphereBufferGeometry( 0.1, 32, 16 );
-				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -83,7 +75,7 @@
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 

examples/webgl_effects_ascii.html

@@ -11,17 +11,7 @@
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - ascii</div>
 
 		<script type="module">
-			import {
-				Mesh,
-				MeshBasicMaterial,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				PointLight,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { AsciiEffect } from './jsm/effects/AsciiEffect.js';
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
@@ -37,31 +27,31 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.y = 150;
 				camera.position.z = 500;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				var light = new PointLight( 0xffffff );
+				var light = new THREE.PointLight( 0xffffff );
 				light.position.set( 500, 500, 500 );
 				scene.add( light );
 
-				var light = new PointLight( 0xffffff, 0.25 );
+				var light = new THREE.PointLight( 0xffffff, 0.25 );
 				light.position.set( - 500, - 500, - 500 );
 				scene.add( light );
 
-				sphere = new Mesh( new SphereBufferGeometry( 200, 20, 10 ), new MeshPhongMaterial( { flatShading: true } ) );
+				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true } ) );
 				scene.add( sphere );
 
 				// Plane
 
-				plane = new Mesh( new PlaneBufferGeometry( 400, 400 ), new MeshBasicMaterial( { color: 0xe0e0e0 } ) );
+				plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
 				plane.position.y = - 200;
 				plane.rotation.x = - Math.PI / 2;
 				scene.add( plane );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				effect = new AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );

examples/webgl_effects_parallaxbarrier.html

@@ -14,15 +14,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				CubeTextureLoader,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { ParallaxBarrierEffect } from './jsm/effects/ParallaxBarrierEffect.js';
 
@@ -46,7 +38,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 3;
 				camera.focalLength = 3;
 
@@ -58,17 +50,17 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				var textureCube = new CubeTextureLoader().load( urls );
+				var textureCube = new THREE.CubeTextureLoader().load( urls );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 				scene.background = textureCube;
 
-				var geometry = new SphereBufferGeometry( 0.1, 32, 16 );
-				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
+				var geometry = new THREE.SphereBufferGeometry( 0.1, 32, 16 );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 
 					mesh.position.x = Math.random() * 10 - 5;
 					mesh.position.y = Math.random() * 10 - 5;
@@ -84,7 +76,7 @@
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 

examples/webgl_effects_peppersghost.html

@@ -14,18 +14,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Color,
-				Float32BufferAttribute,
-				Group,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { PeppersGhostEffect } from './jsm/effects/PeppersGhostEffect.js';
 
@@ -42,21 +31,21 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				group = new Group();
+				group = new THREE.Group();
 				scene.add( group );
 
 				// Cube
 
-				var geometry = new BoxBufferGeometry( 1, 1, 1 );
+				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 				geometry = geometry.toNonIndexed(); // ensure unique vertices for each triangle
 
 				var position = geometry.attributes.position;
 				var colors = [];
-				var color = new Color();
+				var color = new THREE.Color();
 
 				// generate for each side of the cube a different color
 
@@ -78,13 +67,13 @@
 
 				}
 
-				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				var material = new MeshBasicMaterial( { vertexColors: VertexColors } );
+				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					var cube = new Mesh( geometry, material );
+					var cube = new THREE.Mesh( geometry, material );
 					cube.position.x = Math.random() * 2 - 1;
 					cube.position.y = Math.random() * 2 - 1;
 					cube.position.z = Math.random() * 2 - 1;
@@ -93,7 +82,7 @@
 
 				}
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 

examples/webgl_effects_stereo.html

@@ -13,16 +13,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				CubeRefractionMapping,
-				CubeTextureLoader,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { StereoEffect } from './jsm/effects/StereoEffect.js';
 
@@ -45,26 +36,26 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 				camera.position.z = 3200;
 
-				scene = new Scene();
-				scene.background = new CubeTextureLoader()
+				scene = new THREE.Scene();
+				scene.background = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-				var geometry = new SphereBufferGeometry( 100, 32, 16 );
+				var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
 
-				var textureCube = new CubeTextureLoader()
+				var textureCube = new THREE.CubeTextureLoader()
 					.setPath( 'textures/cube/Park3Med/' )
 					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
-				textureCube.mapping = CubeRefractionMapping;
+				textureCube.mapping = THREE.CubeRefractionMapping;
 
-				var material = new MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
+				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );
 
 				for ( var i = 0; i < 500; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 10000 - 5000;
 					mesh.position.y = Math.random() * 10000 - 5000;
 					mesh.position.z = Math.random() * 10000 - 5000;
@@ -77,7 +68,7 @@
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				container.appendChild( renderer.domElement );
 

examples/webgl_fire.html

@@ -13,16 +13,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				PointLight,
-				Scene,
-				Texture,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -58,20 +49,20 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				camera = new PerspectiveCamera( 70, width / height, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
 				camera.position.z = 25;
 
-				scene = new Scene();
-				scene.background = new Color( 0x000000 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x000000 );
 
-				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new PointLight( 0xffffff, 0.8 );
+				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
-				var plane = new PlaneBufferGeometry( 20, 20 );
+				var plane = new THREE.PlaneBufferGeometry( 20, 20 );
 				fire = new Fire( plane, {
 					textureWidth: 512,
 					textureHeight: 512,
@@ -80,7 +71,7 @@
 				fire.position.z = - 2;
 				scene.add( fire );
 
-				renderer = new WebGLRenderer( { antialias: true, alpha: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;
@@ -211,7 +202,7 @@
 					context.fillStyle = "black";
 
 					context.strokeText( text, canvas.width / 2, canvas.height * 0.75 );
-					var texture = new Texture( canvas );
+					var texture = new THREE.Texture( canvas );
 					texture.needsUpdate = true;
 
 					fire.setSourceMap( texture );

examples/webgl_framebuffer_texture.html

@@ -36,24 +36,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				DataTexture,
-				Mesh,
-				MeshStandardMaterial,
-				NearestFilter,
-				OrthographicCamera,
-				PerspectiveCamera,
-				PointLight,
-				RGBFormat,
-				Scene,
-				Sprite,
-				SpriteMaterial,
-				TorusKnotBufferGeometry,
-				Vector2,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
@@ -65,7 +48,7 @@
 			var dpr = window.devicePixelRatio;
 
 			var textureSize = 128 * dpr;
-			var vector = new Vector2();
+			var vector = new THREE.Vector2();
 
 			init();
 			animate();
@@ -77,29 +60,29 @@
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				camera = new PerspectiveCamera( 70, width / height, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
 				camera.position.z = 20;
 
-				cameraOrtho = new OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
+				cameraOrtho = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, 1, 10 );
 				cameraOrtho.position.z = 10;
 
-				scene = new Scene();
-				scene.background = new Color( 0x20252f );
-				sceneOrtho = new Scene();
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x20252f );
+				sceneOrtho = new THREE.Scene();
 
 				//
 
-				var geometry = new TorusKnotBufferGeometry( 3, 1, 256, 32 );
-				var material = new MeshStandardMaterial( { color: 0x6083c2 } );
+				var geometry = new THREE.TorusKnotBufferGeometry( 3, 1, 256, 32 );
+				var material = new THREE.MeshStandardMaterial( { color: 0x6083c2 } );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
 				//
-				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new PointLight( 0xffffff, 0.8 );
+				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
@@ -107,15 +90,15 @@
 
 				var data = new Uint8Array( textureSize * textureSize * 3 );
 
-				texture = new DataTexture( data, textureSize, textureSize, RGBFormat );
-				texture.minFilter = NearestFilter;
-				texture.magFilter = NearestFilter;
+				texture = new THREE.DataTexture( data, textureSize, textureSize, THREE.RGBFormat );
+				texture.minFilter = THREE.NearestFilter;
+				texture.magFilter = THREE.NearestFilter;
 				texture.needsUpdate = true;
 
 				//
 
-				var spriteMaterial = new SpriteMaterial( { map: texture } );
-				sprite = new Sprite( spriteMaterial );
+				var spriteMaterial = new THREE.SpriteMaterial( { map: texture } );
+				sprite = new THREE.Sprite( spriteMaterial );
 				sprite.scale.set( textureSize, textureSize, 1 );
 				sceneOrtho.add( sprite );
 
@@ -123,7 +106,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;

examples/webgl_furnace_test.html

@@ -23,18 +23,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				Color,
-				CubeCamera,
-				DoubleSide,
-				Mesh,
-				MeshBasicMaterial,
-				MeshPhysicalMaterial,
-				OrthographicCamera,
-				Scene,
-				SphereBufferGeometry,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
@@ -50,7 +39,7 @@
 
 				// renderer
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( width, height );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				document.body.appendChild( renderer.domElement );
@@ -59,22 +48,22 @@
 
 				// scene
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				// camera
 
-				camera = new OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
+				camera = new THREE.OrthographicCamera( - right, right, right / aspect, - right / aspect, 1, 30 );
 				camera.position.set( 0, 0, 9 );
 
 			}
 
 			function createObjects() {
 
-				var geo = new SphereBufferGeometry( 0.4, 32, 32 );
+				var geo = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
 				var count = 10;
 				for ( var x = 0; x <= count; x ++ ) {
 
-					var mesh = new Mesh( geo, new MeshPhysicalMaterial( {
+					var mesh = new THREE.Mesh( geo, new THREE.MeshPhysicalMaterial( {
 						roughness: x / count,
 						metalness: 1,
 						color: 0xffffff,
@@ -91,17 +80,17 @@
 
 			function createEnvironment() {
 
-				var color = new Color( 0xcccccc );
-				var sky = new Mesh( new SphereBufferGeometry( 1, 32, 32 ), new MeshBasicMaterial( {
+				var color = new THREE.Color( 0xcccccc );
+				var sky = new THREE.Mesh( new THREE.SphereBufferGeometry( 1, 32, 32 ), new THREE.MeshBasicMaterial( {
 					color: color,
-					side: DoubleSide,
+					side: THREE.DoubleSide,
 				} ) );
 				sky.scale.setScalar( 100 );
 
-				var envScene = new Scene();
+				var envScene = new THREE.Scene();
 				envScene.add( sky );
 				envScene.background = color;
-				var cubeCamera = new CubeCamera( 1, 100, 256, 256 );
+				var cubeCamera = new THREE.CubeCamera( 1, 100, 256, 256 );
 				cubeCamera.update( renderer, envScene );
 
 				envMap = cubeCamera.renderTarget.texture;

examples/webgl_geometries.html

@@ -11,31 +11,7 @@
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BoxBufferGeometry,
-				CircleBufferGeometry,
-				CylinderBufferGeometry,
-				DoubleSide,
-				IcosahedronBufferGeometry,
-				LatheBufferGeometry,
-				Mesh,
-				MeshPhongMaterial,
-				OctahedronBufferGeometry,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				PointLight,
-				RepeatWrapping,
-				RingBufferGeometry,
-				Scene,
-				SphereBufferGeometry,
-				TetrahedronBufferGeometry,
-				TextureLoader,
-				TorusBufferGeometry,
-				TorusKnotBufferGeometry,
-				Vector2,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -46,65 +22,65 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.y = 400;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var object;
 
-				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new PointLight( 0xffffff, 0.8 );
+				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
-				var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				map.wrapS = map.wrapT = RepeatWrapping;
+				var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				var material = new MeshPhongMaterial( { map: map, side: DoubleSide } );
+				var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
 
 				//
 
-				object = new Mesh( new SphereBufferGeometry( 75, 20, 10 ), material );
+				object = new THREE.Mesh( new THREE.SphereBufferGeometry( 75, 20, 10 ), material );
 				object.position.set( - 300, 0, 200 );
 				scene.add( object );
 
-				object = new Mesh( new IcosahedronBufferGeometry( 75, 1 ), material );
+				object = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 75, 1 ), material );
 				object.position.set( - 100, 0, 200 );
 				scene.add( object );
 
-				object = new Mesh( new OctahedronBufferGeometry( 75, 2 ), material );
+				object = new THREE.Mesh( new THREE.OctahedronBufferGeometry( 75, 2 ), material );
 				object.position.set( 100, 0, 200 );
 				scene.add( object );
 
-				object = new Mesh( new TetrahedronBufferGeometry( 75, 0 ), material );
+				object = new THREE.Mesh( new THREE.TetrahedronBufferGeometry( 75, 0 ), material );
 				object.position.set( 300, 0, 200 );
 				scene.add( object );
 
 				//
 
-				object = new Mesh( new PlaneBufferGeometry( 100, 100, 4, 4 ), material );
+				object = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100, 4, 4 ), material );
 				object.position.set( - 300, 0, 0 );
 				scene.add( object );
 
-				object = new Mesh( new BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
+				object = new THREE.Mesh( new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 ), material );
 				object.position.set( - 100, 0, 0 );
 				scene.add( object );
 
-				object = new Mesh( new CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
+				object = new THREE.Mesh( new THREE.CircleBufferGeometry( 50, 20, 0, Math.PI * 2 ), material );
 				object.position.set( 100, 0, 0 );
 				scene.add( object );
 
-				object = new Mesh( new RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
+				object = new THREE.Mesh( new THREE.RingBufferGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
 				object.position.set( 300, 0, 0 );
 				scene.add( object );
 
 				//
 
-				object = new Mesh( new CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
+				object = new THREE.Mesh( new THREE.CylinderBufferGeometry( 25, 75, 100, 40, 5 ), material );
 				object.position.set( - 300, 0, - 200 );
 				scene.add( object );
 
@@ -112,25 +88,25 @@
 
 				for ( var i = 0; i < 50; i ++ ) {
 
-					points.push( new Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
+					points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
 
 				}
 
-				object = new Mesh( new LatheBufferGeometry( points, 20 ), material );
+				object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
 				object.position.set( - 100, 0, - 200 );
 				scene.add( object );
 
-				object = new Mesh( new TorusBufferGeometry( 50, 20, 20, 20 ), material );
+				object = new THREE.Mesh( new THREE.TorusBufferGeometry( 50, 20, 20, 20 ), material );
 				object.position.set( 100, 0, - 200 );
 				scene.add( object );
 
-				object = new Mesh( new TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
+				object = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 50, 10, 50, 20 ), material );
 				object.position.set( 300, 0, - 200 );
 				scene.add( object );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometries_parametric.html

@@ -12,20 +12,7 @@
 		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - parametric geometries</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				BufferGeometry,
-				DoubleSide,
-				Mesh,
-				MeshPhongMaterial,
-				ParametricBufferGeometry,
-				PerspectiveCamera,
-				PointLight,
-				RepeatWrapping,
-				Scene,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -41,46 +28,46 @@
 
 				var container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.y = 400;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				//
 
-				var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
+				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 				scene.add( ambientLight );
 
-				var pointLight = new PointLight( 0xffffff, 0.8 );
+				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
 				camera.add( pointLight );
 				scene.add( camera );
 
 				//
 
-				var map = new TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
-				map.wrapS = map.wrapT = RepeatWrapping;
+				var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
+				map.wrapS = map.wrapT = THREE.RepeatWrapping;
 				map.anisotropy = 16;
 
-				var material = new MeshPhongMaterial( { map: map, side: DoubleSide } );
+				var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
 
 				//
 
 				var geometry, object;
 
-				geometry = new ParametricBufferGeometry( ParametricGeometries.plane( 100, 100 ), 10, 10 );
+				geometry = new THREE.ParametricBufferGeometry( ParametricGeometries.plane( 100, 100 ), 10, 10 );
 				geometry.center();
-				object = new Mesh( geometry, material );
+				object = new THREE.Mesh( geometry, material );
 				object.position.set( - 200, 0, 200 );
 				scene.add( object );
 
-				geometry = new ParametricBufferGeometry( ParametricGeometries.klein, 20, 20 );
-				object = new Mesh( geometry, material );
+				geometry = new THREE.ParametricBufferGeometry( ParametricGeometries.klein, 20, 20 );
+				object = new THREE.Mesh( geometry, material );
 				object.position.set( 0, 0, 200 );
 				object.scale.multiplyScalar( 5 );
 				scene.add( object );
 
-				geometry = new ParametricBufferGeometry( ParametricGeometries.mobius, 20, 20 );
-				object = new Mesh( geometry, material );
+				geometry = new THREE.ParametricBufferGeometry( ParametricGeometries.mobius, 20, 20 );
+				object = new THREE.Mesh( geometry, material );
 				object.position.set( 200, 0, 200 );
 				object.scale.multiplyScalar( 30 );
 				scene.add( object );
@@ -93,26 +80,26 @@
 				var sphere = new ParametricGeometries.SphereGeometry( 50, 20, 10 );
 				var tube = new ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
 
-				torus = new BufferGeometry().fromGeometry( torus );
-				sphere = new BufferGeometry().fromGeometry( sphere );
-				tube = new BufferGeometry().fromGeometry( tube );
+				torus = new THREE.BufferGeometry().fromGeometry( torus );
+				sphere = new THREE.BufferGeometry().fromGeometry( sphere );
+				tube = new THREE.BufferGeometry().fromGeometry( tube );
 
-				object = new Mesh( torus, material );
+				object = new THREE.Mesh( torus, material );
 				object.position.set( - 200, 0, - 200 );
 				scene.add( object );
 
-				object = new Mesh( sphere, material );
+				object = new THREE.Mesh( sphere, material );
 				object.position.set( 0, 0, - 200 );
 				scene.add( object );
 
-				object = new Mesh( tube, material );
+				object = new THREE.Mesh( tube, material );
 				object.position.set( 200, 0, - 200 );
 				object.scale.multiplyScalar( 2 );
 				scene.add( object );
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_colors.html

@@ -21,21 +21,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - vertex colors</div>
 
 		<script type="module">
-			import {
-				BufferAttribute,
-				CanvasTexture,
-				Color,
-				DirectionalLight,
-				IcosahedronBufferGeometry,
-				Mesh,
-				MeshBasicMaterial,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Scene,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -55,13 +41,13 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1800;
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
-				var light = new DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
@@ -79,25 +65,25 @@
 				context.fillStyle = gradient;
 				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-				var shadowTexture = new CanvasTexture( canvas );
+				var shadowTexture = new THREE.CanvasTexture( canvas );
 
-				var shadowMaterial = new MeshBasicMaterial( { map: shadowTexture } );
-				var shadowGeo = new PlaneBufferGeometry( 300, 300, 1, 1 );
+				var shadowMaterial = new THREE.MeshBasicMaterial( { map: shadowTexture } );
+				var shadowGeo = new THREE.PlaneBufferGeometry( 300, 300, 1, 1 );
 
 				var shadowMesh;
 
-				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
 				shadowMesh.position.x = - 400;
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				shadowMesh = new Mesh( shadowGeo, shadowMaterial );
+				shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
 				shadowMesh.position.y = - 250;
 				shadowMesh.position.x = 400;
 				shadowMesh.rotation.x = - Math.PI / 2;
@@ -105,15 +91,15 @@
 
 				var radius = 200;
 
-				var geometry1 = new IcosahedronBufferGeometry( radius, 1 );
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
 				var count = geometry1.attributes.position.count;
-				geometry1.addAttribute( 'color', new BufferAttribute( new Float32Array( count * 3 ), 3 ) );
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
 				var geometry2 = geometry1.clone();
 				var geometry3 = geometry1.clone();
 
-				var color = new Color();
+				var color = new THREE.Color();
 				var positions1 = geometry1.attributes.position;
 				var positions2 = geometry2.attributes.position;
 				var positions3 = geometry3.attributes.position;
@@ -134,34 +120,34 @@
 
 				}
 
-				var material = new MeshPhongMaterial( {
+				var material = new THREE.MeshPhongMaterial( {
 					color: 0xffffff,
 					flatShading: true,
-					vertexColors: VertexColors,
+					vertexColors: THREE.VertexColors,
 					shininess: 0
 				} );
 
-				var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
+				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				var mesh = new Mesh( geometry1, material );
-				var wireframe = new Mesh( geometry1, wireframeMaterial );
+				var mesh = new THREE.Mesh( geometry1, material );
+				var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;
 				scene.add( mesh );
 
-				var mesh = new Mesh( geometry2, material );
-				var wireframe = new Mesh( geometry2, wireframeMaterial );
+				var mesh = new THREE.Mesh( geometry2, material );
+				var wireframe = new THREE.Mesh( geometry2, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = 400;
 				scene.add( mesh );
 
-				var mesh = new Mesh( geometry3, material );
-				var wireframe = new Mesh( geometry3, wireframeMaterial );
+				var mesh = new THREE.Mesh( geometry3, material );
+				var wireframe = new THREE.Mesh( geometry3, wireframeMaterial );
 				mesh.add( wireframe );
 				scene.add( mesh );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_colors_lookuptable.html

@@ -25,23 +25,7 @@
 		<div id="container"></div>
 
 		<script type="module">
-			import {
-				BufferGeometryLoader,
-				CanvasTexture,
-				Color,
-				DoubleSide,
-				Float32BufferAttribute,
-				Mesh,
-				MeshLambertMaterial,
-				OrthographicCamera,
-				PerspectiveCamera,
-				PointLight,
-				Scene,
-				Sprite,
-				SpriteMaterial,
-				VertexColors,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 
@@ -63,33 +47,33 @@
 
 				container = document.getElementById( 'container' );
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
-				uiScene = new Scene();
+				uiScene = new THREE.Scene();
 
 				lut = new Lut();
 
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 
-				perpCamera = new PerspectiveCamera( 60, width / height, 1, 100 );
+				perpCamera = new THREE.PerspectiveCamera( 60, width / height, 1, 100 );
 				perpCamera.position.set( 0, 0, 10 );
 				scene.add( perpCamera );
 
-				orthoCamera = new OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
+				orthoCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 1, 2 );
 				orthoCamera.position.set( 0.5, 0, 1 );
 
-				sprite = new Sprite( new SpriteMaterial( {
-					map: new CanvasTexture( lut.createCanvas() )
+				sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
+					map: new THREE.CanvasTexture( lut.createCanvas() )
 				} ) );
 				sprite.scale.x = 0.125;
 				uiScene.add( sprite );
 
-				mesh = new Mesh( undefined, new MeshLambertMaterial( {
-					side: DoubleSide,
+				mesh = new THREE.Mesh( undefined, new THREE.MeshLambertMaterial( {
+					side: THREE.DoubleSide,
 					color: 0xF5F5F5,
-					vertexColors: VertexColors
+					vertexColors: THREE.VertexColors
 				} ) );
 				scene.add( mesh );
 
@@ -98,10 +82,10 @@
 				};
 				loadModel( );
 
-				var pointLight = new PointLight( 0xffffff, 1 );
+				var pointLight = new THREE.PointLight( 0xffffff, 1 );
 				perpCamera.add( pointLight );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
@@ -146,7 +130,7 @@
 
 			function loadModel( ) {
 
-				var loader = new BufferGeometryLoader();
+				var loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/pressure.json', function ( geometry ) {
 
 					geometry.center();
@@ -159,7 +143,7 @@
 						colors.push( 1, 1, 1 );
 
 					}
-					geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+					geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 					mesh.geometry = geometry;
 					updateColors();

examples/webgl_geometry_convex.html

@@ -11,24 +11,7 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - convex geometry</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				AxesHelper,
-				BackSide,
-				BufferGeometry,
-				DodecahedronGeometry,
-				FrontSide,
-				Group,
-				Mesh,
-				MeshLambertMaterial,
-				PerspectiveCamera,
-				PointLight,
-				Points,
-				PointsMaterial,
-				Scene,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { ConvexBufferGeometry } from './jsm/geometries/ConvexGeometry.js';
@@ -40,16 +23,16 @@
 
 			function init() {
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
 				// camera
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 15, 20, 30 );
 				scene.add( camera );
 
@@ -60,28 +43,28 @@
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
 
-				scene.add( new AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
 				// light
 
-				var light = new PointLight( 0xffffff, 1 );
+				var light = new THREE.PointLight( 0xffffff, 1 );
 				camera.add( light );
 
 				// helper
 
-				scene.add( new AxesHelper( 20 ) );
+				scene.add( new THREE.AxesHelper( 20 ) );
 
 				// textures
 
-				var loader = new TextureLoader();
+				var loader = new THREE.TextureLoader();
 				var texture = loader.load( 'textures/sprites/disc.png' );
 
-				group = new Group();
+				group = new THREE.Group();
 				scene.add( group );
 
 				// points
 
-				var vertices = new DodecahedronGeometry( 10 ).vertices;
+				var vertices = new THREE.DodecahedronGeometry( 10 ).vertices;
 
 				for ( var i = 0; i < vertices.length; i ++ ) {
 
@@ -89,7 +72,7 @@
 
 				}
 
-				var pointsMaterial = new PointsMaterial( {
+				var pointsMaterial = new THREE.PointsMaterial( {
 
 					color: 0x0080ff,
 					map: texture,
@@ -98,14 +81,14 @@
 
 				} );
 
-				var pointsGeometry = new BufferGeometry().setFromPoints( vertices );
+				var pointsGeometry = new THREE.BufferGeometry().setFromPoints( vertices );
 
-				var points = new Points( pointsGeometry, pointsMaterial );
+				var points = new THREE.Points( pointsGeometry, pointsMaterial );
 				group.add( points );
 
 				// convex hull
 
-				var meshMaterial = new MeshLambertMaterial( {
+				var meshMaterial = new THREE.MeshLambertMaterial( {
 					color: 0xffffff,
 					opacity: 0.5,
 					transparent: true
@@ -113,13 +96,13 @@
 
 				var meshGeometry = new ConvexBufferGeometry( vertices );
 
-				var mesh = new Mesh( meshGeometry, meshMaterial );
-				mesh.material.side = BackSide; // back faces
+				var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
+				mesh.material.side = THREE.BackSide; // back faces
 				mesh.renderOrder = 0;
 				group.add( mesh );
 
-				var mesh = new Mesh( meshGeometry, meshMaterial.clone() );
-				mesh.material.side = FrontSide; // front faces
+				var mesh = new THREE.Mesh( meshGeometry, meshMaterial.clone() );
+				mesh.material.side = THREE.FrontSide; // front faces
 				mesh.renderOrder = 1;
 				group.add( mesh );
 

examples/webgl_geometry_cube.html

@@ -9,15 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				Scene,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			var camera, scene, renderer;
 			var mesh;
@@ -27,20 +19,20 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 400;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				var texture = new TextureLoader().load( 'textures/crate.gif' );
+				var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
 
-				var geometry = new BoxBufferGeometry( 200, 200, 200 );
-				var material = new MeshBasicMaterial( { map: texture } );
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
+				var material = new THREE.MeshBasicMaterial( { map: texture } );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometry_dynamic.html

@@ -22,19 +22,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				Clock,
-				Color,
-				FogExp2,
-				Mesh,
-				MeshBasicMaterial,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				RepeatWrapping,
-				Scene,
-				TextureLoader,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -51,21 +39,21 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.y = 200;
 
-				clock = new Clock();
+				clock = new THREE.Clock();
 
 				controls = new FirstPersonControls( camera );
 
 				controls.movementSpeed = 500;
 				controls.lookSpeed = 0.1;
 
-				scene = new Scene();
-				scene.background = new Color( 0xaaccff );
-				scene.fog = new FogExp2( 0xaaccff, 0.0007 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xaaccff );
+				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
 
-				geometry = new PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
+				geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 				geometry.rotateX( - Math.PI / 2 );
 
 				var position = geometry.attributes.position;
@@ -78,16 +66,16 @@
 
 				}
 
-				var texture = new TextureLoader().load( 'textures/water.jpg' );
-				texture.wrapS = texture.wrapT = RepeatWrapping;
+				var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
+				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 				texture.repeat.set( 5, 5 );
 
-				material = new MeshBasicMaterial( { color: 0x0044ff, map: texture } );
+				material = new THREE.MeshBasicMaterial( { color: 0x0044ff, map: texture } );
 
-				mesh = new Mesh( geometry, material );
+				mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometry_extrude_shapes.html

@@ -18,22 +18,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				CatmullRomCurve3,
-				Color,
-				ExtrudeBufferGeometry,
-				Mesh,
-				MeshLambertMaterial,
-				Math as _Math,
-				PerspectiveCamera,
-				PointLight,
-				Scene,
-				Shape,
-				Vector2,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
@@ -54,35 +39,35 @@
 				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometry extrude shapes';
 				document.body.appendChild( info );
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				scene = new Scene();
-				scene.background = new Color( 0x222222 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x222222 );
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 500 );
 
 				controls = new TrackballControls( camera, renderer.domElement );
 				controls.minDistance = 200;
 				controls.maxDistance = 500;
 
-				scene.add( new AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
 
-				var light = new PointLight( 0xffffff );
+				var light = new THREE.PointLight( 0xffffff );
 				light.position.copy( camera.position );
 				scene.add( light );
 
 				//
 
-				var closedSpline = new CatmullRomCurve3( [
-					new Vector3( - 60, - 100, 60 ),
-					new Vector3( - 60, 20, 60 ),
-					new Vector3( - 60, 120, 60 ),
-					new Vector3( 60, 20, - 60 ),
-					new Vector3( 60, - 100, - 60 )
+				var closedSpline = new THREE.CatmullRomCurve3( [
+					new THREE.Vector3( - 60, - 100, 60 ),
+					new THREE.Vector3( - 60, 20, 60 ),
+					new THREE.Vector3( - 60, 120, 60 ),
+					new THREE.Vector3( 60, 20, - 60 ),
+					new THREE.Vector3( 60, - 100, - 60 )
 				] );
 
 				closedSpline.curveType = 'catmullrom';
@@ -103,17 +88,17 @@
 
 					var a = 2 * i / count * Math.PI;
 
-					pts.push( new Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
-				var shape = new Shape( pts );
+				var shape = new THREE.Shape( pts );
 
-				var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
+				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
 
-				var material = new MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
+				var material = new THREE.MeshLambertMaterial( { color: 0xb00000, wireframe: false } );
 
-				var mesh = new Mesh( geometry, material );
+				var mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
@@ -125,11 +110,11 @@
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					randomPoints.push( new Vector3( ( i - 4.5 ) * 50, _Math.randFloat( - 50, 50 ), _Math.randFloat( - 50, 50 ) ) );
+					randomPoints.push( new THREE.Vector3( ( i - 4.5 ) * 50, THREE.Math.randFloat( - 50, 50 ), THREE.Math.randFloat( - 50, 50 ) ) );
 
 				}
 
-				var randomSpline = new CatmullRomCurve3( randomPoints );
+				var randomSpline = new THREE.CatmullRomCurve3( randomPoints );
 
 				//
 
@@ -148,17 +133,17 @@
 
 					var a = i / numPts * Math.PI;
 
-					pts.push( new Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
+					pts.push( new THREE.Vector2( Math.cos( a ) * l, Math.sin( a ) * l ) );
 
 				}
 
-				var shape = new Shape( pts );
+				var shape = new THREE.Shape( pts );
 
-				var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
+				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
 
-				var material2 = new MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
+				var material2 = new THREE.MeshLambertMaterial( { color: 0xff8000, wireframe: false } );
 
-				var mesh = new Mesh( geometry, material2 );
+				var mesh = new THREE.Mesh( geometry, material2 );
 
 				scene.add( mesh );
 
@@ -176,9 +161,9 @@
 					bevelSegments: 1
 				};
 
-				var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
+				var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
 
-				var mesh = new Mesh( geometry, materials );
+				var mesh = new THREE.Mesh( geometry, materials );
 
 				mesh.position.set( 50, 100, 50 );
 

examples/webgl_geometry_extrude_shapes2.html

@@ -18,21 +18,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				AmbientLight,
-				Color,
-				DirectionalLight,
-				ExtrudeBufferGeometry,
-				GridHelper,
-				Group,
-				Mesh,
-				MeshLambertMaterial,
-				PerspectiveCamera,
-				Scene,
-				ShapePath,
-				Vector2,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -50,7 +36,7 @@
 
 				exports.transformSVGPath = function transformSVGPath( pathStr ) {
 
-					var path = new ShapePath();
+					var path = new THREE.ShapePath();
 
 					var idx = 1, len = pathStr.length, activeCmd,
 						x = 0, y = 0, nx = 0, ny = 0, firstX = null, firstY = null,
@@ -298,8 +284,8 @@
 								cx = Math.cos( xar ) * x2 - Math.sin( xar ) * y2 + ( x + nx ) / 2;
 								cy = Math.sin( xar ) * x2 + Math.cos( xar ) * y2 + ( y + ny ) / 2;
 
-								var u = new Vector2( 1, 0 );
-								var v = new Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
+								var u = new THREE.Vector2( 1, 0 );
+								var v = new THREE.Vector2( ( x1 - x2 ) / rx, ( y1 - y2 ) / ry );
 
 								var startAng = Math.acos( u.dot( v ) / u.length() / v.length() );
 
@@ -357,8 +343,8 @@
 				for ( var i = 0; i < paths.length; i ++ ) {
 
 					var path = $d3g.transformSVGPath( paths[ i ] );
-					var color = new Color( colors[ i ] );
-					var material = new MeshLambertMaterial( {
+					var color = new THREE.Color( colors[ i ] );
+					var material = new THREE.MeshLambertMaterial( {
 						color: color,
 						emissive: color
 					} );
@@ -368,12 +354,12 @@
 					for ( var j = 0; j < simpleShapes.length; j ++ ) {
 
 						var simpleShape = simpleShapes[ j ];
-						var shape3d = new ExtrudeBufferGeometry( simpleShape, {
+						var shape3d = new THREE.ExtrudeBufferGeometry( simpleShape, {
 							depth: depth,
 							bevelEnabled: false
 						} );
 
-						var mesh = new Mesh( shape3d, material );
+						var mesh = new THREE.Mesh( shape3d, material );
 						mesh.rotation.x = Math.PI;
 						mesh.translateZ( - depth - 1 );
 						mesh.translateX( - center.x );
@@ -400,31 +386,31 @@
 
 				//
 
-				scene = new Scene();
-				scene.background = new Color( 0xb0b0b0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xb0b0b0 );
 
 				//
 
-				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 0, 200 );
 
 				//
 
-				var group = new Group();
+				var group = new THREE.Group();
 				scene.add( group );
 
 				//
 
-				var directionalLight = new DirectionalLight( 0xffffff, 0.6 );
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
 				directionalLight.position.set( 0.75, 0.75, 1.0 ).normalize();
 				scene.add( directionalLight );
 
-				var ambientLight = new AmbientLight( 0xcccccc, 0.2 );
+				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.2 );
 				scene.add( ambientLight );
 
 				//
 
-				var helper = new GridHelper( 160, 10 );
+				var helper = new THREE.GridHelper( 160, 10 );
 				helper.rotation.x = Math.PI / 2;
 				group.add( helper );
 
@@ -435,7 +421,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_extrude_splines.html

@@ -24,22 +24,7 @@
 		</div>
 
 		<script type="module">
-			import {
-				CameraHelper,
-				CatmullRomCurve3,
-				Color,
-				DirectionalLight,
-				Mesh,
-				MeshBasicMaterial,
-				MeshLambertMaterial,
-				Object3D,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				TubeBufferGeometry,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
@@ -51,32 +36,32 @@
 
 			var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
 
-			var binormal = new Vector3();
-			var normal = new Vector3();
-
-			var pipeSpline = new CatmullRomCurve3( [
-				new Vector3( 0, 10, - 10 ), new Vector3( 10, 0, - 10 ),
-				new Vector3( 20, 0, 0 ), new Vector3( 30, 0, 10 ),
-				new Vector3( 30, 0, 20 ), new Vector3( 20, 0, 30 ),
-				new Vector3( 10, 0, 30 ), new Vector3( 0, 0, 30 ),
-				new Vector3( - 10, 10, 30 ), new Vector3( - 10, 20, 30 ),
-				new Vector3( 0, 30, 30 ), new Vector3( 10, 30, 30 ),
-				new Vector3( 20, 30, 15 ), new Vector3( 10, 30, 10 ),
-				new Vector3( 0, 30, 10 ), new Vector3( - 10, 20, 10 ),
-				new Vector3( - 10, 10, 10 ), new Vector3( 0, 0, 10 ),
-				new Vector3( 10, - 10, 10 ), new Vector3( 20, - 15, 10 ),
-				new Vector3( 30, - 15, 10 ), new Vector3( 40, - 15, 10 ),
-				new Vector3( 50, - 15, 10 ), new Vector3( 60, 0, 10 ),
-				new Vector3( 70, 0, 0 ), new Vector3( 80, 0, 0 ),
-				new Vector3( 90, 0, 0 ), new Vector3( 100, 0, 0 )
+			var binormal = new THREE.Vector3();
+			var normal = new THREE.Vector3();
+
+			var pipeSpline = new THREE.CatmullRomCurve3( [
+				new THREE.Vector3( 0, 10, - 10 ), new THREE.Vector3( 10, 0, - 10 ),
+				new THREE.Vector3( 20, 0, 0 ), new THREE.Vector3( 30, 0, 10 ),
+				new THREE.Vector3( 30, 0, 20 ), new THREE.Vector3( 20, 0, 30 ),
+				new THREE.Vector3( 10, 0, 30 ), new THREE.Vector3( 0, 0, 30 ),
+				new THREE.Vector3( - 10, 10, 30 ), new THREE.Vector3( - 10, 20, 30 ),
+				new THREE.Vector3( 0, 30, 30 ), new THREE.Vector3( 10, 30, 30 ),
+				new THREE.Vector3( 20, 30, 15 ), new THREE.Vector3( 10, 30, 10 ),
+				new THREE.Vector3( 0, 30, 10 ), new THREE.Vector3( - 10, 20, 10 ),
+				new THREE.Vector3( - 10, 10, 10 ), new THREE.Vector3( 0, 0, 10 ),
+				new THREE.Vector3( 10, - 10, 10 ), new THREE.Vector3( 20, - 15, 10 ),
+				new THREE.Vector3( 30, - 15, 10 ), new THREE.Vector3( 40, - 15, 10 ),
+				new THREE.Vector3( 50, - 15, 10 ), new THREE.Vector3( 60, 0, 10 ),
+				new THREE.Vector3( 70, 0, 0 ), new THREE.Vector3( 80, 0, 0 ),
+				new THREE.Vector3( 90, 0, 0 ), new THREE.Vector3( 100, 0, 0 )
 			] );
 
-			var sampleClosedSpline = new CatmullRomCurve3( [
-				new Vector3( 0, - 40, - 40 ),
-				new Vector3( 0, 40, - 40 ),
-				new Vector3( 0, 140, - 40 ),
-				new Vector3( 0, 40, 40 ),
-				new Vector3( 0, - 40, 40 )
+			var sampleClosedSpline = new THREE.CatmullRomCurve3( [
+				new THREE.Vector3( 0, - 40, - 40 ),
+				new THREE.Vector3( 0, 40, - 40 ),
+				new THREE.Vector3( 0, 140, - 40 ),
+				new THREE.Vector3( 0, 40, 40 ),
+				new THREE.Vector3( 0, - 40, 40 )
 			] );
 
 			sampleClosedSpline.curveType = 'catmullrom';
@@ -115,9 +100,9 @@
 				cameraHelper: false,
 			};
 
-			var material = new MeshLambertMaterial( { color: 0xff00ff } );
+			var material = new THREE.MeshLambertMaterial( { color: 0xff00ff } );
 
-			var wireframeMaterial = new MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
+			var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.3, wireframe: true, transparent: true } );
 
 			function addTube() {
 
@@ -130,7 +115,7 @@
 
 				var extrudePath = splines[ params.spline ];
 
-				tubeGeometry = new TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
+				tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, params.extrusionSegments, 2, params.radiusSegments, params.closed );
 
 				addGeometry( tubeGeometry );
 
@@ -149,8 +134,8 @@
 
 				// 3D shape
 
-				mesh = new Mesh( geometry, material );
-				var wireframe = new Mesh( geometry, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry, material );
+				var wireframe = new THREE.Mesh( geometry, wireframeMaterial );
 				mesh.add( wireframe );
 
 				parent.add( mesh );
@@ -173,36 +158,36 @@
 
 				// camera
 
-				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
+				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10000 );
 				camera.position.set( 0, 50, 500 );
 
 				// scene
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
 				// light
 
-				var light = new DirectionalLight( 0xffffff );
+				var light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 0, 1 );
 				scene.add( light );
 
 				// tube
 
-				parent = new Object3D();
+				parent = new THREE.Object3D();
 				scene.add( parent );
 
-				splineCamera = new PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
+				splineCamera = new THREE.PerspectiveCamera( 84, window.innerWidth / window.innerHeight, 0.01, 1000 );
 				parent.add( splineCamera );
 
-				cameraHelper = new CameraHelper( splineCamera );
+				cameraHelper = new THREE.CameraHelper( splineCamera );
 				scene.add( cameraHelper );
 
 				addTube();
 
 				// debug camera
 
-				cameraEye = new Mesh( new SphereBufferGeometry( 5 ), new MeshBasicMaterial( { color: 0xdddddd } ) );
+				cameraEye = new THREE.Mesh( new THREE.SphereBufferGeometry( 5 ), new THREE.MeshBasicMaterial( { color: 0xdddddd } ) );
 				parent.add( cameraEye );
 
 				cameraHelper.visible = params.cameraHelper;
@@ -210,7 +195,7 @@
 
 				// renderer
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_geometry_hierarchy.html

@@ -9,17 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Color,
-				Fog,
-				Group,
-				Mesh,
-				MeshNormalMaterial,
-				PerspectiveCamera,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -35,21 +25,21 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 500;
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
-				scene.fog = new Fog( 0xffffff, 1, 10000 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
+				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
 
-				var geometry = new BoxBufferGeometry( 100, 100, 100 );
-				var material = new MeshNormalMaterial();
+				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				var material = new THREE.MeshNormalMaterial();
 
-				group = new Group();
+				group = new THREE.Group();
 
 				for ( var i = 0; i < 1000; i ++ ) {
 
-					var mesh = new Mesh( geometry, material );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.x = Math.random() * 2000 - 1000;
 					mesh.position.y = Math.random() * 2000 - 1000;
 					mesh.position.z = Math.random() * 2000 - 1000;
@@ -68,7 +58,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgl_geometry_hierarchy2.html

@@ -9,15 +9,7 @@
 	<body>
 
 		<script type="module">
-			import {
-				BoxBufferGeometry,
-				Color,
-				Mesh,
-				MeshNormalMaterial,
-				PerspectiveCamera,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+			import * as THREE from '../build/three.module.js';
 
 			import Stats from './jsm/libs/stats.module.js';
 
@@ -33,16 +25,16 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
 				camera.position.z = 500;
 
-				scene = new Scene();
-				scene.background = new Color( 0xffffff );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
 
-				var geometry = new BoxBufferGeometry( 100, 100, 100 );
-				var material = new MeshNormalMaterial();
+				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
+				var material = new THREE.MeshNormalMaterial();
 
-				root = new Mesh( geometry, material );
+				root = new THREE.Mesh( geometry, material );
 				root.position.x = 1000;
 				scene.add( root );
 
@@ -50,7 +42,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new Mesh( geometry, material );
+					object = new THREE.Mesh( geometry, material );
 					object.position.x = 100;
 
 					parent.add( object );
@@ -62,7 +54,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new Mesh( geometry, material );
+					object = new THREE.Mesh( geometry, material );
 					object.position.x = - 100;
 
 					parent.add( object );
@@ -74,7 +66,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new Mesh( geometry, material );
+					object = new THREE.Mesh( geometry, material );
 					object.position.y = - 100;
 
 					parent.add( object );
@@ -86,7 +78,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new Mesh( geometry, material );
+					object = new THREE.Mesh( geometry, material );
 					object.position.y = 100;
 
 					parent.add( object );
@@ -98,7 +90,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new Mesh( geometry, material );
+					object = new THREE.Mesh( geometry, material );
 					object.position.z = - 100;
 
 					parent.add( object );
@@ -110,7 +102,7 @@
 
 				for ( var i = 0; i < amount; i ++ ) {
 
-					object = new Mesh( geometry, material );
+					object = new THREE.Mesh( geometry, material );
 					object.position.z = 100;
 
 					parent.add( object );
@@ -120,7 +112,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );