From 4cadec53368205217c1b276a6cb8aa6b4bde44b2 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Wed, 9 Feb 2022 19:50:54 +0100 Subject: [PATCH 1/9] doc: CCDIKSolver with generic SkinnedMesh --- docs/examples/en/animations/CCDIKSolver.html | 87 +++++- docs/scenes/ccdiksolver-browser.html | 296 +++++++++++++++++++ 2 files changed, 371 insertions(+), 12 deletions(-) create mode 100644 docs/scenes/ccdiksolver-browser.html diff --git a/docs/examples/en/animations/CCDIKSolver.html b/docs/examples/en/animations/CCDIKSolver.html index 8c8cb02bec31ea..8c88df57c49e53 100644 --- a/docs/examples/en/animations/CCDIKSolver.html +++ b/docs/examples/en/animations/CCDIKSolver.html @@ -11,31 +11,94 @@

[name]

A solver for IK with CCD Algorithm.

[name] solves Inverse Kinematics Problem with CCD Algorithm. - [name] is designed to work with [page:SkinnedMesh] loaded by [page:MMDLoader] but also can be used for generic [page:SkinnedMesh]. + [name] is designed to work with [page:SkinnedMesh] but also can be used with [page:MMDLoader] or [page:GLTFLoader] skeleton.

+ +

Code Example

let ikSolver; - // Load MMD resources and instantiate CCDIKSolver - new MMDLoader().load( - 'models/mmd/miku.pmd', - function ( mesh ) { + // + // Bones hierarchy: + // + // root + // ├── bone0 + // │ └── bone1 + // │ └── bone2 + // │ └── bone3 + // └── target + // + // Positionned as follow on the cylinder: + // + // o <- target (y = 20) + // + // +----o----+ <- bone3 (y = 12) + // | | + // | o | <- bone2 (y = 4) + // | | + // | o | <- bone1 (y = -4) + // | | + // +----oo---+ <- root, bone0 (y = -12) + // + + let bones = [] + + // "root" + let rootBone = new Bone(); + rootBone.position.y = -12; + bones.push( rootBone ); + + // "bone0" + let prevBone = new Bone(); + prevBone.position.y = 0; + rootBone.add( prevBone ); + bones.push( prevBone ); + + // "bone1", "bone2", "bone3" + for ( let i = 1; i <= 3; i ++ ) { + const bone = new Bone(); + bone.position.y = 8; + bones.push( bone ); + + prevBone.add( bone ); + prevBone = bone; + } + + // "target" + const targetBone = new Bone(); + targetBone.position.y = 24 + 5 + rootBone.add( targetBone ); + bones.push( targetBone ); + + // + // skinned mesh + // - ikSolver = new CCDIKSolver( mesh, mesh.geometry.iks ); - scene.add( mesh ); + const mesh = new SkinnedMesh( geometry, material ); + const skeleton = new Skeleton( bones ); + mesh.add( bones[ 0 ] ); // "root" bone + mesh.bind( skeleton ); + + // + // ikSolver + // + + const iks = [ + { + target: 5, // "target" + effector: 4, // "bone3" + links: [{ index: 3 }, { index: 2 }, { index: 1 }] // "bone2", "bone1", "bone0" } - ); + ]; + ikSolver = new CCDIKSolver(mesh, iks); function render() { - - animate(); // update bones - if ( ikSolver !== undefined ) ikSolver.update(); + ikSolver?.update(); renderer.render( scene, camera ); - } diff --git a/docs/scenes/ccdiksolver-browser.html b/docs/scenes/ccdiksolver-browser.html new file mode 100644 index 00000000000000..a8ef3b520c144a --- /dev/null +++ b/docs/scenes/ccdiksolver-browser.html @@ -0,0 +1,296 @@ + + + + + Three.js CCDIKSolver Browser + + + + + + + + + + + + + Open in New Window + + + + From 99e08704193d88ab58f25fb56116bf218b754145 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Wed, 9 Feb 2022 20:00:57 +0100 Subject: [PATCH 2/9] whitespaces fix --- docs/examples/en/animations/CCDIKSolver.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/examples/en/animations/CCDIKSolver.html b/docs/examples/en/animations/CCDIKSolver.html index 8c88df57c49e53..8f7a2db7550f78 100644 --- a/docs/examples/en/animations/CCDIKSolver.html +++ b/docs/examples/en/animations/CCDIKSolver.html @@ -27,8 +27,8 @@

Code Example

// root // ├── bone0 // │ └── bone1 - // │ └── bone2 - // │ └── bone3 + // │ └── bone2 + // │ └── bone3 // └── target // // Positionned as follow on the cylinder: From 5920af2fba4256ef3f2ec2478602afc60176d579 Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Wed, 9 Feb 2022 23:44:50 +0100 Subject: [PATCH 3/9] tabs indentation --- docs/scenes/ccdiksolver-browser.html | 118 +++++++++++++-------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/docs/scenes/ccdiksolver-browser.html b/docs/scenes/ccdiksolver-browser.html index a8ef3b520c144a..f08b4fe2fe8091 100644 --- a/docs/scenes/ccdiksolver-browser.html +++ b/docs/scenes/ccdiksolver-browser.html @@ -55,7 +55,7 @@ Uint16BufferAttribute, WebGLRenderer } from 'three'; - import { CCDIKSolver, CCDIKHelper } from "../../examples/jsm/animation/CCDIKSolver.js"; + import { CCDIKSolver, CCDIKHelper } from "../../examples/jsm/animation/CCDIKSolver.js"; import { GUI } from '../../examples/jsm/libs/lil-gui.module.min.js'; import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js'; @@ -155,40 +155,40 @@ bones = []; - // "root bone" - let rootBone = new Bone(); - rootBone.name = "root"; - rootBone.position.y = -sizing.halfHeight; - bones.push( rootBone ); + // "root bone" + let rootBone = new Bone(); + rootBone.name = "root"; + rootBone.position.y = -sizing.halfHeight; + bones.push( rootBone ); - // - // "bone0", "bone1", "bone2", "bone3" - // + // + // "bone0", "bone1", "bone2", "bone3" + // - // "bone0" + // "bone0" let prevBone = new Bone(); - prevBone.position.y = 0; - rootBone.add(prevBone); + prevBone.position.y = 0; + rootBone.add(prevBone); bones.push( prevBone ); - // "bone1", "bone2", "bone3" + // "bone1", "bone2", "bone3" for ( let i = 1; i <= sizing.segmentCount; i ++ ) { const bone = new Bone(); bone.position.y = sizing.segmentHeight; bones.push( bone ); - bone.name = `bone${i}`; + bone.name = `bone${i}`; prevBone.add( bone ); prevBone = bone; } - // "target" - const targetBone = new Bone(); - targetBone.name = "target"; - targetBone.position.y = sizing.height + sizing.segmentHeight; // relative to parent: rootBone - rootBone.add( targetBone ); - bones.push( targetBone ); + // "target" + const targetBone = new Bone(); + targetBone.name = "target"; + targetBone.position.y = sizing.height + sizing.segmentHeight; // relative to parent: rootBone + rootBone.add( targetBone ); + bones.push( targetBone ); return bones; @@ -201,7 +201,7 @@ emissive: 0x072534, side: DoubleSide, flatShading: true, - wireframe: true + wireframe: true } ); const mesh = new SkinnedMesh( geometry, material ); @@ -221,38 +221,38 @@ function setupDatGui() { - gui.add( mesh, 'pose' ).name( 'mesh.pose()' ); + gui.add( mesh, 'pose' ).name( 'mesh.pose()' ); - mesh.skeleton.bones - .filter((bone) => bone.name === "target") - .forEach(function (bone) { - const folder = gui.addFolder( bone.name ); + mesh.skeleton.bones + .filter((bone) => bone.name === "target") + .forEach(function (bone) { + const folder = gui.addFolder( bone.name ); - const delta = 20; - folder.add( bone.position, 'x', - delta + bone.position.x, delta + bone.position.x ); - folder.add( bone.position, 'y', - delta + bone.position.y, delta + bone.position.y ); - folder.add( bone.position, 'z', - delta + bone.position.z, delta + bone.position.z ); - }); - - gui.add( ikSolver, 'update' ).name( 'ikSolver.update()' ); - gui.add( state, 'ikSolverAutoUpdate' ) - + const delta = 20; + folder.add( bone.position, 'x', - delta + bone.position.x, delta + bone.position.x ); + folder.add( bone.position, 'y', - delta + bone.position.y, delta + bone.position.y ); + folder.add( bone.position, 'z', - delta + bone.position.z, delta + bone.position.z ); + }); + + gui.add( ikSolver, 'update' ).name( 'ikSolver.update()' ); + gui.add( state, 'ikSolverAutoUpdate' ) + } function initBones() { const segmentHeight = 8; - const segmentCount = 3; - const height = segmentHeight * segmentCount; - const halfHeight = height * 0.5; + const segmentCount = 3; + const height = segmentHeight * segmentCount; + const halfHeight = height * 0.5; - const sizing = { - segmentHeight, - segmentCount, - height, - halfHeight - }; + const sizing = { + segmentHeight, + segmentCount, + height, + halfHeight + }; const geometry = createGeometry( sizing ); const bones = createBones( sizing ); @@ -260,19 +260,19 @@ scene.add( mesh ); - // - // ikSolver - // + // + // ikSolver + // - const iks = [ - { - target: 5, - effector: 4, - links: [{ index: 3 }, { index: 2 }, { index: 1 }] - } - ]; - ikSolver = new CCDIKSolver( mesh, iks ); - scene.add(new CCDIKHelper( mesh, iks )); + const iks = [ + { + target: 5, + effector: 4, + links: [{ index: 3 }, { index: 2 }, { index: 1 }] + } + ]; + ikSolver = new CCDIKSolver( mesh, iks ); + scene.add(new CCDIKHelper( mesh, iks )); } @@ -280,9 +280,9 @@ requestAnimationFrame( render ); - if (state.ikSolverAutoUpdate) { - ikSolver?.update(); - } + if (state.ikSolverAutoUpdate) { + ikSolver?.update(); + } renderer.render( scene, camera ); From 3e844ca960305b19330bcd12144b7c4a95a6c46b Mon Sep 17 00:00:00 2001 From: Antoine BERNIER Date: Thu, 10 Feb 2022 00:04:41 +0100 Subject: [PATCH 4/9] tweaks --- docs/scenes/ccdiksolver-browser.html | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/docs/scenes/ccdiksolver-browser.html b/docs/scenes/ccdiksolver-browser.html index f08b4fe2fe8091..97900ef38168ae 100644 --- a/docs/scenes/ccdiksolver-browser.html +++ b/docs/scenes/ccdiksolver-browser.html @@ -38,6 +38,10 @@ Open in New Window