Acasă Explorează Ajutor
Autentificare
javascript
/
three.js
oglindă de https://github.com/tazdij/three.js.git
2
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Răsfoiți Sursa

Merge pull request #16806 from Mugen87/dev34

Examples: More module examples.
Michael Herzog 6 ani în urmă
părinte
37556beb96 670b523678
comite
dbcfa727f8
41 a modificat fișierele cu 2457 adăugiri și 2145 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 0 1
      examples/jsm/libs/dat.gui.module.js
  2. 122 111
      examples/webaudio_orientation.html
  3. 47 38
      examples/webaudio_sandbox.html
  4. 122 117
      examples/webaudio_timing.html
  5. 68 64
      examples/webaudio_visualizer.html
  6. 69 56
      examples/webgl_animation_cloth.html
  7. 31 22
      examples/webgl_animation_keyframes.html
  8. 38 29
      examples/webgl_animation_multiple.html
  9. 35 28
      examples/webgl_animation_skinning_blending.html
  10. 48 40
      examples/webgl_animation_skinning_morph.html
  11. 40 33
      examples/webgl_buffergeometry.html
  12. 134 123
      examples/webgl_buffergeometry_constructed_from_geometry.html
  13. 84 82
      examples/webgl_buffergeometry_custom_attributes_particles.html
  14. 45 27
      examples/webgl_buffergeometry_drawcalls.html
  15. 31 27
      examples/webgl_buffergeometry_indexed.html
  16. 30 26
      examples/webgl_buffergeometry_instancing.html
  17. 32 27
      examples/webgl_buffergeometry_instancing2.html
  18. 25 22
      examples/webgl_buffergeometry_instancing_billboards.html
  19. 33 28
      examples/webgl_buffergeometry_instancing_dynamic.html
  20. 193 186
      examples/webgl_buffergeometry_instancing_interleaved_dynamic.html
  21. 67 51
      examples/webgl_buffergeometry_instancing_lambert.html
  22. 21 21
      examples/webgl_buffergeometry_lines.html
  23. 42 38
      examples/webgl_buffergeometry_lines_indexed.html
  24. 32 29
      examples/webgl_buffergeometry_morphtargets.html
  25. 26 23
      examples/webgl_buffergeometry_points.html
  26. 29 25
      examples/webgl_buffergeometry_points_interleaved.html
  27. 25 22
      examples/webgl_buffergeometry_rawshader.html
  28. 119 110
      examples/webgl_buffergeometry_selective_draw.html
  29. 42 33
      examples/webgl_buffergeometry_uint.html
  30. 42 27
      examples/webgl_camera.html
  31. 28 16
      examples/webgl_camera_array.html
  32. 33 23
      examples/webgl_camera_cinematic.html
  33. 32 18
      examples/webgl_camera_logarithmicdepthbuffer.html
  34. 38 23
      examples/webgl_clipping.html
  35. 58 40
      examples/webgl_clipping_advanced.html
  36. 40 25
      examples/webgl_clipping_intersection.html
  37. 80 77
      examples/webgl_custom_attributes.html
  38. 98 96
      examples/webgl_custom_attributes_lines.html
  39. 95 92
      examples/webgl_custom_attributes_points.html
  40. 138 131
      examples/webgl_custom_attributes_points2.html
  41. 145 138
      examples/webgl_custom_attributes_points3.html

+ 0 - 1
examples/jsm/libs/dat.gui.module.js
Vizualizați fișierul 

@@ -3572,4 +3572,3 @@ var index = {
 
 
 export { color, controllers, dom$1 as dom, gui, GUI$1 as GUI };
 
 export default index;
 
-//# sourceMappingURL=dat.gui.module.js.map

+ 122 - 111
examples/webaudio_orientation.html
Vizualizați fișierul 

@@ -39,12 +39,6 @@
 
 					font-size: 12px;
 
 				}
 
 		</style>
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
 	</head>
 
 <body>
 
 
@@ -65,162 +59,179 @@
 
 		music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener noreferrer">skullbeatz</a>
 
 	</div>
 
 
-	<script>
 
+	<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";
 
 
-	if ( WEBGL.isWebGLAvailable() === false ) {
 
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+		import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
-		document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+		var scene, camera, renderer;
 
 
-	}
 
+		var startButton = document.getElementById( 'startButton' );
 
+		startButton.addEventListener( 'click', init );
 
 
-	var scene, camera, renderer;
 
+		function init() {
 
 
-	var startButton = document.getElementById( 'startButton' );
 
-	startButton.addEventListener( 'click', init );
 
+			var overlay = document.getElementById( 'overlay' );
 
+			overlay.remove();
 
 
-	function init() {
 
+			var container = document.getElementById( 'container' );
 
 
-		var overlay = document.getElementById( 'overlay' );
 
-		overlay.remove();
 
+			//
 
 
-		var container = document.getElementById( 'container' );
 
+			camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+			camera.position.set( 3, 2, 3 );
 
 
-		//
 
+			var reflectionCube = new CubeTextureLoader()
 
+				.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
+				.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
+			reflectionCube.format = RGBFormat;
 
 
-		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 
-		camera.position.set( 3, 2, 3 );
 
+			scene = new Scene();
 
+			scene.background = new Color( 0xa0a0a0 );
 
+			scene.fog = new Fog( 0xa0a0a0, 2, 20 );
 
 
-		var reflectionCube = new THREE.CubeTextureLoader()
 
-			.setPath( 'textures/cube/SwedishRoyalCastle/' )
 
-			.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-		reflectionCube.format = THREE.RGBFormat;
 
+			//
 
 
-		scene = new THREE.Scene();
 
-		scene.background = new THREE.Color( 0xa0a0a0 );
 
-		scene.fog = new THREE.Fog( 0xa0a0a0, 2, 20 );
 
+			var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 
+			hemiLight.position.set( 0, 20, 0 );
 
+			scene.add( hemiLight );
 
 
-		//
 
+			var dirLight = new DirectionalLight( 0xffffff );
 
+			dirLight.position.set( 5, 5, 0 );
 
+			dirLight.castShadow = true;
 
+			dirLight.shadow.camera.top = 1;
 
+			dirLight.shadow.camera.bottom = - 1;
 
+			dirLight.shadow.camera.left = - 1;
 
+			dirLight.shadow.camera.right = 1;
 
+			dirLight.shadow.camera.near = 0.1;
 
+			dirLight.shadow.camera.far = 20;
 
+			scene.add( dirLight );
 
 
-		var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
-		hemiLight.position.set( 0, 20, 0 );
 
-		scene.add( hemiLight );
 
+			// scene.add( new CameraHelper( dirLight.shadow.camera ) );
 
 
-		var dirLight = new THREE.DirectionalLight( 0xffffff );
 
-		dirLight.position.set( 5, 5, 0 );
 
-		dirLight.castShadow = true;
 
-		dirLight.shadow.camera.top = 1;
 
-		dirLight.shadow.camera.bottom = - 1;
 
-		dirLight.shadow.camera.left = - 1;
 
-		dirLight.shadow.camera.right = 1;
 
-		dirLight.shadow.camera.near = 0.1;
 
-		dirLight.shadow.camera.far = 20;
 
-		scene.add( dirLight );
 
+			//
 
 
-		// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
 
+			var mesh = new Mesh( new PlaneBufferGeometry( 50, 50 ), new 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 );
 
+			scene.add( grid );
 
 
-		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 THREE.GridHelper( 50, 50, 0x888888, 0x888888 );
 
-		scene.add( grid );
 
+			var listener = new _AudioListener();
 
+			camera.add( listener );
 
 
-		//
 
+			var audioElement = document.getElementById( 'music' );
 
+			audioElement.play();
 
 
-		var listener = new THREE.AudioListener();
 
-		camera.add( listener );
 
+			var positionalAudio = new PositionalAudio( listener );
 
+			positionalAudio.setMediaElementSource( audioElement );
 
+			positionalAudio.setRefDistance( 1 );
 
+			positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
 
-		var audioElement = document.getElementById( 'music' );
 
-		audioElement.play();
 
+			var helper = new PositionalAudioHelper( positionalAudio, 0.1 );
 
+			positionalAudio.add( helper );
 
 
-		var positionalAudio = new THREE.PositionalAudio( listener );
 
-		positionalAudio.setMediaElementSource( audioElement );
 
-		positionalAudio.setRefDistance( 1 );
 
-		positionalAudio.setDirectionalCone( 180, 230, 0.1 );
 
+			//
 
 
-		var helper = new THREE.PositionalAudioHelper( positionalAudio, 0.1 );
 
-		positionalAudio.add( helper );
 
+			var gltfLoader = new GLTFLoader();
 
+			gltfLoader.load( 'models/gltf/BoomBox/glTF-Binary/BoomBox.glb', function ( gltf ) {
 
 
-		//
 
+				var boomBox = gltf.scene;
 
+				boomBox.position.set( 0, 0.2, 0 );
 
+				boomBox.scale.set( 20, 20, 20 );
 
 
-		var gltfLoader = new THREE.GLTFLoader();
 
-		gltfLoader.load( 'models/gltf/BoomBox/glTF-Binary/BoomBox.glb', function ( gltf ) {
 
+				boomBox.traverse( function ( object ) {
 
 
-			var boomBox = gltf.scene;
 
-			boomBox.position.set( 0, 0.2, 0 );
 
-			boomBox.scale.set( 20, 20, 20 );
 
+					if ( object.isMesh ) {
 
 
-			boomBox.traverse( function ( object ) {
 
+						object.material.envMap = reflectionCube;
 
+						object.geometry.rotateY( - Math.PI );
 
+						object.castShadow = true;
 
 
-				if ( object.isMesh ) {
 
+					}
 
 
-					object.material.envMap = reflectionCube;
 
-					object.geometry.rotateY( - Math.PI );
 
-					object.castShadow = true;
 
+				} );
 
 
-				}
 
+				boomBox.add( positionalAudio );
 
+				scene.add( boomBox );
 
+				animate();
 
 
 			} );
 
 
-			boomBox.add( positionalAudio );
 
-			scene.add( boomBox );
 
-			animate();
 
-
 
-		} );
 
-
 
-		// sound is damped behind this wall
 
+			// sound is damped behind this wall
 
 
-		var wallGeometry = new THREE.BoxBufferGeometry( 2, 1, 0.1 );
 
-		var wallMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
 
+			var wallGeometry = new BoxBufferGeometry( 2, 1, 0.1 );
 
+			var wallMaterial = new MeshBasicMaterial( { color: 0xff0000, transparent: true, opacity: 0.5 } );
 
 
-		var wall = new THREE.Mesh( wallGeometry, wallMaterial );
 
-		wall.position.set( 0, 0.5, - 0.5 );
 
-		scene.add( wall );
 
+			var wall = new Mesh( wallGeometry, wallMaterial );
 
+			wall.position.set( 0, 0.5, - 0.5 );
 
+			scene.add( wall );
 
 
 
-		//
 
+			//
 
 
-		renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
-		renderer.setPixelRatio( window.devicePixelRatio );
 
-		renderer.gammaOutput = true;
 
-		renderer.gammaFactor = 2.2;
 
-		renderer.shadowMap.enabled = true;
 
-		container.appendChild( renderer.domElement );
 
+			renderer = new WebGLRenderer( { antialias: true } );
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			renderer.gammaOutput = true;
 
+			renderer.gammaFactor = 2.2;
 
+			renderer.shadowMap.enabled = true;
 
+			container.appendChild( renderer.domElement );
 
 
-		//
 
+			//
 
 
-		var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-		controls.target.set( 0, 0.1, 0 );
 
-		controls.update();
 
-		controls.minDistance = 0.5;
 
-		controls.maxDistance = 10;
 
-		controls.maxPolarAngle = 0.5 * Math.PI;
 
+			var controls = new OrbitControls( camera, renderer.domElement );
 
+			controls.target.set( 0, 0.1, 0 );
 
+			controls.update();
 
+			controls.minDistance = 0.5;
 
+			controls.maxDistance = 10;
 
+			controls.maxPolarAngle = 0.5 * Math.PI;
 
 
-		//
 
+			//
 
 
-		window.addEventListener( 'resize', onWindowResize, false );
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
 
-	}
 
+		}
 
 
-	function onWindowResize() {
 
+		function onWindowResize() {
 
 
-		camera.aspect = window.innerWidth / window.innerHeight;
 
-		camera.updateProjectionMatrix();
 
+			camera.aspect = window.innerWidth / window.innerHeight;
 
+			camera.updateProjectionMatrix();
 
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-	}
 
+		}
 
 
-	function animate() {
 
+		function animate() {
 
 
-		requestAnimationFrame( animate );
 
-		renderer.render( scene, camera );
 
+			requestAnimationFrame( animate );
 
+			renderer.render( scene, camera );
 
 
-	}
 
+		}
 
 
 	</script>

+ 47 - 38
examples/webaudio_sandbox.html
Vizualizați fișierul 

@@ -56,19 +56,28 @@
 
 			navigate with WASD / arrows / mouse
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/FirstPersonControls.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				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 { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
 
 			var camera, controls, scene, renderer, light;
 
 
@@ -76,7 +85,7 @@
 
 
 			var analyser1, analyser2, analyser3;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 
 			var startButton = document.getElementById( 'startButton' );
 
 			startButton.addEventListener( 'click', init );
 
@@ -86,34 +95,34 @@
 
 				var overlay = document.getElementById( 'overlay' );
 
 				overlay.remove();
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.set( 0, 25, 0 );
 
 
-				var listener = new THREE.AudioListener();
 
+				var listener = new _AudioListener();
 
 				camera.add( listener );
 
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.FogExp2( 0x000000, 0.0025 );
 
+				scene = new Scene();
 
+				scene.fog = new FogExp2( 0x000000, 0.0025 );
 
 
-				light = new THREE.DirectionalLight( 0xffffff );
 
+				light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 0.5, 1 ).normalize();
 
 				scene.add( light );
 
 
-				var sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
 
+				var sphere = new SphereBufferGeometry( 20, 32, 16 );
 
 
-				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 } );
 
+				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 } );
 
 
 				// sound spheres
 
 
-				var audioLoader = new THREE.AudioLoader();
 
+				var audioLoader = new AudioLoader();
 
 
-				var mesh1 = new THREE.Mesh( sphere, material1 );
 
+				var mesh1 = new Mesh( sphere, material1 );
 
 				mesh1.position.set( - 250, 30, 0 );
 
 				scene.add( mesh1 );
 
 
-				var sound1 = new THREE.PositionalAudio( listener );
 
+				var sound1 = new PositionalAudio( listener );
 
 				audioLoader.load( 'sounds/358232_j_s_song.ogg', function ( buffer ) {
 
 
 					sound1.setBuffer( buffer );
 
@@ -125,11 +134,11 @@
 
 
 				//
 
 
-				var mesh2 = new THREE.Mesh( sphere, material2 );
 
+				var mesh2 = new Mesh( sphere, material2 );
 
 				mesh2.position.set( 250, 30, 0 );
 
 				scene.add( mesh2 );
 
 
-				var sound2 = new THREE.PositionalAudio( listener );
 
+				var sound2 = new PositionalAudio( listener );
 
 				audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.ogg', function ( buffer ) {
 
 
 					sound2.setBuffer( buffer );
 
@@ -141,11 +150,11 @@
 
 
 				//
 
 
-				var mesh3 = new THREE.Mesh( sphere, material3 );
 
+				var mesh3 = new Mesh( sphere, material3 );
 
 				mesh3.position.set( 0, 30, - 250 );
 
 				scene.add( mesh3 );
 
 
-				var sound3 = new THREE.PositionalAudio( listener );
 
+				var sound3 = new PositionalAudio( listener );
 
 				var oscillator = listener.context.createOscillator();
 
 				oscillator.type = 'sine';
 
 				oscillator.frequency.setValueAtTime( 144, sound3.context.currentTime );
 
@@ -157,13 +166,13 @@
 
 
 				// analysers
 
 
-				analyser1 = new THREE.AudioAnalyser( sound1, 32 );
 
-				analyser2 = new THREE.AudioAnalyser( sound2, 32 );
 
-				analyser3 = new THREE.AudioAnalyser( sound3, 32 );
 
+				analyser1 = new AudioAnalyser( sound1, 32 );
 
+				analyser2 = new AudioAnalyser( sound2, 32 );
 
+				analyser3 = new AudioAnalyser( sound3, 32 );
 
 
 				// global ambient audio
 
 
-				var sound4 = new THREE.Audio( listener );
 
+				var sound4 = new _Audio( listener );
 
 				audioLoader.load( 'sounds/Project_Utopia.ogg', function ( buffer ) {
 
 
 					sound4.setBuffer( buffer );
 
@@ -175,7 +184,7 @@
 
 
 				// ground
 
 
-				var helper = new THREE.GridHelper( 1000, 10, 0x444444, 0x444444 );
 
+				var helper = new GridHelper( 1000, 10, 0x444444, 0x444444 );
 
 				helper.position.y = 0.1;
 
 				scene.add( helper );
 
 
@@ -198,7 +207,7 @@
 
 
 				};
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 				var soundControls = new SoundControls();
 
 				var generatorControls = new GeneratorControls();
 
 				var volumeFolder = gui.addFolder( 'sound volume' );
 
@@ -246,14 +255,14 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
 
 				//
 
 
-				controls = new THREE.FirstPersonControls( camera, renderer.domElement );
 
+				controls = new FirstPersonControls( camera, renderer.domElement );
 
 
 				controls.movementSpeed = 70;
 
 				controls.lookSpeed = 0.05;

+ 122 - 117
examples/webaudio_timing.html
Vizualizați fișierul 

@@ -40,11 +40,6 @@
 
 					font-size: 12px;
 
 				}
 
 		</style>
 
-
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-
 
 	</head>
 
 <body>
 
 
@@ -60,188 +55,198 @@
 
 		sound effect by <a href="https://freesound.org/people/michorvath/sounds/269718/" target="_blank" rel="noopener noreferrer">michorvath</a>
 
 	</div>
 
 
-	<script>
 
+	<script type="module">
 
+		import {
 
+			AmbientLight,
 
+			AudioListener as _AudioListener,
 
+			AudioLoader,
 
+			DirectionalLight,
 
+			Mesh,
 
+			MeshLambertMaterial,
 
+			PerspectiveCamera,
 
+			PlaneBufferGeometry,
 
+			PositionalAudio,
 
+			SphereBufferGeometry,
 
+			Scene,
 
+			WebGLRenderer
 
+		} from "../build/three.module.js";
 
 
-	if ( WEBGL.isWebGLAvailable() === false ) {
 
+		import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
-		document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+		var scene, camera, renderer;
 
 
-	}
 
+		var objects = [];
 
 
-	var scene, camera, renderer;
 
+		var startButton = document.getElementById( 'startButton' );
 
+		startButton.addEventListener( 'click', init );
 
 
-	var objects = [];
 
+		function init() {
 
 
-	var startButton = document.getElementById( 'startButton' );
 
-	startButton.addEventListener( 'click', init );
 
+			var overlay = document.getElementById( 'overlay' );
 
+			overlay.remove();
 
 
-	function init() {
 
+			var container = document.getElementById( 'container' );
 
 
-		var overlay = document.getElementById( 'overlay' );
 
-		overlay.remove();
 
+			scene = new Scene();
 
 
-		var container = document.getElementById( 'container' );
 
+			//
 
 
-		scene = new THREE.Scene();
 
+			camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+			camera.position.set( 7, 3, 7 );
 
 
-		//
 
+			// lights
 
 
-		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
 
-		camera.position.set( 7, 3, 7 );
 
+			var ambientLight = new AmbientLight( 0xcccccc, 0.4 );
 
+			scene.add( ambientLight );
 
 
-		// lights
 
+			var directionalLight = new DirectionalLight( 0xffffff, 0.7 );
 
+			directionalLight.position.set( 0, 5, 5 );
 
+			scene.add( directionalLight );
 
 
-		var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
 
-		scene.add( ambientLight );
 
+			var d = 5;
 
+			directionalLight.castShadow = true;
 
+			directionalLight.shadow.camera.left = - d;
 
+			directionalLight.shadow.camera.right = d;
 
+			directionalLight.shadow.camera.top = d;
 
+			directionalLight.shadow.camera.bottom = - d;
 
 
-		var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
 
-		directionalLight.position.set( 0, 5, 5 );
 
-		scene.add( directionalLight );
 
+			directionalLight.shadow.camera.near = 1;
 
+			directionalLight.shadow.camera.far = 20;
 
 
-		var d = 5;
 
-		directionalLight.castShadow = true;
 
-		directionalLight.shadow.camera.left = - d;
 
-		directionalLight.shadow.camera.right = d;
 
-		directionalLight.shadow.camera.top = d;
 
-		directionalLight.shadow.camera.bottom = - d;
 
+			directionalLight.shadow.mapSize.x = 1024;
 
+			directionalLight.shadow.mapSize.y = 1024;
 
 
-		directionalLight.shadow.camera.near = 1;
 
-		directionalLight.shadow.camera.far = 20;
 
+			// audio
 
 
-		directionalLight.shadow.mapSize.x = 1024;
 
-		directionalLight.shadow.mapSize.y = 1024;
 
+			var audioLoader = new AudioLoader();
 
 
-		// audio
 
+			var listener = new _AudioListener();
 
+			camera.add( listener );
 
 
-		var audioLoader = new THREE.AudioLoader();
 
+			// floor
 
 
-		var listener = new THREE.AudioListener();
 
-		camera.add( listener );
 
+			var floorGeometry = new PlaneBufferGeometry( 10, 10 );
 
+			var floorMaterial = new MeshLambertMaterial( { color: 0x4676b6 } );
 
 
-		// floor
 
+			var floor = new Mesh( floorGeometry, floorMaterial );
 
+			floor.rotation.x = Math.PI * - 0.5;
 
+			floor.receiveShadow = true;
 
+			scene.add( floor );
 
 
-		var floorGeometry = new THREE.PlaneBufferGeometry( 10, 10 );
 
-		var floorMaterial = new THREE.MeshLambertMaterial( { color: 0x4676b6 } );
 
+			// objects
 
 
-		var floor = new THREE.Mesh( floorGeometry, floorMaterial );
 
-		floor.rotation.x = Math.PI * - 0.5;
 
-		floor.receiveShadow = true;
 
-		scene.add( floor );
 
+			var count = 5;
 
+			var radius = 3;
 
 
-		// objects
 
+			var ballGeometry = new SphereBufferGeometry( 0.3, 32, 16 );
 
+			ballGeometry.translate( 0, 0.3, 0 );
 
+			var ballMaterial = new MeshLambertMaterial( { color: 0xcccccc } );
 
 
-		var count = 5;
 
-		var radius = 3;
 
+			// create objects when audio buffer is loaded
 
 
-		var ballGeometry = new THREE.SphereBufferGeometry( 0.3, 32, 16 );
 
-		ballGeometry.translate( 0, 0.3, 0 );
 
-		var ballMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );
 
+			audioLoader.load( 'sounds/ping_pong.mp3', function ( buffer ) {
 
 
-		// create objects when audio buffer is loaded
 
+				for ( var i = 0; i < count; i ++ ) {
 
 
-		audioLoader.load( 'sounds/ping_pong.mp3', function ( buffer ) {
 
+					var s = i / count * Math.PI * 2;
 
 
-			for ( var i = 0; i < count; i ++ ) {
 
-
 
-				var s = i / count * Math.PI * 2;
 
+					var ball = new Mesh( ballGeometry, ballMaterial );
 
+					ball.castShadow = true;
 
+					ball.userData.down = false;
 
 
-				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 );
 
 
-				ball.position.x = radius * Math.cos( s );
 
-				ball.position.z = radius * Math.sin( s );
 
+					var audio = new PositionalAudio( listener );
 
+					audio.setBuffer( buffer );
 
+					ball.add( audio );
 
 
-				var audio = new THREE.PositionalAudio( listener );
 
-				audio.setBuffer( buffer );
 
-				ball.add( audio );
 
+					scene.add( ball );
 
+					objects.push( ball );
 
 
-				scene.add( ball );
 
-				objects.push( ball );
 
+				}
 
 
-			}
 
+				animate();
 
 
-			animate();
 
+			} );
 
 
-		} );
 
+			//
 
 
-		//
 
+			renderer = new WebGLRenderer( { antialias: true } );
 
+			renderer.shadowMap.enabled = true;
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			renderer.setClearColor( 0x000000 );
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			container.appendChild( renderer.domElement );
 
 
-		renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-		renderer.shadowMap.enabled = true;
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
-		renderer.setClearColor( 0x000000 );
 
-		renderer.setPixelRatio( window.devicePixelRatio );
 
-		container.appendChild( renderer.domElement );
 
+			//
 
 
-		//
 
+			var controls = new OrbitControls( camera, renderer.domElement );
 
+			controls.minDistance = 1;
 
+			controls.maxDistance = 25;
 
 
-		var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
-		controls.minDistance = 1;
 
-		controls.maxDistance = 25;
 
+			//
 
 
-		//
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
 
-		window.addEventListener( 'resize', onWindowResize, false );
 
+		}
 
 
-	}
 
+		function onWindowResize() {
 
 
-	function onWindowResize() {
 
+			camera.aspect = window.innerWidth / window.innerHeight;
 
+			camera.updateProjectionMatrix();
 
 
-		camera.aspect = window.innerWidth / window.innerHeight;
 
-		camera.updateProjectionMatrix();
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
+		}
 
 
-	}
 
+		function animate() {
 
 
-	function animate() {
 
+			requestAnimationFrame( animate );
 
 
-		requestAnimationFrame( animate );
 
+			render();
 
 
-		render();
 
+		}
 
 
-	}
 
+		var speed = 1.7;
 
+		var height = 3;
 
+		var offset = 0.5;
 
+		var time = 0;
 
 
-	var speed = 1.7;
 
-	var height = 3;
 
-	var offset = 0.5;
 
-	var time = 0;
 
+		function render() {
 
 
-	function render() {
 
+			time += 0.02;
 
 
-		time += 0.02;
 
+			for ( var i = 0; i < objects.length; i ++ ) {
 
 
-		for ( var i = 0; i < objects.length; i ++ ) {
 
+				var ball = objects[ i ];
 
 
-			var ball = objects[ i ];
 
+				var previousHeight = ball.position.y;
 
+				ball.position.y = Math.abs( Math.sin( i * offset + ( time * speed ) ) * height );
 
 
-			var previousHeight = ball.position.y;
 
-			ball.position.y = Math.abs( Math.sin( i * offset + ( time * speed ) ) * height );
 
+				if ( ball.position.y < previousHeight ) {
 
 
-			if ( ball.position.y < previousHeight ) {
 
+					ball.userData.down = true;
 
 
-				ball.userData.down = true;
 
+				} else {
 
 
-			} else {
 
+					if ( ball.userData.down === true ) {
 
 
-				if ( ball.userData.down === true ) {
 
+						// ball changed direction from down to up
 
 
-					// ball changed direction from down to up
 
+						var audio = ball.children[ 0 ];
 
+						audio.play(); // play audio with perfect timing when ball hits the surface
 
+						ball.userData.down = false;
 
 
-					var audio = ball.children[ 0 ];
 
-					audio.play(); // play audio with perfect timing when ball hits the surface
 
-					ball.userData.down = false;
 
+					}
 
 
 				}
 
 
 			}
 
 
-		}
 
-
 
-		renderer.render( scene, camera );
 
+			renderer.render( scene, camera );
 
 
-	}
 
+		}
 
 
 	</script>

+ 68 - 64
examples/webaudio_visualizer.html
Vizualizați fișierul 

@@ -41,9 +41,6 @@
 
 				}
 
 		</style>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-
 
 		<script id="vertexShader" type="x-shader/x-vertex">
 
 
 			varying vec2 vUv;
 
@@ -92,110 +89,117 @@
 
 			music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>
 
 		</div>
 
 
-	<script>
 
-
 
-	if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-		document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+		<script type="module">
 
+			import {
 
+				Audio as _Audio,
 
+				AudioAnalyser,
 
+				AudioListener as _AudioListener,
 
+				Camera,
 
+				DataTexture,
 
+				LuminanceFormat,
 
+				Mesh,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				ShaderMaterial,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-	}
 
+			var scene, camera, renderer, analyser, uniforms;
 
 
-	var scene, camera, renderer, analyser, uniforms;
 
+			var startButton = document.getElementById( 'startButton' );
 
+			startButton.addEventListener( 'click', init );
 
 
-	var startButton = document.getElementById( 'startButton' );
 
-	startButton.addEventListener( 'click', init );
 
+			function init() {
 
 
-	function init() {
 
+				var fftSize = 128;
 
 
-		var fftSize = 128;
 
+				//
 
 
-		//
 
+				var overlay = document.getElementById( 'overlay' );
 
+				overlay.remove();
 
 
-		var overlay = document.getElementById( 'overlay' );
 
-		overlay.remove();
 
+				//
 
 
-		//
 
+				var container = document.getElementById( 'container' );
 
 
-		var container = document.getElementById( 'container' );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setClearColor( 0x000000 );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				container.appendChild( renderer.domElement );
 
 
-		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;
 
+				mediaElement.play();
 
 
-		var mediaElement = new Audio( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3' );
 
-		mediaElement.loop = true;
 
-		mediaElement.play();
 
+				audio.setMediaElementSource( mediaElement );
 
 
-		audio.setMediaElementSource( mediaElement );
 
+				analyser = new AudioAnalyser( audio, fftSize );
 
 
-		analyser = new THREE.AudioAnalyser( audio, fftSize );
 
+				//
 
 
-		//
 
+				uniforms = {
 
 
-		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,
 
+					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
 
-			uniforms: uniforms,
 
-			vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
-			fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
+				} );
 
 
-		} );
 
+				var geometry = new PlaneBufferGeometry( 1, 1 );
 
 
-		var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
 
+				var mesh = new Mesh( geometry, material );
 
+				scene.add( mesh );
 
 
-		var mesh = new THREE.Mesh( geometry, material );
 
-		scene.add( mesh );
 
+				//
 
 
-		//
 
+				window.addEventListener( 'resize', onResize, false );
 
 
-		window.addEventListener( 'resize', onResize, false );
 
+				animate();
 
 
-		animate();
 
-
 
-	}
 
+			}
 
 
-	function onResize() {
 
+			function onResize() {
 
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-	}
 
+			}
 
 
-	function animate() {
 
+			function animate() {
 
 
-		requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-		render();
 
+				render();
 
 
-	}
 
+			}
 
 
-	function render() {
 
+			function render() {
 
 
-		analyser.getFrequencyData();
 
+				analyser.getFrequencyData();
 
 
-		uniforms.tAudioData.value.needsUpdate = true;
 
+				uniforms.tAudioData.value.needsUpdate = true;
 
 
-		renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-	}
 
+			}
 
 
-	</script>
 
+		</script>
 
 
 	</body>
 
 </html>

+ 69 - 56
examples/webgl_animation_cloth.html
Vizualizați fișierul 

@@ -21,14 +21,33 @@
 
 			Verlet integration with relaxed constraints<br/>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BoxBufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				DoubleSide,
 
+				Fog,
 
+				Mesh,
 
+				MeshDepthMaterial,
 
+				MeshLambertMaterial,
 
+				ParametricBufferGeometry,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				RepeatWrapping,
 
+				RGBADepthPacking,
 
+				SphereBufferGeometry,
 
+				Scene,
 
+				TextureLoader,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			/*
 
 			 * Cloth Simulation using a relaxed constraints solver
 
@@ -61,7 +80,7 @@
 
 			var cloth = new Cloth( xSegs, ySegs );
 
 
 			var GRAVITY = 981 * 1.4;
 
-			var gravity = new THREE.Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
 
+			var gravity = new Vector3( 0, - GRAVITY, 0 ).multiplyScalar( MASS );
 
 
 
 			var TIMESTEP = 18 / 1000;
 
@@ -69,12 +88,12 @@
 
 
 			var pins = [];
 
 
-			var windForce = new THREE.Vector3( 0, 0, 0 );
 
+			var windForce = new Vector3( 0, 0, 0 );
 
 
-			var ballPosition = new THREE.Vector3( 0, - 45, 0 );
 
+			var ballPosition = new Vector3( 0, - 45, 0 );
 
 			var ballSize = 60; //40
 
 
-			var tmpForce = new THREE.Vector3();
 
+			var tmpForce = new Vector3();
 
 
 			var lastTime;
 
 
@@ -95,14 +114,14 @@
 
 
 			function Particle( x, y, z, mass ) {
 
 
-				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.position = new Vector3();
 
+				this.previous = new Vector3();
 
+				this.original = new Vector3();
 
+				this.a = new Vector3( 0, 0, 0 ); // acceleration
 
 				this.mass = mass;
 
 				this.invMass = 1 / mass;
 
-				this.tmp = new THREE.Vector3();
 
-				this.tmp2 = new THREE.Vector3();
 
+				this.tmp = new Vector3();
 
+				this.tmp2 = new Vector3();
 
 
 				// init
 
 
@@ -140,7 +159,7 @@
 
 			};
 
 
 
-			var diff = new THREE.Vector3();
 
+			var diff = new Vector3();
 
 
 			function satisfyConstraints( p1, p2, distance ) {
 
 
@@ -279,7 +298,7 @@
 
 				if ( params.enableWind ) {
 
 
 					var indx;
 
-					var normal = new THREE.Vector3();
 
+					var normal = new Vector3();
 
 					var indices = clothGeometry.index;
 
 					var normals = clothGeometry.attributes.normal;
 
 
@@ -407,12 +426,6 @@
 
 
 			}
 
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
-
 
 			var container, stats;
 
 			var camera, scene, renderer;
 
 
@@ -430,20 +443,20 @@
 
 
 				// scene
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xcce0ff );
 
-				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xcce0ff );
 
+				scene.fog = new Fog( 0xcce0ff, 500, 10000 );
 
 
 				// camera
 
 
-				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.set( 1000, 50, 1500 );
 
 
 				// lights
 
 
-				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
+				scene.add( new AmbientLight( 0x666666 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xdfebff, 1 );
 
+				var light = new DirectionalLight( 0xdfebff, 1 );
 
 				light.position.set( 50, 200, 100 );
 
 				light.position.multiplyScalar( 1.3 );
 
 
@@ -465,39 +478,39 @@
 
 
 				// cloth material
 
 
-				var loader = new THREE.TextureLoader();
 
+				var loader = new TextureLoader();
 
 				var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
 
 				clothTexture.anisotropy = 16;
 
 
-				var clothMaterial = new THREE.MeshLambertMaterial( {
 
+				var clothMaterial = new MeshLambertMaterial( {
 
 					map: clothTexture,
 
-					side: THREE.DoubleSide,
 
+					side: DoubleSide,
 
 					alphaTest: 0.5
 
 				} );
 
 
 				// cloth geometry
 
 
-				clothGeometry = new THREE.ParametricBufferGeometry( clothFunction, cloth.w, cloth.h );
 
+				clothGeometry = new ParametricBufferGeometry( clothFunction, cloth.w, cloth.h );
 
 
 				// cloth mesh
 
 
-				object = new THREE.Mesh( clothGeometry, clothMaterial );
 
+				object = new Mesh( clothGeometry, clothMaterial );
 
 				object.position.set( 0, 0, 0 );
 
 				object.castShadow = true;
 
 				scene.add( object );
 
 
-				object.customDepthMaterial = new THREE.MeshDepthMaterial( {
 
-					depthPacking: THREE.RGBADepthPacking,
 
+				object.customDepthMaterial = new MeshDepthMaterial( {
 
+					depthPacking: RGBADepthPacking,
 
 					map: clothTexture,
 
 					alphaTest: 0.5
 
 				} );
 
 
 				// sphere
 
 
-				var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
 
-				var ballMaterial = new THREE.MeshLambertMaterial();
 
+				var ballGeo = new SphereBufferGeometry( ballSize, 32, 16 );
 
+				var ballMaterial = new MeshLambertMaterial();
 
 
-				sphere = new THREE.Mesh( ballGeo, ballMaterial );
 
+				sphere = new Mesh( ballGeo, ballMaterial );
 
 				sphere.castShadow = true;
 
 				sphere.receiveShadow = true;
 
 				sphere.visible = false;
 
@@ -506,13 +519,13 @@
 
 				// ground
 
 
 				var groundTexture = loader.load( 'textures/terrain/grasslight-big.jpg' );
 
-				groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
 
+				groundTexture.wrapS = groundTexture.wrapT = RepeatWrapping;
 
 				groundTexture.repeat.set( 25, 25 );
 
 				groundTexture.anisotropy = 16;
 
 
-				var groundMaterial = new THREE.MeshLambertMaterial( { map: groundTexture } );
 
+				var groundMaterial = new MeshLambertMaterial( { map: groundTexture } );
 
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
 
+				var mesh = new Mesh( new PlaneBufferGeometry( 20000, 20000 ), groundMaterial );
 
 				mesh.position.y = - 250;
 
 				mesh.rotation.x = - Math.PI / 2;
 
 				mesh.receiveShadow = true;
 
@@ -520,39 +533,39 @@
 
 
 				// poles
 
 
-				var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
 
-				var poleMat = new THREE.MeshLambertMaterial();
 
+				var poleGeo = new BoxBufferGeometry( 5, 375, 5 );
 
+				var poleMat = new MeshLambertMaterial();
 
 
-				var mesh = new THREE.Mesh( poleGeo, poleMat );
 
+				var mesh = new Mesh( poleGeo, poleMat );
 
 				mesh.position.x = - 125;
 
 				mesh.position.y = - 62;
 
 				mesh.receiveShadow = true;
 
 				mesh.castShadow = true;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( poleGeo, poleMat );
 
+				var mesh = new Mesh( poleGeo, poleMat );
 
 				mesh.position.x = 125;
 
 				mesh.position.y = - 62;
 
 				mesh.receiveShadow = true;
 
 				mesh.castShadow = true;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
 
+				var mesh = new Mesh( new 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 THREE.BoxBufferGeometry( 10, 10, 10 );
 
-				var mesh = new THREE.Mesh( gg, poleMat );
 
+				var gg = new BoxBufferGeometry( 10, 10, 10 );
 
+				var mesh = new Mesh( gg, poleMat );
 
 				mesh.position.y = - 250;
 
 				mesh.position.x = 125;
 
 				mesh.receiveShadow = true;
 
 				mesh.castShadow = true;
 
 				scene.add( mesh );
 
 
-				var mesh = new THREE.Mesh( gg, poleMat );
 
+				var mesh = new Mesh( gg, poleMat );
 
 				mesh.position.y = - 250;
 
 				mesh.position.x = - 125;
 
 				mesh.receiveShadow = true;
 
@@ -561,7 +574,7 @@
 
 
 				// renderer
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
@@ -573,7 +586,7 @@
 
 				renderer.shadowMap.enabled = true;
 
 
 				// controls
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.maxPolarAngle = Math.PI * 0.5;
 
 				controls.minDistance = 1000;
 
 				controls.maxDistance = 5000;
 
@@ -589,7 +602,7 @@
 
 
 				//
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 				gui.add( params, 'enableWind' );
 
 				gui.add( params, 'showBall' );
 
 				gui.add( params, 'tooglePins' );

+ 31 - 22
examples/webgl_animation_keyframes.html
Vizualizați fișierul 

@@ -27,61 +27,70 @@
 
 			<a href="https://www.artstation.com/glenatron" target="_blank" rel="noopener">Glen Fox</a>, CC Attribution.
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/loaders/DRACOLoader.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				AnimationMixer,
 
+				Clock,
 
+				Color,
 
+				CubeTextureLoader,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Scene,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
 
 			var scene, camera, pointLight, stats;
 
 			var renderer, mixer, controls;
 
 
-			var clock = new THREE.Clock();
 
+			var clock = new Clock();
 
 			var container = document.getElementById( 'container' );
 
 
 			stats = new Stats();
 
 			container.appendChild( stats.dom );
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+			renderer = new WebGLRenderer( { antialias: true } );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.gammaOutput = true;
 
 			renderer.gammaFactor = 2.2;
 
 			container.appendChild( renderer.domElement );
 
 
-			scene = new THREE.Scene();
 
-			scene.background = new THREE.Color( 0xbfe3dd );
 
+			scene = new Scene();
 
+			scene.background = new Color( 0xbfe3dd );
 
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 
+			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
 
 			camera.position.set( 5, 2, 8 );
 
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+			controls = new OrbitControls( camera, renderer.domElement );
 
 			controls.target.set( 0, 0.5, 0 );
 
 			controls.enablePan = false;
 
 
-			scene.add( new THREE.AmbientLight( 0x404040 ) );
 
+			scene.add( new AmbientLight( 0x404040 ) );
 
 
-			pointLight = new THREE.PointLight( 0xffffff, 1 );
 
+			pointLight = new PointLight( 0xffffff, 1 );
 
 			pointLight.position.copy( camera.position );
 
 			scene.add( pointLight );
 
 
 			// envmap
 
 			var path = 'textures/cube/Park2/';
 
 			var format = '.jpg';
 
-			var envMap = new THREE.CubeTextureLoader().load( [
 
+			var envMap = new CubeTextureLoader().load( [
 
 				path + 'posx' + format, path + 'negx' + format,
 
 				path + 'posy' + format, path + 'negy' + format,
 
 				path + 'posz' + format, path + 'negz' + format
 
 			] );
 
 
-			THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
+			DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
 
-			var loader = new THREE.GLTFLoader();
 
-			loader.setDRACOLoader( new THREE.DRACOLoader() );
 
+			var loader = new GLTFLoader();
 
+			loader.setDRACOLoader( new DRACOLoader() );
 
 			loader.load( 'models/gltf/LittlestTokyo.glb', function ( gltf ) {
 
 
 				var model = gltf.scene;
 
@@ -95,7 +104,7 @@
 
 
 				scene.add( model );
 
 
-				mixer = new THREE.AnimationMixer( model );
 
+				mixer = new AnimationMixer( model );
 
 				mixer.clipAction( gltf.animations[ 0 ] ).play();
 
 
 				animate();

+ 38 - 29
examples/webgl_animation_multiple.html
Vizualizați fișierul 

@@ -14,18 +14,26 @@
 
 			Soldier model from <a href="https://www.mixamo.com" target="_blank" rel="noopener">https://www.mixamo.com</a>.
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-		<script src="js/utils/SkeletonUtils.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AnimationClip,
 
+				AnimationMixer,
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				Fog,
 
+				HemisphereLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PCFSoftShadowMap,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
+			import { SkeletonUtils } from './jsm/utils/SkeletonUtils.js';
 
 
 			//////////////////////////////
 
 			// Global objects
 
@@ -33,6 +41,7 @@
 
 			var worldScene = null; // THREE.Scene where it all will be rendered
 
 			var renderer = null;
 
 			var camera = null;
 
+			var clock = null;
 
 			var mixers = []; // All the AnimationMixer objects for all the animations in the scene
 
 			//////////////////////////////
 
 
@@ -118,7 +127,7 @@
 
 
 					var m = MODELS[ i ];
 
 
-					loadGltfModel( m, function ( model ) {
 
+					loadGltfModel( m, function () {
 
 
 						++ numLoadedModels;
 
 
@@ -150,7 +159,7 @@
 
 
 					if ( model ) {
 
 
-						var clonedScene = THREE.SkeletonUtils.clone( model.scene );
 
+						var clonedScene = SkeletonUtils.clone( model.scene );
 
 
 						if ( clonedScene ) {
 
 
@@ -220,8 +229,8 @@
 
 			 */
 
 			function startAnimation( skinnedMesh, animations, animationName ) {
 
 
-				var mixer = new THREE.AnimationMixer( skinnedMesh );
 
-				var clip = THREE.AnimationClip.findByName( animations, animationName );
 
+				var mixer = new AnimationMixer( skinnedMesh );
 
+				var clip = AnimationClip.findByName( animations, animationName );
 
 
 				if ( clip ) {
 
 
@@ -262,7 +271,7 @@
 
 			 */
 
 			function loadGltfModel( model, onLoaded ) {
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 				var modelName = "models/gltf/" + model.name + ".glb";
 
 
 				loader.load( modelName, function ( gltf ) {
 
@@ -326,13 +335,13 @@
 
 			function initRenderer() {
 
 
 				var container = document.getElementById( 'container' );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaOutput = true;
 
 				renderer.gammaFactor = 2.2;
 
 				renderer.shadowMap.enabled = true;
 
-				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
+				renderer.shadowMap.type = PCFSoftShadowMap;
 
 				container.appendChild( renderer.domElement );
 
 
 			}
 
@@ -342,21 +351,21 @@
 
 			 */
 
 			function initScene() {
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.set( 3, 6, - 10 );
 
 				camera.lookAt( 0, 1, 0 );
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
-				worldScene = new THREE.Scene();
 
-				worldScene.background = new THREE.Color( 0xa0a0a0 );
 
-				worldScene.fog = new THREE.Fog( 0xa0a0a0, 10, 22 );
 
+				worldScene = new Scene();
 
+				worldScene.background = new Color( 0xa0a0a0 );
 
+				worldScene.fog = new Fog( 0xa0a0a0, 10, 22 );
 
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 
 				hemiLight.position.set( 0, 20, 0 );
 
 				worldScene.add( hemiLight );
 
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
 
+				var dirLight = new DirectionalLight( 0xffffff );
 
 				dirLight.position.set( - 3, 10, - 10 );
 
 				dirLight.castShadow = true;
 
 				dirLight.shadow.camera.top = 10;
 
@@ -368,9 +377,9 @@
 
 				worldScene.add( dirLight );
 
 
 				// ground
 
-				var groundMesh = new THREE.Mesh(
 
-					new THREE.PlaneBufferGeometry( 40, 40 ),
 
-					new THREE.MeshPhongMaterial( {
 
+				var groundMesh = new Mesh(
 
+					new PlaneBufferGeometry( 40, 40 ),
 
+					new MeshPhongMaterial( {
 
 						color: 0x999999,
 
 						depthWrite: false
 
 					} )

+ 35 - 28
examples/webgl_animation_skinning_blending.html
Vizualizați fișierul 

@@ -32,20 +32,27 @@
 
 			Note: crossfades are possible with blend weights being set to (1,0,0), (0,1,0) or (0,0,1)
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AnimationMixer,
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				Fog,
 
+				HemisphereLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				SkeletonHelper,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var scene, renderer, camera, stats;
 
 			var model, skeleton, mixer, clock;
 
@@ -65,21 +72,21 @@
 
 
 				var container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 1, 2, - 3 );
 
 				camera.lookAt( 0, 1, 0 );
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xa0a0a0 );
 
-				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xa0a0a0 );
 
+				scene.fog = new Fog( 0xa0a0a0, 10, 50 );
 
 
-				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				var hemiLight = new HemisphereLight( 0xffffff, 0x444444 );
 
 				hemiLight.position.set( 0, 20, 0 );
 
 				scene.add( hemiLight );
 
 
-				var dirLight = new THREE.DirectionalLight( 0xffffff );
 
+				var dirLight = new DirectionalLight( 0xffffff );
 
 				dirLight.position.set( - 3, 10, - 10 );
 
 				dirLight.castShadow = true;
 
 				dirLight.shadow.camera.top = 2;
 
@@ -90,16 +97,16 @@
 
 				dirLight.shadow.camera.far = 40;
 
 				scene.add( dirLight );
 
 
-				// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
 
+				// scene.add( new CameraHelper( light.shadow.camera ) );
 
 
 				// ground
 
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
+				var mesh = new Mesh( new PlaneBufferGeometry( 100, 100 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
 				mesh.rotation.x = - Math.PI / 2;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
-				var loader = new THREE.GLTFLoader();
 
+				var loader = new GLTFLoader();
 
 				loader.load( 'models/gltf/Soldier.glb', function ( gltf ) {
 
 
 					model = gltf.scene;
 
@@ -113,7 +120,7 @@
 
 
 					//
 
 
-					skeleton = new THREE.SkeletonHelper( model );
 
+					skeleton = new SkeletonHelper( model );
 
 					skeleton.visible = false;
 
 					scene.add( skeleton );
 
 
@@ -126,7 +133,7 @@
 
 
 					var animations = gltf.animations;
 
 
-					mixer = new THREE.AnimationMixer( model );
 
+					mixer = new AnimationMixer( model );
 
 
 					idleAction = mixer.clipAction( animations[ 0 ] );
 
 					walkAction = mixer.clipAction( animations[ 3 ] );
 
@@ -140,7 +147,7 @@
 
 
 				} );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaOutput = true;
 
@@ -157,7 +164,7 @@
 
 
 			function createPanel() {
 
 
-				var panel = new dat.GUI( { width: 310 } );
 
+				var panel = new GUI( { width: 310 } );
 
 
 				var folder1 = panel.addFolder( 'Visibility' );
 
 				var folder2 = panel.addFolder( 'Activation/Deactivation' );

+ 48 - 40
examples/webgl_animation_skinning_morph.html
Vizualizați fișierul 

@@ -34,21 +34,29 @@
 
 			modifications by <a href="https://donmccurdy.com/" target="_blank" rel="noopener">Don McCurdy</a>. CC0.<br />
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				AnimationMixer,
 
+				Clock,
 
+				Color,
 
+				DirectionalLight,
 
+				Fog,
 
+				GridHelper,
 
+				HemisphereLight,
 
+				LoopOnce,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 
 
 			var container, stats, clock, gui, mixer, actions, activeAction, previousAction;
 
 			var camera, scene, renderer, model, face;
 
@@ -63,54 +71,54 @@
 
 				container = document.createElement( 'div' );
 
 				document.body.appendChild( container );
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
 
 				camera.position.set( - 5, 3, 10 );
 
-				camera.lookAt( new THREE.Vector3( 0, 2, 0 ) );
 
+				camera.lookAt( new Vector3( 0, 2, 0 ) );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xe0e0e0 );
 
-				scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xe0e0e0 );
 
+				scene.fog = new Fog( 0xe0e0e0, 20, 100 );
 
 
-				clock = new THREE.Clock();
 
+				clock = new Clock();
 
 
 				// lights
 
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
 
+				var light = new HemisphereLight( 0xffffff, 0x444444 );
 
 				light.position.set( 0, 20, 0 );
 
 				scene.add( light );
 
 
-				light = new THREE.DirectionalLight( 0xffffff );
 
+				light = new DirectionalLight( 0xffffff );
 
 				light.position.set( 0, 20, 10 );
 
 				scene.add( light );
 
 
 				// ground
 
 
-				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
+				var mesh = new Mesh( new PlaneBufferGeometry( 2000, 2000 ), new MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
 
 				mesh.rotation.x = - Math.PI / 2;
 
 				scene.add( mesh );
 
 
-				var grid = new THREE.GridHelper( 200, 40, 0x000000, 0x000000 );
 
+				var grid = new GridHelper( 200, 40, 0x000000, 0x000000 );
 
 				grid.material.opacity = 0.2;
 
 				grid.material.transparent = true;
 
 				scene.add( grid );
 
 
 				// model
 
 
-				var loader = new THREE.GLTFLoader();
 
-				loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function( gltf ) {
 
+				var loader = new GLTFLoader();
 
+				loader.load( 'models/gltf/RobotExpressive/RobotExpressive.glb', function ( gltf ) {
 
 
 					model = gltf.scene;
 
 					scene.add( model );
 
 
 					createGUI( model, gltf.animations );
 
 
-				}, undefined, function( e ) {
 
+				}, undefined, function ( e ) {
 
 
 					console.error( e );
 
 
 				} );
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.gammaOutput = true;
 
@@ -130,13 +138,13 @@
 
 				var states = [ 'Idle', 'Walking', 'Running', 'Dance', 'Death', 'Sitting', 'Standing' ];
 
 				var emotes = [ 'Jump', 'Yes', 'No', 'Wave', 'Punch', 'ThumbsUp' ];
 
 
-				gui = new dat.GUI();
 
+				gui = new GUI();
 
 
-				mixer = new THREE.AnimationMixer( model );
 
+				mixer = new AnimationMixer( model );
 
 
 				actions = {};
 
 
-				for ( var i = 0; i < animations.length; i++ ) {
 
+				for ( var i = 0; i < animations.length; i ++ ) {
 
 
 					var clip = animations[ i ];
 
 					var action = mixer.clipAction( clip );
 
@@ -144,8 +152,8 @@
 
 
 					if ( emotes.indexOf( clip.name ) >= 0 || states.indexOf( clip.name ) >= 4 ) {
 
 
-							action.clampWhenFinished = true;
 
-							action.loop = THREE.LoopOnce;
 
+						action.clampWhenFinished = true;
 
+						action.loop = LoopOnce;
 
 
 					}
 
 
@@ -157,7 +165,7 @@
 
 
 				var clipCtrl = statesFolder.add( api, 'state' ).options( states );
 
 
-				clipCtrl.onChange( function() {
 
+				clipCtrl.onChange( function () {
 
 
 					fadeToAction( api.state, 0.5 );
 
 
@@ -171,7 +179,7 @@
 
 
 				function createEmoteCallback( name ) {
 
 
-					api[ name ] = function() {
 
+					api[ name ] = function () {
 
 
 						fadeToAction( name, 0.2 );
 
 
@@ -191,7 +199,7 @@
 
 
 				}
 
 
-				for ( var i = 0; i < emotes.length; i++ ) {
 
+				for ( var i = 0; i < emotes.length; i ++ ) {
 
 
 					createEmoteCallback( emotes[ i ] );
 
 
@@ -204,15 +212,15 @@
 
 				face = model.getObjectByName( 'Head_2' );
 
 
 				var expressions = Object.keys( face.morphTargetDictionary );
 
-				var expressionFolder = gui.addFolder('Expressions');
 
+				var expressionFolder = gui.addFolder( 'Expressions' );
 
 
-				for ( var i = 0; i < expressions.length; i++ ) {
 
+				for ( var i = 0; i < expressions.length; i ++ ) {
 
 
 					expressionFolder.add( face.morphTargetInfluences, i, 0, 1, 0.01 ).name( expressions[ i ] );
 
 
 				}
 
 
-				activeAction = actions['Walking'];
 
+				activeAction = actions[ 'Walking' ];
 
 				activeAction.play();
 
 
 				expressionFolder.open();

+ 40 - 33
examples/webgl_buffergeometry.html
Vizualizați fișierul 

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

+ 134 - 123
examples/webgl_buffergeometry_constructed_from_geometry.html
Vizualizați fișierul 

@@ -10,10 +10,6 @@
 
 				color: #08f;
 
 			}
 
 		</style>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
 	</head>
 
 	<body>
 
 		<div id="info">
 
@@ -21,176 +17,191 @@
 
 			by <a target="_blank" href="http://callum.com">Callum Prentice</a>
 
 		</div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BufferGeometry,
 
+				Color,
 
+				ExtrudeGeometry,
 
+				Float32BufferAttribute,
 
+				Geometry,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Scene,
 
+				Shape,
 
+				Vector3,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 
-		}
 
+			var camera, scene, renderer, controls, stats;
 
 
-		var camera, scene, renderer, controls, stats;
 
+			init();
 
+			animate();
 
 
-		init();
 
-		animate();
 
+			function init() {
 
 
-		function init() {
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
 
-			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.position.z = 480.0;
 
+				scene.add( camera );
 
 
-			camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 100, 1500.0 );
 
-			camera.position.z = 480.0;
 
-			scene.add( camera );
 
+				controls = new TrackballControls( camera, renderer.domElement );
 
+				controls.minDistance = 100.0;
 
+				controls.maxDistance = 800.0;
 
+				controls.dynamicDampingFactor = 0.1;
 
 
-			controls = new THREE.TrackballControls( camera, renderer.domElement );
 
-			controls.minDistance = 100.0;
 
-			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 );
 
+				camera.add( light );
 
 
-			var light = new THREE.PointLight( 0xffffff, 0.7 );
 
-			camera.add( light );
 
+				createScene();
 
 
-			createScene();
 
+				stats = new Stats();
 
+				document.body.appendChild( stats.dom );
 
 
-			stats = new Stats();
 
-			document.body.appendChild( stats.dom );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-		}
 
+			}
 
 
-		function createGeometry() {
 
+			function createGeometry() {
 
 
-			var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
 
-			var x = 0, y = 0;
 
+				var heartShape = new Shape(); // From http://blog.burlock.org/html5/130-paths
 
+				var x = 0, y = 0;
 
 
-			heartShape.moveTo( x + 25, y + 25 );
 
-			heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
 
-			heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
 
-			heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
 
-			heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
 
-			heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
 
-			heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
 
+				heartShape.moveTo( x + 25, y + 25 );
 
+				heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
 
+				heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
 
+				heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
 
+				heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
 
+				heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
 
+				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
 
 
-			var extrudeSettings = {
 
-				depth: 16,
 
-				bevelEnabled: true,
 
-				bevelSegments: 1,
 
-				steps: 2,
 
-				bevelSize: 1,
 
-				bevelThickness: 1
 
-			};
 
+				var extrudeSettings = {
 
+					depth: 16,
 
+					bevelEnabled: true,
 
+					bevelSegments: 1,
 
+					steps: 2,
 
+					bevelSize: 1,
 
+					bevelThickness: 1
 
+				};
 
 
-			var geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
 
-			geometry.rotateX( Math.PI );
 
-			geometry.scale( 0.4, 0.4, 0.4 );
 
+				var geometry = new ExtrudeGeometry( heartShape, extrudeSettings );
 
+				geometry.rotateX( Math.PI );
 
+				geometry.scale( 0.4, 0.4, 0.4 );
 
 
-			return geometry;
 
+				return geometry;
 
 
-		}
 
+			}
 
 
-		function createScene() {
 
+			function createScene() {
 
 
-			var bufferGeometry = new THREE.BufferGeometry();
 
+				var bufferGeometry = new BufferGeometry();
 
 
-			var radius = 125;
 
-			var count = 80;
 
+				var radius = 125;
 
+				var count = 80;
 
 
-			var positions = [];
 
-			var normals = [];
 
-			var colors = [];
 
+				var positions = [];
 
+				var normals = [];
 
+				var colors = [];
 
 
-			var vector = new THREE.Vector3();
 
+				var vector = new Vector3();
 
 
-			var color = new THREE.Color( 0xffffff );
 
-			var heartGeometry = createGeometry();
 
-			var geometry = new THREE.Geometry();
 
+				var color = new Color( 0xffffff );
 
+				var heartGeometry = createGeometry();
 
+				var geometry = new Geometry();
 
 
-			for ( var i = 1, l = count; i <= l; i ++ ) {
 
+				for ( var i = 1, l = count; i <= l; i ++ ) {
 
 
-				var phi = Math.acos( - 1 + ( 2 * i ) / l );
 
-				var theta = Math.sqrt( l * Math.PI ) * phi;
 
+					var phi = Math.acos( - 1 + ( 2 * i ) / l );
 
+					var theta = Math.sqrt( l * Math.PI ) * phi;
 
 
-				vector.setFromSphericalCoords( radius, phi, theta );
 
+					vector.setFromSphericalCoords( radius, phi, theta );
 
 
-				geometry.copy( heartGeometry );
 
-				geometry.lookAt( vector );
 
-				geometry.translate( vector.x, vector.y, vector.z );
 
+					geometry.copy( heartGeometry );
 
+					geometry.lookAt( vector );
 
+					geometry.translate( vector.x, vector.y, vector.z );
 
 
-				color.setHSL( ( i / l ), 1.0, 0.7 );
 
+					color.setHSL( ( i / l ), 1.0, 0.7 );
 
 
-				geometry.faces.forEach( function ( face ) {
 
+					geometry.faces.forEach( function ( face ) {
 
 
-					positions.push( geometry.vertices[ face.a ].x );
 
-					positions.push( geometry.vertices[ face.a ].y );
 
-					positions.push( geometry.vertices[ face.a ].z );
 
-					positions.push( geometry.vertices[ face.b ].x );
 
-					positions.push( geometry.vertices[ face.b ].y );
 
-					positions.push( geometry.vertices[ face.b ].z );
 
-					positions.push( geometry.vertices[ face.c ].x );
 
-					positions.push( geometry.vertices[ face.c ].y );
 
-					positions.push( geometry.vertices[ face.c ].z );
 
+						positions.push( geometry.vertices[ face.a ].x );
 
+						positions.push( geometry.vertices[ face.a ].y );
 
+						positions.push( geometry.vertices[ face.a ].z );
 
+						positions.push( geometry.vertices[ face.b ].x );
 
+						positions.push( geometry.vertices[ face.b ].y );
 
+						positions.push( geometry.vertices[ face.b ].z );
 
+						positions.push( geometry.vertices[ face.c ].x );
 
+						positions.push( geometry.vertices[ face.c ].y );
 
+						positions.push( geometry.vertices[ face.c ].z );
 
 
-					normals.push( face.normal.x );
 
-					normals.push( face.normal.y );
 
-					normals.push( face.normal.z );
 
-					normals.push( face.normal.x );
 
-					normals.push( face.normal.y );
 
-					normals.push( face.normal.z );
 
-					normals.push( face.normal.x );
 
-					normals.push( face.normal.y );
 
-					normals.push( face.normal.z );
 
+						normals.push( face.normal.x );
 
+						normals.push( face.normal.y );
 
+						normals.push( face.normal.z );
 
+						normals.push( face.normal.x );
 
+						normals.push( face.normal.y );
 
+						normals.push( face.normal.z );
 
+						normals.push( face.normal.x );
 
+						normals.push( face.normal.y );
 
+						normals.push( face.normal.z );
 
 
-					colors.push( color.r );
 
-					colors.push( color.g );
 
-					colors.push( color.b );
 
-					colors.push( color.r );
 
-					colors.push( color.g );
 
-					colors.push( color.b );
 
-					colors.push( color.r );
 
-					colors.push( color.g );
 
-					colors.push( color.b );
 
+						colors.push( color.r );
 
+						colors.push( color.g );
 
+						colors.push( color.b );
 
+						colors.push( color.r );
 
+						colors.push( color.g );
 
+						colors.push( color.b );
 
+						colors.push( color.r );
 
+						colors.push( color.g );
 
+						colors.push( color.b );
 
 
-				} );
 
+					} );
 
 
-			}
 
+				}
 
 
-			bufferGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 
-			bufferGeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
 
-			bufferGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+				bufferGeometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
+				bufferGeometry.addAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
 
+				bufferGeometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 
-			var material = new THREE.MeshPhongMaterial( { shininess: 80, vertexColors: THREE.VertexColors } );
 
+				var material = new MeshPhongMaterial( { shininess: 80, vertexColors: VertexColors } );
 
 
-			var mesh = new THREE.Mesh( bufferGeometry, material );
 
-			scene.add( mesh );
 
+				var mesh = new Mesh( bufferGeometry, material );
 
+				scene.add( mesh );
 
 
-		}
 
+			}
 
 
-		function onWindowResize() {
 
+			function onWindowResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate() {
 
+			function animate() {
 
 
-			requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-			controls.update();
 
-			stats.update();
 
+				controls.update();
 
+				stats.update();
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
 		</script>
 
 	</body>

+ 84 - 82
examples/webgl_buffergeometry_custom_attributes_particles.html
Vizualizați fișierul 

@@ -10,11 +10,6 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry custom attributes - particles</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			attribute float size;
 
@@ -51,138 +46,145 @@
 
 
 		</script>
 
 
+		<script type="module">
 
+			import {
 
+				AdditiveBlending,
 
+				BufferGeometry,
 
+				Color,
 
+				Float32BufferAttribute,
 
+				PerspectiveCamera,
 
+				Points,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextureLoader,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var renderer, scene, camera, stats;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var particleSystem, uniforms, geometry;
 
 
-		}
 
+			var particles = 100000;
 
 
-		var renderer, scene, camera, stats;
 
+			init();
 
+			animate();
 
 
-		var particleSystem, uniforms, geometry;
 
+			function init() {
 
 
-		var particles = 100000;
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.z = 300;
 
 
-		init();
 
-		animate();
 
+				scene = new Scene();
 
 
-		function init() {
 
+				uniforms = {
 
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
-			camera.position.z = 300;
 
+					texture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
 
 
-			scene = new THREE.Scene();
 
+				};
 
 
-			uniforms = {
 
+				var shaderMaterial = new ShaderMaterial( {
 
 
-				texture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 
+					uniforms: uniforms,
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
 
-			};
 
+					blending: AdditiveBlending,
 
+					depthTest: false,
 
+					transparent: true,
 
+					vertexColors: true
 
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
 
+				} );
 
 
-				uniforms: uniforms,
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
 
-				blending: THREE.AdditiveBlending,
 
-				depthTest: false,
 
-				transparent: true,
 
-				vertexColors: true
 
+				var radius = 200;
 
 
-			} );
 
+				geometry = new BufferGeometry();
 
 
+				var positions = [];
 
+				var colors = [];
 
+				var sizes = [];
 
 
-			var radius = 200;
 
+				var color = new Color();
 
 
-			geometry = new THREE.BufferGeometry();
 
+				for ( var i = 0; i < particles; i ++ ) {
 
 
-			var positions = [];
 
-			var colors = [];
 
-			var sizes = [];
 
+					positions.push( ( Math.random() * 2 - 1 ) * radius );
 
+					positions.push( ( Math.random() * 2 - 1 ) * radius );
 
+					positions.push( ( Math.random() * 2 - 1 ) * radius );
 
 
-			var color = new THREE.Color();
 
+					color.setHSL( i / particles, 1.0, 0.5 );
 
 
-			for ( var i = 0; i < particles; i ++ ) {
 
+					colors.push( color.r, color.g, color.b );
 
 
-				positions.push( ( Math.random() * 2 - 1 ) * radius );
 
-				positions.push( ( Math.random() * 2 - 1 ) * radius );
 
-				positions.push( ( Math.random() * 2 - 1 ) * radius );
 
+					sizes.push( 20 );
 
 
-				color.setHSL( i / particles, 1.0, 0.5 );
 
+				}
 
 
-				colors.push( color.r, color.g, color.b );
 
+				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
+				geometry.addAttribute( 'size', new Float32BufferAttribute( sizes, 1 ).setDynamic( true ) );
 
 
-				sizes.push( 20 );
 
+				particleSystem = new Points( geometry, shaderMaterial );
 
 
-			}
 
+				scene.add( particleSystem );
 
 
-			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 ) );
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-			particleSystem = new THREE.Points( geometry, shaderMaterial );
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			scene.add( particleSystem );
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				//
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+			}
 
 
-			//
 
+			function onWindowResize() {
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-		}
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		function onWindowResize() {
 
+			}
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+			function animate() {
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				requestAnimationFrame( animate );
 
 
-		}
 
+				render();
 
+				stats.update();
 
 
-		function animate() {
 
+			}
 
 
-			requestAnimationFrame( animate );
 
+			function render() {
 
 
-			render();
 
-			stats.update();
 
+				var time = Date.now() * 0.005;
 
 
-		}
 
+				particleSystem.rotation.z = 0.01 * time;
 
 
-		function render() {
 
+				var sizes = geometry.attributes.size.array;
 
 
-			var time = Date.now() * 0.005;
 
+				for ( var i = 0; i < particles; i ++ ) {
 
 
-			particleSystem.rotation.z = 0.01 * time;
 
+					sizes[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
 
 
-			var sizes = geometry.attributes.size.array;
 
+				}
 
 
-			for ( var i = 0; i < particles; i ++ ) {
 
+				geometry.attributes.size.needsUpdate = true;
 
 
-				sizes[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
 
+				renderer.render( scene, camera );
 
 
 			}
 
 
-			geometry.attributes.size.needsUpdate = true;
 
-
 
-			renderer.render( scene, camera );
 
-
 
-		}
 
-
 
-	</script>
 
+		</script>
 
 
 </body>
 
 </html>

+ 45 - 27
examples/webgl_buffergeometry_drawcalls.html
Vizualizați fișierul 

@@ -19,12 +19,30 @@
 
 			by <a href="https://twitter.com/fernandojsg">fernandojsg</a>
 
 		</div>
 
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
+		<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 Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var group;
 
 			var container, stats;
 
@@ -55,7 +73,7 @@
 
 
 			function initGUI() {
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				gui.add( effectController, "showDots" ).onChange( function ( value ) {
 
 
@@ -85,20 +103,20 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 4000 );
 
 				camera.position.z = 1750;
 
 
-				var controls = new THREE.OrbitControls( camera, container );
 
+				var controls = new OrbitControls( camera, container );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 
-				group = new THREE.Group();
 
+				group = new Group();
 
 				scene.add( group );
 
 
-				var helper = new THREE.BoxHelper( new THREE.Mesh( new THREE.BoxBufferGeometry( r, r, r ) ) );
 
+				var helper = new BoxHelper( new Mesh( new BoxBufferGeometry( r, r, r ) ) );
 
 				helper.material.color.setHex( 0x101010 );
 
-				helper.material.blending = THREE.AdditiveBlending;
 
+				helper.material.blending = AdditiveBlending;
 
 				helper.material.transparent = true;
 
 				group.add( helper );
 
 
@@ -107,15 +125,15 @@
 
 				positions = new Float32Array( segments * 3 );
 
 				colors = new Float32Array( segments * 3 );
 
 
-				var pMaterial = new THREE.PointsMaterial( {
 
+				var pMaterial = new PointsMaterial( {
 
 					color: 0xFFFFFF,
 
 					size: 3,
 
-					blending: THREE.AdditiveBlending,
 
+					blending: AdditiveBlending,
 
 					transparent: true,
 
 					sizeAttenuation: false
 
 				} );
 
 
-				particles = new THREE.BufferGeometry();
 
+				particles = new BufferGeometry();
 
 				particlePositions = new Float32Array( maxParticleCount * 3 );
 
 
 				for ( var i = 0; i < maxParticleCount; i ++ ) {
 
@@ -130,40 +148,40 @@
 
 
 					// add it to the geometry
 
 					particlesData.push( {
 
-						velocity: new THREE.Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
 
+						velocity: new Vector3( - 1 + Math.random() * 2, - 1 + Math.random() * 2, - 1 + Math.random() * 2 ),
 
 						numConnections: 0
 
 					} );
 
 
 				}
 
 
 				particles.setDrawRange( 0, particleCount );
 
-				particles.addAttribute( 'position', new THREE.BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
 
+				particles.addAttribute( 'position', new BufferAttribute( particlePositions, 3 ).setDynamic( true ) );
 
 
 				// create the particle system
 
-				pointCloud = new THREE.Points( particles, pMaterial );
 
+				pointCloud = new Points( particles, pMaterial );
 
 				group.add( pointCloud );
 
 
-				var geometry = new THREE.BufferGeometry();
 
+				var geometry = new BufferGeometry();
 
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).setDynamic( true ) );
 
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
 
+				geometry.addAttribute( 'position', new BufferAttribute( positions, 3 ).setDynamic( true ) );
 
+				geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ).setDynamic( true ) );
 
 
 				geometry.computeBoundingSphere();
 
 
 				geometry.setDrawRange( 0, 0 );
 
 
-				var material = new THREE.LineBasicMaterial( {
 
-					vertexColors: THREE.VertexColors,
 
-					blending: THREE.AdditiveBlending,
 
+				var material = new LineBasicMaterial( {
 
+					vertexColors: VertexColors,
 
+					blending: AdditiveBlending,
 
 					transparent: true
 
 				} );
 
 
-				linesMesh = new THREE.LineSegments( geometry, material );
 
+				linesMesh = new LineSegments( geometry, material );
 
 				group.add( linesMesh );
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );

+ 31 - 27
examples/webgl_buffergeometry_indexed.html
Vizualizați fișierul 

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

+ 30 - 26
examples/webgl_buffergeometry_instancing.html
Vizualizați fișierul 

@@ -26,11 +26,6 @@
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 
-	<script src="js/libs/dat.gui.min.js"></script>
 
-	<script src="../build/three.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-	<script src="js/WebGL.js"></script>
 
-
 
 	<script id="vertexShader" type="x-shader/x-vertex">
 
 		precision highp float;
 
 
@@ -83,13 +78,22 @@
 
 
 	</script>
 
 
-	<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-		}
 
+	<script type="module">
 
+		import {
 
+			DoubleSide,
 
+			Float32BufferAttribute,
 
+			InstancedBufferAttribute,
 
+			InstancedBufferGeometry,
 
+			Mesh,
 
+			PerspectiveCamera,
 
+			RawShaderMaterial,
 
+			Scene,
 
+			Vector4,
 
+			WebGLRenderer
 
+		} from "../build/three.module.js";
 
+
 
+		import Stats from './jsm/libs/stats.module.js';
 
+		import { GUI } from './jsm/libs/dat.gui.module.js';
 
 
 		var container, stats;
 
 
@@ -102,14 +106,14 @@
 
 
 			container = document.getElementById( 'container' );
 
 
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
 
+			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
 
 			camera.position.z = 2;
 
 
-			scene = new THREE.Scene();
 
+			scene = new Scene();
 
 
 			// geometry
 
 
-			var vector = new THREE.Vector4();
 
+			var vector = new Vector4();
 
 
 			var instances = 50000;
 
 
@@ -151,19 +155,19 @@
 
 
 			}
 
 
-			var geometry = new THREE.InstancedBufferGeometry();
 
+			var geometry = new InstancedBufferGeometry();
 
 			geometry.maxInstancedCount = instances; // set so its initalized for dat.GUI, will be set in first draw otherwise
 
 
-			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 
+			geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
 
-			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 ) );
 
+			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 ) );
 
 
 			// material
 
 
-			var material = new THREE.RawShaderMaterial( {
 
+			var material = new RawShaderMaterial( {
 
 
 				uniforms: {
 
 					"time": { value: 1.0 },
 
@@ -171,19 +175,19 @@
 
 				},
 
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 
-				side: THREE.DoubleSide,
 
+				side: DoubleSide,
 
 				transparent: true
 
 
 			} );
 
 
 			//
 
 
-			var mesh = new THREE.Mesh( geometry, material );
 
+			var mesh = new Mesh( geometry, material );
 
 			scene.add( mesh );
 
 
 			//
 
 
-			renderer = new THREE.WebGLRenderer();
 
+			renderer = new WebGLRenderer();
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			container.appendChild( renderer.domElement );
 
@@ -197,7 +201,7 @@
 
 
 			//
 
 
-			var gui = new dat.GUI( { width: 350 } );
 
+			var gui = new GUI( { width: 350 } );
 
 			gui.add( geometry, 'maxInstancedCount', 0, instances );
 
 
 			//

+ 32 - 27
examples/webgl_buffergeometry_instancing2.html
Vizualizați fișierul 

@@ -26,12 +26,6 @@
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 
-	<script src="../build/three.js"></script>
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-
 
-	<script src="js/controls/TrackballControls.js"></script>
 
-
 
 	<script id="vertexShader" type="x-shader/x-vertex">
 
 		precision highp float;
 
 
@@ -74,13 +68,24 @@
 
 
 	</script>
 
 
-	<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-		}
 
+	<script type="module">
 
+		import {
 
+			Float32BufferAttribute,
 
+			IcosahedronBufferGeometry,
 
+			InstancedBufferAttribute,
 
+			InstancedBufferGeometry,
 
+			Mesh,
 
+			MeshBasicMaterial,
 
+			PerspectiveCamera,
 
+			Scene,
 
+			ShaderMaterial,
 
+			VertexColors,
 
+			WebGLRenderer
 
+		} from "../build/three.module.js";
 
+
 
+		import Stats from './jsm/libs/stats.module.js';
 
+
 
+		import { TrackballControls } from './jsm/controls/TrackballControls.js';
 
 
 		var container, stats;
 
 
@@ -95,14 +100,14 @@
 
 
 			container = document.getElementById( 'container' );
 
 
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 
+			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 
 			camera.position.z = 4;
 
 
-			scene = new THREE.Scene();
 
+			scene = new Scene();
 
 
 			//
 
 
-			var geometry = new THREE.IcosahedronBufferGeometry( 0.1, 1 );
 
+			var geometry = new IcosahedronBufferGeometry( 0.1, 1 );
 
 
 			var colors = [];
 
 
@@ -112,9 +117,9 @@
 
 
 			}
 
 
-			geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+			geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 
-			var material = new THREE.MeshBasicMaterial( { color: 0xff0000, vertexColors: THREE.VertexColors } );
 
+			var material = new MeshBasicMaterial( { color: 0xff0000, vertexColors: VertexColors } );
 
 
 			//
 
 
@@ -130,7 +135,7 @@
 
 
 				// the red meshes are drawn with separate draw calls
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
 				var position = mesh.position;
 
@@ -152,17 +157,17 @@
 
 
 			}
 
 
-			var instancedGeometry = new THREE.InstancedBufferGeometry();
 
+			var instancedGeometry = new InstancedBufferGeometry();
 
 			instancedGeometry.attributes.position = geometry.attributes.position;
 
 			instancedGeometry.attributes.color = geometry.attributes.color;
 
 
-			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 ) );
 
+			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 ) );
 
 
 			//
 
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
 
+			var shaderMaterial = new ShaderMaterial( {
 
 
 				uniforms: {},
 
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
@@ -173,18 +178,18 @@
 
 
 			// counterparts are drawn all at once with a single draw call (via instanced rendering)
 
 
-			var instancedMesh = new THREE.Mesh( instancedGeometry, shaderMaterial );
 
+			var instancedMesh = new Mesh( instancedGeometry, shaderMaterial );
 
 			instancedMesh.position.x = 0.1;
 
 			scene.add( instancedMesh );
 
 
 			//
 
 
-			renderer = new THREE.WebGLRenderer();
 
+			renderer = new WebGLRenderer();
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			container.appendChild( renderer.domElement );
 
 
-			controls = new THREE.TrackballControls( camera, renderer.domElement );
 
+			controls = new TrackballControls( camera, renderer.domElement );
 
 
 			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {

+ 25 - 22
examples/webgl_buffergeometry_instancing_billboards.html
Vizualizați fișierul 

@@ -25,10 +25,6 @@
 
 		<div id="notSupported" style="display:none">Sorry, your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 
-	<script src="../build/three.js"></script>
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-
 
 	<script id="vshader" type="x-shader/x-vertex">
 
 		precision highp float;
 
 		uniform mat4 modelViewMatrix;
 
@@ -86,7 +82,21 @@
 
 		}
 
 	</script>
 
 
-	<script>
 
+	<script type="module">
 
+		import {
 
+			CircleBufferGeometry,
 
+			InstancedBufferAttribute,
 
+			InstancedBufferGeometry,
 
+			Mesh,
 
+			PerspectiveCamera,
 
+			RawShaderMaterial,
 
+			Scene,
 
+			TextureLoader,
 
+			WebGLRenderer
 
+		} from "../build/three.module.js";
 
+
 
+		import Stats from './jsm/libs/stats.module.js';
 
+
 
 		var container, stats;
 
 
 		var camera, scene, renderer;
 
@@ -94,14 +104,7 @@
 
 
 		function init() {
 
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-				return false;
 
-
 
-			}
 
-
 
-			renderer = new THREE.WebGLRenderer();
 
+			renderer = new WebGLRenderer();
 
 
 			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
 
@@ -113,14 +116,14 @@
 
 			container = document.createElement( 'div' );
 
 			document.body.appendChild( container );
 
 
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 
+			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
 
 			camera.position.z = 1400;
 
 
-			scene = new THREE.Scene();
 
+			scene = new Scene();
 
 
-			var circleGeometry = new THREE.CircleBufferGeometry( 1, 6 );
 
+			var circleGeometry = new CircleBufferGeometry( 1, 6 );
 
 
-			geometry = new THREE.InstancedBufferGeometry();
 
+			geometry = new InstancedBufferGeometry();
 
 			geometry.index = circleGeometry.index;
 
 			geometry.attributes = circleGeometry.attributes;
 
 
@@ -136,11 +139,11 @@
 
 
 			}
 
 
-			geometry.addAttribute( 'translate', new THREE.InstancedBufferAttribute( translateArray, 3 ) );
 
+			geometry.addAttribute( 'translate', new InstancedBufferAttribute( translateArray, 3 ) );
 
 
-			material = new THREE.RawShaderMaterial( {
 
+			material = new RawShaderMaterial( {
 
 				uniforms: {
 
-					"map": { value: new THREE.TextureLoader().load( 'textures/sprites/circle.png' ) },
 
+					"map": { value: new TextureLoader().load( 'textures/sprites/circle.png' ) },
 
 					"time": { value: 0.0 }
 
 				},
 
 				vertexShader: document.getElementById( 'vshader' ).textContent,
 
@@ -149,7 +152,7 @@
 
 				depthWrite: true
 
 			} );
 
 
-			mesh = new THREE.Mesh( geometry, material );
 
+			mesh = new Mesh( geometry, material );
 
 			mesh.scale.set( 500, 500, 500 );
 
 			scene.add( mesh );
 
 
@@ -166,7 +169,7 @@
 
 
 		}
 
 
-		function onWindowResize( event ) {
 
+		function onWindowResize() {
 
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 
 			camera.updateProjectionMatrix();

+ 33 - 28
examples/webgl_buffergeometry_instancing_dynamic.html
Vizualizați fișierul 

@@ -26,11 +26,6 @@
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 
-	<script src="../build/three.js"></script>
 
-
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-
 
 	<script id="vertexShader" type="x-shader/x-vertex">
 
 		precision highp float;
 
 
@@ -77,13 +72,23 @@
 
 		}
 
 	</script>
 
 
-	<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-		}
 
+	<script type="module">
 
+		import {
 
+			BoxBufferGeometry,
 
+			Color,
 
+			InstancedBufferAttribute,
 
+			InstancedBufferGeometry,
 
+			Mesh,
 
+			PerspectiveCamera,
 
+			Quaternion,
 
+			RawShaderMaterial,
 
+			Scene,
 
+			TextureLoader,
 
+			Vector4,
 
+			WebGLRenderer
 
+		} from "../build/three.module.js";
 
+
 
+		import Stats from './jsm/libs/stats.module.js';
 
 
 		var container, stats;
 
 		var camera, scene, renderer, mesh;
 
@@ -91,9 +96,9 @@
 
 
 		var lastTime = 0;
 
 
-		var moveQ = new THREE.Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
 
-		var tmpQ = new THREE.Quaternion();
 
-		var currentQ = new THREE.Quaternion();
 
+		var moveQ = new Quaternion( 0.5, 0.5, 0.5, 0.0 ).normalize();
 
+		var tmpQ = new Quaternion();
 
+		var currentQ = new Quaternion();
 
 
 		init();
 
 		animate();
 
@@ -102,20 +107,20 @@
 
 
 			container = document.getElementById( 'container' );
 
 
-			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
+			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
 
-			scene = new THREE.Scene();
 
-			scene.background = new THREE.Color( 0x101010 );
 
+			scene = new Scene();
 
+			scene.background = new Color( 0x101010 );
 
 
 			// geometry
 
 
 			var instances = 5000;
 
 
-			var bufferGeometry = new THREE.BoxBufferGeometry( 2, 2, 2 );
 
+			var bufferGeometry = new BoxBufferGeometry( 2, 2, 2 );
 
 
 			// copying data from a simple box geometry, but you can specify a custom geometry if you want
 
 
-			var geometry = new THREE.InstancedBufferGeometry();
 
+			var geometry = new InstancedBufferGeometry();
 
 			geometry.index = bufferGeometry.index;
 
 			geometry.attributes.position = bufferGeometry.attributes.position;
 
 			geometry.attributes.uv = bufferGeometry.attributes.uv;
 
@@ -125,7 +130,7 @@
 
 			var offsets = [];
 
 			var orientations = [];
 
 
-			var vector = new THREE.Vector4();
 
+			var vector = new Vector4();
 
 			var x, y, z, w;
 
 
 			for ( var i = 0; i < instances; i ++ ) {
 
@@ -154,28 +159,28 @@
 
 
 			}
 
 
-			offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 );
 
-			orientationAttribute = new THREE.InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setDynamic( true );
 
+			offsetAttribute = new InstancedBufferAttribute( new Float32Array( offsets ), 3 );
 
+			orientationAttribute = new InstancedBufferAttribute( new Float32Array( orientations ), 4 ).setDynamic( true );
 
 
 			geometry.addAttribute( 'offset', offsetAttribute );
 
 			geometry.addAttribute( 'orientation', orientationAttribute );
 
 
 			// material
 
 
-			var material = new THREE.RawShaderMaterial( {
 
+			var material = new RawShaderMaterial( {
 
 
 				uniforms: {
 
-					map: { value: new THREE.TextureLoader().load( 'textures/crate.gif' ) }
 
+					map: { value: new TextureLoader().load( 'textures/crate.gif' ) }
 
 				},
 
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent
 
 
 			} );
 
 
-			mesh = new THREE.Mesh( geometry, material );
 
+			mesh = new Mesh( geometry, material );
 
 			scene.add( mesh );
 
 
-			renderer = new THREE.WebGLRenderer();
 
+			renderer = new WebGLRenderer();
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			container.appendChild( renderer.domElement );
 
@@ -194,7 +199,7 @@
 
 
 		}
 
 
-		function onWindowResize( event ) {
 
+		function onWindowResize() {
 
 
 			camera.aspect = window.innerWidth / window.innerHeight;
 
 			camera.updateProjectionMatrix();

+ 193 - 186
examples/webgl_buffergeometry_instancing_interleaved_dynamic.html
Vizualizați fișierul 

@@ -26,11 +26,6 @@
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 
-	<script src="../build/three.js"></script>
 
-
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-
 
 	<script id="vertexShader" type="x-shader/x-vertex">
 
 		precision highp float;
 
 
@@ -79,225 +74,237 @@
 
 
 	</script>
 
 
-	<script>
 
-
 
-	if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-		document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-	}
 
-
 
-	var container, stats;
 
-
 
-	var camera, scene, renderer;
 
-	var orientations, instanceBuffer;
 
-
 
-
 
-	function init() {
 
-
 
-		container = document.getElementById( 'container' );
 
-
 
-		camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-
 
-		scene = new THREE.Scene();
 
-		scene.background = new THREE.Color( 0x101010 );
 
-
 
-		renderer = new THREE.WebGLRenderer();
 
-
 
-		// geometry
 
-
 
-		var instances = 5000;
 
-
 
-		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 THREE.InterleavedBuffer( new Float32Array( [
 
-			// Front
 
-			- 1, 1, 1, 0, 0, 0, 0, 0,
 
-			1, 1, 1, 0, 1, 0, 0, 0,
 
-			- 1, - 1, 1, 0, 0, 1, 0, 0,
 
-			1, - 1, 1, 0, 1, 1, 0, 0,
 
-			// Back
 
-			1, 1, - 1, 0, 1, 0, 0, 0,
 
-			- 1, 1, - 1, 0, 0, 0, 0, 0,
 
-			1, - 1, - 1, 0, 1, 1, 0, 0,
 
-			- 1, - 1, - 1, 0, 0, 1, 0, 0,
 
-			// Left
 
-			- 1, 1, - 1, 0, 1, 1, 0, 0,
 
-			- 1, 1, 1, 0, 1, 0, 0, 0,
 
-			- 1, - 1, - 1, 0, 0, 1, 0, 0,
 
-			- 1, - 1, 1, 0, 0, 0, 0, 0,
 
-			// Right
 
-			1, 1, 1, 0, 1, 0, 0, 0,
 
-			1, 1, - 1, 0, 1, 1, 0, 0,
 
-			1, - 1, 1, 0, 0, 0, 0, 0,
 
-			1, - 1, - 1, 0, 0, 1, 0, 0,
 
-			// Top
 
-			- 1, 1, 1, 0, 0, 0, 0, 0,
 
-			1, 1, 1, 0, 1, 0, 0, 0,
 
-			- 1, 1, - 1, 0, 0, 1, 0, 0,
 
-			1, 1, - 1, 0, 1, 1, 0, 0,
 
-			// Bottom
 
-			1, - 1, 1, 0, 1, 0, 0, 0,
 
-			- 1, - 1, 1, 0, 0, 0, 0, 0,
 
-			1, - 1, - 1, 0, 1, 1, 0, 0,
 
-			- 1, - 1, - 1, 0, 0, 1, 0, 0
 
-		] ), 8 );
 
-
 
-		// Use vertexBuffer, starting at offset 0, 3 items in position attribute
 
-		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 THREE.InterleavedBufferAttribute( vertexBuffer, 2, 4 );
 
-		geometry.addAttribute( 'uv', uvs );
 
-
 
-		var indices = new Uint16Array( [
 
-			0, 1, 2,
 
-			2, 1, 3,
 
-			4, 5, 6,
 
-			6, 5, 7,
 
-			8, 9, 10,
 
-			10, 9, 11,
 
-			12, 13, 14,
 
-			14, 13, 15,
 
-			16, 17, 18,
 
-			18, 17, 19,
 
-			20, 21, 22,
 
-			22, 21, 23
 
-		] );
 
-
 
-		geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
 
-
 
-		// per instance data
 
-		instanceBuffer = new THREE.InstancedInterleavedBuffer( new Float32Array( instances * 8 ), 8, 1 ).setDynamic( true );
 
-		var offsets = new THREE.InterleavedBufferAttribute( instanceBuffer, 3, 0 );
 
-
 
-		var vector = new THREE.Vector4();
 
-		for ( var i = 0, ul = offsets.count; i < ul; i ++ ) {
 
-
 
-			var x = Math.random() * 100 - 50;
 
-			var y = Math.random() * 100 - 50;
 
-			var z = Math.random() * 100 - 50;
 
-			vector.set( x, y, z, 0 ).normalize();
 
-			// move out at least 5 units from center in current direction
 
-			offsets.setXYZ( i, x + vector.x * 5, y + vector.y * 5, z + vector.z * 5 );
 
-
 
-		}
 
-
 
-		geometry.addAttribute( 'offset', offsets ); // per mesh translation
 
-
 
-		orientations = new THREE.InterleavedBufferAttribute( instanceBuffer, 4, 4 );
 
-
 
-		for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
 
-
 
-			vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
-			vector.normalize();
 
-
 
-			orientations.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
 
+	<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 Stats from './jsm/libs/stats.module.js';
 
+
 
+		var container, stats;
 
+
 
+		var camera, scene, renderer;
 
+		var orientations, instanceBuffer;
 
+
 
+
 
+		function init() {
 
+
 
+			container = document.getElementById( 'container' );
 
+
 
+			camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
+
 
+			scene = new Scene();
 
+			scene.background = new Color( 0x101010 );
 
+
 
+			renderer = new WebGLRenderer();
 
+
 
+			// geometry
 
+
 
+			var instances = 5000;
 
+
 
+			var geometry = new 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( [
 
+				// Front
 
+				- 1, 1, 1, 0, 0, 0, 0, 0,
 
+				1, 1, 1, 0, 1, 0, 0, 0,
 
+				- 1, - 1, 1, 0, 0, 1, 0, 0,
 
+				1, - 1, 1, 0, 1, 1, 0, 0,
 
+				// Back
 
+				1, 1, - 1, 0, 1, 0, 0, 0,
 
+				- 1, 1, - 1, 0, 0, 0, 0, 0,
 
+				1, - 1, - 1, 0, 1, 1, 0, 0,
 
+				- 1, - 1, - 1, 0, 0, 1, 0, 0,
 
+				// Left
 
+				- 1, 1, - 1, 0, 1, 1, 0, 0,
 
+				- 1, 1, 1, 0, 1, 0, 0, 0,
 
+				- 1, - 1, - 1, 0, 0, 1, 0, 0,
 
+				- 1, - 1, 1, 0, 0, 0, 0, 0,
 
+				// Right
 
+				1, 1, 1, 0, 1, 0, 0, 0,
 
+				1, 1, - 1, 0, 1, 1, 0, 0,
 
+				1, - 1, 1, 0, 0, 0, 0, 0,
 
+				1, - 1, - 1, 0, 0, 1, 0, 0,
 
+				// Top
 
+				- 1, 1, 1, 0, 0, 0, 0, 0,
 
+				1, 1, 1, 0, 1, 0, 0, 0,
 
+				- 1, 1, - 1, 0, 0, 1, 0, 0,
 
+				1, 1, - 1, 0, 1, 1, 0, 0,
 
+				// Bottom
 
+				1, - 1, 1, 0, 1, 0, 0, 0,
 
+				- 1, - 1, 1, 0, 0, 0, 0, 0,
 
+				1, - 1, - 1, 0, 1, 1, 0, 0,
 
+				- 1, - 1, - 1, 0, 0, 1, 0, 0
 
+			] ), 8 );
 
+
 
+			// Use vertexBuffer, starting at offset 0, 3 items in position attribute
 
+			var positions = new 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 );
 
+			geometry.addAttribute( 'uv', uvs );
 
+
 
+			var indices = new Uint16Array( [
 
+				0, 1, 2,
 
+				2, 1, 3,
 
+				4, 5, 6,
 
+				6, 5, 7,
 
+				8, 9, 10,
 
+				10, 9, 11,
 
+				12, 13, 14,
 
+				14, 13, 15,
 
+				16, 17, 18,
 
+				18, 17, 19,
 
+				20, 21, 22,
 
+				22, 21, 23
 
+			] );
 
+
 
+			geometry.setIndex( new BufferAttribute( indices, 1 ) );
 
+
 
+			// per instance data
 
+			instanceBuffer = new InstancedInterleavedBuffer( new Float32Array( instances * 8 ), 8, 1 ).setDynamic( true );
 
+			var offsets = new InterleavedBufferAttribute( instanceBuffer, 3, 0 );
 
+
 
+			var vector = new Vector4();
 
+			for ( var i = 0, ul = offsets.count; i < ul; i ++ ) {
 
 
-		}
 
-
 
-		geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
 
+				var x = Math.random() * 100 - 50;
 
+				var y = Math.random() * 100 - 50;
 
+				var z = Math.random() * 100 - 50;
 
+				vector.set( x, y, z, 0 ).normalize();
 
+				// move out at least 5 units from center in current direction
 
+				offsets.setXYZ( i, x + vector.x * 5, y + vector.y * 5, z + vector.z * 5 );
 
 
-		// material
 
-		var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
 
-		texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
+			}
 
 
-		var material = new THREE.RawShaderMaterial( {
 
+			geometry.addAttribute( 'offset', offsets ); // per mesh translation
 
 
-			uniforms: {
 
-				map: { value: texture }
 
-			},
 
-			vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
-			fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 
-			side: THREE.DoubleSide,
 
-			transparent: false
 
+			orientations = new InterleavedBufferAttribute( instanceBuffer, 4, 4 );
 
 
-		} );
 
+			for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
 
 
-		var mesh = new THREE.Mesh( geometry, material );
 
-		mesh.frustumCulled = false;
 
-		scene.add( mesh );
 
+				vector.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
+				vector.normalize();
 
+
 
+				orientations.setXYZW( i, vector.x, vector.y, vector.z, vector.w );
 
+
 
+			}
 
+
 
+			geometry.addAttribute( 'orientation', orientations ); // per mesh orientation
 
+
 
+			// material
 
+			var texture = new TextureLoader().load( 'textures/crate.gif' );
 
+			texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
+
 
+			var material = new RawShaderMaterial( {
 
+
 
+				uniforms: {
 
+					map: { value: texture }
 
+				},
 
+				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
+				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 
+				side: DoubleSide,
 
+				transparent: false
 
+
 
+			} );
 
+
 
+			var mesh = new Mesh( geometry, material );
 
+			mesh.frustumCulled = false;
 
+			scene.add( mesh );
 
+
 
+
 
+			if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
+
 
+				document.getElementById( "notSupported" ).style.display = "";
 
+				return;
 
+
 
+			}
 
 
+			renderer.setPixelRatio( window.devicePixelRatio );
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			container.appendChild( renderer.domElement );
 
 
-		if ( renderer.extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
+			stats = new Stats();
 
+			container.appendChild( stats.dom );
 
 
-			document.getElementById( "notSupported" ).style.display = "";
 
-			return;
 
+			window.addEventListener( 'resize', onWindowResize, false );
 
 
 		}
 
 
-		renderer.setPixelRatio( window.devicePixelRatio );
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
-		container.appendChild( renderer.domElement );
 
-
 
-		stats = new Stats();
 
-		container.appendChild( stats.dom );
 
-
 
-		window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-	}
 
+		function onWindowResize() {
 
 
-	function onWindowResize() {
 
+			camera.aspect = window.innerWidth / window.innerHeight;
 
+			camera.updateProjectionMatrix();
 
 
-		camera.aspect = window.innerWidth / window.innerHeight;
 
-		camera.updateProjectionMatrix();
 
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		renderer.setSize( window.innerWidth, window.innerHeight );
 
+		}
 
 
-	}
 
+		//
 
 
-	//
 
+		function animate() {
 
 
-	function animate() {
 
+			requestAnimationFrame( animate );
 
 
-		requestAnimationFrame( animate );
 
+			render();
 
+			stats.update();
 
 
-		render();
 
-		stats.update();
 
+		}
 
 
-	}
 
+		var lastTime = 0;
 
 
-	var lastTime = 0;
 
+		var moveQ = ( new Quaternion( .5, .5, .5, 0.0 ) ).normalize();
 
+		var tmpQ = new Quaternion();
 
+		var currentQ = new Quaternion();
 
+		function render() {
 
 
-	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();
 
 
-		var time = performance.now();
 
 
+			var object = scene.children[ 0 ];
 
 
-		var object = scene.children[ 0 ];
 
+			object.rotation.y = time * 0.00005;
 
 
-		object.rotation.y = time * 0.00005;
 
+			renderer.render( scene, camera );
 
 
-		renderer.render( scene, camera );
 
+			var delta = ( time - lastTime ) / 5000;
 
+			tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
 
 
-		var delta = ( time - lastTime ) / 5000;
 
-		tmpQ.set( moveQ.x * delta, moveQ.y * delta, moveQ.z * delta, 1 ).normalize();
 
+			for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
 
 
-		for ( var i = 0, ul = orientations.count; i < ul; i ++ ) {
 
+				var index = i * instanceBuffer.stride + orientations.offset;
 
+				currentQ.set( instanceBuffer.array[ index ], instanceBuffer.array[ index + 1 ], instanceBuffer.array[ index + 2 ], instanceBuffer.array[ index + 3 ] );
 
+				currentQ.multiply( tmpQ );
 
 
-			var index = i * instanceBuffer.stride + orientations.offset;
 
-			currentQ.set( instanceBuffer.array[ index ], instanceBuffer.array[ index + 1 ], instanceBuffer.array[ index + 2 ], instanceBuffer.array[ index + 3 ] );
 
-			currentQ.multiply( tmpQ );
 
+				orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
 
 
-			orientations.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
 
+			}
 
+			instanceBuffer.needsUpdate = true;
 
+			lastTime = time;
 
 
 		}
 
-		instanceBuffer.needsUpdate = true;
 
-		lastTime = time;
 
 
-	}
 
+		init();
 
+		animate();
 
 
-	init();
 
-	animate();
 
 	</script>
 
 
 </body>
 
 
-
 
-
 
 </html>

+ 67 - 51
examples/webgl_buffergeometry_instancing_lambert.html
Vizualizați fișierul 

@@ -26,25 +26,41 @@
 
 		<div id="notSupported" style="display:none">Sorry your graphics card + browser does not support hardware instancing</div>
 
 	</div>
 
 
-	<script src="../build/three.js"></script>
 
-	<script src="js/WebGL.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-
 
-	<script src="js/controls/OrbitControls.js"></script>
 
-	<script src="js/curves/CurveExtras.js"></script>
 
-
 
-
 
-	<script>
 
-
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-		}
 
-
 
-		THREE.ShaderLib.customDepthRGBA = { // this is a cut-and-paste of the depth shader -- modified to accommodate instancing for this app
 
-
 
-			uniforms: THREE.ShaderLib.depth.uniforms,
 
+	<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 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
 
+
 
+			uniforms: ShaderLib.depth.uniforms,
 
 
 			vertexShader:
 
 				`
 
@@ -98,13 +114,13 @@
 
 				}
 
 			`,
 
 
-			fragmentShader: THREE.ShaderChunk.depth_frag
 
+			fragmentShader: ShaderChunk.depth_frag
 
 
 		};
 
 
-		THREE.ShaderLib.lambert = { // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
 
+		ShaderLib.lambert = { // this is a cut-and-paste of the lambert shader -- modified to accommodate instancing for this app
 
 
-			uniforms: THREE.ShaderLib.lambert.uniforms,
 
+			uniforms: ShaderLib.lambert.uniforms,
 
 
 			vertexShader:
 
 				`
 
@@ -180,7 +196,7 @@
 
 				}
 
 				`,
 
 
-			fragmentShader: THREE.ShaderLib.lambert.fragmentShader
 
+			fragmentShader: ShaderLib.lambert.fragmentShader
 
 
 		};
 
 
@@ -195,30 +211,30 @@
 
 
 		function init() {
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+			renderer = new WebGLRenderer( { antialias: true } );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.shadowMap.enabled = true;
 
 			document.body.appendChild( renderer.domElement );
 
 
 			renderer.gammaOutput = true;
 
 
-			scene = new THREE.Scene();
 
+			scene = new Scene();
 
 
-			scene.fog = new THREE.FogExp2( 0x000000, 0.004 );
 
+			scene.fog = new FogExp2( 0x000000, 0.004 );
 
 			renderer.setClearColor( scene.fog.color, 1 );
 
 
-			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
+			camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
 			camera.position.set( 80, 40, 80 );
 
 
 			scene.add( camera );
 
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+			controls = new OrbitControls( camera, renderer.domElement );
 
 			controls.enableZoom = false;
 
 			controls.maxPolarAngle = Math.PI / 2;
 
 
-			scene.add( new THREE.AmbientLight( 0xffffff, 0.7 ) );
 
+			scene.add( new AmbientLight( 0xffffff, 0.7 ) );
 
 
-			var light = new THREE.DirectionalLight( 0xffffff, 0.4 );
 
+			var light = new DirectionalLight( 0xffffff, 0.4 );
 
 			light.position.set( 50, 40, 0 );
 
 
 			light.castShadow = true;
 
@@ -236,18 +252,18 @@
 
 			scene.add( light );
 
 
 			// light shadow camera helper
 
-			//light.shadowCameraHelper = new THREE.CameraHelper( light.shadow.camera );
 
+			//light.shadowCameraHelper = new CameraHelper( light.shadow.camera );
 
 			//scene.add( light.shadowCameraHelper );
 
 
 
 			// instanced buffer geometry
 
 
-			var geometry = new THREE.InstancedBufferGeometry();
 
-			geometry.copy( new THREE.TorusBufferGeometry( 2, 0.5, 8, 128 ) );
 
+			var geometry = new InstancedBufferGeometry();
 
+			geometry.copy( new TorusBufferGeometry( 2, 0.5, 8, 128 ) );
 
 
 			const INSTANCES = 256;
 
 
-			var knot = new THREE.Curves.TorusKnot( 10 );
 
+			var knot = new Curves.TorusKnot( 10 );
 
 			var positions = knot.getSpacedPoints( INSTANCES );
 
 
 			var offsets = new Float32Array( INSTANCES * 3 ); // xyz
 
@@ -273,29 +289,29 @@
 
 
 			}
 
 
-			geometry.addAttribute( 'instanceOffset', new THREE.InstancedBufferAttribute( offsets, 3 ) );
 
-			geometry.addAttribute( 'instanceColor', new THREE.InstancedBufferAttribute( colors, 3 ) );
 
-			geometry.addAttribute( 'instanceScale', new THREE.InstancedBufferAttribute( scales, 1 ) );
 
+			geometry.addAttribute( 'instanceOffset', new InstancedBufferAttribute( offsets, 3 ) );
 
+			geometry.addAttribute( 'instanceColor', new InstancedBufferAttribute( colors, 3 ) );
 
+			geometry.addAttribute( 'instanceScale', new InstancedBufferAttribute( scales, 1 ) );
 
 
 
 			// material
 
 
-			var envMap = new THREE.TextureLoader().load( `textures/metal.jpg`, function ( texture ) {
 
+			var envMap = new TextureLoader().load( `textures/metal.jpg`, function ( texture ) {
 
 
-				texture.mapping = THREE.SphericalReflectionMapping;
 
-				texture.encoding = THREE.sRGBEncoding;
 
+				texture.mapping = SphericalReflectionMapping;
 
+				texture.encoding = sRGBEncoding;
 
 				if ( mesh ) mesh.material.needsUpdate = true;
 
 
 			} );
 
 
-			var material = new THREE.MeshLambertMaterial( {
 
+			var material = new MeshLambertMaterial( {
 
 
 				color: 0xffb54a,
 
 				envMap: envMap,
 
-				combine: THREE.MultiplyOperation,
 
+				combine: MultiplyOperation,
 
 				reflectivity: 0.8,
 
 
-				vertexColors: THREE.VertexColors,
 
+				vertexColors: VertexColors,
 
 				fog: true
 
 
 			} );
 
@@ -306,15 +322,15 @@
 
 
 			// custom depth material - required for instanced shadows
 
 
-			var shader = THREE.ShaderLib[ 'customDepthRGBA' ];
 
+			var shader = ShaderLib[ 'customDepthRGBA' ];
 
 
-			var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
+			var uniforms = UniformsUtils.clone( shader.uniforms );
 
 
-			var customDepthMaterial = new THREE.ShaderMaterial( {
 
+			var customDepthMaterial = new ShaderMaterial( {
 
 
 				defines: {
 
 					'INSTANCED': "",
 
-					'DEPTH_PACKING': THREE.RGBADepthPacking
 
+					'DEPTH_PACKING': RGBADepthPacking
 
 				},
 
 				uniforms: uniforms,
 
 				vertexShader: shader.vertexShader,
 
@@ -324,7 +340,7 @@
 
 
 			//
 
 
-			mesh = new THREE.Mesh( geometry, material );
 
+			mesh = new Mesh( geometry, material );
 
 			mesh.scale.set( 1, 1, 2 );
 
 			mesh.castShadow = true;
 
 			mesh.receiveShadow = true;
 
@@ -335,9 +351,9 @@
 
 
 			//
 
 
-			var ground = new THREE.Mesh(
 
-				new THREE.PlaneBufferGeometry( 800, 800 ).rotateX( - Math.PI / 2 ),
 
-				new THREE.MeshPhongMaterial( { color: 0x888888 } )
 
+			var ground = new Mesh(
 
+				new PlaneBufferGeometry( 800, 800 ).rotateX( - Math.PI / 2 ),
 
+				new MeshPhongMaterial( { color: 0x888888 } )
 
 			);
 
 			ground.position.set( 0, - 40, 0 );
 
 			ground.receiveShadow = true;

+ 21 - 21
examples/webgl_buffergeometry_lines.html
Vizualizați fișierul 

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

+ 42 - 38
examples/webgl_buffergeometry_lines_indexed.html
Vizualizați fișierul 

@@ -16,18 +16,22 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - lines - indexed</div>
 
 
-		<script src="../build/three.js"></script>
 
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferGeometry,
 
+				Float32BufferAttribute,
 
+				LineBasicMaterial,
 
+				LineSegments,
 
+				Object3D,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				Vector3,
 
+				VertexColors,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -42,13 +46,13 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera = new PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 9000;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				var geometry = new THREE.BufferGeometry();
 
-				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
+				var geometry = new BufferGeometry();
 
+				var material = new LineBasicMaterial( { vertexColors: VertexColors } );
 
 
 				var indices = [];
 
 				var positions = [];
 
@@ -134,8 +138,8 @@
 
 				var y = 0;
 
 				snowflake(
 
 					[
 
-						new THREE.Vector3( 0, y, 0 ),
 
-						new THREE.Vector3( 500, y, 0 )
 
+						new Vector3( 0, y, 0 ),
 
+						new Vector3( 500, y, 0 )
 
 					],
 
 					false, 600
 
 				);
 
@@ -143,9 +147,9 @@
 
 				y += 600;
 
 				snowflake(
 
 					[
 
-						new THREE.Vector3( 0, y, 0 ),
 
-						new THREE.Vector3( 250, y + 400, 0 ),
 
-						new THREE.Vector3( 500, y, 0 )
 
+						new Vector3( 0, y, 0 ),
 
+						new Vector3( 250, y + 400, 0 ),
 
+						new Vector3( 500, y, 0 )
 
 					],
 
 					true, 600
 
 				);
 
@@ -153,10 +157,10 @@
 
 				y += 600;
 
 				snowflake(
 
 					[
 
-						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 )
 
+						new Vector3( 0, y, 0 ),
 
+						new Vector3( 500, y, 0 ),
 
+						new Vector3( 500, y + 500, 0 ),
 
+						new Vector3( 0, y + 500, 0 )
 
 					],
 
 					true, 600
 
 				);
 
@@ -164,15 +168,15 @@
 
 				y += 1000;
 
 				snowflake(
 
 					[
 
-						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 )
 
+						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 )
 
 					],
 
 					false, 600
 
 				);
 
@@ -180,20 +184,20 @@
 
 				//
 
 
 				geometry.setIndex( indices );
 
-				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 
-				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+				geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 
 
-				var lineSegments = new THREE.LineSegments( geometry, material );
 
+				var lineSegments = new LineSegments( geometry, material );
 
 				lineSegments.position.x -= 1200;
 
 				lineSegments.position.y -= 1200;
 
 
-				parent_node = new THREE.Object3D();
 
+				parent_node = new Object3D();
 
 				parent_node.add( lineSegments );
 
 
 				scene.add( parent_node );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );

+ 32 - 29
examples/webgl_buffergeometry_morphtargets.html
Vizualizați fișierul 

@@ -19,54 +19,57 @@
 
 			by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BoxBufferGeometry,
 
+				Color,
 
+				Float32BufferAttribute,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PointLight,
 
+				Scene,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var container, camera, scene, renderer, mesh;
 
 
 			function init() {
 
 
-				if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-					document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-					return false;
 
-
 
-				}
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x8FBCD4 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x8FBCD4 );
 
 
-				scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
 
+				scene.add( new AmbientLight( 0x8FBCD4, 0.4 ) );
 
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
 
 				camera.position.z = 8;
 
 				scene.add( camera );
 
 
-				var controls = new THREE.OrbitControls( camera, container );
 
+				var controls = new OrbitControls( camera, container );
 
 
-				var pointLight = new THREE.PointLight( 0xffffff, 1 );
 
+				var pointLight = new PointLight( 0xffffff, 1 );
 
 				camera.add( pointLight );
 
 
 				var geometry = createGeometry();
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0xff0000,
 
 					flatShading: true,
 
 					morphTargets: true
 
 				} );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
 				initGUI();
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
@@ -85,7 +88,7 @@
 
 
 			function createGeometry() {
 
 
-				var geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
 
+				var geometry = new 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
 
@@ -99,8 +102,8 @@
 
 
 				// for the second morph target, we'll twist the cubes vertices
 
 				var twistPositions = [];
 
-				var direction = new THREE.Vector3( 1, 0, 0 ).normalize();
 
-				var vertex = new THREE.Vector3();
 
+				var direction = new Vector3( 1, 0, 0 ).normalize();
 
+				var vertex = new Vector3();
 
 
 				for ( var i = 0; i < positions.length; i += 3 ) {
 
 
@@ -124,10 +127,10 @@
 
 				}
 
 
 				// add the spherical positions as the first morph target
 
-				geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );
 
+				geometry.morphAttributes.position[ 0 ] = new Float32BufferAttribute( spherePositions, 3 );
 
 
 				// add the twisted positions as the second morph target
 
-				geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );
 
+				geometry.morphAttributes.position[ 1 ] = new Float32BufferAttribute( twistPositions, 3 );
 
 
 				return geometry;
 
 
@@ -140,7 +143,7 @@
 
 					Spherify: 0,
 
 					Twist: 0,
 
 				};
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 				var folder = gui.addFolder( 'Morph Targets' );
 
 
 				folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {

+ 26 - 23
examples/webgl_buffergeometry_points.html
Vizualizați fișierul 

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

+ 29 - 25
examples/webgl_buffergeometry_points_interleaved.html
Vizualizați fișierul 

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

+ 25 - 22
examples/webgl_buffergeometry_rawshader.html
Vizualizați fișierul 

@@ -11,11 +11,6 @@
 
 		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - raw shader demo</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script id="vertexShader" type="x-shader/x-vertex">
 
 
 			precision mediump float;
 
@@ -62,13 +57,21 @@
 
 
 		</script>
 
 
-		<script>
 
-
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
 
-
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
-
 
-			}
 
+		<script type="module">
 
+			import {
 
+				BufferGeometry,
 
+				Color,
 
+				DoubleSide,
 
+				Float32BufferAttribute,
 
+				Mesh,
 
+				PerspectiveCamera,
 
+				RawShaderMaterial,
 
+				Scene,
 
+				Uint8BufferAttribute,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
 			var container, stats;
 
 
@@ -81,17 +84,17 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
 
+				camera = new PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
 
 				camera.position.z = 2;
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x101010 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x101010 );
 
 
 				// geometry
 
 
 				var triangles = 500;
 
 
-				var geometry = new THREE.BufferGeometry();
 
+				var geometry = new BufferGeometry();
 
 
 				var positions = [];
 
 				var colors = [];
 
@@ -109,8 +112,8 @@
 
 
 				}
 
 
-				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
 
-				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
 
+				var positionAttribute = new Float32BufferAttribute( positions, 3 );
 
+				var colorAttribute = new Uint8BufferAttribute( colors, 4 );
 
 
 				colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
 
 
@@ -119,22 +122,22 @@
 
 
 				// material
 
 
-				var material = new THREE.RawShaderMaterial( {
 
+				var material = new RawShaderMaterial( {
 
 
 					uniforms: {
 
 						time: { value: 1.0 }
 
 					},
 
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 
 					fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
 
-					side: THREE.DoubleSide,
 
+					side: DoubleSide,
 
 					transparent: true
 
 
 				} );
 
 
-				var mesh = new THREE.Mesh( geometry, material );
 
+				var mesh = new Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );

+ 119 - 110
examples/webgl_buffergeometry_selective_draw.html
Vizualizați fișierul 

@@ -6,10 +6,6 @@
 
 	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	<link type="text/css" rel="stylesheet" href="main.css">
 
 
-	<script src="../build/three.js"></script>
 
-	<script src="js/libs/stats.min.js"></script>
 
-	<script src="js/WebGL.js"></script>
 
-
 
 	<script type="x-shader/x-vertex" id="vertexshader">
 
 		attribute float visible;
 
 		varying float vVisible;
 
@@ -47,182 +43,195 @@
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> buffergeometry - selective - draw
 
 			<div id="title"></div>
 
-			<div id="ui"><a href="#" onclick="hideLines();">CULL SOME LINES</a> - <a href="#" onclick="showAllLines();">SHOW ALL LINES</a></div>
 
+			<div id="ui"><a href="#" id="hideLines">CULL SOME LINES</a> - <a href="#" id="showAllLines">SHOW ALL LINES</a></div>
 
 		</div>
 
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Color,
 
+				LineSegments,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				ShaderMaterial,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var camera, scene, renderer, stats;
 
+			var geometry, mesh;
 
+			var numLat = 100;
 
+			var numLng = 200;
 
+			var numLinesCulled = 0;
 
 
-		}
 
+			init();
 
+			animate();
 
 
-		var camera, scene, renderer, stats;
 
-		var geometry, mesh;
 
-		var numLat = 100;
 
-		var numLng = 200;
 
-		var numLinesCulled = 0;
 
+			function init() {
 
 
-		init();
 
-		animate();
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
 
-		function init() {
 
+				scene = new Scene();
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			document.body.appendChild( renderer.domElement );
 
+				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
 
+				camera.position.z = 3.5;
 
 
-			scene = new THREE.Scene();
 
+				scene.add( new AmbientLight( 0x444444 ) );
 
 
-			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10 );
 
-			camera.position.z = 3.5;
 
+				stats = new Stats();
 
+				document.body.appendChild( stats.dom );
 
 
-			scene.add( new THREE.AmbientLight( 0x444444 ) );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			stats = new Stats();
 
-			document.body.appendChild( stats.dom );
 
+				addLines( 1.0 );
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				var hideLinesButton = document.getElementById( 'hideLines' );
 
+				hideLinesButton.addEventListener( 'click', hideLines );
 
 
-			addLines( 1.0 );
 
+				var showAllLinesButton = document.getElementById( 'showAllLines' );
 
+				showAllLinesButton.addEventListener( 'click', showAllLines );
 
 
-		}
 
+			}
 
 
-		function addLines( radius ) {
 
+			function addLines( radius ) {
 
 
-			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 );
 
+				geometry = new BufferGeometry();
 
+				var linePositions = new Float32Array( numLat * numLng * 3 * 2 );
 
+				var lineColors = new Float32Array( numLat * numLng * 3 * 2 );
 
+				var visible = new Float32Array( numLat * numLng * 2 );
 
 
-			for ( var i = 0; i < numLat; ++ i ) {
 
+				for ( var i = 0; i < numLat; ++ i ) {
 
 
-				for ( var j = 0; j < numLng; ++ j ) {
 
+					for ( var j = 0; j < numLng; ++ j ) {
 
 
-					var lat = ( Math.random() * Math.PI ) / 50.0 + i / numLat * Math.PI;
 
-					var lng = ( Math.random() * Math.PI ) / 50.0 + j / numLng * 2 * Math.PI;
 
+						var lat = ( Math.random() * Math.PI ) / 50.0 + i / numLat * Math.PI;
 
+						var lng = ( Math.random() * Math.PI ) / 50.0 + j / numLng * 2 * Math.PI;
 
 
-					var index = i * numLng + j;
 
+						var index = i * numLng + j;
 
 
-					linePositions[ index * 6 + 0 ] = 0;
 
-					linePositions[ index * 6 + 1 ] = 0;
 
-					linePositions[ index * 6 + 2 ] = 0;
 
-					linePositions[ index * 6 + 3 ] = radius * Math.sin( lat ) * Math.cos( lng );
 
-					linePositions[ index * 6 + 4 ] = radius * Math.cos( lat );
 
-					linePositions[ index * 6 + 5 ] = radius * Math.sin( lat ) * Math.sin( lng );
 
+						linePositions[ index * 6 + 0 ] = 0;
 
+						linePositions[ index * 6 + 1 ] = 0;
 
+						linePositions[ index * 6 + 2 ] = 0;
 
+						linePositions[ index * 6 + 3 ] = radius * Math.sin( lat ) * Math.cos( lng );
 
+						linePositions[ index * 6 + 4 ] = radius * Math.cos( lat );
 
+						linePositions[ index * 6 + 5 ] = radius * Math.sin( lat ) * Math.sin( lng );
 
 
-					var color = new THREE.Color( 0xffffff );
 
+						var color = new Color( 0xffffff );
 
 
-					color.setHSL( lat / Math.PI, 1.0, 0.2 );
 
-					lineColors[ index * 6 + 0 ] = color.r;
 
-					lineColors[ index * 6 + 1 ] = color.g;
 
-					lineColors[ index * 6 + 2 ] = color.b;
 
+						color.setHSL( lat / Math.PI, 1.0, 0.2 );
 
+						lineColors[ index * 6 + 0 ] = color.r;
 
+						lineColors[ index * 6 + 1 ] = color.g;
 
+						lineColors[ index * 6 + 2 ] = color.b;
 
 
-					color.setHSL( lat / Math.PI, 1.0, 0.7 );
 
-					lineColors[ index * 6 + 3 ] = color.r;
 
-					lineColors[ index * 6 + 4 ] = color.g;
 
-					lineColors[ index * 6 + 5 ] = color.b;
 
+						color.setHSL( lat / Math.PI, 1.0, 0.7 );
 
+						lineColors[ index * 6 + 3 ] = color.r;
 
+						lineColors[ index * 6 + 4 ] = color.g;
 
+						lineColors[ index * 6 + 5 ] = color.b;
 
 
-					// non-0 is visible
 
-					visible[ index * 2 + 0 ] = 1.0;
 
-					visible[ index * 2 + 1 ] = 1.0;
 
+						// non-0 is visible
 
+						visible[ index * 2 + 0 ] = 1.0;
 
+						visible[ index * 2 + 1 ] = 1.0;
 
+
 
+					}
 
 
 				}
 
 
-			}
 
+				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();
 
 
-			geometry.computeBoundingSphere();
 
+				var shaderMaterial = new ShaderMaterial( {
 
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
+				} );
 
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
-			} );
 
+				mesh = new LineSegments( geometry, shaderMaterial );
 
+				scene.add( mesh );
 
 
-			mesh = new THREE.LineSegments( geometry, shaderMaterial );
 
-			scene.add( mesh );
 
+				updateCount();
 
 
-			updateCount();
 
+			}
 
 
-		}
 
+			function updateCount() {
 
+
 
+				var str = '1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
 
+				document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
 
 
-		function updateCount() {
 
+			}
 
 
-			var str = '1 draw call, ' + numLat * numLng + ' lines, ' + numLinesCulled + ' culled (<a target="_blank" href="http://callum.com">author</a>)';
 
-			document.getElementById( 'title' ).innerHTML = str.replace( /\B(?=(\d{3})+(?!\d))/g, "," );
 
+			function hideLines() {
 
 
-		}
 
+				for ( var i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
 
 
-		function hideLines() {
 
+					if ( Math.random() > 0.75 ) {
 
 
-			for ( var i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
 
+						if ( geometry.attributes.visible.array[ i + 0 ] ) {
 
 
-				if ( Math.random() > 0.75 ) {
 
+							++ numLinesCulled;
 
 
-					if ( geometry.attributes.visible.array[ i + 0 ] ) {
 
+						}
 
 
-						++ numLinesCulled;
 
+						geometry.attributes.visible.array[ i + 0 ] = 0;
 
+						geometry.attributes.visible.array[ i + 1 ] = 0;
 
 
 					}
 
 
-					geometry.attributes.visible.array[ i + 0 ] = 0;
 
-					geometry.attributes.visible.array[ i + 1 ] = 0;
 
-
 
 				}
 
 
-			}
 
-
 
-			geometry.attributes.visible.needsUpdate = true;
 
+				geometry.attributes.visible.needsUpdate = true;
 
 
-			updateCount();
 
+				updateCount();
 
 
-		}
 
+			}
 
 
-		function showAllLines() {
 
+			function showAllLines() {
 
 
-			numLinesCulled = 0;
 
+				numLinesCulled = 0;
 
 
-			for ( var i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
 
+				for ( var i = 0; i < geometry.attributes.visible.array.length; i += 2 ) {
 
 
-				geometry.attributes.visible.array[ i + 0 ] = 1;
 
-				geometry.attributes.visible.array[ i + 1 ] = 1;
 
+					geometry.attributes.visible.array[ i + 0 ] = 1;
 
+					geometry.attributes.visible.array[ i + 1 ] = 1;
 
 
-			}
 
+				}
 
 
-			geometry.attributes.visible.needsUpdate = true;
 
+				geometry.attributes.visible.needsUpdate = true;
 
 
-			updateCount();
 
+				updateCount();
 
 
-		}
 
+			}
 
 
-		function onWindowResize() {
 
+			function onWindowResize() {
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		}
 
+			}
 
 
-		function animate( time ) {
 
+			function animate( time ) {
 
 
-			requestAnimationFrame( animate );
 
+				requestAnimationFrame( animate );
 
 
-			var time = Date.now() * 0.001;
 
+				var time = Date.now() * 0.001;
 
 
-			mesh.rotation.x = time * 0.25;
 
-			mesh.rotation.y = time * 0.5;
 
+				mesh.rotation.x = time * 0.25;
 
+				mesh.rotation.y = time * 0.5;
 
 
-			stats.update();
 
-			renderer.render( scene, camera );
 
+				stats.update();
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
 		</script>
 
 	</body>

+ 42 - 33
examples/webgl_buffergeometry_uint.html
Vizualizați fișierul 

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

+ 42 - 27
examples/webgl_camera.html
Vizualizați fișierul 

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

+ 28 - 16
examples/webgl_camera_array.html
Vizualizați fișierul 

@@ -8,9 +8,20 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				ArrayCamera,
 
+				CylinderBufferGeometry,
 
+				DirectionalLight,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				Vector4,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
 			var camera, scene, renderer;
 
 			var mesh;
 
@@ -32,8 +43,8 @@
 
 
 					for ( var x = 0; x < AMOUNT; x ++ ) {
 
 
-						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 ) );
 
+						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 ) );
 
 						subcamera.position.x = ( x / AMOUNT ) - 0.5;
 
 						subcamera.position.y = 0.5 - ( y / AMOUNT );
 
 						subcamera.position.z = 1.5;
 
@@ -46,36 +57,36 @@
 
 
 				}
 
 
-				camera = new THREE.ArrayCamera( cameras );
 
+				camera = new ArrayCamera( cameras );
 
 				camera.position.z = 3;
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				scene.add( new THREE.AmbientLight( 0x222244 ) );
 
+				scene.add( new AmbientLight( 0x222244 ) );
 
 
-				var light = new THREE.DirectionalLight();
 
+				var light = new 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 THREE.PlaneBufferGeometry( 100, 100 );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0x000066 } );
 
+				var geometry = new PlaneBufferGeometry( 100, 100 );
 
+				var material = new MeshPhongMaterial( { color: 0x000066 } );
 
 
-				var background = new THREE.Mesh( geometry, material );
 
+				var background = new Mesh( geometry, material );
 
 				background.receiveShadow = true;
 
 				background.position.set( 0, 0, - 1 );
 
 				scene.add( background );
 
 
-				var geometry = new THREE.CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
 
+				var geometry = new CylinderBufferGeometry( 0.5, 0.5, 1, 32 );
 
+				var material = new MeshPhongMaterial( { color: 0xff0000 } );
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
+				mesh = new Mesh( geometry, material );
 
 				mesh.castShadow = true;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.shadowMap.enabled = true;
 
@@ -112,6 +123,7 @@
 
 						subcamera.updateProjectionMatrix();
 
 
 					}
 
+
 
 				}
 
 
 				renderer.setSize( window.innerWidth, window.innerHeight );

+ 33 - 23
examples/webgl_camera_cinematic.html
Vizualizați fișierul 

@@ -21,19 +21,29 @@
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
 
 		</div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/shaders/BokehShader2.js"></script>
 
-		<script src="js/cameras/CinematicCamera.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src='js/libs/dat.gui.min.js'></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				BoxBufferGeometry,
 
+				Color,
 
+				DirectionalLight,
 
+				Math as _Math,
 
+				Mesh,
 
+				MeshLambertMaterial,
 
+				Raycaster,
 
+				Scene,
 
+				Vector2,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { CinematicCamera } from './jsm/cameras/CinematicCamera.js';
 
 
 			var camera, scene, raycaster, renderer, stats;
 
 
-			var mouse = new THREE.Vector2(), INTERSECTED;
 
+			var mouse = new Vector2(), INTERSECTED;
 
 			var radius = 100, theta = 0;
 
 
 			init();
 
@@ -41,24 +51,24 @@
 
 
 			function init() {
 
 
-				camera = new THREE.CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
+				camera = new CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.setLens( 5 );
 
 				camera.position.set( 2, 1, 500 );
 
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0xf0f0f0 );
 
 
-				scene.add( new THREE.AmbientLight( 0xffffff, 0.3 ) );
 
+				scene.add( new AmbientLight( 0xffffff, 0.3 ) );
 
 
-				var light = new THREE.DirectionalLight( 0xffffff, 0.35 );
 
+				var light = new DirectionalLight( 0xffffff, 0.35 );
 
 				light.position.set( 1, 1, 1 ).normalize();
 
 				scene.add( light );
 
 
-				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
+				var geometry = new BoxBufferGeometry( 20, 20, 20 );
 
 
 				for ( var i = 0; i < 1500; i ++ ) {
 
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
+					var object = new Mesh( geometry, new MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
 
 
 					object.position.x = Math.random() * 800 - 400;
 
 					object.position.y = Math.random() * 800 - 400;
 
@@ -68,9 +78,9 @@
 
 
 				}
 
 
-				raycaster = new THREE.Raycaster();
 
+				raycaster = new Raycaster();
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
@@ -131,7 +141,7 @@
 
 
 				//
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				gui.add( effectController, 'focalLength', 1, 135, 0.01 ).onChange( matChanger );
 
 				gui.add( effectController, 'fstop', 1.8, 22, 0.01 ).onChange( matChanger );
 
@@ -176,9 +186,9 @@
 
 
 				theta += 0.1;
 
 
-				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.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.lookAt( scene.position );
 
 
 				camera.updateMatrixWorld();

+ 32 - 18
examples/webgl_camera_logarithmicdepthbuffer.html
Vizualizați fișierul 

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

+ 38 - 23
examples/webgl_clipping.html
Vizualizați fișierul 

@@ -8,12 +8,27 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				AmbientLight,
 
+				DirectionalLight,
 
+				DoubleSide,
 
+				Mesh,
 
+				MeshPhongMaterial,
 
+				PerspectiveCamera,
 
+				Plane,
 
+				PlaneBufferGeometry,
 
+				Scene,
 
+				SpotLight,
 
+				TorusKnotBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var camera, scene, renderer, startTime, object, stats;
 
 
@@ -22,17 +37,17 @@
 
 
 			function init() {
 
 
-				camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
+				camera = new PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
 
 				camera.position.set( 0, 1.3, 3 );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
 				// Lights
 
 
-				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
+				scene.add( new AmbientLight( 0x505050 ) );
 
 
-				var spotLight = new THREE.SpotLight( 0xffffff );
 
+				var spotLight = new SpotLight( 0xffffff );
 
 				spotLight.angle = Math.PI / 5;
 
 				spotLight.penumbra = 0.2;
 
 				spotLight.position.set( 2, 3, 3 );
 
@@ -43,7 +58,7 @@
 
 				spotLight.shadow.mapSize.height = 1024;
 
 				scene.add( spotLight );
 
 
-				var dirLight = new THREE.DirectionalLight( 0x55505a, 1 );
 
+				var dirLight = new DirectionalLight( 0x55505a, 1 );
 
 				dirLight.position.set( 0, 3, 0 );
 
 				dirLight.castShadow = true;
 
 				dirLight.shadow.camera.near = 1;
 
@@ -60,15 +75,15 @@
 
 
 				// ***** Clipping planes: *****
 
 
-				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 );
 
+				var localPlane = new Plane( new Vector3( 0, - 1, 0 ), 0.8 );
 
+				var globalPlane = new Plane( new Vector3( - 1, 0, 0 ), 0.1 );
 
 
 				// Geometry
 
 
-				var material = new THREE.MeshPhongMaterial( {
 
+				var material = new MeshPhongMaterial( {
 
 					color: 0x80ee10,
 
 					shininess: 100,
 
-					side: THREE.DoubleSide,
 
+					side: DoubleSide,
 
 
 					// ***** Clipping setup (material): *****
 
 					clippingPlanes: [ localPlane ],
 
@@ -76,15 +91,15 @@
 
 
 				} );
 
 
-				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
 
+				var geometry = new TorusKnotBufferGeometry( 0.4, 0.08, 95, 20 );
 
 
-				object = new THREE.Mesh( geometry, material );
 
+				object = new Mesh( geometry, material );
 
 				object.castShadow = true;
 
 				scene.add( object );
 
 
-				var ground = new THREE.Mesh(
 
-					new THREE.PlaneBufferGeometry( 9, 9, 1, 1 ),
 
-					new THREE.MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
 
+				var ground = new Mesh(
 
+					new PlaneBufferGeometry( 9, 9, 1, 1 ),
 
+					new MeshPhongMaterial( { color: 0xa0adaf, shininess: 150 } )
 
 				);
 
 
 				ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
 
@@ -98,7 +113,7 @@
 
 
 				// Renderer
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new WebGLRenderer();
 
 				renderer.shadowMap.enabled = true;
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -113,13 +128,13 @@
 
 
 				// Controls
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.target.set( 0, 1, 0 );
 
 				controls.update();
 
 
 				// GUI
 
 
-				var gui = new dat.GUI(),
 
+				var gui = new GUI(),
 
 					folderLocal = gui.addFolder( 'Local Clipping' ),
 
 					propsLocal = {

+ 58 - 40
examples/webgl_clipping_advanced.html
Vizualizați fișierul 

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

+ 40 - 25
examples/webgl_clipping_intersection.html
Vizualizați fișierul 

@@ -8,11 +8,26 @@
 
 	</head>
 
 	<body>
 
 
-		<script src="../build/three.js"></script>
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/libs/dat.gui.min.js"></script>
 
-
 
-		<script>
 
+		<script type="module">
 
+			import {
 
+				Color,
 
+				DoubleSide,
 
+				Group,
 
+				HemisphereLight,
 
+				Mesh,
 
+				MeshLambertMaterial,
 
+				PerspectiveCamera,
 
+				Plane,
 
+				PlaneHelper,
 
+				Scene,
 
+				SphereBufferGeometry,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
+
 
+			import { GUI } from './jsm/libs/dat.gui.module.js';
 
+
 
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 
 			var camera, scene, renderer;
 
 
@@ -23,9 +38,9 @@
 
 			};
 
 
 			var clipPlanes = [
 
-				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 )
 
+				new Plane( new Vector3( 1, 0, 0 ), 0 ),
 
+				new Plane( new Vector3( 0, - 1, 0 ), 0 ),
 
+				new Plane( new Vector3( 0, 0, - 1 ), 0 )
 
 			];
 
 
 			init();
 
@@ -33,49 +48,49 @@
 
 
 			function init() {
 
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.localClippingEnabled = true;
 
 				document.body.appendChild( renderer.domElement );
 
 
-				scene = new THREE.Scene();
 
+				scene = new Scene();
 
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 
+				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
 
 
 				camera.position.set( - 1.5, 2.5, 3.0 );
 
 
-				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				var controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.addEventListener( 'change', render ); // use only if there is no animation loop
 
 				controls.minDistance = 1;
 
 				controls.maxDistance = 10;
 
 				controls.enablePan = false;
 
 
-				var light = new THREE.HemisphereLight( 0xffffff, 0x080808, 1.5 );
 
+				var light = new HemisphereLight( 0xffffff, 0x080808, 1.5 );
 
 				light.position.set( - 1.25, 1, 1.25 );
 
 				scene.add( light );
 
 
-				// var helper = new THREE.CameraHelper( light.shadow.camera );
 
+				// var helper = new CameraHelper( light.shadow.camera );
 
 				// scene.add( helper );
 
 
 				//
 
 
-				var group = new THREE.Group();
 
+				var group = new Group();
 
 
 				for ( var i = 1; i <= 30; i += 2 ) {
 
 
-					var geometry = new THREE.SphereBufferGeometry( i / 30, 48, 24 );
 
+					var geometry = new SphereBufferGeometry( i / 30, 48, 24 );
 
 
-					var material = new THREE.MeshLambertMaterial( {
 
+					var material = new MeshLambertMaterial( {
 
 
-						color: new THREE.Color().setHSL( Math.random(), 0.5, 0.5 ),
 
-						side: THREE.DoubleSide,
 
+						color: new Color().setHSL( Math.random(), 0.5, 0.5 ),
 
+						side: DoubleSide,
 
 						clippingPlanes: clipPlanes,
 
 						clipIntersection: params.clipIntersection
 
 
 					} );
 
 
-					group.add( new THREE.Mesh( geometry, material ) );
 
+					group.add( new Mesh( geometry, material ) );
 
 
 				}
 
 
@@ -83,16 +98,16 @@
 
 
 				// helpers
 
 
-				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 ) );
 
+				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 ) );
 
 				helpers.visible = false;
 
 				scene.add( helpers );
 
 
 				// gui
 
 
-				var gui = new dat.GUI();
 
+				var gui = new GUI();
 
 
 				gui.add( params, 'clipIntersection' ).name( 'clip intersection' ).onChange( function ( value ) {

+ 80 - 77
examples/webgl_custom_attributes.html
Vizualizați fișierul 

@@ -11,11 +11,6 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - custom attributes example</div>
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			uniform float amplitude;
 
@@ -61,131 +56,139 @@
 
 
 		</script>
 
 
+		<script type="module">
 
+			import {
 
+				BufferAttribute,
 
+				Color,
 
+				Math as _Math,
 
+				Mesh,
 
+				PerspectiveCamera,
 
+				RepeatWrapping,
 
+				Scene,
 
+				ShaderMaterial,
 
+				SphereBufferGeometry,
 
+				TextureLoader,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var renderer, scene, camera, stats;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var sphere, uniforms;
 
 
-		}
 
+			var displacement, noise;
 
 
-		var renderer, scene, camera, stats;
 
+			init();
 
+			animate();
 
 
-		var sphere, uniforms;
 
+			function init() {
 
 
-		var displacement, noise;
 
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.z = 300;
 
 
-		init();
 
-		animate();
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x050505 );
 
 
-		function init() {
 
+				uniforms = {
 
 
-			camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
-			camera.position.z = 300;
 
+					"amplitude": { value: 1.0 },
 
+					"color": { value: new Color( 0xff2200 ) },
 
+					"texture": { value: new TextureLoader().load( "textures/water.jpg" ) }
 
 
-			scene = new THREE.Scene();
 
-			scene.background = new THREE.Color( 0x050505 );
 
+				};
 
 
-			uniforms = {
 
+				uniforms[ "texture" ].value.wrapS = uniforms[ "texture" ].value.wrapT = RepeatWrapping;
 
 
-				"amplitude": { value: 1.0 },
 
-				"color": { value: new THREE.Color( 0xff2200 ) },
 
-				"texture": { value: new THREE.TextureLoader().load( "textures/water.jpg" ) }
 
+				var shaderMaterial = new ShaderMaterial( {
 
 
-			};
 
+					uniforms: uniforms,
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
 
-			uniforms[ "texture" ].value.wrapS = uniforms[ "texture" ].value.wrapT = THREE.RepeatWrapping;
 
+				} );
 
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
 
 
-				uniforms: uniforms,
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
+				var radius = 50, segments = 128, rings = 64;
 
 
-			} );
 
+				var geometry = new SphereBufferGeometry( radius, segments, rings );
 
 
+				displacement = new Float32Array( geometry.attributes.position.count );
 
+				noise = new Float32Array( geometry.attributes.position.count );
 
 
-			var radius = 50, segments = 128, rings = 64;
 
+				for ( var i = 0; i < displacement.length; i ++ ) {
 
 
-			var geometry = new THREE.SphereBufferGeometry( radius, segments, rings );
 
+					noise[ i ] = Math.random() * 5;
 
 
-			displacement = new Float32Array( geometry.attributes.position.count );
 
-			noise = new Float32Array( geometry.attributes.position.count );
 
+				}
 
 
-			for ( var i = 0; i < displacement.length; i ++ ) {
 
+				geometry.addAttribute( 'displacement', new BufferAttribute( displacement, 1 ) );
 
 
-				noise[ i ] = Math.random() * 5;
 
+				sphere = new Mesh( geometry, shaderMaterial );
 
+				scene.add( sphere );
 
 
-			}
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-			geometry.addAttribute( 'displacement', new THREE.BufferAttribute( displacement, 1 ) );
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			sphere = new THREE.Mesh( geometry, shaderMaterial );
 
-			scene.add( sphere );
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				//
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+			}
 
 
-			//
 
+			function onWindowResize() {
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-		}
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		function onWindowResize() {
 
+			}
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+			function animate() {
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				requestAnimationFrame( animate );
 
 
-		}
 
+				render();
 
+				stats.update();
 
 
-		function animate() {
 
+			}
 
 
-			requestAnimationFrame( animate );
 
+			function render() {
 
 
-			render();
 
-			stats.update();
 
+				var time = Date.now() * 0.01;
 
 
-		}
 
+				sphere.rotation.y = sphere.rotation.z = 0.01 * time;
 
 
-		function render() {
 
+				uniforms[ "amplitude" ].value = 2.5 * Math.sin( sphere.rotation.y * 0.125 );
 
+				uniforms[ "color" ].value.offsetHSL( 0.0005, 0, 0 );
 
 
-			var time = Date.now() * 0.01;
 
+				for ( var i = 0; i < displacement.length; i ++ ) {
 
 
-			sphere.rotation.y = sphere.rotation.z = 0.01 * time;
 
+					displacement[ i ] = Math.sin( 0.1 * i + time );
 
 
-			uniforms[ "amplitude" ].value = 2.5 * Math.sin( sphere.rotation.y * 0.125 );
 
-			uniforms[ "color" ].value.offsetHSL( 0.0005, 0, 0 );
 
+					noise[ i ] += 0.5 * ( 0.5 - Math.random() );
 
+					noise[ i ] = _Math.clamp( noise[ i ], - 5, 5 );
 
 
-			for ( var i = 0; i < displacement.length; i ++ ) {
 
+					displacement[ i ] += noise[ i ];
 
 
-				displacement[ i ] = Math.sin( 0.1 * i + time );
 
+				}
 
 
-				noise[ i ] += 0.5 * ( 0.5 - Math.random() );
 
-				noise[ i ] = THREE.Math.clamp( noise[ i ], - 5, 5 );
 
+				sphere.geometry.attributes.displacement.needsUpdate = true;
 
 
-				displacement[ i ] += noise[ i ];
 
+				renderer.render( scene, camera );
 
 
 			}
 
 
-			sphere.geometry.attributes.displacement.needsUpdate = true;
 
-
 
-			renderer.render( scene, camera );
 
-
 
-		}
 
 
-
 
-	</script>
 
+		</script>
 
 
 </body>

+ 98 - 96
examples/webgl_custom_attributes_lines.html
Vizualizați fișierul 

@@ -11,11 +11,6 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - custom attributes example</div>
 
 		<div id="container"></div>
 
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			uniform float amplitude;
 
@@ -52,155 +47,162 @@
 
 
 		</script>
 
 
+		<script type="module">
 
+			import {
 
+				AdditiveBlending,
 
+				Color,
 
+				Float32BufferAttribute,
 
+				FontLoader,
 
+				Line,
 
+				PerspectiveCamera,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextBufferGeometry,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var renderer, scene, camera, stats;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var line, uniforms;
 
 
-		}
 
+			var loader = new FontLoader();
 
+			loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
 
-		var renderer, scene, camera, stats;
 
+				init( font );
 
+				animate();
 
 
-		var line, uniforms;
 
+			} );
 
 
-		var loader = new THREE.FontLoader();
 
-		loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
 
+			function init( font ) {
 
 
-			init( font );
 
-			animate();
 
+				camera = new PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.z = 400;
 
 
-		} );
 
+				scene = new Scene();
 
+				scene.background = new Color( 0x050505 );
 
 
-		function init( font ) {
 
+				uniforms = {
 
 
-			camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
 
-			camera.position.z = 400;
 
+					amplitude: { value: 5.0 },
 
+					opacity: { value: 0.3 },
 
+					color: { value: new Color( 0xffffff ) }
 
 
-			scene = new THREE.Scene();
 
-			scene.background = new THREE.Color( 0x050505 );
 
+				};
 
 
-			uniforms = {
 
+				var shaderMaterial = new ShaderMaterial( {
 
 
-				amplitude: { value: 5.0 },
 
-				opacity: { value: 0.3 },
 
-				color: { value: new THREE.Color( 0xffffff ) }
 
+					uniforms: uniforms,
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
+					blending: AdditiveBlending,
 
+					depthTest: false,
 
+					transparent: true
 
 
-			};
 
+				} );
 
 
-			var shaderMaterial = new THREE.ShaderMaterial( {
 
 
-				uniforms: uniforms,
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				blending: THREE.AdditiveBlending,
 
-				depthTest: false,
 
-				transparent: true
 
+				var geometry = new TextBufferGeometry( 'three.js', {
 
 
-			} );
 
+					font: font,
 
 
+					size: 50,
 
+					height: 15,
 
+					curveSegments: 10,
 
 
-			var geometry = new THREE.TextBufferGeometry( 'three.js', {
 
+					bevelThickness: 5,
 
+					bevelSize: 1.5,
 
+					bevelEnabled: true,
 
+					bevelSegments: 10,
 
 
-				font: font,
 
+				} );
 
 
-				size: 50,
 
-				height: 15,
 
-				curveSegments: 10,
 
+				geometry.center();
 
 
-				bevelThickness: 5,
 
-				bevelSize: 1.5,
 
-				bevelEnabled: true,
 
-				bevelSegments: 10,
 
+				var count = geometry.attributes.position.count;
 
 
-			} );
 
+				var displacement = new Float32BufferAttribute( count * 3, 3 );
 
+				geometry.addAttribute( 'displacement', displacement );
 
 
-			geometry.center();
 
+				var customColor = new Float32BufferAttribute( count * 3, 3 );
 
+				geometry.addAttribute( 'customColor', customColor );
 
 
-			var count = geometry.attributes.position.count;
 
+				var color = new Color( 0xffffff );
 
 
-			var displacement = new THREE.Float32BufferAttribute( count * 3, 3 );
 
-			geometry.addAttribute( 'displacement', displacement );
 
+				for ( var i = 0, l = customColor.count; i < l; i ++ ) {
 
 
-			var customColor = new THREE.Float32BufferAttribute( count * 3, 3 );
 
-			geometry.addAttribute( 'customColor', customColor );
 
+					color.setHSL( i / l, 0.5, 0.5 );
 
+					color.toArray( customColor.array, i * customColor.itemSize );
 
 
-			var color = new THREE.Color( 0xffffff );
 
+				}
 
 
-			for ( var i = 0, l = customColor.count; i < l; i ++ ) {
 
+				line = new Line( geometry, shaderMaterial );
 
+				line.rotation.x = 0.2;
 
+				scene.add( line );
 
 
-				color.setHSL( i / l, 0.5, 0.5 );
 
-				color.toArray( customColor.array, i * customColor.itemSize );
 
+				renderer = new WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-			}
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			line = new THREE.Line( geometry, shaderMaterial );
 
-			line.rotation.x = 0.2;
 
-			scene.add( line );
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				//
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+			}
 
 
-			//
 
+			function onWindowResize() {
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-		}
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		function onWindowResize() {
 
+			}
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+			function animate() {
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				requestAnimationFrame( animate );
 
 
-		}
 
+				render();
 
+				stats.update();
 
 
-		function animate() {
 
+			}
 
 
-			requestAnimationFrame( animate );
 
+			function render() {
 
 
-			render();
 
-			stats.update();
 
+				var time = Date.now() * 0.001;
 
 
-		}
 
+				line.rotation.y = 0.25 * time;
 
 
-		function render() {
 
+				uniforms.amplitude.value = Math.sin( 0.5 * time );
 
+				uniforms.color.value.offsetHSL( 0.0005, 0, 0 );
 
 
-			var time = Date.now() * 0.001;
 
+				var attributes = line.geometry.attributes;
 
+				var array = attributes.displacement.array;
 
 
-			line.rotation.y = 0.25 * time;
 
+				for ( var i = 0, l = array.length; i < l; i += 3 ) {
 
 
-			uniforms.amplitude.value = Math.sin( 0.5 * time );
 
-			uniforms.color.value.offsetHSL( 0.0005, 0, 0 );
 
+					array[ i ] += 0.3 * ( 0.5 - Math.random() );
 
+					array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );
 
+					array[ i + 2 ] += 0.3 * ( 0.5 - Math.random() );
 
 
-			var attributes = line.geometry.attributes;
 
-			var array = attributes.displacement.array;
 
+				}
 
 
-			for ( var i = 0, l = array.length; i < l; i += 3 ) {
 
+				attributes.displacement.needsUpdate = true;
 
 
-				array[ i ] += 0.3 * ( 0.5 - Math.random() );
 
-				array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );
 
-				array[ i + 2 ] += 0.3 * ( 0.5 - Math.random() );
 
+				renderer.render( scene, camera );
 
 
 			}
 
 
-			attributes.displacement.needsUpdate = true;
 
-
 
-			renderer.render( scene, camera );
 
 
-		}
 
-
 
-
 
-	</script>
 
+		</script>
 
 
 </body>

+ 95 - 92
examples/webgl_custom_attributes_points.html
Vizualizați fișierul 

@@ -11,11 +11,6 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - custom attributes example - particles</div>
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			attribute float size;
 
@@ -53,150 +48,158 @@
 
 
 		</script>
 
 
+		<script type="module">
 
+			import {
 
+				AdditiveBlending,
 
+				BufferAttribute,
 
+				BufferGeometry,
 
+				Color,
 
+				PerspectiveCamera,
 
+				Points,
 
+				Scene,
 
+				ShaderMaterial,
 
+				TextureLoader,
 
+				Vector3,
 
+				WebGLRenderer
 
+			} from "../build/three.module.js";
 
 
-		<script>
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var renderer, scene, camera, stats;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var sphere;
 
 
-		}
 
+			var WIDTH = window.innerWidth;
 
+			var HEIGHT = window.innerHeight;
 
 
-		var renderer, scene, camera, stats;
 
+			init();
 
+			animate();
 
 
-		var sphere;
 
+			function init() {
 
 
-		var WIDTH = window.innerWidth;
 
-		var HEIGHT = window.innerHeight;
 
+				camera = new PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 
+				camera.position.z = 300;
 
 
-		init();
 
-		animate();
 
+				scene = new Scene();
 
 
-		function init() {
 
+				var amount = 100000;
 
+				var radius = 200;
 
 
-			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
 
-			camera.position.z = 300;
 
+				var positions = new Float32Array( amount * 3 );
 
+				var colors = new Float32Array( amount * 3 );
 
+				var sizes = new Float32Array( amount );
 
 
-			scene = new THREE.Scene();
 
+				var vertex = new Vector3();
 
+				var color = new Color( 0xffffff );
 
 
-			var amount = 100000;
 
-			var radius = 200;
 
+				for ( var i = 0; i < amount; i ++ ) {
 
 
-			var positions = new Float32Array( amount * 3 );
 
-			var colors = new Float32Array( amount * 3 );
 
-			var sizes = new Float32Array( amount );
 
+					vertex.x = ( Math.random() * 2 - 1 ) * radius;
 
+					vertex.y = ( Math.random() * 2 - 1 ) * radius;
 
+					vertex.z = ( Math.random() * 2 - 1 ) * radius;
 
+					vertex.toArray( positions, i * 3 );
 
 
-			var vertex = new THREE.Vector3();
 
-			var color = new THREE.Color( 0xffffff );
 
+					if ( vertex.x < 0 ) {
 
 
-			for ( var i = 0; i < amount; i ++ ) {
 
+						color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
 
 
-				vertex.x = ( Math.random() * 2 - 1 ) * radius;
 
-				vertex.y = ( Math.random() * 2 - 1 ) * radius;
 
-				vertex.z = ( Math.random() * 2 - 1 ) * radius;
 
-				vertex.toArray( positions, i * 3 );
 
+					} else {
 
 
-				if ( vertex.x < 0 ) {
 
+						color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
 
 
-					color.setHSL( 0.5 + 0.1 * ( i / amount ), 0.7, 0.5 );
 
+					}
 
 
-				} else {
 
+					color.toArray( colors, i * 3 );
 
 
-					color.setHSL( 0.0 + 0.1 * ( i / amount ), 0.9, 0.5 );
 
+					sizes[ i ] = 10;
 
 
 				}
 
 
-				color.toArray( colors, i * 3 );
 
+				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 ) );
 
 
-				sizes[ i ] = 10;
 
+				//
 
 
-			}
 
+				var material = new ShaderMaterial( {
 
 
-			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 ) );
 
+					uniforms: {
 
+						color: { value: new Color( 0xffffff ) },
 
+						texture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
 
+					},
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
 
-			//
 
+					blending: AdditiveBlending,
 
+					depthTest: false,
 
+					transparent: true
 
 
-			var material = new THREE.ShaderMaterial( {
 
+				} );
 
 
-				uniforms: {
 
-					color: { value: new THREE.Color( 0xffffff ) },
 
-					texture: { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
 
-				},
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
+				//
 
 
-				blending: THREE.AdditiveBlending,
 
-				depthTest: false,
 
-				transparent: true
 
+				sphere = new Points( geometry, material );
 
+				scene.add( sphere );
 
 
-			} );
 
+				//
 
 
-			//
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( WIDTH, HEIGHT );
 
 
-			sphere = new THREE.Points( geometry, material );
 
-			scene.add( sphere );
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			//
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( WIDTH, HEIGHT );
 
+				//
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+			}
 
 
-			//
 
+			function onWindowResize() {
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-		}
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		function onWindowResize() {
 
+			}
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+			function animate() {
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				requestAnimationFrame( animate );
 
 
-		}
 
+				render();
 
+				stats.update();
 
 
-		function animate() {
 
+			}
 
 
-			requestAnimationFrame( animate );
 
+			function render() {
 
 
-			render();
 
-			stats.update();
 
+				var time = Date.now() * 0.005;
 
 
-		}
 
+				sphere.rotation.z = 0.01 * time;
 
 
-		function render() {
 
+				var geometry = sphere.geometry;
 
+				var attributes = geometry.attributes;
 
 
-			var time = Date.now() * 0.005;
 
+				for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
 
-			sphere.rotation.z = 0.01 * time;
 
+					attributes.size.array[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
 
 
-			var geometry = sphere.geometry;
 
-			var attributes = geometry.attributes;
 
+				}
 
 
-			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
+				attributes.size.needsUpdate = true;
 
 
-				attributes.size.array[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );
 
+				renderer.render( scene, camera );
 
 
 			}
 
 
-			attributes.size.needsUpdate = true;
 
-
 
-			renderer.render( scene, camera );
 
-
 
-		}
 
-
 
-	</script>
 
+		</script>
 
 
 </body>

+ 138 - 131
examples/webgl_custom_attributes_points2.html
Vizualizați fișierul 

@@ -11,11 +11,6 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - custom attributes example - particles - billboards</div>
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			attribute float size;
 
@@ -54,225 +49,237 @@
 
 
 		</script>
 
 
-		<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 Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var renderer, scene, camera, stats;
 
+			var sphere, length1;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var WIDTH = window.innerWidth;
 
+			var HEIGHT = window.innerHeight;
 
 
-		}
 
+			init();
 
+			animate();
 
 
-		var renderer, scene, camera, stats;
 
-		var sphere, length1;
 
+			function init() {
 
 
-		var WIDTH = window.innerWidth;
 
-		var HEIGHT = window.innerHeight;
 
+				camera = new PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 10000 );
 
+				camera.position.z = 300;
 
 
-		init();
 
-		animate();
 
+				scene = new Scene();
 
 
-		function init() {
 
+				var radius = 100, segments = 68, rings = 38;
 
 
-			camera = new THREE.PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 10000 );
 
-			camera.position.z = 300;
 
+				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;
 
 
-			scene = new THREE.Scene();
 
+				length1 = vertices1.length;
 
 
-			var radius = 100, segments = 68, rings = 38;
 
+				var vertices = vertices1.concat( vertices2 );
 
 
-			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;
 
+				var positions = new Float32Array( vertices.length * 3 );
 
+				var colors = new Float32Array( vertices.length * 3 );
 
+				var sizes = new Float32Array( vertices.length );
 
 
-			length1 = vertices1.length;
 
+				var vertex;
 
+				var color = new Color();
 
 
-			var vertices = vertices1.concat( vertices2 );
 
+				for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
 
-			var positions = new Float32Array( vertices.length * 3 );
 
-			var colors = new Float32Array( vertices.length * 3 );
 
-			var sizes = new Float32Array( vertices.length );
 
+					vertex = vertices[ i ];
 
+					vertex.toArray( positions, i * 3 );
 
 
-			var vertex;
 
-			var color = new THREE.Color();
 
+					if ( i < length1 ) {
 
 
-			for ( var i = 0, l = vertices.length; i < l; i ++ ) {
 
+						color.setHSL( 0.01 + 0.1 * ( i / length1 ), 0.99, ( vertex.y + radius ) / ( 4 * radius ) );
 
 
-				vertex = vertices[ i ];
 
-				vertex.toArray( positions, i * 3 );
 
+					} else {
 
 
-				if ( i < length1 ) {
 
+						color.setHSL( 0.6, 0.75, 0.25 + vertex.y / ( 2 * radius ) );
 
 
-					color.setHSL( 0.01 + 0.1 * ( i / length1 ), 0.99, ( vertex.y + radius ) / ( 4 * radius ) );
 
+					}
 
 
-				} else {
 
+					color.toArray( colors, i * 3 );
 
 
-					color.setHSL( 0.6, 0.75, 0.25 + vertex.y / ( 2 * radius ) );
 
+					sizes[ i ] = i < length1 ? 10 : 40;
 
 
 				}
 
 
-				color.toArray( colors, i * 3 );
 
+				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 ) );
 
 
-				sizes[ i ] = i < length1 ? 10 : 40;
 
+				//
 
 
-			}
 
+				var texture = new TextureLoader().load( "textures/sprites/disc.png" );
 
+				texture.wrapS = RepeatWrapping;
 
+				texture.wrapT = RepeatWrapping;
 
 
-			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 material = new ShaderMaterial( {
 
 
-			//
 
+					uniforms: {
 
+						color: { value: new Color( 0xffffff ) },
 
+						texture: { value: texture }
 
+					},
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
+					transparent: true
 
 
-			var texture = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
 
-			texture.wrapS = THREE.RepeatWrapping;
 
-			texture.wrapT = THREE.RepeatWrapping;
 
+				} );
 
 
-			var material = new THREE.ShaderMaterial( {
 
+				//
 
 
-				uniforms: {
 
-					color: { value: new THREE.Color( 0xffffff ) },
 
-					texture: { value: texture }
 
-				},
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
 
-				transparent: true
 
+				sphere = new Points( geometry, material );
 
+				scene.add( sphere );
 
 
-			} );
 
+				//
 
 
-			//
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( WIDTH, HEIGHT );
 
 
-			sphere = new THREE.Points( geometry, material );
 
-			scene.add( sphere );
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			//
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( WIDTH, HEIGHT );
 
+				//
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+			}
 
 
-			//
 
+			function onWindowResize() {
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-		}
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-		function onWindowResize() {
 
+			}
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+			function sortPoints() {
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+				var vector = new Vector3();
 
 
-		}
 
+				// Model View Projection matrix
 
 
-		function sortPoints() {
 
+				var matrix = new Matrix4();
 
+				matrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 
+				matrix.multiply( sphere.matrixWorld );
 
 
-			var vector = new THREE.Vector3();
 
+				//
 
 
-			// Model View Projection matrix
 
+				var geometry = sphere.geometry;
 
 
-			var matrix = new THREE.Matrix4();
 
-			matrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 
-			matrix.multiply( sphere.matrixWorld );
 
+				var index = geometry.getIndex();
 
+				var positions = geometry.getAttribute( 'position' ).array;
 
+				var length = positions.length / 3;
 
 
-			//
 
+				if ( index === null ) {
 
 
-			var geometry = sphere.geometry;
 
+					var array = new Uint16Array( length );
 
 
-			var index = geometry.getIndex();
 
-			var positions = geometry.getAttribute( 'position' ).array;
 
-			var length = positions.length / 3;
 
+					for ( var i = 0; i < length; i ++ ) {
 
 
-			if ( index === null ) {
 
+						array[ i ] = i;
 
 
-				var array = new Uint16Array( length );
 
+					}
 
 
-				for ( var i = 0; i < length; i ++ ) {
 
+					index = new BufferAttribute( array, 1 );
 
 
-					array[ i ] = i;
 
+					geometry.setIndex( index );
 
 
 				}
 
 
-				index = new THREE.BufferAttribute( array, 1 );
 
-
 
-				geometry.setIndex( index );
 
+				var sortArray = [];
 
 
-			}
 
+				for ( var i = 0; i < length; i ++ ) {
 
 
-			var sortArray = [];
 
+					vector.fromArray( positions, i * 3 );
 
+					vector.applyMatrix4( matrix );
 
 
-			for ( var i = 0; i < length; i ++ ) {
 
+					sortArray.push( [ vector.z, i ] );
 
 
-				vector.fromArray( positions, i * 3 );
 
-				vector.applyMatrix4( matrix );
 
+				}
 
 
-				sortArray.push( [ vector.z, i ] );
 
+				function numericalSort( a, b ) {
 
 
-			}
 
+					return b[ 0 ] - a[ 0 ];
 
 
-			function numericalSort( a, b ) {
 
+				}
 
 
-				return b[ 0 ] - a[ 0 ];
 
+				sortArray.sort( numericalSort );
 
 
-			}
 
+				var indices = index.array;
 
 
-			sortArray.sort( numericalSort );
 
+				for ( var i = 0; i < length; i ++ ) {
 
 
-			var indices = index.array;
 
+					indices[ i ] = sortArray[ i ][ 1 ];
 
 
-			for ( var i = 0; i < length; i ++ ) {
 
+				}
 
 
-				indices[ i ] = sortArray[ i ][ 1 ];
 
+				geometry.index.needsUpdate = true;
 
 
 			}
 
 
-			geometry.index.needsUpdate = true;
 
-
 
-		}
 
+			function animate() {
 
 
-		function animate() {
 
+				requestAnimationFrame( animate );
 
 
-			requestAnimationFrame( animate );
 
+				render();
 
+				stats.update();
 
 
-			render();
 
-			stats.update();
 
+			}
 
 
-		}
 
+			function render() {
 
 
-		function render() {
 
+				var time = Date.now() * 0.005;
 
 
-			var time = Date.now() * 0.005;
 
+				sphere.rotation.y = 0.02 * time;
 
+				sphere.rotation.z = 0.02 * time;
 
 
-			sphere.rotation.y = 0.02 * time;
 
-			sphere.rotation.z = 0.02 * time;
 
+				var geometry = sphere.geometry;
 
+				var attributes = geometry.attributes;
 
 
-			var geometry = sphere.geometry;
 
-			var attributes = geometry.attributes;
 
+				for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
 
-			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
+					if ( i < length1 ) {
 
 
-				if ( i < length1 ) {
 
+						attributes.size.array[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
 
 
-					attributes.size.array[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
 
+					}
 
 
 				}
 
 
-			}
 
-
 
-			attributes.size.needsUpdate = true;
 
+				attributes.size.needsUpdate = true;
 
 
-			sortPoints();
 
+				sortPoints();
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
-	</script>
 
+		</script>
 
 
 </body>

+ 145 - 138
examples/webgl_custom_attributes_points3.html
Vizualizați fișierul 

@@ -11,11 +11,6 @@
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - custom attributes example - billboards - alphatest</div>
 
 		<div id="container"></div>
 
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/WebGL.js"></script>
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
 		<script type="x-shader/x-vertex" id="vertexshader">
 
 
 			attribute float size;
 
@@ -62,221 +57,233 @@
 
 
 		</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";
 
 
-		<script>
 
+			import Stats from './jsm/libs/stats.module.js';
 
 
-		if ( WEBGL.isWebGLAvailable() === false ) {
 
+			var renderer, scene, camera, stats;
 
 
-			document.body.appendChild( WEBGL.getWebGLErrorMessage() );
 
+			var object;
 
 
-		}
 
+			var vertices1;
 
 
-		var renderer, scene, camera, stats;
 
+			var WIDTH = window.innerWidth;
 
+			var HEIGHT = window.innerHeight;
 
 
-		var object;
 
+			init();
 
+			animate();
 
 
-		var vertices1;
 
+			function init() {
 
 
-		var WIDTH = window.innerWidth;
 
-		var HEIGHT = window.innerHeight;
 
+				camera = new PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 1000 );
 
+				camera.position.z = 500;
 
 
-		init();
 
-		animate();
 
+				scene = new Scene();
 
 
-		function init() {
 
+				var radius = 100, inner = 0.6 * radius;
 
+				var vertices = [];
 
 
-			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 1000 );
 
-			camera.position.z = 500;
 
+				for ( var i = 0; i < 100000; i ++ ) {
 
 
-			scene = new THREE.Scene();
 
+					var vertex = new Vector3();
 
+					vertex.x = Math.random() * 2 - 1;
 
+					vertex.y = Math.random() * 2 - 1;
 
+					vertex.z = Math.random() * 2 - 1;
 
+					vertex.multiplyScalar( radius );
 
 
-			var radius = 100, inner = 0.6 * radius;
 
-			var vertices = [];
 
+					if ( ( vertex.x > inner || vertex.x < - inner ) ||
 
+					     ( vertex.y > inner || vertex.y < - inner ) ||
 
+					     ( vertex.z > inner || vertex.z < - inner ) )
 
 
-			for ( var i = 0; i < 100000; i ++ ) {
 
+						vertices.push( vertex );
 
 
-				var vertex = new THREE.Vector3();
 
-				vertex.x = Math.random() * 2 - 1;
 
-				vertex.y = Math.random() * 2 - 1;
 
-				vertex.z = Math.random() * 2 - 1;
 
-				vertex.multiplyScalar( radius );
 
+				}
 
 
-				if ( ( vertex.x > inner || vertex.x < - inner ) ||
 
-				     ( vertex.y > inner || vertex.y < - inner ) ||
 
-				     ( vertex.z > inner || vertex.z < - inner ) )
 
+				vertices1 = vertices.length;
 
 
-					vertices.push( vertex );
 
+				radius = 200;
 
+				var geometry2 = new 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 );
 
 
-			vertices1 = vertices.length;
 
+				function addGeo( geo, x, y, z, ry ) {
 
 
-			radius = 200;
 
-			var geometry2 = new THREE.BoxGeometry( radius, 0.1 * radius, 0.1 * radius, 50, 5, 5 );
 
+					position.set( x, y, z );
 
+					rotation.set( 0, ry, 0 );
 
 
-			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 );
 
+					matrix.compose( position, quaternion.setFromEuler( rotation ), scale );
 
 
-			function addGeo( geo, x, y, z, ry ) {
 
+					for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
 
 
-				position.set( x, y, z );
 
-				rotation.set( 0, ry, 0 );
 
+						var vertex = geo.vertices[ i ];
 
+						vertices.push( vertex.clone().applyMatrix4( matrix ) );
 
 
-				matrix.compose( position, quaternion.setFromEuler( rotation ), scale );
 
+					}
 
 
-				for ( var i = 0, l = geo.vertices.length; i < l; i ++ ) {
 
+				}
 
 
-					var vertex = geo.vertices[ i ];
 
-					vertices.push( vertex.clone().applyMatrix4( matrix ) );
 
+				// side 1
 
 
-				}
 
+				addGeo( geometry2, 0, 110, 110, 0 );
 
+				addGeo( geometry2, 0, 110, - 110, 0 );
 
+				addGeo( geometry2, 0, - 110, 110, 0 );
 
+				addGeo( geometry2, 0, - 110, - 110, 0 );
 
 
-			}
 
+				// side 2
 
 
-			// side 1
 
+				addGeo( geometry2, 110, 110, 0, Math.PI / 2 );
 
+				addGeo( geometry2, 110, - 110, 0, Math.PI / 2 );
 
+				addGeo( geometry2, - 110, 110, 0, Math.PI / 2 );
 
+				addGeo( geometry2, - 110, - 110, 0, Math.PI / 2 );
 
 
-			addGeo( geometry2, 0, 110, 110, 0 );
 
-			addGeo( geometry2, 0, 110, - 110, 0 );
 
-			addGeo( geometry2, 0, - 110, 110, 0 );
 
-			addGeo( geometry2, 0, - 110, - 110, 0 );
 
+				// corner edges
 
 
-			// side 2
 
+				var geometry3 = new BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
 
 
-			addGeo( geometry2, 110, 110, 0, Math.PI / 2 );
 
-			addGeo( geometry2, 110, - 110, 0, Math.PI / 2 );
 
-			addGeo( geometry2, - 110, 110, 0, Math.PI / 2 );
 
-			addGeo( geometry2, - 110, - 110, 0, Math.PI / 2 );
 
+				addGeo( geometry3, 110, 0, 110, 0 );
 
+				addGeo( geometry3, 110, 0, - 110, 0 );
 
+				addGeo( geometry3, - 110, 0, 110, 0 );
 
+				addGeo( geometry3, - 110, 0, - 110, 0 );
 
 
-			// corner edges
 
+				var positions = new Float32Array( vertices.length * 3 );
 
+				var colors = new Float32Array( vertices.length * 3 );
 
+				var sizes = new Float32Array( vertices.length );
 
 
-			var geometry3 = new THREE.BoxGeometry( 0.1 * radius, radius * 1.2, 0.1 * radius, 5, 60, 5 );
 
+				var vertex;
 
+				var color = new Color();
 
 
-			addGeo( geometry3, 110, 0, 110, 0 );
 
-			addGeo( geometry3, 110, 0, - 110, 0 );
 
-			addGeo( geometry3, - 110, 0, 110, 0 );
 
-			addGeo( geometry3, - 110, 0, - 110, 0 );
 
+				for ( var i = 0; i < vertices.length; i ++ ) {
 
 
-			var positions = new Float32Array( vertices.length * 3 );
 
-			var colors = new Float32Array( vertices.length * 3 );
 
-			var sizes = new Float32Array( vertices.length );
 
+					vertex = vertices[ i ];
 
+					vertex.toArray( positions, i * 3 );
 
 
-			var vertex;
 
-			var color = new THREE.Color();
 
+					if ( i < vertices1 ) {
 
 
-			for ( var i = 0; i < vertices.length; i ++ ) {
 
+						color.setHSL( 0.5 + 0.2 * ( i / vertices1 ), 1, 0.5 );
 
 
-				vertex = vertices[ i ];
 
-				vertex.toArray( positions, i * 3 );
 
+					} else {
 
 
-				if ( i < vertices1 ) {
 
+						color.setHSL( 0.1, 1, 0.5 );
 
 
-					color.setHSL( 0.5 + 0.2 * ( i / vertices1 ), 1, 0.5 );
 
+					}
 
 
-				} else {
 
+					color.toArray( colors, i * 3 );
 
 
-					color.setHSL( 0.1, 1, 0.5 );
 
+					sizes[ i ] = i < vertices1 ? 10 : 40;
 
 
 				}
 
 
-				color.toArray( colors, i * 3 );
 
+				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 ) );
 
 
-				sizes[ i ] = i < vertices1 ? 10 : 40;
 
-
 
-			}
 
+				//
 
 
-			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 material = new ShaderMaterial( {
 
 
-			var texture = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
 
-			texture.wrapS = THREE.RepeatWrapping;
 
-			texture.wrapT = THREE.RepeatWrapping;
 
+					uniforms: {
 
+						amplitude: { value: 1.0 },
 
+						color: { value: new Color( 0xffffff ) },
 
+						texture: { value: texture }
 
+					},
 
+					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
+					fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
 
-			var material = new THREE.ShaderMaterial( {
 
+				} );
 
 
-				uniforms: {
 
-					amplitude: { value: 1.0 },
 
-					color: { value: new THREE.Color( 0xffffff ) },
 
-					texture: { value: texture }
 
-				},
 
-				vertexShader: document.getElementById( 'vertexshader' ).textContent,
 
-				fragmentShader: document.getElementById( 'fragmentshader' ).textContent
 
+				//
 
 
-			} );
 
+				object = new Points( geometry, material );
 
+				scene.add( object );
 
 
-			//
 
+				//
 
 
-			object = new THREE.Points( geometry, material );
 
-			scene.add( object );
 
+				renderer = new WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( WIDTH, HEIGHT );
 
 
-			//
 
+				var container = document.getElementById( 'container' );
 
+				container.appendChild( renderer.domElement );
 
 
-			renderer = new THREE.WebGLRenderer();
 
-			renderer.setPixelRatio( window.devicePixelRatio );
 
-			renderer.setSize( WIDTH, HEIGHT );
 
+				stats = new Stats();
 
+				container.appendChild( stats.dom );
 
 
-			var container = document.getElementById( 'container' );
 
-			container.appendChild( renderer.domElement );
 
+				//
 
 
-			stats = new Stats();
 
-			container.appendChild( stats.dom );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
-			//
 
-
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+			}
 
 
-		}
 
+			function onWindowResize() {
 
 
-		function onWindowResize() {
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
 
-			camera.aspect = window.innerWidth / window.innerHeight;
 
-			camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
-			renderer.setSize( window.innerWidth, window.innerHeight );
 
+			}
 
 
-		}
 
+			function animate() {
 
 
-		function animate() {
 
+				requestAnimationFrame( animate );
 
 
-			requestAnimationFrame( animate );
 
+				render();
 
+				stats.update();
 
 
-			render();
 
-			stats.update();
 
+			}
 
 
-		}
 
+			function render() {
 
 
-		function render() {
 
+				var time = Date.now() * 0.01;
 
 
-			var time = Date.now() * 0.01;
 
+				object.rotation.y = object.rotation.z = 0.02 * time;
 
 
-			object.rotation.y = object.rotation.z = 0.02 * time;
 
+				var geometry = object.geometry;
 
+				var attributes = geometry.attributes;
 
 
-			var geometry = object.geometry;
 
-			var attributes = geometry.attributes;
 
+				for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
 
-			for ( var i = 0; i < attributes.size.array.length; i ++ ) {
 
+					if ( i < vertices1 ) {
 
 
-				if ( i < vertices1 ) {
 
+						attributes.size.array[ i ] = Math.max( 0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ) );
 
 
-					attributes.size.array[ i ] = Math.max( 0, 26 + 32 * Math.sin( 0.1 * i + 0.6 * time ) );
 
+					}
 
 
 				}
 
 
-			}
 
-
 
-			attributes.size.needsUpdate = true;
 
+				attributes.size.needsUpdate = true;
 
 
-			renderer.render( scene, camera );
 
+				renderer.render( scene, camera );
 
 
-		}
 
+			}
 
 
-	</script>
 
+		</script>
 
 
 </body>