How-to-update-things.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <!DOCTYPE html>
  2. <html lang="zh">
  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. <h1>如何更新场景([name])</h1>
  12. <div>
  13. <p>默认情况下,所有对象都会自动更新它们的矩阵(如果它们已添加到场景中)</p>
  14. <code>
  15. var object = new THREE.Object3D();
  16. scene.add( object );
  17. </code>
  18. 或者它们是已添加到场景中的另一个对象的子节点:
  19. <code>
  20. var object1 = new THREE.Object3D();
  21. var object2 = new THREE.Object3D();
  22. object1.add( object2 );
  23. scene.add( object1 ); //object1 和 object2 会自动更新它们的矩阵
  24. </code>
  25. </div>
  26. <p>但是,如果你知道对象将是静态的,则可以禁用此选项并在需要时手动更新转换矩阵。</p>
  27. <code>
  28. object.matrixAutoUpdate = false;
  29. object.updateMatrix();
  30. </code>
  31. <h2>BufferGeometry</h2>
  32. <div>
  33. <p>
  34. BufferGeometries 将信息(例如顶点位置,面索引,法线,颜色,uv和任何自定义属性)存储在[page:BufferAttribute buffers] —— 也就是,
  35. [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays].
  36. 这使得它们通常比标准Geometries更快,缺点是更难用。
  37. </p>
  38. <p>
  39. 关于更新BufferGeometries,最重要的是理解你不能调整 buffers 大小(这种操作开销很大,相当于创建了个新的geometry)。
  40. 但你可以更新 buffers的内容。
  41. </p>
  42. <p>
  43. 这意味着如果你知道BufferGeometry的一个属性会增长,比如顶点的数量,
  44. 你必须预先分配足够大的buffer来容纳可能创建的任何新顶点。
  45. 当然,这也意味着BufferGeometry将有一个最大大小 —— 无法创建一个可以高效地无限扩展的BufferGeometry。
  46. </p>
  47. <p>
  48. 我们以在渲染时扩展的line来示例。我们将分配可容纳500个顶点的空间但起初仅绘制2个,使用
  49. 在500个顶点的缓冲区中,但首先只使用 [page:BufferGeometry.drawRange]。
  50. </p>
  51. <code>
  52. var MAX_POINTS = 500;
  53. // geometry
  54. var geometry = new THREE.BufferGeometry();
  55. // attributes
  56. var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
  57. geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
  58. // draw range
  59. var drawCount = 2; // draw the first 2 points, only
  60. geometry.setDrawRange( 0, drawCount );
  61. // material
  62. var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
  63. // line
  64. var line = new THREE.Line( geometry, material );
  65. scene.add( line );
  66. </code>
  67. <p>
  68. 然后我们随机增加顶点到line中,以这样的一种方式:
  69. </p>
  70. <code>
  71. var positions = line.geometry.attributes.position.array;
  72. var x, y, z, index;
  73. x = y = z = index = 0;
  74. for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {
  75. positions[ index ++ ] = x;
  76. positions[ index ++ ] = y;
  77. positions[ index ++ ] = z;
  78. x += ( Math.random() - 0.5 ) * 30;
  79. y += ( Math.random() - 0.5 ) * 30;
  80. z += ( Math.random() - 0.5 ) * 30;
  81. }
  82. </code>
  83. <p>
  84. 如果要更改第一次渲染后渲染的<em>点数</em>,执行以下操作:
  85. </p>
  86. <code>
  87. line.geometry.setDrawRange( 0, newValue );
  88. </code>
  89. <p>
  90. 如果要在第一次渲染后更改position数值,则需要像这样设置needsUpdate标志:
  91. </p>
  92. <code>
  93. line.geometry.attributes.position.needsUpdate = true; // 需要加在第一次渲染之后
  94. </code>
  95. <p>
  96. <a href="http://jsfiddle.net/w67tzfhx/">这个fiddle</a>展示了一个你可以参考的运动的line。
  97. </p>
  98. <h3>例子</h3>
  99. <p>
  100. [example:webgl_custom_attributes WebGL / custom / attributes]<br />
  101. [example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
  102. </p>
  103. </div>
  104. <h2>Geometry</h2>
  105. <div>
  106. <p>
  107. 以下标志控制各种geometry属性的更新。仅对于需要更新的属性设置标志,因为更新成本很高。
  108. 一旦buffers改变,这些标志位会自动重置为false。如果你想要持续更新buffers,你需要保持这些设置为true。
  109. 请注意这仅适用于[page:Geometry]而不是[page:BufferGeometry]。
  110. </p>
  111. <code>
  112. var geometry = new THREE.Geometry();
  113. geometry.verticesNeedUpdate = true;
  114. geometry.elementsNeedUpdate = true;
  115. geometry.morphTargetsNeedUpdate = true;
  116. geometry.uvsNeedUpdate = true;
  117. geometry.normalsNeedUpdate = true;
  118. geometry.colorsNeedUpdate = true;
  119. geometry.tangentsNeedUpdate = true;
  120. </code>
  121. <p>
  122. 在早于[link:https://github.com/mrdoob/three.js/releases/tag/r66 r66]的版本中,meshes
  123. 需要额外设定 <em>dynamic</em> 标志为true (为了维持内部的 typed arrays):
  124. </p>
  125. <code>
  126. //removed after r66
  127. geometry.dynamic = true;
  128. </code>
  129. </div>
  130. <h2>材质(Materials)</h2>
  131. <div>
  132. <p>所有uniforms值都可以自由改变(比如 colors, textures, opacity 等等),这些数值在每帧都发给shader。</p>
  133. <p>GL状态相关参数也可以随时改变(depthTest, blending, polygonOffset 等)。</p>
  134. <p>在运行时无法轻松更改以下属性(一旦material被渲染了一次):</p>
  135. <ul>
  136. <li>uniforms的数量和类型</li>
  137. <li>是否存在
  138. <ul>
  139. <li>texture</li>
  140. <li>fog</li>
  141. <li>vertex colors</li>
  142. <li>skinning</li>
  143. <li>morphing</li>
  144. <li>shadow map</li>
  145. <li>alpha test</li>
  146. </ul>
  147. </li>
  148. </ul>
  149. <p>这些变化需要建立新的shader程序。你需要设置</p>
  150. <code>material.needsUpdate = true</code>
  151. <p>请记住,这可能会非常缓慢并导致帧率的波动。(特别是在Windows上,因为shader编译在directx中比opengl慢)。</p>
  152. <p>为了获得更流畅的体验,您可以通过“虚拟”值(如零强度光,白色纹理或零密度雾)在一定程度上模拟这些功能的变化。</p>
  153. <p>您可以自由更改用于几何块的材质,但是无法更改对象如何划分为块(根据面材料)。</p>
  154. <h3>如果你需要在运行时使用不同的材料配置:</h3>
  155. <p>如果材料/块的数量很少,您可以事先预先划分物体(例如,人的头发/脸部/身体/上衣/裤子,汽车的前部/侧面/顶部/玻璃/轮胎/内部)。</p>
  156. <p>如果数量很大(例如,每个面可能有所不同),请考虑不同的解决方案,例如使用属性/纹理来驱动不同的每个面部外观。</p>
  157. <h3>例子</h3>
  158. <p>
  159. [example:webgl_materials_car WebGL / materials / car]<br />
  160. [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
  161. </p>
  162. </div>
  163. <h2>纹理(Textures)</h2>
  164. <div>
  165. <p>如果更改了图像,画布,视频和数据纹理,则需要设置以下标志:</p>
  166. <code>
  167. texture.needsUpdate = true;
  168. </code>
  169. <p>渲染对象就会自动更新。</p>
  170. <h3>例子</h3>
  171. <p>
  172. [example:webgl_materials_video WebGL / materials / video]<br />
  173. [example:webgl_rtt WebGL / rtt]
  174. </p>
  175. </div>
  176. <h2>相机(Cameras)</h2>
  177. <div>
  178. <p>相机的位置和目标会自动更新。 如果你需要改变</p>
  179. <ul>
  180. <li>
  181. fov
  182. </li>
  183. <li>
  184. aspect
  185. </li>
  186. <li>
  187. near
  188. </li>
  189. <li>
  190. far
  191. </li>
  192. </ul>
  193. <p>
  194. 那么你需要重新计算投影矩阵:
  195. </p>
  196. <code>
  197. camera.aspect = window.innerWidth / window.innerHeight;
  198. camera.updateProjectionMatrix();
  199. </code>
  200. </div>
  201. </body>
  202. </html>