1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
<!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] → [page:Mesh] →
<h1>[name]</h1>
<p 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.
The material must support skinning and have skinning enabled - see [page:MeshStandardMaterial.skinning].
</p>
<iframe id="scene" src="scenes/bones-browser.html"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script>
<h2>Example</h2>
<code>
var geometry = new THREE.CylinderBufferGeometry( 5, 5, 5, 5, 15, 5, 30 );
// create the skin indices and skin weights
var position = geometry.attributes.position;
var vertex = new THREE.Vector3();
var skinIndices = [];
var skinWeights = [];
for ( var i = 0; i < position.count; i ++ ) {
vertex.fromBufferAttribute( position, i );
// compute skinIndex and skinWeight based on some configuration data
var y = ( vertex.y + sizing.halfHeight );
var skinIndex = Math.floor( y / sizing.segmentHeight );
var skinWeight = ( y % sizing.segmentHeight ) / sizing.segmentHeight;
skinIndices.push( skinIndex, skinIndex + 1, 0, 0 );
skinWeights.push( 1 - skinWeight, skinWeight, 0, 0 );
}
geometry.setAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
geometry.setAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
// create skinned mesh and skeleton
var mesh = new THREE.SkinnedMesh( geometry, material );
var skeleton = new THREE.Skeleton( bones );
// see example from THREE.Skeleton
var rootBone = skeleton.bones[ 0 ];
mesh.add( rootBone );
// bind the skeleton to the mesh
mesh.bind( skeleton );
// move the bones and manipulate the model
skeleton.bones[ 0 ].rotation.x = -0.1;
skeleton.bones[ 1 ].rotation.x = 0.2;
</code>
<h2>Constructor</h2>
<h3>[name]( [param:BufferGeometry geometry], [param:Material material] )</h3>
<p>
[page:Geometry geometry] - an instance of [page:BufferGeometry].<br />
[page:Material material] - (optional) an instance of [page:Material]. Default is a new [page:MeshBasicMaterial].
</p>
<h2>Properties</h2>
<p>See the base [page:Mesh] class for common properties.</p>
<h3>[property:string bindMode]</h3>
<p>
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]. Default is "attached".
</p>
<h3>[property:Matrix4 bindMatrix]</h3>
<p>
The base matrix that is used for the bound bone transforms.
</p>
<h3>[property:Matrix4 bindMatrixInverse]</h3>
<p>
The base matrix that is used for resetting the bound bone transforms.
</p>
<h3>[property:Boolean isSkinnedMesh]</h3>
<p>
Used to check whether this or derived classes are skinned meshes. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</p>
<h3>[property:Skeleton skeleton]</h3>
<p>
[page:Skeleton] representing the bone hierarchy of the skinned mesh.
</p>
<h2>Methods</h2>
<p>See the base [page:Mesh] class for common methods.</p>
<h3>[method:null bind]( [param:Skeleton skeleton], [param:Matrix4 bindMatrix] )</h3>
<p>
[page:Skeleton skeleton] - [page:Skeleton] created from a [page:Bone Bones] tree.<br/>
[page:Matrix4 bindMatrix] - [page:Matrix4] that represents the base transform of the skeleton.<br /><br />
Bind a skeleton to the skinned mesh. The bindMatrix gets saved to .bindMatrix property
and the .bindMatrixInverse gets calculated.
</p>
<h3>[method:SkinnedMesh clone]()</h3>
<p>
Returns a clone of this SkinnedMesh object and any descendants.
</p>
<h3>[method:null normalizeSkinWeights]()</h3>
<p>
Normalizes the skin weights.
</p>
<h3>[method:null pose]()</h3>
<p>
This method sets the skinned mesh in the rest pose (resets the pose).
</p>
<h3>[method:null updateMatrixWorld]( [param:Boolean force] )</h3>
<p>
Updates the [page:Matrix4 MatrixWorld].
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>
|
