Merge pull request #3 from jackcaron/sceneAnimations

Scene animations

docs/api/objects/Mesh.html

@@ -44,29 +44,22 @@ <h3>[property:Material material]</h3>
 
 		<div>An instance of [page:Material], defining the object's appearance. Default is a [page:MeshBasicMaterial] with wireframe mode enabled and randomised colour.</div>
 
-		<h3>[property:Array morphTargetForcedOrder]</h3>
-
-		<div>
-		An array of indices specifying the order that the morphs will be applied. Undefined by
-		default, but reset to a blank array by [page:Mesh.updateMorphTargets updateMorphTargets].
-		</div>
-
 		<h3>[property:Array morphTargetInfluences]</h3>
-		
+
 		<div>
 		An array of weights typically from 0-1 that specify how much of the morph is applied.
 		Undefined by default, but reset to a blank array by [page:Mesh.updateMorphTargets updateMorphTargets].
 		</div>
-		
+
 		<h3>[property:Array morphTargetDictionary]</h3>
-		
+
 		<div>
 		A dictionary of morphTargets based on the morphTarget.name property.
 		Undefined by default, but rebuilt [page:Mesh.updateMorphTargets updateMorphTargets].
 		</div>
 
 		<h3>[property:Integer morphTargetBase]</h3>
-		
+
 		<div>
 		Specify the index of the morph that should be used as the base morph. Replaces the positions.
 		Undefined by default, but reset to -1 (non set) by [page:Mesh.updateMorphTargets updateMorphTargets].
@@ -97,7 +90,7 @@ <h3>[method:Array raycast]([page:Raycaster raycaster], [page:Array intersects])<
 		<div>
 		Get intersections between a casted ray and this mesh. [page:Raycaster.intersectObject] will call this method.
 		</div>
-		
+
 		<h3>[method:Object3D clone]([page:Object3D object])</h3>
 		<div>
 		object -- (optional) Object3D which needs to be cloned. If undefined, clone method will create a new cloned Mesh Object.

docs/api/textures/DataTexture.html

@@ -12,44 +12,36 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">
-		Creates a texture directly from bitmapdata, width and height.
-		</div>
+		<div class="desc">Creates a texture directly from raw data, width and height.</div>
 
 
 		<h2>Constructor</h2>
 
-
-		<h3>[name]([page:ArraybufferView data], [page:Integer width], [page:Integer height], [page:number format], [page:number type], [page:number mapping], [page:number wrapS], [page:number wrapT], [page:number magFilter], [page:number minFilter], [page:number anisotropy])</h3>
+		<h3>[name]( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy )</h3>
 		<div>
-		data -- The data should be arraybufferview. It contains the data of image based on the type and format.<br />
-		width -- The width of the image. <br />
-		height -- The height of the image. <br />
-		format -- The default is THREE.RGBAFormat for the texture. Other formats are: THREE.AlphaFormat, THREE.RGBFormat, THREE.LuminanceFormat, and THREE.LuminanceAlphaFormat. There are also compressed texture formats, if the S3TC extension is supported: THREE.RGB_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT1_Format, THREE.RGBA_S3TC_DXT3_Format, and THREE.RGBA_S3TC_DXT5_Format.<br />
-		type -- The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.<br />
-		mapping -- How the image is applied to the object. An object type of THREE.UVMapping is the default, where the U,V coordinates are used to apply the map, and a single texture is expected. The other types are THREE.CubeReflectionMapping, for cube maps used as a reflection map; THREE.CubeRefractionMapping, refraction mapping; and THREE.SphericalReflectionMapping, a spherical reflection map projection.<br />
-		wrapS -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
-		wrapT -- The default is THREE.ClampToEdgeWrapping, where the edge is clamped to the outer edge texels. The other two choices are THREE.RepeatWrapping and THREE.MirroredRepeatWrapping.<br />
-		magFilter -- How the texture is sampled when a texel covers more than one pixel. The default is THREE.LinearFilter, which takes the four closest texels and bilinearly interpolates among them. The other option is THREE.NearestFilter, which uses the value of the closest texel.<br />
-		minFilter -- How the texture is sampled when a texel covers less than one pixel. The default is THREE.LinearMipMapLinearFilter, which uses mipmapping and a trilinear filter. Other choices are THREE.NearestFilter, THREE.NearestMipMapNearestFilter, THREE.NearestMipMapLinearFilter, THREE.LinearFilter, and THREE.LinearMipMapNearestFilter. These vary whether the nearest texel or nearest four texels are retrieved on the nearest mipmap or nearest two mipmaps. Interpolation occurs among the samples retrieved.<br />
-		anisotropy -- The number of samples taken along the axis through the pixel that has the highest density of texels. By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used. Use renderer.getMaxAnisotropy() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.
+			The data argument must be an ArrayBuffer or a typed array view.
+			Further parameters correspond to the properties inherited from [page:Texture], where both magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are intially set to false.
 		</div>
 		<div>
-		This loads a image through the bitmap values. The values are dependant on the type and format.
-	 	If the type is THREE.UnsignedByteType, a Uint8Array must be supplied. If it is THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, a Uint16Array must be supplied.<br />
-	 	If the format is THREE.RGBAFormat, data needs 4 values for 1 pixel. These are supplied in the Red,Green,Blue and alpha sequence. <br />
-	 	Except if the type is THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type.
-		</div>
+			The interpretation of the data depends on type and format:
+			If the type is THREE.UnsignedByteType, a Uint8Array will be useful for addressing the texel data.
+			If the format is THREE.RGBAFormat, data needs four values for one texel; Red, Green, Blue and Alpha (typically the opacity). Similarly, THREE.RGBFormat specifies a format where only three values are used for each texel.<br />
 
+			For the packed types, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, all color components of one texel can be addressed as bitfields within an integer element of a Uint16Array.<br />
 
-		<h2>Properties</h2>
+			In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present.
+		</div>
 
+		<h2>Properties</h2>
 
+		<h3>[property:Image image]</h3>
+		<div>
+		Overridden with a record type holding data, width and height.
+		</div>
 
 		<h2>Methods</h2>
 
 
-
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

docs/scenes/bones-browser.html

@@ -61,7 +61,7 @@
 				document.body.appendChild( renderer.domElement );
 
 				orbit = new THREE.OrbitControls( camera, renderer.domElement );
-				orbit.noZoom = true;
+				orbit.enableZoom = false;
 
 				ambientLight = new THREE.AmbientLight( 0x000000 );
 				scene.add( ambientLight );

docs/scenes/geometry-browser.html

@@ -62,7 +62,7 @@
 			document.body.appendChild( renderer.domElement );
 
 			var orbit = new THREE.OrbitControls( camera, renderer.domElement );
-			orbit.noZoom = true;
+			orbit.enableZoom = false;
 
 			var ambientLight = new THREE.AmbientLight( 0x000000 );
 			scene.add( ambientLight );

editor/js/Config.js

@@ -14,9 +14,6 @@ var Config = function () {
 		'project/renderer/antialias': true,
 		'project/vr': false,
 
-		'camera/position': [ 500, 250, 500 ],
-		'camera/target': [ 0, 0, 0 ],
-
 		'ui/sidebar/animation/collapsed': true,
 		'ui/sidebar/geometry/collapsed': true,
 		'ui/sidebar/material/collapsed': true,

editor/js/Editor.js

@@ -19,9 +19,6 @@ var Editor = function () {
 
 		// actions
 
-		playAnimation: new SIGNALS.Signal(),
-		stopAnimation: new SIGNALS.Signal(),
-
 		// showDialog: new SIGNALS.Signal(),
 
 		// notifications
@@ -75,6 +72,8 @@ var Editor = function () {
 	this.loader = new Loader( this );
 
 	this.camera = new THREE.PerspectiveCamera( 50, 1, 1, 100000 );
+	this.camera.position.set( 500, 250, 500 );
+	this.camera.lookAt( new THREE.Vector3() );
 	this.camera.name = 'Camera';
 
 	this.scene = new THREE.Scene();
@@ -242,8 +241,8 @@ Editor.prototype = {
 
 	addHelper: function () {
 
-		var geometry = new THREE.SphereGeometry( 20, 4, 2 );
-		var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+		var geometry = new THREE.SphereBufferGeometry( 20, 4, 2 );
+		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
 
 		return function ( object ) {
 
@@ -283,7 +282,6 @@ Editor.prototype = {
 			var picker = new THREE.Mesh( geometry, material );
 			picker.name = 'picker';
 			picker.userData.object = object;
-			picker.visible = false;
 			helper.add( picker );
 
 			this.sceneHelpers.add( helper );

editor/js/Loader.js

@@ -113,14 +113,12 @@ var Loader = function ( editor ) {
 					var xml = parser.parseFromString( contents, 'text/xml' );
 
 					var loader = new THREE.ColladaLoader();
-					loader.parse( xml, function ( collada ) {
+					var collada = loader.parse( xml );
 
-						collada.scene.name = filename;
+					collada.scene.name = filename;
 
-						editor.addObject( collada.scene );
-						editor.select( collada.scene );
-
-					} );
+					editor.addObject( collada.scene );
+					editor.select( collada.scene );
 
 				}, false );
 				reader.readAsText( file );
@@ -192,9 +190,13 @@ var Loader = function ( editor ) {
 						var contents = event.target.result;
 
 						var geometry = new THREE.MD2Loader().parse( contents );
-						geometry.name = filename;
+						var material = new THREE.MeshPhongMaterial( {
+							morphTargets: true,
+							morphNormals: true
+						} );
 
-						var object = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
+						var object = new THREE.MorphAnimMesh( geometry, material );
+						object.name = filename;
 
 						editor.addObject( object );
 						editor.select( object );

editor/js/Sidebar.Animation.js

@@ -50,6 +50,25 @@ Sidebar.Animation = function ( editor ) {
 
 				animations[ child.id ] = new THREE.Animation( child, child.geometry.animation );
 
+			} else if ( child instanceof THREE.MorphAnimMesh ) {
+
+				var animation = new THREE.MorphAnimation( child );
+				animation.duration = 30;
+
+				// temporal hack for THREE.AnimationHandler
+				animation._play = animation.play;
+				animation.play = function () {
+					this._play();
+					THREE.AnimationHandler.play( this );
+				};
+				animation.resetBlendWeights = function () {};
+				animation.stop = function () {
+					this.pause();
+					THREE.AnimationHandler.stop( this );
+				};
+
+				animations[ child.id ] = animation;
+
 			}
 
 		} );
@@ -60,27 +79,23 @@ Sidebar.Animation = function ( editor ) {
 
 		container.setDisplay( 'none' );
 
-		if ( object instanceof THREE.SkinnedMesh ) {
+		if ( object instanceof THREE.SkinnedMesh || object instanceof THREE.MorphAnimMesh ) {
 
 			animationsRow.clear();
 
 			var animation = animations[ object.id ];
 
-			var playButton = new UI.Button().setLabel( 'Play' ).onClick( function () {
+			var playButton = new UI.Button( 'Play' ).onClick( function () {
 
 				animation.play();
 
-				signals.playAnimation.dispatch( animation );
-
 			} );
 			animationsRow.add( playButton );
 
-			var pauseButton = new UI.Button().setLabel( 'Stop' ).onClick( function () {
+			var pauseButton = new UI.Button( 'Stop' ).onClick( function () {
 
 				animation.stop();
 
-				signals.stopAnimation.dispatch( animation );
-
 			} );
 			animationsRow.add( pauseButton );
 

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -6,47 +6,25 @@ Sidebar.Geometry.BufferGeometry = function ( signals ) {
 
 	var container = new UI.Panel();
 
-	// vertices
-
-	var verticesRow = new UI.Panel();
-	var vertices = new UI.Text().setFontSize( '12px' );
-
-	verticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ) );
-	verticesRow.add( vertices );
-
-	container.add( verticesRow );
-
-	// faces
-
-	var facesRow = new UI.Panel();
-	var faces = new UI.Text().setFontSize( '12px' );
-
-	facesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ) );
-	facesRow.add( faces );
-
-	container.add( facesRow );
-
-	//
-
-	var update = function ( object ) {
+	function update( object ) {
 
 		if ( object === null ) return;
 
 		var geometry = object.geometry;
 
-		if ( geometry instanceof THREE.BufferGeometry ) { 
+		if ( geometry instanceof THREE.BufferGeometry ) {
 
+			container.clear();
 			container.setDisplay( 'block' );
 
-			vertices.setValue( ( geometry.attributes.position.array.length / 3 ).format() );
-
-			if ( geometry.attributes.index !== undefined ) {
-
-				faces.setValue( ( geometry.attributes.index.array.length / 3 ).format() );
+			var attributes = geometry.attributes;
 
-			} else {
+			for ( var name in attributes ) {
 
-				faces.setValue( ( geometry.attributes.position.array.length / 9 ).format() );
+				var panel = new UI.Panel();
+				panel.add( new UI.Text( name ).setWidth( '90px' ) );
+				panel.add( new UI.Text( ( attributes[ name ].count ).format() ).setFontSize( '12px' ) );
+				container.add( panel );
 
 			}
 

editor/js/Sidebar.Material.js

@@ -435,12 +435,6 @@ Sidebar.Material = function ( editor ) {
 
 				if ( material.vertexColors !== vertexColors ) {
 
-					if ( geometry instanceof THREE.Geometry ) {
-
-						geometry.groupsNeedUpdate = true;
-
-					}
-
 					material.vertexColors = vertexColors;
 					material.needsUpdate = true;
 

editor/js/Sidebar.Object3D.js

@@ -132,7 +132,7 @@ Sidebar.Object3D = function ( editor ) {
 	// scale
 
 	var objectScaleRow = new UI.Panel();
-	var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
+	var objectScaleLock = new UI.Checkbox( true ).setPosition( 'absolute' ).setLeft( '75px' );
 	var objectScaleX = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleX );
 	var objectScaleY = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleY );
 	var objectScaleZ = new UI.Number( 1 ).setRange( 0.01, Infinity ).setWidth( '50px' ).onChange( updateScaleZ );