CCDIKSolver.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>CCDIK解算器([name])</h1>
  11. <p class="desc"> 一种基于 <a href="https://sites.google.com/site/auraliusproject/ccd-algorithm">`CCD Algorithm`</a> 的 IK
  12. 解算器。<br /><br />
  13. [name] 用 CCD 算法解决逆运动学问题。
  14. [name] 设计用于与 [page:SkinnedMesh] 配合使用,但也可与 [page:MMDLoader] 或 [page:GLTFLoader] 配合使用。
  15. </p>
  16. <iframe id="scene" src="scenes/ccdiksolver-browser.html"></iframe>
  17. <h2>导入</h2>
  18. <p>
  19. [name] 是一个附加组件,必须显式导入。请参阅 [link:#manual/introduction/Installation Installation / Addons]。
  20. </p>
  21. <code>
  22. import { CCDIKSolver } from 'three/addons/animation/CCDIKSolver.js';
  23. </code>
  24. <h2>代码示例</h2>
  25. <code>
  26. let ikSolver;
  27. //
  28. // Bones hierarchy:
  29. //
  30. // root
  31. // ├── bone0
  32. // │ └── bone1
  33. // │ └── bone2
  34. // │ └── bone3
  35. // └── target
  36. //
  37. // Positioned as follow on the cylinder:
  38. //
  39. // o <- target (y = 20)
  40. //
  41. // +----o----+ <- bone3 (y = 12)
  42. // | |
  43. // | o | <- bone2 (y = 4)
  44. // | |
  45. // | o | <- bone1 (y = -4)
  46. // | |
  47. // +----oo---+ <- root, bone0 (y = -12)
  48. //
  49. let bones = []
  50. // "root"
  51. let rootBone = new Bone();
  52. rootBone.position.y = -12;
  53. bones.push( rootBone );
  54. // "bone0"
  55. let prevBone = new Bone();
  56. prevBone.position.y = 0;
  57. rootBone.add( prevBone );
  58. bones.push( prevBone );
  59. // "bone1", "bone2", "bone3"
  60. for ( let i = 1; i <= 3; i ++ ) {
  61. const bone = new Bone();
  62. bone.position.y = 8;
  63. bones.push( bone );
  64. prevBone.add( bone );
  65. prevBone = bone;
  66. }
  67. // "target"
  68. const targetBone = new Bone();
  69. targetBone.position.y = 24 + 8
  70. rootBone.add( targetBone );
  71. bones.push( targetBone );
  72. //
  73. // skinned mesh
  74. //
  75. const mesh = new SkinnedMesh( geometry, material );
  76. const skeleton = new Skeleton( bones );
  77. mesh.add( bones[ 0 ] ); // "root" bone
  78. mesh.bind( skeleton );
  79. //
  80. // ikSolver
  81. //
  82. const iks = [
  83. {
  84. target: 5, // "target"
  85. effector: 4, // "bone3"
  86. links: [ { index: 3 }, { index: 2 }, { index: 1 } ] // "bone2", "bone1", "bone0"
  87. }
  88. ];
  89. ikSolver = new CCDIKSolver( mesh, iks );
  90. function render() {
  91. ikSolver?.update();
  92. renderer.render( scene, camera );
  93. }
  94. </code>
  95. <h2>例子</h2>
  96. <p>
  97. [example:webgl_animation_skinning_ik]<br />
  98. [example:webgl_loader_mmd]<br />
  99. [example:webgl_loader_mmd_pose]<br />
  100. [example:webgl_loader_mmd_audio]
  101. </p>
  102. <h2>构造函数</h2>
  103. <h3>[name]( [param:SkinnedMesh mesh], [param:Array iks] )</h3>
  104. <p>
  105. [page:SkinnedMesh mesh] — [page:SkinnedMesh] 用于 [name] 解决 IK 问题<br />
  106. [page:Array iks] — 指定 IK 参数的对象 [page:Object] 数组。target、effector 和 link-index 是 .sculptor.bones
  107. 中的索引整数。骨骼关系从父级到子级的顺序应为“links[ n ]、 links[ n - 1 ]、...、 links[ 0 ]、effector”。<br />
  108. </p>
  109. <ul>
  110. <li>[page:Integer target] — 目标骨骼</li>
  111. <li>[page:Integer effector] — 效应器骨</li>
  112. <li>[page:Array links] — 指定链接骨骼的对象[page:Object] 数组
  113. <ul>
  114. <li>[page:Integer index] — 链接骨骼</li>
  115. <li>[page:Vector3 limitation] — (可选)旋转轴。默认值 undefined</li>
  116. <li>[page:Vector3 rotationMin] — (可选)旋转最小限制。默认值 undefined</li>
  117. <li>[page:Vector3 rotationMax] — (可选)旋转最大限制。默认值 undefined</li>
  118. <li>[page:Boolean enabled] — (可选)默认值为 true。</li>
  119. </ul>
  120. </li>
  121. <li>[page:Integer iteration] — (可选)计算的迭代次数。越小速度越快,但精度较差。默认值为 1。</li>
  122. <li>[page:Number minAngle] — (可选)一步中的最小旋转角度。默认值 undefined</li>
  123. <li>[page:Number maxAngle] — (可选)一步中的最大旋转角度。默认值 undefined</li>
  124. </ul>
  125. <p>
  126. 创建一个新的 [name]。
  127. </p>
  128. <h2>属性</h2>
  129. <h3>[property:Array iks]</h3>
  130. <p>传递给构造函数的 IK 参数数组。</p>
  131. <h3>[property:SkinnedMesh mesh]</h3>
  132. <p>[page:SkinnedMesh] 传递给构造函数。</p>
  133. <h2>方法</h2>
  134. <h3>[method:CCDIKHelper createHelper]()</h3>
  135. <p>
  136. 返回 [page:CCDIKHelper]. 。您可以通过将辅助对象添加到场景来可视化 IK 骨骼。
  137. </p>
  138. <h3>[method:this update]()</h3>
  139. <p>
  140. 通过求解 CCD 算法更新 IK 骨骼四元数。
  141. </p>
  142. <h3>[method:this updateOne]( [param:Object ikParam] )</h3>
  143. <p>
  144. 通过求解 CCD 算法来更新一个 IK 骨骼四元数。
  145. </p>
  146. <h2>源代码</h2>
  147. <p>
  148. [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/animation/CCDIKSolver.js examples/jsm/animation/CCDIKSolver.js]
  149. </p>
  150. </body>
  151. </html>