add new .clips support on Nodes and Geometries for simple/fast AnimationClip loading.

examples/models/json/blend-animation.json

@@ -0,0 +1,121 @@
+{
+    "metadata": {
+        "generator": "io_three",
+        "type": "Object",
+        "version": 4.3
+    },
+    "textures": [],
+    "geometries": [{
+        "uuid": "9C17D067-6185-36C2-898A-43F0618F9682",
+        "type": "Geometry",
+        "data": {
+            "skinWeights": [],
+            "skinIndices": [],
+            "faces": [42,0,2,3,0,0,1,2,0,1,2,42,3,1,0,0,2,3,0,2,3,0,42,4,5,7,0,3,0,1,4,5,6,42,7,6,4,0,1,2,3,6,7,4,42,0,1,9,0,3,0,4,0,3,8,42,9,8,0,0,4,5,3,8,9,0,42,8,9,13,0,5,4,6,9,8,10,42,13,12,8,0,6,7,5,10,11,9,42,12,13,17,0,7,6,8,11,10,12,42,17,16,12,0,8,9,7,12,13,11,42,16,17,21,0,9,8,10,13,12,14,42,21,20,16,0,10,11,9,14,15,13,42,20,21,5,0,11,10,1,15,14,5,42,5,4,20,0,1,2,11,5,4,15,42,1,3,10,0,3,0,4,3,2,16,42,10,9,1,0,4,5,3,16,8,3,42,9,10,14,0,5,4,6,8,16,17,42,14,13,9,0,6,7,5,17,10,8,42,13,14,18,0,7,6,8,10,17,18,42,18,17,13,0,8,9,7,18,12,10,42,17,18,22,0,9,8,10,12,18,19,42,22,21,17,0,10,11,9,19,14,12,42,21,22,7,0,11,10,1,14,19,6,42,7,5,21,0,1,2,11,6,5,14,42,3,2,11,0,3,0,4,2,1,20,42,11,10,3,0,4,5,3,20,16,2,42,10,11,15,0,5,4,6,16,20,21,42,15,14,10,0,6,7,5,21,17,16,42,14,15,19,0,7,6,8,17,21,22,42,19,18,14,0,8,9,7,22,18,17,42,33,34,35,0,9,8,10,23,24,25,42,35,32,33,0,10,11,9,25,26,23,42,22,23,6,0,11,10,1,19,27,7,42,6,7,22,0,1,2,11,7,6,19,42,2,0,8,0,3,0,4,1,0,9,42,8,11,2,0,4,5,3,9,20,1,42,11,8,12,0,5,4,6,20,9,11,42,12,15,11,0,6,7,5,11,21,20,42,15,12,16,0,7,6,8,21,11,13,42,16,19,15,0,8,9,7,13,22,21,42,19,16,20,0,9,8,10,22,13,15,42,20,23,19,0,10,11,9,15,27,22,42,23,20,4,0,11,10,1,27,15,4,42,4,6,23,0,1,2,11,4,7,27,42,25,24,22,0,9,11,10,28,29,19,42,22,18,25,0,10,8,9,19,18,28,42,26,25,18,0,8,9,9,30,28,18,42,18,19,26,0,9,8,8,18,22,30,42,27,26,19,0,10,8,9,31,30,22,42,19,23,27,0,9,11,10,22,27,31,42,24,27,23,0,11,10,10,29,31,27,42,23,22,24,0,10,11,11,27,19,29,42,29,28,24,0,9,11,11,28,29,29,42,24,25,29,0,11,9,9,29,28,28,42,30,29,25,0,8,9,9,30,28,28,42,25,26,30,0,9,8,8,28,30,30,42,31,30,26,0,10,8,8,31,30,30,42,26,27,31,0,8,10,10,30,31,31,42,28,31,27,0,11,10,10,29,31,31,42,27,24,28,0,10,11,11,31,29,29,42,33,32,28,0,9,11,11,23,26,29,42,28,29,33,0,11,9,9,29,28,23,42,34,33,29,0,8,9,9,24,23,28,42,29,30,34,0,9,8,8,28,30,24,42,35,34,30,0,10,8,8,25,24,30,42,30,31,35,0,8,10,10,30,31,25,42,32,35,31,0,11,10,10,26,25,31,42,31,28,32,0,10,11,11,31,29,26],
+            "morphTargets": [{
+                "name": "T",
+                "vertices": [[-4,0.620216,-4],[4,0.620216,-4],[-4,0.620216,4],[4,0.620216,4],[-2.34599,-60.3799,-2.34599],[2.34599,-60.3799,-2.34599],[-2.34599,-60.3799,2.34599],[2.34599,-60.3799,2.34599],[-3.05437,-11.951,-3.05437],[3.05437,-11.951,-3.05437],[3.05437,-11.951,3.05437],[-3.05437,-11.951,3.05437],[-3.05437,-26.2605,-3.05437],[3.05437,-26.2605,-3.05437],[3.05437,-26.2605,3.05437],[-3.05437,-26.2605,3.05437],[-2.91343,-43.3116,-2.91343],[2.91343,-43.3116,-2.91343],[2.91343,-43.3116,2.91343],[-2.91343,-43.3116,2.91343],[-2.91343,-47.6772,-2.91343],[2.91343,-47.6772,-2.91343],[2.91343,-47.6772,2.91343],[-2.91343,-47.6772,2.91343],[2.91343,-47.6772,9.18208],[2.91343,-43.3116,9.18208],[-2.91343,-43.3116,9.18208],[-2.91343,-47.6772,9.18208],[2.91343,-47.6772,14.6098],[2.91343,-43.3116,14.6098],[-2.91343,-43.3116,14.6098],[-2.91343,-47.6772,14.6098],[2.91343,-47.6772,18.4439],[2.91343,-43.3116,18.4439],[-2.91343,-43.3116,18.4439],[-2.91343,-47.6772,18.4439]]
+            }],
+            "uvs": [[1,0,1,1,0,1,0,0,1,0.2,0,0.2,1,0.4,0,0.4,1,0.6,0,0.6,1,0.8,0,0.8]],
+            "influencesPerVertex": 2,
+            "metadata": {
+                "morphTargets": 1,
+                "normals": 32,
+                "version": 3,
+                "vertices": 36,
+                "faces": 68,
+                "materials": 1,
+                "generator": "io_three",
+                "uvs": 1,
+                "bones": 0
+            },
+            "normals": [-0.586627,0.558306,-0.586627,-0.586627,0.558306,0.586627,0.586627,0.558306,0.586627,0.586627,0.558306,-0.586627,-0.571917,-0.588,-0.571917,0.571917,-0.588,-0.571917,0.571917,-0.588,0.571917,-0.571917,-0.588,0.571917,0.706839,-0.02591,-0.706839,-0.706839,-0.02591,-0.706839,0.707083,-0.005799,-0.707083,-0.707083,-0.005799,-0.707083,0.707083,-0.00586,-0.707083,-0.707083,-0.00586,-0.707083,0.707022,-0.014252,-0.707022,-0.707022,-0.014252,-0.707022,0.706839,-0.02591,0.706839,0.707083,-0.005799,0.707083,0.905728,0.296365,0.302957,0.901486,-0.313913,0.29783,-0.706839,-0.02591,0.706839,-0.707083,-0.005799,0.707083,-0.905728,0.296365,0.302957,0.577349,0.577349,0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,0.577349,-0.901486,-0.313913,0.29783,0.707083,0.707083,0,0.707083,-0.707083,0,-0.707083,0.707083,0,-0.707083,-0.707083,0],
+            "bones": [],
+            "animations": {
+                "morphTargets[T]": [{
+                    "time": 0,
+                    "value": 0
+                },{
+                    "time": 10,
+                    "value": 0
+                },{
+                    "time": 50,
+                    "value": 0.5
+                },{
+                    "time": 95,
+                    "value": 1
+                },{
+                    "time": 110,
+                    "value": 1
+                },{
+                    "time": 140,
+                    "value": 0
+                },{
+                    "time": 150,
+                    "value": 0
+                }]
+            },
+            "name": "test-objGeometry",
+            "vertices": [-4,0.620216,-4,4,0.620216,-4,-4,0.620216,4,4,0.620216,4,-2.34599,-89.0885,-2.34599,2.34599,-89.0885,-2.34599,-2.34599,-89.0885,2.34599,2.34599,-89.0885,2.34599,-3.05437,-25.4524,-3.05437,3.05437,-25.4524,-3.05437,3.05437,-25.4524,3.05437,-3.05437,-25.4524,3.05437,-3.05437,-39.7619,-3.05437,3.05437,-39.7619,-3.05437,3.05437,-39.7619,3.05437,-3.05437,-39.7619,3.05437,-2.91343,-56.813,-2.91343,2.91343,-56.813,-2.91343,2.91343,-56.813,2.91343,-2.91343,-56.813,2.91343,-2.91343,-61.1786,-2.91343,2.91343,-61.1786,-2.91343,2.91343,-61.1786,2.91343,-2.91343,-61.1786,2.91343,2.91343,-61.1786,12.081,2.91343,-56.813,12.081,-2.91343,-56.813,12.081,-2.91343,-61.1786,12.081,2.91343,-61.1786,23.2496,2.91343,-56.813,23.2496,-2.91343,-56.813,23.2496,-2.91343,-61.1786,23.2496,2.91343,-61.1786,35.7722,2.91343,-56.813,35.7722,-2.91343,-56.813,35.7722,-2.91343,-61.1786,35.7722]
+        },
+        "materials": [{
+            "opacity": 1,
+            "colorAmbient": [0.8,0.8,0.8],
+            "doubleSided": true,
+            "depthWrite": true,
+            "depthTest": true,
+            "colorDiffuse": [0.8,0.8,0.8],
+            "DbgName": "01-default",
+            "specularCoef": 50,
+            "colorSpecular": [0.44902,0.44902,0.44902],
+            "shading": "phong",
+            "DbgIndex": 0,
+            "DbgColor": 15658734,
+            "visible": true,
+            "blending": "NormalBlending",
+            "wireframe": false,
+            "colorEmissive": [0,0,0],
+            "transparent": false
+        }]
+    }],
+    "materials": [{
+        "ambient": 13421772,
+        "depthWrite": true,
+        "depthTest": true,
+        "specular": 7500402,
+        "name": "01-default",
+        "emissive": 0,
+        "shininess": 50,
+        "color": 13421772,
+        "uuid": "8DC6308D-11A2-3251-91BC-D52FB2C734BD",
+        "type": "MeshPhongMaterial",
+        "blending": "NormalBlending",
+        "vertexColors": false
+    }],
+    "object": {
+        "uuid": "13D0028E-5D9E-44AF-BB17-B385656A35C6",
+        "type": "Scene",
+        "children": [{
+            "type": "Object",
+            "name": "lighthaus-test-morph01",
+            "uuid": "C3F5BA0D-BEB5-3118-9CF8-738E95FF4EF3",
+            "matrix": [-1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1],
+            "visible": true,
+            "animations": {},
+            "children": [{
+                "type": "Mesh",
+                "name": "test-obj",
+                "uuid": "1202E101-A129-3E65-A14B-8546898B2323",
+                "matrix": [1,0,0,0,0,-0,-1,0,0,1,-0,0,0,-0,0.563976,1],
+                "visible": true,
+                "material": "8DC6308D-11A2-3251-91BC-D52FB2C734BD",
+                "castShadow": true,
+                "receiveShadow": true,
+                "geometry": "9C17D067-6185-36C2-898A-43F0618F9682",
+                "animations": {}
+            }]
+        }],
+        "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]
+    },
+    "images": []
+}

examples/webgl_animation_blend.html

@@ -0,0 +1,215 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - blendshapes</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 {
+				color: #000;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+				color: #0af;
+			}
+
+			#stats { position: absolute; top:0; left: 0 }
+			#stats #fps { background: transparent !important }
+			#stats #fps #fpsText { color: #777 !important }
+			#stats #fps #fpsGraph { display: none }
+		</style>
+	</head>
+
+	<body>
+
+		<div id="container"></div>
+
+		<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> webgl - clip system
+		- blend shapes
+		</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script>
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+			var FLOOR = -250;
+
+			var container,stats;
+
+			var camera, scene, sceneAnimationClip;
+			var renderer;
+
+			var mesh, helper;
+
+			var mixer;
+		
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var clock = new THREE.Clock();
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera.position.z = 150;
+
+				scene = new THREE.Scene();
+
+				scene.fog = new THREE.Fog( 0x000000, 2000, 10000 );
+
+				//scene.add( camera );
+
+				// GROUND
+
+				var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 );
+				var material = new THREE.MeshPhongMaterial( { emissive: 0x000000 } );
+
+				var ground = new THREE.Mesh( geometry, material );
+				ground.position.set( 0, FLOOR, 0 );
+				ground.rotation.x = -Math.PI/2;
+				/*scene.add( ground );*/
+
+				ground.receiveShadow = true;
+
+
+				// RENDERER
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColor( scene.fog.color );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.domElement.style.position = "relative";
+
+				container.appendChild( renderer.domElement );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+				renderer.shadowMap.enabled = true;
+
+
+				// STATS
+
+				stats = new Stats();
+				container.appendChild( stats.domElement );
+
+				//
+
+				var loader = new THREE.ObjectLoader();
+				loader.load( "models/json/blend-animation.json", function ( loadedScene ) {
+
+					scene = loadedScene;
+					scene.add( camera );
+				
+					mixer = new THREE.AnimationMixer( scene );
+			
+					mixer.addAction( new THREE.AnimationAction( sceneAnimationClip, 0, 1, 1, true ) );
+
+				} );
+
+				// GUI
+
+				initGUI();
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function initGUI() {
+
+				var API = {
+					'show model'    : true,
+					'show skeleton' : false
+				};
+
+				var gui = new dat.GUI();
+
+				gui.add( API, 'show model' ).onChange( function() { mesh.visible = API[ 'show model' ]; } );
+
+				gui.add( API, 'show skeleton' ).onChange( function() { helper.visible = API[ 'show skeleton' ]; } );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var delta = 0.75 * clock.getDelta();
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 );
+
+				camera.lookAt( scene.position );
+
+				if( mixer ) {
+					//console.log( "updating mixer by " + delta );
+					mixer.update( delta );
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

examples/webgl_animation_node.html

@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - blendShapes + animation tracks [boxes]</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 {
+				color: #000;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+
+			a {
+				color: #0af;
+			}
+
+			#stats { position: absolute; top:0; left: 0 }
+			#stats #fps { background: transparent !important }
+			#stats #fps #fpsText { color: #777 !important }
+			#stats #fps #fpsGraph { display: none }
+		</style>
+	</head>
+
+	<body>
+
+		<div id="container"></div>
+
+		<div id="info">
+		<a href="http://threejs.org" target="_blank">three.js</a> webgl - clip system
+		- three gears
+		</div>
+
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script>
+
+			var SCREEN_WIDTH = window.innerWidth;
+			var SCREEN_HEIGHT = window.innerHeight;
+			var FLOOR = -250;
+
+			var container,stats;
+
+			var camera, scene, sceneAnimationClip;
+			var renderer;
+
+			var mesh, helper;
+
+			var mixer;
+		
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var clock = new THREE.Clock();
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.getElementById( 'container' );
+
+				camera = new THREE.PerspectiveCamera( 30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
+				camera.position.z = 150;
+
+				scene = new THREE.Scene();
+
+				scene.fog = new THREE.Fog( 0x000000, 2000, 10000 );
+
+				//scene.add( camera );
+
+				// GROUND
+
+				var geometry = new THREE.PlaneBufferGeometry( 16000, 16000 );
+				var material = new THREE.MeshPhongMaterial( { emissive: 0x000000 } );
+
+				var ground = new THREE.Mesh( geometry, material );
+				ground.position.set( 0, FLOOR, 0 );
+				ground.rotation.x = -Math.PI/2;
+				/*scene.add( ground );*/
+
+				ground.receiveShadow = true;
+
+
+				// RENDERER
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColor( scene.fog.color );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.domElement.style.position = "relative";
+
+				container.appendChild( renderer.domElement );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+				renderer.shadowMap.enabled = true;
+
+
+				// STATS
+
+				stats = new Stats();
+				container.appendChild( stats.domElement );
+
+				//
+
+				var loader = new THREE.ObjectLoader();
+				loader.load( "models/json/node-animation.json", function ( loadedScene ) {
+
+					sceneAnimationClip = loadedScene.clips[0];
+					scene = loadedScene;
+					scene.add( camera );
+				
+					console.log( 'creating animation mixer with clip: ', sceneAnimationClip );
+					mixer = new THREE.AnimationMixer( scene );
+			
+					mixer.addAction( new THREE.AnimationAction( sceneAnimationClip, 0, 1, 1, true ) );
+
+				} );
+
+				// GUI
+
+				initGUI();
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				windowHalfX = window.innerWidth / 2;
+				windowHalfY = window.innerHeight / 2;
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function initGUI() {
+
+				var API = {
+					'show model'    : true,
+					'show skeleton' : false
+				};
+
+				var gui = new dat.GUI();
+
+				gui.add( API, 'show model' ).onChange( function() { mesh.visible = API[ 'show model' ]; } );
+
+				gui.add( API, 'show skeleton' ).onChange( function() { helper.visible = API[ 'show skeleton' ]; } );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				var delta = 0.75 * clock.getDelta();
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y = THREE.Math.clamp( camera.position.y + ( - mouseY - camera.position.y ) * .05, 0, 1000 );
+
+				camera.lookAt( scene.position );
+
+				if( mixer ) {
+					//console.log( "updating mixer by " + delta );
+					mixer.update( delta );
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>

src/animation/AnimationClip.js

@@ -175,7 +175,30 @@ THREE.AnimationClip.FromImplicitMorphTargetAnimations = function( morphTargets,
 
 };
 
-THREE.AnimationClip.FromGeometryAnimation = function( animation, bones, nodeName ) {
+// parse the standard JSON format for clips
+THREE.AnimationClip.parse = function( json ) {
+
+	var name = json.name || "default";
+	var duration = json.duration || -1;
+	var fps = json.fps || 30;
+	var animationTracks = json.tracks || [];
+
+	var tracks = [];
+
+	for( var i = 0; i < animationTracks.length; i ++ ) {
+
+		tracks.push( THREE.KeyframeTrack.parse( animationTracks[i] ).scale( 1 / fps ) );
+
+	}
+
+	if( tracks.length === 0 ) return null;
+
+	return new THREE.AnimationClip( name, duration, tracks );
+
+};
+
+// parse the old animation.hierarchy format
+THREE.AnimationClip.parseAnimationHierarchy = function( animation, bones, nodeName ) {
 
 	if( ! animation ) {
 		console.error( "  no animation in JSONLoader data" );
@@ -210,32 +233,15 @@ THREE.AnimationClip.FromGeometryAnimation = function( animation, bones, nodeName
 
 	var tracks = [];
 
-	// new style morph animations
-	var re = /^morphTargets\[([\w\d\[\]\_. ]+)\]$/;
-	for( var name in animation ) {
-		// get any variables named morphTarget
-		var matches = re.exec(name);
-
-		if( ! matches ) continue;
-
-	    if (matches.index === re.lastIndex) {
-	        re.lastIndex++;
-	    }
-
-		var morphTargetName = matches[1];
-
-		tracks.push( new THREE.NumberKeyframeTrack( nodeName + '.morphTargetInfluence[' + morphTargetName + ']', animation[name] ) );
-
-	}
-
 	var clipName = animation.name || 'default';
 	var duration = animation.length || -1; // automatic length determination in AnimationClip.
 	var fps = animation.fps || 30;
-	var animationTracks = animation.hierarchy || [];
 
-	for ( var h = 0; h < animationTracks.length; h ++ ) {
+	var hierarchyTracks = animation.hierarchy || [];
+
+	for ( var h = 0; h < hierarchyTracks.length; h ++ ) {
 
-		var animationKeys = animationTracks[ h ].keys;
+		var animationKeys = hierarchyTracks[ h ].keys;
 
 		// skip empty tracks
 		if( ! animationKeys || animationKeys.length == 0 ) {

src/animation/KeyframeTrack.js

@@ -249,7 +249,7 @@ THREE.KeyframeTrack.parse = function( json ) {
 };
 
 THREE.KeyframeTrack.GetTrackTypeForTypeName = function( typeName ) {
-	switch( typeName.toLower() ) {
+	switch( typeName.toLowerCase() ) {
 	 	case "vector":
 	 	case "vector2":
 	 	case "vector3":

src/animation/tracks/VectorKeyframeTrack.js

@@ -71,7 +71,7 @@ THREE.VectorKeyframeTrack.parse = function( json ) {
 		} );
 	}
 
-	return new THREE.VectorKeyframeTrack( json.keys, keys );
+	return new THREE.VectorKeyframeTrack( json.name, keys );
 
 };
  

src/loaders/JSONLoader.js

@@ -422,27 +422,30 @@ THREE.JSONLoader.prototype = {
 
 			}
 
-			console.log( json );
+			geometry.clips = [];
+
+			// parse old style Bone/Hierarchy animations
+			var animation = json.animations || json.animation;
+
+			if( animation ) {
+
+				var clip = THREE.AnimationClip.parseAnimationHierarchy( animation );
+				if( clip ) this.clips.push( clip );
 
-			var animations = [];
-			if( json.animations ) {
-				for( animationName in animations ) {
-					animations.push( animations[animationName] );
-				}
-			}
-			if( json.animation ) {
-				animations.push( json.animation );
 			}
 
-			for( var animation in animations ) {
+			// parse new style Clips
+			var clips = json.clips || [];
 
-				var clip = THREE.AnimationClip.FromGeometryAnimation( animation );
+			for( var i = 0; i < clips.length; i ++ ) {
+
+				var clip = THREE.AnimationClip.parse( clips[i] );
+				if( clip ) this.clips.push( clip );
 
-				if( clip ) {
-					geometry.animationClips.push( clip );		
-				}
 			}
 
+			console.log( geometry.clips );
+
 		};
 
 		function parseMorphing( scale ) {

src/loaders/ObjectLoader.js

@@ -64,7 +64,7 @@ THREE.ObjectLoader.prototype = {
 
 		if( tracks.length > 0 ) {
 
-			object.animationClips = [ new THREE.AnimationClip( "default", -1, tracks ) ];
+			object.clips = [ new THREE.AnimationClip( "default", -1, tracks ) ];
 
 		}
 
@@ -627,20 +627,29 @@ THREE.ObjectLoader.prototype = {
 
 			}
 
-			if( data.animations && data.animations.tracks ) {
+			if( data.clips ) {
 
-				var dataTracks = data.animations.tracks;
+				// NOTE: only reading the first clip if it exists.  We can add multiple clip support in the future with this design.
+				//  For multiple clip support we should merge clips on different nodes with the clips that have the same names.  Thus
+				//  One will end up with a few named clips for the scene composed of merged tracks from individual nodes.
+				for( var i = 0; i < Math.min( 1, data.clips.length ); i ++ ) {
 
-				var fpsToSeconds = ( data.animations.fps !== undefined ) ? ( 1.0 / data.animations.fps ) : 1.0;
+					var dataTracks = data.clips[i].tracks;
 
-				for( var i = 0; i < data.animations.tracks.length; i ++ ) {
+					var fpsToSeconds = ( data.clips[i].fps !== undefined ) ? ( 1.0 / data.clips[i].fps ) : 1.0;
+
+					for( var i = 0; i < dataTracks.length; i ++ ) {
+
+						console.log( dataTracks[i] );
+						var track = THREE.KeyframeTrack.parse( dataTracks[i] ).scale( fpsToSeconds );
+						track.name = object.uuid + '.' + track.name;
+						console.log( track );
+						tracks.push( track );
+						
+					}
 
-					var track = THREE.KeyframeTrack.parse( data.animations.tracks[i] );
-					track.name = object.uuid + '.' + track.name;
-					track.scale( fpsToSeconds );
-					tracks.push( track );
-					
 				}
+				if( data.clips.length > 1 ) console.warn( "THREE.ObjectLoader: more than one clip specified on node, not yet supported" );
 
 			}