SkinnedMesh.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. [page:Object3D] &rarr; [page:Mesh] &rarr;
  12. <h1>[name]</h1>
  13. <p class="desc">
  14. A mesh that has a [page:Skeleton] with [page:Bone bones] that can then be used to animate the vertices of the geometry.
  15. The material must support skinning and have skinning enabled - see [page:MeshStandardMaterial.skinning].
  16. </p>
  17. <iframe id="scene" src="scenes/bones-browser.html"></iframe>
  18. <script>
  19. // iOS iframe auto-resize workaround
  20. if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
  21. var scene = document.getElementById( 'scene' );
  22. scene.style.width = getComputedStyle( scene ).width;
  23. scene.style.height = getComputedStyle( scene ).height;
  24. scene.setAttribute( 'scrolling', 'no' );
  25. }
  26. </script>
  27. <h2>Example</h2>
  28. <code>
  29. var geometry = new THREE.CylinderGeometry( 5, 5, 5, 5, 15, 5, 30 );
  30. //Create the skin indices and skin weights
  31. for ( var i = 0; i < geometry.vertices.length; i ++ ) {
  32. // Imaginary functions to calculate the indices and weights
  33. // This part will need to be changed depending your skeleton and model
  34. var skinIndex = calculateSkinIndex( geometry.vertices, i );
  35. var skinWeight = calculateSkinWeight( geometry.vertices, i );
  36. // Ease between each bone
  37. geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
  38. geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
  39. }
  40. var mesh = new THREE.SkinnedMesh( geometry, material );
  41. // See example from THREE.Skeleton for the armSkeleton
  42. var rootBone = armSkeleton.bones[ 0 ];
  43. mesh.add( rootBone );
  44. // Bind the skeleton to the mesh
  45. mesh.bind( armSkeleton );
  46. // Move the bones and manipulate the model
  47. armSkeleton.bones[ 0 ].rotation.x = -0.1;
  48. armSkeleton.bones[ 1 ].rotation.x = 0.2;
  49. </code>
  50. <h2>Constructor</h2>
  51. <h3>[name]( [param:Geometry geometry], [param:Material material] )</h3>
  52. <p>
  53. [page:Geometry geometry] - an instance of [page:Geometry] or [page:BufferGeometry] (recommended).
  54. [page:Geometry.skinIndices skinIndices] and [page:Geometry.skinWeights skinWeights] should be set to true on the geometry.<br />
  55. [page:Material material] - (optional) an instance of [page:Material]. Default is a new [page:MeshBasicMaterial].
  56. </p>
  57. <h2>Properties</h2>
  58. <p>See the base [page:Mesh] class for common properties.</p>
  59. <h3>[property:string bindMode]</h3>
  60. <p>
  61. Either "attached" or "detached". "attached" uses the [page:SkinnedMesh.matrixWorld]
  62. property for the base transform matrix of the bones. "detached" uses the
  63. [page:SkinnedMesh.bindMatrix]. Default is "attached".
  64. </p>
  65. <h3>[property:Matrix4 bindMatrix]</h3>
  66. <p>
  67. The base matrix that is used for the bound bone transforms.
  68. </p>
  69. <h3>[property:Matrix4 bindMatrixInverse]</h3>
  70. <p>
  71. The base matrix that is used for resetting the bound bone transforms.
  72. </p>
  73. <h3>[property:Boolean isSkinnedMesh]</h3>
  74. <p>
  75. Used to check whether this or derived classes are skinned meshes. Default is *true*.<br /><br />
  76. You should not change this, as it used internally for optimisation.
  77. </p>
  78. <h3>[property:Skeleton skeleton]</h3>
  79. <p>
  80. [page:Skeleton] created from the [page:Geometry.bones bones] of the [page:Geometry] passed in the
  81. constructor.
  82. </p>
  83. <h2>Methods</h2>
  84. <p>See the base [page:Mesh] class for common methods.</p>
  85. <h3>[method:null bind]( [param:Skeleton skeleton], [param:Matrix4 bindMatrix] )</h3>
  86. <p>
  87. [page:Skeleton skeleton] - [page:Skeleton] created from a [page:Bone Bones] tree.<br/>
  88. [page:Matrix4 bindMatrix] - [page:Matrix4] that represents the base transform of the skeleton.<br /><br />
  89. Bind a skeleton to the skinned mesh. The bindMatrix gets saved to .bindMatrix property
  90. and the .bindMatrixInverse gets calculated. This is called automatically in the constructor, and the skeleton
  91. is created from the [page:Geometry.bones bones] of the [page:Geometry] passed in the
  92. constructor.
  93. </p>
  94. <h3>[method:SkinnedMesh clone]()</h3>
  95. <p>
  96. Returns a clone of this SkinnedMesh object and any descendants.
  97. </p>
  98. <h3>[method:null normalizeSkinWeights]()</h3>
  99. <p>
  100. Normalizes the [page:Geometry.skinWeights] vectors. Does not affect [page:BufferGeometry].
  101. </p>
  102. <h3>[method:null pose]()</h3>
  103. <p>
  104. This method sets the skinned mesh in the rest pose (resets the pose).
  105. </p>
  106. <h3>[method:null updateMatrixWorld]( [param:Boolean force] )</h3>
  107. <p>
  108. Updates the [page:Matrix4 MatrixWorld].
  109. </p>
  110. <h2>Source</h2>
  111. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  112. </body>
  113. </html>