Selaa lähdekoodia

Finalized SkinnedMesh docs

Greg Tatum 10 vuotta sitten
vanhempi
commit
ef729e0eb8
3 muutettua tiedostoa jossa 61 lisäystä ja 33 poistoa
  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,
 		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.
 		The indices match the number and order of vertices in the geometry.
 		<code>
 		<code>
+		// e.g.
 		geometry.skinIndices[15] = new THREE.Vector4(   0,   5,   9, 0 );
 		geometry.skinIndices[15] = new THREE.Vector4(   0,   5,   9, 0 );
 		geometry.skinWeights[15] = new THREE.Vector4( 0.2, 0.5, 0.3, 0 );
 		geometry.skinWeights[15] = new THREE.Vector4( 0.2, 0.5, 0.3, 0 );
 		
 		
 		// corresponds with the following vertex
 		// corresponds with the following vertex
-		geometry.vertices[15]
+		geometry.vertices[15];
 		
 		
 		// these bones will be used like so:
 		// these bones will be used like so:
 		skeleton.bones[0]; // weight of 0.2
 		skeleton.bones[0]; // weight of 0.2

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

@@ -34,19 +34,20 @@
 		}
 		}
 		
 		
 		var mesh = THREE.SkinnedMesh( geometry, material );
 		var mesh = THREE.SkinnedMesh( geometry, material );
-		
+
 		// See example from THREE.Skeleton for the armSkeleton
 		// 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 );
 		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();
 		skeleton.calculateInverses();
 		
 		
 		// Move the bones and manipulate the model
 		// Move the bones and manipulate the model
 		armSkeleton.bones[0].rotation.x = -0.1;
 		armSkeleton.bones[0].rotation.x = -0.1;
 		armSkeleton.bones[1].rotation.x = 0.2;
 		armSkeleton.bones[1].rotation.x = 0.2;
-		
 		</code>
 		</code>
 		
 		
 
 
@@ -55,8 +56,8 @@
 
 
 		<h3>[name]([page:Geometry geometry], [page:Material material], [page:boolean useVertexTexture])</h3>
 		<h3>[name]([page:Geometry geometry], [page:Material material], [page:boolean useVertexTexture])</h3>
 		<div>
 		<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).
 		useVertexTexture -- Defines whether a vertex texture can be used (optional).
 		</div>
 		</div>
 
 
@@ -64,7 +65,6 @@
 		<h2>Properties</h2>
 		<h2>Properties</h2>
 
 
 
 
-
 		<h3>[property:array bones]</h3>
 		<h3>[property:array bones]</h3>
 		<div>
 		<div>
 		This contains the array of bones for this mesh. These should be set in the constructor.
 		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.
 		This array of matrices contains the matrices of the bones. These get calculated in the constructor.
 		</div>
 		</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>
 		<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>
 		<h3>[method:null pose]()</h3>
 		<div>
 		<div>
-		This method sets the skinnedmesh in the rest pose.
+		This method sets the skinned mesh in the rest pose.
 		</div>
 		</div>
 
 
 		<h3>[method:Bone addBone]([page:Bone bone])</h3>
 		<h3>[method:Bone addBone]([page:Bone bone])</h3>
 		<div>
 		<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>
 		<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>
 		</div>
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>

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

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