forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
144 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,144 +1,145 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <base href="../../" /> | ||
| <script src="list.js"></script> | ||
| <script src="page.js"></script> | ||
| <link type="text/css" rel="stylesheet" href="page.css" /> | ||
| </head> | ||
| <body> | ||
| [page:Object3D] → | ||
|
|
||
| <h1>[name]</h1> | ||
|
|
||
| <div class="desc">A mesh that has a [page:Skeleton] with [page:Bone bones] that can then be used to animate the vertices of the geometry.</div> | ||
|
|
||
| <h2>Example</h2> | ||
|
|
||
| <iframe src='scenes/bones-browser.html'></iframe> | ||
|
|
||
| <code> | ||
| var geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 ); | ||
|
|
||
| //Create the skin indices and skin weights | ||
| for ( var i = 0; i < geometry.vertices.length; i ++ ) { | ||
|
|
||
| // Imaginary functions to calculate the indices and weights | ||
| var skinIndex = calculateSkinIndex( geometry.vertices, i ); | ||
| var skinWeight = calculateSkinWeight( geometry.vertices, i ); | ||
|
|
||
| // Ease between each bone | ||
| geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) ); | ||
| geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) ); | ||
|
|
||
| } | ||
|
|
||
| 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 ); | ||
|
|
||
| // Move the bones and manipulate the model | ||
| armSkeleton.bones[ 0 ].rotation.x = -0.1; | ||
| armSkeleton.bones[ 1 ].rotation.x = 0.2; | ||
| </code> | ||
|
|
||
|
|
||
| <h2>Constructor</h2> | ||
|
|
||
|
|
||
| <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 /> | ||
| useVertexTexture -- Defines whether a vertex texture can be used (optional). | ||
| </div> | ||
|
|
||
|
|
||
| <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. | ||
| </div> | ||
|
|
||
| <h3>[property:Matrix4 identityMatrix]</h3> | ||
| <div> | ||
| This is an identityMatrix to calculate the bones matrices from. | ||
| </div> | ||
|
|
||
| <h3>[property:boolean useVertexTexture]</h3> | ||
| <div> | ||
| The boolean defines whether a vertex texture is used to calculate the bones. This boolean shouldn't be changed after constructor. | ||
| </div> | ||
|
|
||
| <h3>[property:array boneMatrices]</h3> | ||
| <div> | ||
| 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 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) | ||
| </div> | ||
| <div> | ||
| 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> | ||
|
|
||
| <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 SkinnedMesh Object. | ||
| </div> | ||
| <div> | ||
| Clone a SkinnedMesh Object. | ||
| </div> | ||
|
|
||
| <h2>Source</h2> | ||
|
|
||
| [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] | ||
| </body> | ||
| </html> | ||
| <base href="../../" /> | ||
| <script src="list.js"></script> | ||
| <script src="page.js"></script> | ||
| <link type="text/css" rel="stylesheet" href="page.css" /> | ||
| </head> | ||
| <body> | ||
| [page:Object3D] → | ||
|
|
||
| <h1>[name]</h1> | ||
|
|
||
| <div class="desc">A mesh that has a [page:Skeleton] with [page:Bone bones] that can then be used to animate the vertices of the geometry.</div> | ||
|
|
||
| <h2>Example</h2> | ||
|
|
||
| <iframe src='scenes/bones-browser.html'></iframe> | ||
|
|
||
| <code> | ||
| var geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 ); | ||
|
|
||
| //Create the skin indices and skin weights | ||
| for ( var i = 0; i < geometry.vertices.length; i ++ ) { | ||
|
|
||
| // Imaginary functions to calculate the indices and weights | ||
| // This part will need to be changed depending your skeleton and model | ||
| var skinIndex = calculateSkinIndex( geometry.vertices, i ); | ||
| var skinWeight = calculateSkinWeight( geometry.vertices, i ); | ||
|
|
||
| // Ease between each bone | ||
| geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) ); | ||
| geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) ); | ||
|
|
||
| } | ||
|
|
||
| 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 ); | ||
|
|
||
| // Move the bones and manipulate the model | ||
| armSkeleton.bones[ 0 ].rotation.x = -0.1; | ||
| armSkeleton.bones[ 1 ].rotation.x = 0.2; | ||
| </code> | ||
|
|
||
|
|
||
| <h2>Constructor</h2> | ||
|
|
||
|
|
||
| <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 /> | ||
| useVertexTexture -- Defines whether a vertex texture can be used (optional). | ||
| </div> | ||
|
|
||
|
|
||
| <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. | ||
| </div> | ||
|
|
||
| <h3>[property:Matrix4 identityMatrix]</h3> | ||
| <div> | ||
| This is an identityMatrix to calculate the bones matrices from. | ||
| </div> | ||
|
|
||
| <h3>[property:boolean useVertexTexture]</h3> | ||
| <div> | ||
| The boolean defines whether a vertex texture is used to calculate the bones. This boolean shouldn't be changed after constructor. | ||
| </div> | ||
|
|
||
| <h3>[property:array boneMatrices]</h3> | ||
| <div> | ||
| 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 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) | ||
| </div> | ||
| <div> | ||
| 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> | ||
|
|
||
| <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 SkinnedMesh Object. | ||
| </div> | ||
| <div> | ||
| Clone a SkinnedMesh Object. | ||
| </div> | ||
|
|
||
| <h2>Source</h2> | ||
|
|
||
| [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] | ||
| </body> | ||
| </html> |