forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSkinnedMesh.html
More file actions
154 lines (116 loc) · 4.55 KB
/
SkinnedMesh.html
File metadata and controls
154 lines (116 loc) · 4.55 KB
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
<!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>
<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.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:SkinnedMesh clone]()</h3>
<div>
Returns a clone of this SkinnedMesh object and its descendants.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>