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