Skip to content

Commit b12cd2d

Browse files
abernierabernier
committed
doc: CCDIKSolver with generic SkinnedMesh (mrdoob#23449)
* doc: CCDIKSolver with generic SkinnedMesh * whitespaces fix * tabs indentation * tweaks * Update CCDIKSolver.html * typo * lint fixes * zh version * oops
1 parent e6a9753 commit b12cd2d

File tree

3 files changed

+438
-26
lines changed

3 files changed

+438
-26
lines changed

‎docs/examples/en/animations/CCDIKSolver.html‎

Lines changed: 75 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,94 @@ <h1>[name]</h1>
1111

1212
<p class="desc"> A solver for IK with <a href="https://sites.google.com/site/auraliusproject/ccd-algorithm"><em>CCD Algorithm</em></a>. <br /><br />
1313
[name] solves Inverse Kinematics Problem with CCD Algorithm.
14-
[name] is designed to work with [page:SkinnedMesh] loaded by [page:MMDLoader] but also can be used for generic [page:SkinnedMesh].
14+
[name] is designed to work with [page:SkinnedMesh] but also can be used with [page:MMDLoader] or [page:GLTFLoader] skeleton.
1515
</p>
1616

17+
<iframe id="scene" src="scenes/ccdiksolver-browser.html"></iframe>
18+
1719
<h2>Code Example</h2>
1820

1921
<code>
2022
let ikSolver;
2123

22-
// Load MMD resources and instantiate CCDIKSolver
23-
new MMDLoader().load(
24-
'models/mmd/miku.pmd',
25-
function ( mesh ) {
24+
//
25+
// Bones hierarchy:
26+
//
27+
// root
28+
// ├── bone0
29+
// │ └── bone1
30+
// │ └── bone2
31+
// │ └── bone3
32+
// └── target
33+
//
34+
// Positioned as follow on the cylinder:
35+
//
36+
// o <- target (y = 20)
37+
//
38+
// +----o----+ <- bone3 (y = 12)
39+
// | |
40+
// | o | <- bone2 (y = 4)
41+
// | |
42+
// | o | <- bone1 (y = -4)
43+
// | |
44+
// +----oo---+ <- root, bone0 (y = -12)
45+
//
46+
47+
let bones = []
48+
49+
// "root"
50+
let rootBone = new Bone();
51+
rootBone.position.y = -12;
52+
bones.push( rootBone );
53+
54+
// "bone0"
55+
let prevBone = new Bone();
56+
prevBone.position.y = 0;
57+
rootBone.add( prevBone );
58+
bones.push( prevBone );
59+
60+
// "bone1", "bone2", "bone3"
61+
for ( let i = 1; i <= 3; i ++ ) {
62+
const bone = new Bone();
63+
bone.position.y = 8;
64+
bones.push( bone );
65+
66+
prevBone.add( bone );
67+
prevBone = bone;
68+
}
69+
70+
// "target"
71+
const targetBone = new Bone();
72+
targetBone.position.y = 24 + 8
73+
rootBone.add( targetBone );
74+
bones.push( targetBone );
75+
76+
//
77+
// skinned mesh
78+
//
2679

27-
ikSolver = new CCDIKSolver( mesh, mesh.geometry.iks );
28-
scene.add( mesh );
80+
const mesh = new SkinnedMesh( geometry, material );
81+
const skeleton = new Skeleton( bones );
2982

83+
mesh.add( bones[ 0 ] ); // "root" bone
84+
mesh.bind( skeleton );
85+
86+
//
87+
// ikSolver
88+
//
89+
90+
const iks = [
91+
{
92+
target: 5, // "target"
93+
effector: 4, // "bone3"
94+
links: [ { index: 3 }, { index: 2 }, { index: 1 } ] // "bone2", "bone1", "bone0"
3095
}
31-
);
96+
];
97+
ikSolver = new CCDIKSolver( mesh, iks );
3298

3399
function render() {
34-
35-
animate(); // update bones
36-
if ( ikSolver !== undefined ) ikSolver.update();
100+
ikSolver?.update();
37101
renderer.render( scene, camera );
38-
39102
}
40103
</code>
41104

‎docs/examples/zh/animations/CCDIKSolver.html‎

Lines changed: 77 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,94 @@ <h1>[name]</h1>
1111

1212
<p class="desc"> A solver for IK with <a href="https://sites.google.com/site/auraliusproject/ccd-algorithm"><em>CCD Algorithm</em></a>. <br /><br />
1313
[name] solves Inverse Kinematics Problem with CCD Algorithm.
14-
[name] is designed to work with [page:SkinnedMesh] loaded by [page:MMDLoader] but also can be used for generic [page:SkinnedMesh].
14+
[name] is designed to work with [page:SkinnedMesh] but also can be used with [page:MMDLoader] or [page:GLTFLoader] skeleton.
1515
</p>
1616

17+
<iframe id="scene" src="scenes/ccdiksolver-browser.html"></iframe>
18+
1719
<h2>代码示例</h2>
1820

1921
<code>
20-
const ikSolver;
22+
let ikSolver;
23+
24+
//
25+
// Bones hierarchy:
26+
//
27+
// root
28+
// ├── bone0
29+
// │ └── bone1
30+
// │ └── bone2
31+
// │ └── bone3
32+
// └── target
33+
//
34+
// Positioned as follow on the cylinder:
35+
//
36+
// o <- target (y = 20)
37+
//
38+
// +----o----+ <- bone3 (y = 12)
39+
// | |
40+
// | o | <- bone2 (y = 4)
41+
// | |
42+
// | o | <- bone1 (y = -4)
43+
// | |
44+
// +----oo---+ <- root, bone0 (y = -12)
45+
//
46+
47+
let bones = []
48+
49+
// "root"
50+
let rootBone = new Bone();
51+
rootBone.position.y = -12;
52+
bones.push( rootBone );
53+
54+
// "bone0"
55+
let prevBone = new Bone();
56+
prevBone.position.y = 0;
57+
rootBone.add( prevBone );
58+
bones.push( prevBone );
59+
60+
// "bone1", "bone2", "bone3"
61+
for ( let i = 1; i <= 3; i ++ ) {
62+
const bone = new Bone();
63+
bone.position.y = 8;
64+
bones.push( bone );
65+
66+
prevBone.add( bone );
67+
prevBone = bone;
68+
}
69+
70+
// "target"
71+
const targetBone = new Bone();
72+
targetBone.position.y = 24 + 8
73+
rootBone.add( targetBone );
74+
bones.push( targetBone );
75+
76+
//
77+
// skinned mesh
78+
//
2179

22-
// Load MMD resources and instantiate CCDIKSolver
23-
new MMDLoader().load(
24-
'models/mmd/miku.pmd',
25-
function ( mesh ) {
80+
const mesh = new SkinnedMesh( geometry, material );
81+
const skeleton = new Skeleton( bones );
2682

27-
ikSolver = new CCDIKSolver( mesh, mesh.geometry.iks );
28-
scene.add( mesh );
83+
mesh.add( bones[ 0 ] ); // "root" bone
84+
mesh.bind( skeleton );
2985

86+
//
87+
// ikSolver
88+
//
89+
90+
const iks = [
91+
{
92+
target: 5, // "target"
93+
effector: 4, // "bone3"
94+
links: [ { index: 3 }, { index: 2 }, { index: 1 } ] // "bone2", "bone1", "bone0"
3095
}
31-
);
96+
];
97+
ikSolver = new CCDIKSolver( mesh, iks );
3298

3399
function render() {
34-
35-
animate(); // update bones
36-
if ( ikSolver !== undefined ) ikSolver.update();
100+
ikSolver?.update();
37101
renderer.render( scene, camera );
38-
39102
}
40103
</code>
41104

@@ -92,7 +155,7 @@ <h3>[method:CCDIKHelper createHelper]()</h3>
92155

93156
<h3>[method:this update]()</h3>
94157
<p>
95-
Update bones quaternion by solving CCD algorithm.
158+
Update IK bones quaternion by solving CCD algorithm.
96159
</p>
97160

98161
<h3>[method:this updateOne]( [param:Object ikParam] )</h3>

0 commit comments

Comments
 (0)