DrawModes.html 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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. <h1>绘图模式常量(Draw Mode Constants)</h1>
  12. <p class="desc">
  13. 这些是[page:Mesh.drawMode]的有效值,控制着顶点列表一旦被发送到GPU中将如何被解释。
  14. </p>
  15. <h2>绘图模式</h2>
  16. <code>
  17. THREE.TrianglesDrawMode
  18. </code>
  19. <p>
  20. 这是默认值,这将使得每三个连续顶点(v0, v1, v2),(v3, v4, v5),……被解释为一个单独的三角形。
  21. <br />
  22. 如果顶点的数量不是3的倍数,那么将会忽略多余的顶点。
  23. </p>
  24. <code>
  25. THREE.TriangleStripDrawMode
  26. </code>
  27. <p>
  28. 这将使得一系列的三角形(由(v0, v1, v2),(v2, v1, v3),(v2, v3, v4),……给定)一个一个地连在一起,每一个连续的三角形将和前一个三角形共享两个顶点。
  29. </p>
  30. <code>
  31. THREE.TriangleFanDrawMode
  32. </code>
  33. <p>
  34. 这将会使得一个序列中的每一个三角形(由(v0, v1, v2),(v0, v2, v3),(v0, v3, v4),……给定)共享它们的第一个顶点(就像风扇一样)。<br /><br />
  35. <em>注意:</em>截至[link:https://en.wikipedia.org/wiki/DirectX#DirectX_10 DirectX10]这个模式还没有被支持。
  36. 由于Chorme和Firefox在Windows上是使用[link:https://en.wikipedia.org/wiki/ANGLE_(software) ANGLE]来渲染WebGL的,所以这种模式将会在内部转换为受支持的模式,
  37. 但可能会导致这些浏览器在性能上降低一些。
  38. </p>
  39. <h2>用法</h2>
  40. <code>
  41. var geometry = new THREE.BufferGeometry();
  42. var vertices = [];
  43. vertices.push( -10, 10, 0 );
  44. vertices.push( -10, -10, 0 );
  45. vertices.push( 10, -10, 0 );
  46. // ...
  47. geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
  48. var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
  49. var mesh = new THREE.Mesh( geometry, material );
  50. mesh.drawMode = THREE.TrianglesDrawMode; //default
  51. scene.add( mesh );
  52. </code>
  53. <h2>源代码</h2>
  54. <p>
  55. [link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
  56. </p>
  57. </body>
  58. </html>