LOD.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LOD - Three.js Docs</title>
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <script src="../scripts/highlight.min.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
  9. <link type="text/css" rel="stylesheet" href="../styles/page.css">
  10. </head>
  11. <body>
  12. <p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Object3D.html">Object3D</a> → </p>
  13. <h1 translate="no">LOD</h1>
  14. <section>
  15. <header>
  16. <div class="class-description"><p>A component for providing a basic Level of Detail (LOD) mechanism.</p>
  17. <p>Every LOD level is associated with an object, and rendering can be switched
  18. between them at the distances specified. Typically you would create, say,
  19. three meshes, one for far away (low detail), one for mid range (medium
  20. detail) and one for close up (high detail).</p></div>
  21. <h2>Code Example</h2>
  22. <div translate="no"><pre><code class="language-js">const lod = new THREE.LOD();
  23. const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
  24. //Create spheres with 3 levels of detail and create new LOD levels for them
  25. for( let i = 0; i &lt; 3; i++ ) {
  26. const geometry = new THREE.IcosahedronGeometry( 10, 3 - i );
  27. const mesh = new THREE.Mesh( geometry, material );
  28. lod.addLevel( mesh, i * 75 );
  29. }
  30. scene.add( lod );
  31. </code></pre></div>
  32. </header>
  33. <article>
  34. <div class="container-overview">
  35. <h2>Constructor</h2>
  36. <h3 class="name name-method" id="LOD" translate="no">new <a href="#LOD">LOD</a><span class="signature">()</span> </h3>
  37. <div class="method">
  38. <div class="description">
  39. <p>Constructs a new LOD.</p>
  40. </div>
  41. </div>
  42. </div>
  43. <h2 class="subsection-title">Properties</h2>
  44. <div class="member">
  45. <h3 class="name" id="autoUpdate" translate="no">.<a href="#autoUpdate">autoUpdate</a><span class="type-signature"> : boolean</span> </h3>
  46. <div class="description">
  47. <p>Whether the LOD object is updated automatically by the renderer per frame
  48. or not. If set to <code>false</code>, you have to call <a href="LOD.html#update">LOD#update</a> in the
  49. render loop by yourself.</p>
  50. <p>Default is <code>true</code>.</p>
  51. </div>
  52. </div>
  53. <div class="member">
  54. <h3 class="name" id="isLOD" translate="no">.<a href="#isLOD">isLOD</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
  55. <div class="description">
  56. <p>This flag can be used for type testing.</p>
  57. <p>Default is <code>true</code>.</p>
  58. </div>
  59. </div>
  60. <div class="member">
  61. <h3 class="name" id="levels" translate="no">.<a href="#levels">levels</a><span class="type-signature"> : Array.&lt;{object:Object3D, distance:number, hysteresis:number}></span> </h3>
  62. <div class="description">
  63. <p>This array holds the LOD levels.</p>
  64. </div>
  65. </div>
  66. <h2 class="subsection-title">Methods</h2>
  67. <h3 class="name name-method" id="addLevel" translate="no">.<a href="#addLevel">addLevel</a><span class="signature">( object : <span class="param-type"><a href="Object3D.html">Object3D</a></span>, distance : <span class="param-type">number</span>, hysteresis : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="LOD.html">LOD</a></span> </h3>
  68. <div class="method">
  69. <div class="description">
  70. <p>Adds a mesh that will display at a certain distance and greater. Typically
  71. the further away the distance, the lower the detail on the mesh.</p>
  72. </div>
  73. <table class="params">
  74. <tbody>
  75. <tr>
  76. <td class="name">
  77. <strong>object</strong>
  78. </td>
  79. <td class="description last">
  80. <p>The 3D object to display at this level.</p>
  81. </td>
  82. </tr>
  83. <tr>
  84. <td class="name">
  85. <strong>distance</strong>
  86. </td>
  87. <td class="description last">
  88. <p>The distance at which to display this level of detail.</p>
  89. <p>Default is <code>0</code>.</p>
  90. </td>
  91. </tr>
  92. <tr>
  93. <td class="name">
  94. <strong>hysteresis</strong>
  95. </td>
  96. <td class="description last">
  97. <p>Threshold used to avoid flickering at LOD boundaries, as a fraction of distance.</p>
  98. <p>Default is <code>0</code>.</p>
  99. </td>
  100. </tr>
  101. </tbody>
  102. </table>
  103. <dl class="details">
  104. <dt class="tag-returns"><strong>Returns:</strong> A reference to this instance.</dt>
  105. </dl>
  106. </div>
  107. <h3 class="name name-method" id="getCurrentLevel" translate="no">.<a href="#getCurrentLevel">getCurrentLevel</a><span class="signature">()</span><span class="type-signature"> : number</span> </h3>
  108. <div class="method">
  109. <div class="description">
  110. <p>Returns the currently active LOD level index.</p>
  111. </div>
  112. <dl class="details">
  113. <dt class="tag-returns"><strong>Returns:</strong> The current active LOD level index.</dt>
  114. </dl>
  115. </div>
  116. <h3 class="name name-method" id="getObjectForDistance" translate="no">.<a href="#getObjectForDistance">getObjectForDistance</a><span class="signature">( distance : <span class="param-type">number</span> )</span><span class="type-signature"> : <a href="Object3D.html">Object3D</a></span> </h3>
  117. <div class="method">
  118. <div class="description">
  119. <p>Returns a reference to the first 3D object that is greater than
  120. the given distance.</p>
  121. </div>
  122. <table class="params">
  123. <tbody>
  124. <tr>
  125. <td class="name">
  126. <strong>distance</strong>
  127. </td>
  128. <td class="description last">
  129. <p>The LOD distance.</p>
  130. </td>
  131. </tr>
  132. </tbody>
  133. </table>
  134. <dl class="details">
  135. <dt class="tag-returns"><strong>Returns:</strong> The found 3D object. <code>null</code> if no 3D object has been found.</dt>
  136. </dl>
  137. </div>
  138. <h3 class="name name-method" id="raycast" translate="no">.<a href="#raycast">raycast</a><span class="signature">( raycaster : <span class="param-type"><a href="Raycaster.html">Raycaster</a></span>, intersects : <span class="param-type">Array.&lt;Object></span> )</span> </h3>
  139. <div class="method">
  140. <div class="description">
  141. <p>Computes intersection points between a casted ray and this LOD.</p>
  142. </div>
  143. <table class="params">
  144. <tbody>
  145. <tr>
  146. <td class="name">
  147. <strong>raycaster</strong>
  148. </td>
  149. <td class="description last">
  150. <p>The raycaster.</p>
  151. </td>
  152. </tr>
  153. <tr>
  154. <td class="name">
  155. <strong>intersects</strong>
  156. </td>
  157. <td class="description last">
  158. <p>The target array that holds the intersection points.</p>
  159. </td>
  160. </tr>
  161. </tbody>
  162. </table>
  163. <dl class="details">
  164. <dt class="tag-overrides"><strong>Overrides:</strong> <a href="Object3D.html#raycast">Object3D#raycast</a></dt>
  165. </dl>
  166. </div>
  167. <h3 class="name name-method" id="removeLevel" translate="no">.<a href="#removeLevel">removeLevel</a><span class="signature">( distance : <span class="param-type">number</span> )</span><span class="type-signature"> : boolean</span> </h3>
  168. <div class="method">
  169. <div class="description">
  170. <p>Removes an existing level, based on the distance from the camera.
  171. Returns <code>true</code> when the level has been removed. Otherwise <code>false</code>.</p>
  172. </div>
  173. <table class="params">
  174. <tbody>
  175. <tr>
  176. <td class="name">
  177. <strong>distance</strong>
  178. </td>
  179. <td class="description last">
  180. <p>Distance of the level to remove.</p>
  181. </td>
  182. </tr>
  183. </tbody>
  184. </table>
  185. <dl class="details">
  186. <dt class="tag-returns"><strong>Returns:</strong> Whether the level has been removed or not.</dt>
  187. </dl>
  188. </div>
  189. <h3 class="name name-method" id="update" translate="no">.<a href="#update">update</a><span class="signature">( camera : <span class="param-type"><a href="Camera.html">Camera</a></span> )</span> </h3>
  190. <div class="method">
  191. <div class="description">
  192. <p>Updates the LOD by computing which LOD level should be visible according
  193. to the current distance of the given camera.</p>
  194. </div>
  195. <table class="params">
  196. <tbody>
  197. <tr>
  198. <td class="name">
  199. <strong>camera</strong>
  200. </td>
  201. <td class="description last">
  202. <p>The camera the scene is rendered with.</p>
  203. </td>
  204. </tr>
  205. </tbody>
  206. </table>
  207. </div>
  208. <h2 class="subsection-title">Source</h2>
  209. <p>
  210. <a href="https://github.com/mrdoob/three.js/blob/master/src/objects/LOD.js" translate="no" target="_blank" rel="noopener">src/objects/LOD.js</a>
  211. </p>
  212. </article>
  213. </section>
  214. <script src="../scripts/linenumber.js"></script>
  215. <script src="../scripts/page.js"></script>
  216. </body>
  217. </html>
粤ICP备19079148号