Skip to content

Commit ef729e0

Browse files
gregtatumgregtatum
committed
Finalized SkinnedMesh docs
1 parent 949f971 commit ef729e0

File tree

3 files changed

+61
-33
lines changed

3 files changed

+61
-33
lines changed

‎docs/api/core/Geometry.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,12 @@ <h3>[property:Array skinIndices]</h3>
113113
Array of [page:Vector4 Vector4s] representing the indices of individual bones in the [page:Skeleton.bones] array,
114114
The indices match the number and order of vertices in the geometry.
115115
<code>
116+
// e.g.
116117
geometry.skinIndices[15] = new THREE.Vector4( 0, 5, 9, 0 );
117118
geometry.skinWeights[15] = new THREE.Vector4( 0.2, 0.5, 0.3, 0 );
118119

119120
// corresponds with the following vertex
120-
geometry.vertices[15]
121+
geometry.vertices[15];
121122

122123
// these bones will be used like so:
123124
skeleton.bones[0]; // weight of 0.2

‎docs/api/objects/SkinnedMesh.html‎

Lines changed: 42 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,20 @@ <h2>Example</h2>
3434
}
3535

3636
var mesh = THREE.SkinnedMesh( geometry, material );
37-
37+
3838
// See example from THREE.Skeleton for the armSkeleton
39+
var rootBone = armSkeleton.bones[0];
40+
mesh.add( rootBone );
41+
42+
// Bind the skeleton to the mesh
3943
mesh.bind( armSkeleton );
4044

41-
// Add the root bone, then recalculate the skeleton inverses
42-
mesh.add( armSkeleton.bones[0] );
43-
mesh.updateMatrixWorld( true ); // ensure the bones matrices are already recomputed
45+
// Update the inverse matrices in the skeleton to reflect the newly bound skeleton
4446
skeleton.calculateInverses();
4547

4648
// Move the bones and manipulate the model
4749
armSkeleton.bones[0].rotation.x = -0.1;
4850
armSkeleton.bones[1].rotation.x = 0.2;
49-
5051
</code>
5152

5253

@@ -55,16 +56,15 @@ <h2>Constructor</h2>
5556

5657
<h3>[name]([page:Geometry geometry], [page:Material material], [page:boolean useVertexTexture])</h3>
5758
<div>
58-
geometry —- An instance of [page:Geometry]. [page:Geometry.skinIndices] and [page:Geometry.skinWeights] should be set.<br />
59-
material —- An instance of [page:Material] (optional).<br />
59+
geometry — An instance of [page:Geometry]. [page:Geometry.skinIndices] and [page:Geometry.skinWeights] should be set.<br />
60+
material — An instance of [page:Material] (optional).<br />
6061
useVertexTexture -- Defines whether a vertex texture can be used (optional).
6162
</div>
6263

6364

6465
<h2>Properties</h2>
6566

6667

67-
6868
<h3>[property:array bones]</h3>
6969
<div>
7070
This contains the array of bones for this mesh. These should be set in the constructor.
@@ -85,19 +85,50 @@ <h3>[property:array boneMatrices]</h3>
8585
This array of matrices contains the matrices of the bones. These get calculated in the constructor.
8686
</div>
8787

88+
<h3>[property:string bindMode]</h3>
89+
<div>
90+
Either "attached" or "detached". "attached" uses the [page:SkinnedMesh.matrixWorld] property for the base transform
91+
matrix of the bones. "detached" uses the [page:SkinnedMesh.bindMatrix].
92+
</div>
93+
94+
<h3>[property:Matrix4 bindMatrix]</h3>
95+
<div>
96+
The base matrix that is used for the bound bone transforms.
97+
</div>
98+
99+
<h3>[property:Matrix4 inverseBindMatrix]</h3>
100+
<div>
101+
The inverse of the bindMatrix.
102+
</div>
103+
88104
<h2>Methods</h2>
89105

106+
<h3>[method:null bind]([page:Skeleton skeleton], [page:Matrix4 bindMatrix])</h3>
107+
<div>
108+
skeleton — [page:Skeleton]<br/>
109+
bindMatrix — [page:Matrix4] that represents the base transform of the skeleton
110+
</div>
111+
<div>
112+
Bind a skeleton to the skinned mesh. The bindMatrix gets saved to .bindMatrix property and the .bindMatrixInverse
113+
gets calculated.
114+
</div>
115+
116+
<h3>[method:null normalizeSkinWeights]()</h3>
117+
<div>
118+
Normalizes the [page:Geometry.skinWeights] vectors. Does not affect [page:BufferGeometry].
119+
</div>
120+
90121
<h3>[method:null pose]()</h3>
91122
<div>
92-
This method sets the skinnedmesh in the rest pose.
123+
This method sets the skinned mesh in the rest pose.
93124
</div>
94125

95126
<h3>[method:Bone addBone]([page:Bone bone])</h3>
96127
<div>
97-
bone -- This is the bone that needs to be added. (optional)
128+
bone — This is the bone that needs to be added. (optional)
98129
</div>
99130
<div>
100-
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.
131+
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.
101132
</div>
102133

103134
<h2>Source</h2>

‎docs/scenes/bones-browser.html‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -148,32 +148,28 @@
148148
shading: THREE.FlatShading
149149
});
150150

151-
var mesh = new THREE.SkinnedMesh(
152-
geometry,
153-
material
154-
);
155-
151+
var mesh = new THREE.SkinnedMesh( geometry, material );
156152
var skeleton = new THREE.Skeleton( bones );
157153

158-
mesh.bind( skeleton );
159-
160154
mesh.add( bones[0] );
161-
mesh.updateMatrixWorld( true );
155+
156+
mesh.bind( skeleton );
162157
skeleton.calculateInverses();
163158

164159
skeletonHelper = new THREE.SkeletonHelper( mesh );
165160
skeletonHelper.material.linewidth = 2;
166161
scene.add( skeletonHelper );
167162

168163
return mesh;
164+
169165
};
170166

171167
function setupDatGui () {
172168

173169
var folder = gui.addFolder( "General Options" );
174170

175171
folder.add( state, "animateBones" );
176-
folder.__controllers[0].name("Animate Bones")
172+
folder.__controllers[0].name("Animate Bones");
177173

178174
folder.add( mesh, "pose" );
179175
folder.__controllers[1].name(".pose()");
@@ -182,7 +178,7 @@
182178

183179
for( var i=0; i < bones.length; i++ ) {
184180

185-
var bone = bones[i]
181+
var bone = bones[i];
186182

187183
folder = gui.addFolder( "Bone " + i );
188184

@@ -198,17 +194,17 @@
198194
folder.add( bone.scale, 'y', 0, 2 );
199195
folder.add( bone.scale, 'z', 0, 2 );
200196

201-
folder.__controllers[0].name("position.x")
202-
folder.__controllers[1].name("position.y")
203-
folder.__controllers[2].name("position.z")
197+
folder.__controllers[0].name("position.x");
198+
folder.__controllers[1].name("position.y");
199+
folder.__controllers[2].name("position.z");
204200

205-
folder.__controllers[3].name("rotation.x")
206-
folder.__controllers[4].name("rotation.y")
207-
folder.__controllers[5].name("rotation.z")
201+
folder.__controllers[3].name("rotation.x");
202+
folder.__controllers[4].name("rotation.y");
203+
folder.__controllers[5].name("rotation.z");
208204

209-
folder.__controllers[6].name("scale.x")
210-
folder.__controllers[7].name("scale.y")
211-
folder.__controllers[8].name("scale.z")
205+
folder.__controllers[6].name("scale.x");
206+
folder.__controllers[7].name("scale.y");
207+
folder.__controllers[8].name("scale.z");
212208

213209
}
214210

@@ -218,8 +214,8 @@
218214

219215
var segmentHeight = 8;
220216
var segmentCount = 4;
221-
var height = segmentHeight * segmentCount
222-
var halfHeight = height * 0.5
217+
var height = segmentHeight * segmentCount;
218+
var halfHeight = height * 0.5;
223219

224220
var sizing = {
225221
segmentHeight : segmentHeight,

0 commit comments

Comments
 (0)