Browse Source

Finalized SkinnedMesh docs

Greg Tatum 10 years ago
parent
commit
ef729e0eb8
3 changed files with 61 additions and 33 deletions
  1. 2 1
      docs/api/core/Geometry.html
  2. 42 11
      docs/api/objects/SkinnedMesh.html
  3. 17 21
      docs/scenes/bones-browser.html

+ 2 - 1
docs/api/core/Geometry.html

@@ -113,11 +113,12 @@
 		Array of [page:Vector4 Vector4s] representing the indices of individual bones in the [page:Skeleton.bones] array,
 		The indices match the number and order of vertices in the geometry.
 		<code>
+		// e.g.
 		geometry.skinIndices[15] = new THREE.Vector4(   0,   5,   9, 0 );
 		geometry.skinWeights[15] = new THREE.Vector4( 0.2, 0.5, 0.3, 0 );
 		
 		// corresponds with the following vertex
-		geometry.vertices[15]
+		geometry.vertices[15];
 		
 		// these bones will be used like so:
 		skeleton.bones[0]; // weight of 0.2

+ 42 - 11
docs/api/objects/SkinnedMesh.html

@@ -34,19 +34,20 @@
 		}
 		
 		var mesh = THREE.SkinnedMesh( geometry, material );
-		
+
 		// See example from THREE.Skeleton for the armSkeleton
+		var rootBone = armSkeleton.bones[0];
+		mesh.add( rootBone );
+		
+		// Bind the skeleton to the mesh
 		mesh.bind( armSkeleton );
 		
-		// Add the root bone, then recalculate the skeleton inverses
-		mesh.add( armSkeleton.bones[0] );
-		mesh.updateMatrixWorld( true ); // ensure the bones matrices are already recomputed
+		// Update the inverse matrices in the skeleton to reflect the newly bound skeleton
 		skeleton.calculateInverses();
 		
 		// Move the bones and manipulate the model
 		armSkeleton.bones[0].rotation.x = -0.1;
 		armSkeleton.bones[1].rotation.x = 0.2;
-		
 		</code>
 		
 
@@ -55,8 +56,8 @@
 
 		<h3>[name]([page:Geometry geometry], [page:Material material], [page:boolean useVertexTexture])</h3>
 		<div>
-        geometry —- An instance of [page:Geometry]. [page:Geometry.skinIndices] and [page:Geometry.skinWeights] should be set.<br />
-        material —- An instance of [page:Material] (optional).<br />
+        geometry — An instance of [page:Geometry]. [page:Geometry.skinIndices] and [page:Geometry.skinWeights] should be set.<br />
+        material — An instance of [page:Material] (optional).<br />
 		useVertexTexture -- Defines whether a vertex texture can be used (optional).
 		</div>
 
@@ -64,7 +65,6 @@
 		<h2>Properties</h2>
 
 
-
 		<h3>[property:array bones]</h3>
 		<div>
 		This contains the array of bones for this mesh. These should be set in the constructor.
@@ -85,19 +85,50 @@
 		This array of matrices contains the matrices of the bones. These get calculated in the constructor.
 		</div>
 
+		<h3>[property:string bindMode]</h3>
+		<div>
+		Either "attached" or "detached". "attached" uses the [page:SkinnedMesh.matrixWorld] property for the base transform
+		matrix of the bones. "detached" uses the [page:SkinnedMesh.bindMatrix].
+		</div>
+		
+		<h3>[property:Matrix4 bindMatrix]</h3>
+		<div>
+		The base matrix that is used for the bound bone transforms.
+		</div>
+
+		<h3>[property:Matrix4 inverseBindMatrix]</h3>
+		<div>
+		The inverse of the bindMatrix.
+		</div>
+
 		<h2>Methods</h2>
 
+		<h3>[method:null bind]([page:Skeleton skeleton], [page:Matrix4 bindMatrix])</h3>
+		<div>
+		skeleton — [page:Skeleton]<br/>
+		bindMatrix — [page:Matrix4] that represents the base transform of the skeleton
+		</div>
+		<div>
+		Bind a skeleton to the skinned mesh. The bindMatrix gets saved to .bindMatrix property and the .bindMatrixInverse
+		gets calculated.
+		</div>
+		
+		<h3>[method:null normalizeSkinWeights]()</h3>
+		<div>
+		Normalizes the [page:Geometry.skinWeights] vectors. Does not affect [page:BufferGeometry].
+		</div>
+
 		<h3>[method:null pose]()</h3>
 		<div>
-		This method sets the skinnedmesh in the rest pose.
+		This method sets the skinned mesh in the rest pose.
 		</div>
 
 		<h3>[method:Bone addBone]([page:Bone bone])</h3>
 		<div>
-		bone -- This is the bone that needs to be added. (optional)
+		bone  This is the bone that needs to be added. (optional)
 		</div>
 		<div>
-		This method adds the bone to the skinnedmesh when it is provided. It creates a new bone and adds that when no bone is given.
+		This method adds the bone to the skinned mesh when it is provided. It creates a new bone and adds that when no bone is given.
 		</div>
 
 		<h2>Source</h2>

+ 17 - 21
docs/scenes/bones-browser.html

@@ -148,17 +148,12 @@
 					shading: THREE.FlatShading
 				});
 				
-				var mesh = new THREE.SkinnedMesh(
-					geometry,
-					material
-				);
-				
+				var mesh = new THREE.SkinnedMesh( geometry,	material );
 				var skeleton = new THREE.Skeleton( bones );
 				
-				mesh.bind( skeleton );
-
 				mesh.add( bones[0] );
-				mesh.updateMatrixWorld( true );
+				
+				mesh.bind( skeleton );
 				skeleton.calculateInverses();
 	
 				skeletonHelper = new THREE.SkeletonHelper( mesh );
@@ -166,6 +161,7 @@
 				scene.add( skeletonHelper );
 	
 				return mesh;
+				
 			};
 			
 			function setupDatGui () {
@@ -173,7 +169,7 @@
 				var folder = gui.addFolder( "General Options" );
 				
 				folder.add( state, "animateBones" );
-				folder.__controllers[0].name("Animate Bones")
+				folder.__controllers[0].name("Animate Bones");
 
 				folder.add( mesh, "pose" );
 				folder.__controllers[1].name(".pose()");
@@ -182,7 +178,7 @@
 				
 				for( var i=0; i < bones.length; i++ ) {
 					
-					var bone = bones[i]
+					var bone = bones[i];
 					
 					folder = gui.addFolder( "Bone " + i );
 				
@@ -198,17 +194,17 @@
 					folder.add( bone.scale, 'y', 0, 2 );
 					folder.add( bone.scale, 'z', 0, 2 );
 
-					folder.__controllers[0].name("position.x")
-					folder.__controllers[1].name("position.y")
-					folder.__controllers[2].name("position.z")
+					folder.__controllers[0].name("position.x");
+					folder.__controllers[1].name("position.y");
+					folder.__controllers[2].name("position.z");
 					
-					folder.__controllers[3].name("rotation.x")
-					folder.__controllers[4].name("rotation.y")
-					folder.__controllers[5].name("rotation.z")
+					folder.__controllers[3].name("rotation.x");
+					folder.__controllers[4].name("rotation.y");
+					folder.__controllers[5].name("rotation.z");
 					
-					folder.__controllers[6].name("scale.x")
-					folder.__controllers[7].name("scale.y")
-					folder.__controllers[8].name("scale.z")
+					folder.__controllers[6].name("scale.x");
+					folder.__controllers[7].name("scale.y");
+					folder.__controllers[8].name("scale.z");
 					
 				}
 							
@@ -218,8 +214,8 @@
 				
 				var segmentHeight = 8;
 				var segmentCount = 4;
-				var height = segmentHeight * segmentCount
-				var halfHeight = height * 0.5
+				var height = segmentHeight * segmentCount;
+				var halfHeight = height * 0.5;
 	
 				var sizing = {
 					segmentHeight : segmentHeight,