Merge pull request #14747 from donmccurdy/examples-rm-animated-geometry

Examples: Replace JSONLoader animated examples using THREE.Geometry.

examples/canvas_morphtargets_horse.html

@@ -20,6 +20,8 @@
 		<script src="js/renderers/Projector.js"></script>
 		<script src="js/renderers/CanvasRenderer.js"></script>
 
+		<script src="js/loaders/GLTFLoader.js"></script>
+
 		<script src="js/libs/stats.min.js"></script>
 
 		<script>
@@ -63,22 +65,18 @@
 				light.position.set( -1, -1, -1 ).normalize();
 				scene.add( light );
 
-				var loader = new THREE.JSONLoader();
-				loader.load( "models/animated/horse.js", function ( geometry ) {
-
-					var material = new THREE.MeshLambertMaterial( {
-						vertexColors: THREE.FaceColors,
-						morphTargets: true,
-						overdraw: 0.5
-					} );
+				var loader = new THREE.GLTFLoader();
+				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
-					mesh = new THREE.Mesh( geometry, material );
+					var mesh = gltf.scene.children[ 0 ];
+					mesh.material.overdraw = 0.5;
+					mesh.material.vertexColors = THREE.FaceColors;
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 					scene.add( mesh );
 
 					mixer = new THREE.AnimationMixer( mesh );
 
-					var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
+					var clip = gltf.animations[ 0 ];
 					mixer.clipAction( clip ).setDuration( 1 ).play();
 
 				} );

examples/files.js

@@ -95,7 +95,6 @@ var files = {
 		"webgl_loader_imagebitmap",
 		"webgl_loader_json",
 		"webgl_loader_json_claraio",
-		"webgl_loader_json_objconverter",
 		"webgl_loader_kmz",
 		"webgl_loader_md2",
 		"webgl_loader_md2_control",
@@ -188,7 +187,6 @@ var files = {
 		"webgl_modifier_simplifier",
 		"webgl_modifier_subdivision",
 		"webgl_modifier_tessellation",
-		"webgl_morphnormals",
 		"webgl_morphtargets",
 		"webgl_morphtargets_horse",
 		"webgl_morphtargets_human",

examples/js/loaders/GLTFLoader.js

@@ -1881,7 +1881,7 @@ THREE.GLTFLoader = ( function () {
 			var elementBytes = TypedArray.BYTES_PER_ELEMENT;
 			var itemBytes = elementBytes * itemSize;
 			var byteOffset = accessorDef.byteOffset || 0;
-			var byteStride = json.bufferViews[ accessorDef.bufferView ].byteStride;
+			var byteStride = accessorDef.bufferView !== undefined ? json.bufferViews[ accessorDef.bufferView ].byteStride : undefined;
 			var normalized = accessorDef.normalized === true;
 			var array, bufferAttribute;
 

examples/js/renderers/Projector.js

@@ -322,6 +322,12 @@ THREE.Projector = function () {
 
 				_face.material = material;
 
+				if ( material.vertexColors === THREE.FaceColors ) {
+
+					_face.color.fromArray( colors, a * 3 );
+
+				}
+
 				_renderData.elements.push( _face );
 
 			}
@@ -457,7 +463,32 @@ THREE.Projector = function () {
 
 					for ( var i = 0, l = positions.length; i < l; i += 3 ) {
 
-						renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
+						var x = positions[ i ];
+						var y = positions[ i + 1 ];
+						var z = positions[ i + 2 ];
+
+						if ( material.morphTargets === true ) {
+
+							var morphTargets = geometry.morphAttributes.position;
+							var morphInfluences = object.morphTargetInfluences;
+
+							for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {
+
+								var influence = morphInfluences[ t ];
+
+								if ( influence === 0 ) continue;
+
+								var target = morphTargets[ t ];
+
+								x += ( target.getX( i / 3 ) - positions[ i ] ) * influence;
+								y += ( target.getY( i / 3 ) - positions[ i + 1 ] ) * influence;
+								z += ( target.getZ( i / 3 ) - positions[ i + 2 ] ) * influence;
+
+							}
+
+						}
+
+						renderList.pushVertex( x, y, z );
 
 					}
 
@@ -473,6 +504,18 @@ THREE.Projector = function () {
 
 					}
 
+					if ( attributes.color !== undefined ) {
+
+						var colors = attributes.color.array;
+
+						for ( var i = 0, l = colors.length; i < l; i += 3 ) {
+
+							renderList.pushColor( colors[ i ], colors[ i + 1 ], colors[ i + 2 ] );
+
+						}
+
+					}
+
 					if ( attributes.uv !== undefined ) {
 
 						var uvs = attributes.uv.array;

examples/webgl_lights_hemisphere.html

@@ -49,6 +49,7 @@
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script type="x-shader/x-vertex" id="vertexShader">
 
@@ -179,12 +180,11 @@
 
 				// MODEL
 
-				var loader = new THREE.JSONLoader();
+				var loader = new THREE.GLTFLoader();
 
-				loader.load( 'models/animated/flamingo.js', function( geometry ) {
+				loader.load( 'models/gltf/Flamingo.glb', function( gltf ) {
 
-					var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 20, morphTargets: true, vertexColors: THREE.FaceColors, flatShading: true } );
-					var mesh = new THREE.Mesh( geometry, material );
+					var mesh = gltf.scene.children[ 0 ];
 
 					var s = 0.35;
 					mesh.scale.set( s, s, s );
@@ -197,7 +197,7 @@
 					scene.add( mesh );
 
 					var mixer = new THREE.AnimationMixer( mesh );
-					mixer.clipAction( geometry.animations[ 0 ] ).setDuration( 1 ).play();
+					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 					mixers.push( mixer );
 
 				} );

examples/webgl_loader_json.html

@@ -67,7 +67,7 @@
 				mixer = new THREE.AnimationMixer( scene );
 
 				var loader = new THREE.JSONLoader();
-				loader.load( 'models/animated/monster/monster.js', function ( geometry, materials ) {
+				loader.load( 'models/json/legacy/monster/monster.js', function ( geometry, materials ) {
 
 					// adjust color a bit
 

examples/webgl_loader_json_objconverter.html

@@ -1,305 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - io - OBJ converter</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background:#fff;
-				padding:0;
-				margin:0;
-				overflow:hidden;
-				font-family:georgia;
-				text-align:center;
-			}
-			h1 { }
-			a { color:skyblue }
-
-			#info { position:absolute; top:0px; width: 100%; text-align:center; }
-			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
-			.inactive { background:#999; color:#eee }
-		</style>
-	</head>
-
-	<body>
-		<div id="container"></div>
-		<div id="info">
-			<h1>OBJ to Three.js converter test</h1>
-
-			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
-			<span id="rwebgl" class="button">WebGL renderer</span>
-			<br/>
-
-			<p>Models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion</a>
-			<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255">iClone</a>.
-		</div>
-
-		<script src="../build/three.js"></script>
-		<script src="js/loaders/DDSLoader.js"></script>
-		<script src="js/renderers/Projector.js"></script>
-		<script src="js/renderers/CanvasRenderer.js"></script>
-
-		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-			var FLOOR = -250;
-
-			var container, stats;
-
-			var camera, scene;
-			var canvasRenderer, webglRenderer;
-
-			var mesh, zmesh, geometry;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			var render_canvas = 1, render_gl = 1;
-			var has_gl = 0;
-
-			var bcanvas = document.getElementById( "rcanvas" );
-			var bwebgl = document.getElementById( "rwebgl" );
-
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
-			init();
-			animate();
-
-			render_canvas = !has_gl;
-			bwebgl.style.display = has_gl ? "inline" : "none";
-			bcanvas.className = render_canvas ? "button" : "button inactive";
-
-			function init() {
-
-				container = document.getElementById( 'container' );
-
-				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
-				camera.position.z = 500;
-
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xffffff );
-
-				// GROUND
-
-				var x = document.createElement( "canvas" );
-				var xc = x.getContext("2d");
-				x.width = x.height = 128;
-				xc.fillStyle = "#fff";
-				xc.fillRect(0, 0, 128, 128);
-				xc.fillStyle = "#000";
-				xc.fillRect(0, 0, 64, 64);
-				xc.fillStyle = "#999";
-				xc.fillRect(32, 32, 32, 32);
-				xc.fillStyle = "#000";
-				xc.fillRect(64, 64, 64, 64);
-				xc.fillStyle = "#555";
-				xc.fillRect(96, 96, 32, 32);
-
-				var texture = new THREE.CanvasTexture( x );
-				texture.repeat.set( 10, 10 );
-				texture.wrapS = THREE.RepeatWrapping;
-				texture.wrapT = THREE.RepeatWrapping;
-
-				var xm = new THREE.MeshBasicMaterial( { map: texture } );
-
-				geometry = new THREE.PlaneBufferGeometry( 100, 100, 15, 10 );
-
-				mesh = new THREE.Mesh( geometry, xm );
-				mesh.position.set( 0, FLOOR, 0 );
-				mesh.rotation.x = - Math.PI / 2;
-				mesh.scale.set( 10, 10, 10 );
-				scene.add( mesh );
-
-				// LIGHTS
-
-				var ambient = new THREE.AmbientLight( 0x221100 );
-				scene.add( ambient );
-
-				var directionalLight = new THREE.DirectionalLight( 0xffeedd, 1.5 );
-				directionalLight.position.set( 0, -70, 100 ).normalize();
-				scene.add( directionalLight );
-
-				// RENDERER
-
-				if ( render_gl ) {
-
-					try {
-
-						webglRenderer = new THREE.WebGLRenderer();
-						webglRenderer.setPixelRatio( window.devicePixelRatio );
-						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-						webglRenderer.domElement.style.position = "relative";
-
-						container.appendChild( webglRenderer.domElement );
-
-						has_gl = 1;
-
-					}
-					catch (e) {
-					}
-
-				}
-
-				if ( render_canvas ) {
-
-					canvasRenderer = new THREE.CanvasRenderer();
-					canvasRenderer.setPixelRatio( window.devicePixelRatio );
-					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-					container.appendChild( canvasRenderer.domElement );
-
-				}
-
-				// STATS
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				//
-
-				bcanvas.addEventListener("click", toggleCanvas, false);
-				bwebgl.addEventListener("click", toggleWebGL, false);
-
-				THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
-
-				var loader = new THREE.JSONLoader();
-				var callbackMale = function ( geometry, materials ) { createScene( geometry, materials, 90, FLOOR, 50, 105 ) };
-				var callbackFemale = function ( geometry, materials ) { createScene( geometry, materials, -80, FLOOR, 50, 0 ) };
-
-				loader.load( "models/json/male02/Male02_dds.json", callbackMale );
-				loader.load( "models/json/female02/Female02_slim.json", callbackFemale );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize, false );
-
-			}
-
-			function onWindowResize() {
-
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
-				if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function createScene( geometry, materials, x, y, z, b ) {
-
-				zmesh = new THREE.Mesh( geometry, materials );
-				zmesh.position.set( x, y, z );
-				zmesh.scale.set( 3, 3, 3 );
-				scene.add( zmesh );
-
-				createMaterialsPalette( materials, 100, b );
-
-			}
-
-			function createMaterialsPalette( materials, size, bottom ) {
-
-				for ( var i = 0; i < materials.length; i ++ ) {
-
-					// material
-
-					mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( size, size ), materials[i] );
-					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
-					mesh.position.y = FLOOR + size/2 + bottom;
-					mesh.position.z = -100;
-					scene.add( mesh );
-
-					// number
-
-					var x = document.createElement( "canvas" );
-					var xc = x.getContext( "2d" );
-					x.width = x.height = 128;
-					xc.shadowColor = "#000";
-					xc.shadowBlur = 7;
-					xc.fillStyle = "orange";
-					xc.font = "50pt arial bold";
-					xc.fillText( i, 10, 64 );
-
-					var xm = new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture( x ), transparent: true } );
-
-					mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( size, size ), xm );
-					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 )* ( size + 5 )/2);
-					mesh.position.y = FLOOR + size/2 + bottom;
-					mesh.position.z = -99;
-					scene.add( mesh );
-
-				}
-
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseX = ( event.clientX - windowHalfX );
-				mouseY = ( event.clientY - windowHalfY );
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
-				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
-				if ( render_canvas ) canvasRenderer.render( scene, camera );
-
-			}
-
-			function toggleCanvas() {
-
-				render_canvas = !render_canvas;
-				bcanvas.className = render_canvas ? "button" : "button inactive";
-
-				render_gl = !render_canvas;
-				bwebgl.className = render_gl ? "button" : "button inactive";
-
-				if( has_gl )
-					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-
-				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-
-			}
-
-			function toggleWebGL() {
-
-				render_gl = !render_gl;
-				bwebgl.className = render_gl ? "button" : "button inactive";
-
-				render_canvas = !render_gl;
-				bcanvas.className = render_canvas ? "button" : "button inactive";
-
-				if( has_gl )
-					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
-
-				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
-
-			}
-		</script>
-
-	</body>
-</html>

examples/webgl_morphnormals.html

@@ -1,195 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - morph normals</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				font-family: Monospace;
-				background-color: #111;
-				color: #fff;
-				margin: 0px;
-				overflow: hidden;
-			}
-
-			a { color: #f00 }
-		</style>
-	</head>
-	<body>
-
-		<script src="../build/three.js"></script>
-		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script>
-
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
-
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
-			var container, stats;
-			var camera, scene, renderer;
-			var mixers = [];
-
-			var clock = new THREE.Clock();
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				var info = document.createElement( 'div' );
-				info.style.position = 'absolute';
-				info.style.top = '10px';
-				info.style.width = '100%';
-				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - morph normals - model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>';
-				container.appendChild( info );
-
-				//
-
-				camera = new THREE.PerspectiveCamera( 40, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
-				camera.position.y = 300;
-				camera.target = new THREE.Vector3( 0, 150, 0 );
-
-				scene = new THREE.Scene();
-
-				//
-
-				scene.add( new THREE.HemisphereLight( 0x443333, 0x222233 ) );
-
-				var light = new THREE.DirectionalLight( 0xffffff, 1 );
-				light.position.set( 1, 1, 1 );
-				scene.add( light );
-
-				//
-
-
-				var loader = new THREE.JSONLoader();
-				loader.load( "models/animated/flamingo.js", function( geometry ) {
-
-					var material = new THREE.MeshPhongMaterial( {
-						color: 0xffffff,
-						morphTargets: true,
-						vertexColors: THREE.FaceColors,
-						flatShading: true
-					} );
-					var mesh = new THREE.Mesh( geometry, material );
-
-					mesh.position.x = - 150;
-					mesh.position.y = 150;
-					mesh.scale.set( 1.5, 1.5, 1.5 );
-
-					scene.add( mesh );
-
-					var mixer = new THREE.AnimationMixer( mesh );
-					mixer.clipAction( geometry.animations[ 0 ] ).setDuration( 1 ).play();
-
-					mixers.push( mixer );
-
-				} );
-
-				loader.load( "models/animated/flamingo.js", function( geometry ) {
-
-					geometry.computeVertexNormals();
-					geometry.computeMorphNormals();
-
-					var material = new THREE.MeshPhongMaterial( {
-						color: 0xffffff,
-						morphTargets: true,
-						morphNormals: true,
-						vertexColors: THREE.FaceColors
-					} );
-					var mesh = new THREE.Mesh( geometry, material );
-
-					mesh.position.x = 150;
-					mesh.position.y = 150;
-					mesh.scale.set( 1.5, 1.5, 1.5 );
-
-					scene.add( mesh );
-
-					var mixer = new THREE.AnimationMixer( mesh );
-					mixer.clipAction( geometry.animations[ 0 ] ).setDuration( 1 ).play();
-
-					mixers.push( mixer );
-
-				} );
-
-				//
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-
-				container.appendChild( renderer.domElement );
-
-				//
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize, false );
-
-			}
-
-			//
-
-			function onWindowResize( event ) {
-
-				SCREEN_WIDTH = window.innerWidth;
-				SCREEN_HEIGHT = window.innerHeight;
-
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
-				camera.updateProjectionMatrix();
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			var radius = 600;
-			var theta = 0;
-
-			function render() {
-
-				theta += 0.1;
-
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
-
-				camera.lookAt( camera.target );
-
-				var delta = clock.getDelta();
-
-				for ( var i = 0; i < mixers.length; i ++ ) {
-
-					mixers[ i ].update( delta );
-
-				}
-
-				renderer.clear();
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>

examples/webgl_morphtargets_horse.html

@@ -17,6 +17,7 @@
 
 		<script src="../build/three.js"></script>
 		<script src="js/libs/stats.min.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script>
 
@@ -59,20 +60,16 @@
 				light.position.set( -1, -1, -1 ).normalize();
 				scene.add( light );
 
-				var loader = new THREE.JSONLoader();
-				loader.load( "models/animated/horse.js", function( geometry ) {
+				var loader = new THREE.GLTFLoader();
+				loader.load( "models/gltf/Horse.glb", function( gltf ) {
 
-					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( {
-						vertexColors: THREE.FaceColors,
-						morphTargets: true
-					} ) );
+					mesh = gltf.scene.children[ 0 ];
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 					scene.add( mesh );
 
 					mixer = new THREE.AnimationMixer( mesh );
 
-					var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
-					mixer.clipAction( clip ).setDuration( 1 ).play();
+					mixer.clipAction( gltf.animations[ 0 ] ).setDuration( 1 ).play();
 
 				} );
 

examples/webgl_shading_physical.html

@@ -36,6 +36,7 @@
 		<script src="../build/three.js"></script>
 
 		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -209,17 +210,15 @@
 
 				// MORPHS
 
-				var loader = new THREE.JSONLoader();
+				var loader = new THREE.GLTFLoader();
 
-				loader.load( "models/animated/sittingBox.js", function( geometry ) {
+				loader.load( "models/gltf/SittingBox.glb", function( gltf ) {
 
-					var morphMaterial = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0xff9900, shininess: 50, morphTargets: true, side: THREE.DoubleSide, flatShading: true } );
-
-					var mesh = new THREE.Mesh( geometry, morphMaterial );
+					var mesh = gltf.scene.children[ 0 ];
 
 					mixer = new THREE.AnimationMixer( mesh );
 
-					mixer.clipAction( geometry.animations[0] ).setDuration( 10 ).play();
+					mixer.clipAction( gltf.animations[0] ).setDuration( 10 ).play();
 
 					var s = 200;
 					mesh.scale.set( s, s, s );

examples/webgl_shadowmap.html

@@ -35,6 +35,7 @@
 		<script src="../build/three.js"></script>
 
 		<script src="js/controls/FirstPersonControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 		<script src="js/utils/ShadowMapViewer.js"></script>
@@ -265,21 +266,19 @@
 
 				mixer = new THREE.AnimationMixer( scene );
 
-				function addMorph( geometry, speed, duration, x, y, z, fudgeColor ) {
+				function addMorph( mesh, clip, speed, duration, x, y, z, fudgeColor ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
+					mesh = mesh.clone();
+					mesh.material = mesh.material.clone();
 
 					if ( fudgeColor ) {
 
-						material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
+						mesh.material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
 
 					}
 
-					var mesh = new THREE.Mesh( geometry, material );
 					mesh.speed = speed;
 
-					var clip = geometry.animations[ 0 ];
-
 					mixer.clipAction( clip, mesh ).
 							setDuration( duration ).
 							// to shift the playback out of phase:
@@ -298,35 +297,48 @@
 
 				}
 
-				var loader = new THREE.JSONLoader();
+				var loader = new THREE.GLTFLoader();
+
+				loader.load( "models/gltf/Horse.glb", function( gltf ) {
+
+					var mesh = gltf.scene.children[ 0 ];
 
-				loader.load( "models/animated/horse.js", function( geometry ) {
+					var clip = gltf.animations[ 0 ];
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 300, true );
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 450, true );
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, 600, true );
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 300, true );
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 450, true );
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, 600, true );
 
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 300, true );
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 450, true );
-					addMorph( geometry, 550, 1, 100 - Math.random() * 1000, FLOOR, - 600, true );
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, - 300, true );
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, - 450, true );
+					addMorph( mesh, clip, 550, 1, 100 - Math.random() * 1000, FLOOR, - 600, true );
 
 				} );
 
-				loader.load( "models/animated/flamingo.js", function( geometry ) {
+				loader.load( "models/gltf/Flamingo.glb", function( gltf ) {
 
-					addMorph( geometry, 500, 1, 500 - Math.random() * 500, FLOOR + 350, 40 );
+					var mesh = gltf.scene.children[ 0 ];
+					var clip = gltf.animations[ 0 ];
+
+					addMorph( mesh, clip, 500, 1, 500 - Math.random() * 500, FLOOR + 350, 40 );
 
 				} );
 
-				loader.load( "models/animated/stork.js", function( geometry ) {
+				loader.load( "models/gltf/Stork.glb", function( gltf ) {
+
+					var mesh = gltf.scene.children[ 0 ];
+					var clip = gltf.animations[ 0 ];
 
-					addMorph( geometry, 350, 1, 500 - Math.random() * 500, FLOOR + 350, 340 );
+					addMorph( mesh, clip, 350, 1, 500 - Math.random() * 500, FLOOR + 350, 340 );
 
 				} );
 
-				loader.load( "models/animated/parrot.js", function( geometry ) {
+				loader.load( "models/gltf/Parrot.glb", function( gltf ) {
+
+					var mesh = gltf.scene.children[ 0 ];
+					var clip = gltf.animations[ 0 ];
 
-					addMorph( geometry, 450, 0.5, 500 - Math.random() * 500, FLOOR + 300, 700 );
+					addMorph( mesh, clip, 450, 0.5, 500 - Math.random() * 500, FLOOR + 300, 700 );
 
 				} );
 

examples/webgl_shadowmap_performance.html

@@ -34,6 +34,7 @@
 		<script src="../build/three.js"></script>
 
 		<script src="js/controls/FirstPersonControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
 
 		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
@@ -243,21 +244,19 @@
 
 				// MORPHS
 
-				function addMorph( geometry, speed, duration, x, y, z, fudgeColor, massOptimization ) {
+				function addMorph( mesh, clip, speed, duration, x, y, z, fudgeColor, massOptimization ) {
 
-					var material = new THREE.MeshLambertMaterial( { color: 0xffaa55, morphTargets: true, vertexColors: THREE.FaceColors } );
+					mesh = mesh.clone();
+					mesh.material = mesh.material.clone();
 
 					if ( fudgeColor ) {
 
-						material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
+						mesh.material.color.offsetHSL( 0, Math.random() * 0.5 - 0.25, Math.random() * 0.5 - 0.25 );
 
 					}
 
-					var mesh = new THREE.Mesh( geometry, material );
 					mesh.speed = speed;
 
-					var clip = geometry.animations[ 0 ];
-
 					if ( massOptimization ) {
 
 						var index = Math.floor( Math.random() * ANIMATION_GROUPS ),
@@ -298,62 +297,21 @@
 
 				}
 
-				var loader = new THREE.JSONLoader();
+				var loader = new THREE.GLTFLoader();
+
+				loader.load( "models/gltf/Horse.glb", function( gltf ) {
 
-				loader.load( "models/animated/horse.js", function( geometry ) {
+					var mesh = gltf.scene.children[ 0 ];
+					var clip = gltf.animations[ 0 ];
 
 					for ( var i = - 600; i < 601; i += 2 ) {
 
-						addMorph( geometry, 550, 1, 100 - Math.random() * 3000, FLOOR, i, true, true );
+						addMorph( mesh, clip, 550, 1, 100 - Math.random() * 3000, FLOOR, i, true, true );
 
 					}
 
 				} );
 
-				/*
-				loader.load( "obj/morphs/fox.js", function( geometry ) {
-
-					addMorph( geometry, 200, 1000, 100 - Math.random() * 500, FLOOR - 5, 600 );
-
-				} );
-
-				loader.load( "obj/morphs/shdw3walk.js", function( geometry ) {
-
-					addMorph( geometry, 40, 2000, -500, FLOOR + 60, 245 );
-
-				} );
-
-				loader.load( "obj/morphs/flamingo.js", function( geometry ) {
-
-					addMorph( geometry, 500, 1000, 500 - Math.random() * 500, FLOOR + 350, 40 );
-
-				} );
-
-				loader.load( "obj/morphs/stork.js", function( geometry ) {
-
-					addMorph( geometry, 350, 1000, 500 - Math.random() * 500, FLOOR + 350, 340 );
-
-				} );
-
-				loader.load( "obj/morphs/mountainlion.js", function( geometry ) {
-
-					addMorph( geometry, 400, 1000, 500 - Math.random() * 500, FLOOR - 5, 700 );
-
-				} );
-
-				loader.load( "obj/morphs/bearBrown.js", function( geometry ) {
-
-					addMorph( geometry, 300, 2500, -500, FLOOR - 5, -750 );
-
-				} );
-
-				loader.load( "obj/morphs/parrot.js", function( geometry ) {
-
-					addMorph( geometry, 450, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
-
-				} );
-				*/
-
 			}
 
 			//