Added animation authoring example.

examples/js/TimelinerController.js

+/**
+ * Controller class for the Timeliner GUI.
+ *
+ * Timeliner GUI library (required to use this class):
+ *
+ * 		./libs/timeliner_gui.min.js
+ *
+ * Source code:
+ *
+ * 		https://github.com/tschw/timeliner
+ * 		https://github.com/zz85/timeliner (fork's origin)
+ *
+ * @author tschw
+ *
+ */
+
+THREE.TimelinerController = function TimelinerController( scene, trackInfo, onUpdate ) {
+
+	this._scene = scene;
+	this._trackInfo = trackInfo;
+
+	this._onUpdate = onUpdate;
+
+	this._mixer = new THREE.AnimationMixer( scene );
+	this._clip = null;
+	this._action = null;
+
+	this._tracks = {};
+	this._propRefs = {};
+	this._channelNames = [];
+
+};
+
+THREE.TimelinerController.prototype = {
+
+	constructor: THREE.TimelinerController,
+
+	init: function( timeliner ) {
+
+		var tracks = [],
+			trackInfo = this._trackInfo;
+
+		for ( var i = 0, n = trackInfo.length; i !== n; ++ i ) {
+
+			var spec = trackInfo[ i ];
+
+			tracks.push( this._addTrack(
+					spec.type, spec.propertyPath,
+					spec.initialValue, spec.interpolation ) );
+		}
+
+		this._clip = new THREE.AnimationClip( 'editclip', 0, tracks );
+		this._action = this._mixer.clipAction( this._clip ).play();
+
+	},
+
+	setDisplayTime: function( time ) {
+
+		this._action.time = time;
+		this._mixer.update( 0 );
+
+		this._onUpdate();
+
+	},
+
+	getChannelNames: function() {
+
+		return this._channelNames;
+
+	},
+
+	getChannelKeyTimes: function( channelName ) {
+
+		return this._tracks[ channelName ].times;
+
+	},
+
+	setKeyframe: function( channelName, time ) {
+
+		var track = this._tracks[ channelName ],
+			times = track.times,
+			index = times.indexOf( time );
+
+		if ( index === -1 ) index = times.length;
+
+		var values = track.values,
+			offset = index * track.getValueSize();
+
+		// note: not calling track.getValueSize with
+		// inconsistent array sizes
+
+		times[ index ] = time;
+		this._propRefs[ channelName ].getValue( values, offset );
+
+		this._sort( track );
+		this._clip.resetDuration();
+
+	},
+
+	delKeyframe: function( channelName, time ) {
+
+		var track = this._tracks[ channelName ],
+			times = track.times,
+			index = times.indexOf( time );
+
+		if ( index === 0 ) {
+
+			// we disallow to remove the first keyframe
+			// since the animation system is designed to
+			// always produce a defined state - we allow
+			// the initial state to be changed however
+
+			this.setKeyframe( channelName, time );
+
+		} else if ( index !== -1 ) {
+
+			var values = track.values,
+				stride = track.getValueSize(),
+				offset = index * stride,
+
+				nValues = values.length;
+
+			// note: not calling track.getValueSize with
+			// inconsistent array sizes
+
+			times[ index ] = times[ times.length - 1 ];
+			times.pop();
+
+			for ( var i = nValues - stride; i !== nValues; ++ i ) {
+
+				values[ offset ++ ] = values[ i ];
+
+			}
+
+			values.length = nValues - stride;
+
+			this._sort( track );
+			this._clip.resetDuration();
+
+		}
+
+	},
+
+	hasKeyframe: function( channelName, time ) {
+
+		var track = this._tracks[ channelName ],
+			times = track.times,
+			index = times.indexOf( time );
+
+		return index !== -1;
+
+	},
+
+	serialize: function() {
+
+		var result = {},
+
+			names = this._channelNames,
+			tracks = this._tracks;
+
+		for ( var i = 0, n = names.length; i !== n; ++ i ) {
+
+			var name = names[ i ],
+				track = tracks[ name ];
+
+			result[ name ] = {
+
+				times: track.times,
+				values: track.values
+
+			};
+
+		}
+
+		return result;
+
+	},
+
+	deserialize: function( structs ) {
+
+		var names = this._channelNames,
+			tracks = this._tracks;
+
+		for ( var i = 0, n = names.length; i !== n; ++ i ) {
+
+			var name = names[ i ],
+				track = tracks[ name ];
+				data = structs[ name ];
+
+			this._setArray( track.times, data.times );
+			this._setArray( track.values, data.values );
+
+		}
+
+		// update display
+		this.setDisplayTime( this._mixer.time );
+
+	},
+
+	_sort: function( track ) {
+
+		var times = track.times,
+			order = THREE.AnimationUtils.getKeyframeOrder( times );
+
+		this._setArray( times,
+				THREE.AnimationUtils.sortedArray( times, 1, order ) );
+
+		var values = track.values,
+			stride = track.getValueSize();
+
+		this._setArray( values,
+				THREE.AnimationUtils.sortedArray( values, stride, order ) );
+
+	},
+
+	_setArray: function( dst, src ) {
+
+		dst.length = 0;
+		dst.push.apply( dst, src );
+
+	},
+
+	_addTrack: function( type, prop, initialValue, interpolation ) {
+
+		var track = new type(
+				prop, [ 0 ], initialValue, interpolation );
+
+		// data must be in JS arrays so it can be resized
+		track.times = Array.prototype.slice.call( track.times );
+		track.values = Array.prototype.slice.call( track.values );
+
+		this._channelNames.push( prop );
+		this._tracks[ prop ] = track;
+
+		// for recording the state:
+		this._propRefs[ prop ] =
+				new THREE.PropertyBinding( this._scene, prop );
+
+		return track;
+
+	}
+
+};

examples/webgl_animation_authoring.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - animation authoring</title>
+		<meta charset="utf-8">
+		<style>
+			body {
+				margin: 0px;
+				background-color: #000000;
+				color: #fff;
+				font-family:Monospace;
+				font-size: 15px;
+				line-height: 30px;
+				overflow: hidden;
+			}
+			#info {
+				text-align: center;
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 15px;
+				z-index:100;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="info">
+		"W" translate | "E" rotate | "R" scale | "+" increase size | "-" decrease size<br />
+		Press "Q" to toggle world/local space, hold down "Ctrl" to snap to grid
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/controls/TransformControls.js"></script>
+		<script src="js/libs/timeliner_gui.min.js"></script>
+		<script src="js/TimelinerController.js"></script>
+
+		<script>
+
+			var camera, scene, renderer, control;
+
+			init();
+			render();
+
+			function init() {
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 3000 );
+				camera.position.set( 1000, 500, 1000 );
+				camera.lookAt( new THREE.Vector3( 0, 200, 0 ) );
+
+				scene = new THREE.Scene();
+				scene.add( new THREE.GridHelper( 500, 100 ) );
+
+				var light = new THREE.DirectionalLight( 0xffffff, 2 );
+				light.position.set( 1, 1, 1 );
+				scene.add( light );
+
+
+				var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', THREE.UVMapping, render );
+				texture.anisotropy = renderer.getMaxAnisotropy();
+
+				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var material = new THREE.MeshLambertMaterial( { map: texture } );
+
+				control = new THREE.TransformControls( camera, renderer.domElement );
+				control.addEventListener( 'change', render );
+
+				var mesh = new THREE.Mesh( geometry, material );
+				mesh.name = "MyBox";
+				scene.add( mesh );
+
+				control.attach( mesh );
+				scene.add( control );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				window.addEventListener( 'keydown', function ( event ) {
+
+					switch ( event.keyCode ) {
+
+						case 81: // Q
+							control.setSpace( control.space === "local" ? "world" : "local" );
+							break;
+
+						case 17: // Ctrl
+							control.setTranslationSnap( 100 );
+							control.setRotationSnap( THREE.Math.degToRad( 15 ) );
+							break;
+
+						case 87: // W
+							control.setMode( "translate" );
+							break;
+
+						case 69: // E
+							control.setMode( "rotate" );
+							break;
+
+						case 82: // R
+							control.setMode( "scale" );
+							break;
+
+						case 187:
+						case 107: // +, =, num+
+							control.setSize( control.size + 0.1 );
+							break;
+
+						case 189:
+						case 109: // -, _, num-
+							control.setSize( Math.max( control.size - 0.1, 0.1 ) );
+							break;
+
+					}
+
+				});
+
+				window.addEventListener( 'keyup', function ( event ) {
+
+					switch ( event.keyCode ) {
+
+						case 17: // Ctrl
+							control.setTranslationSnap( null );
+							control.setRotationSnap( null );
+							break;
+
+					}
+
+				});
+
+				var trackInfo = [
+
+					{
+						type: THREE.VectorKeyframeTrack,
+						propertyPath: 'MyBox.position',
+						initialValue: [ 0, 0, 0 ],
+						interpolation: THREE.InterpolateSmooth
+					},
+
+					{
+						type: THREE.QuaternionKeyframeTrack,
+						propertyPath: 'MyBox.quaternion',
+						initialValue: [ 0, 0, 0, 1 ],
+						interpolation: THREE.InterpolateLinear
+
+					}
+
+				];
+
+				new Timeliner(
+						new THREE.TimelinerController( scene, trackInfo, render ) );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
+			}
+
+			function render() {
+
+				control.update();
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>