在 Three.js 中渲染自定义几何图形

【问题标题】：Rendering custom geometry in Three.js在 Three.js 中渲染自定义几何图形
【发布时间】：2013-09-30 01:53:34
【问题描述】：

我正在尝试使用 three.js 在空间中的四个顶点之间绘制一个四边形。我已经编写了以下代码，但它不起作用：

var a = { x:10,
            y:10}
var b = {x:50,
           y:50}

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y - 60, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.faces.push( new THREE.Face3(0,1,2) );
geometry.computeFaceNormals();
var material = new THREE.MeshBasicMaterial({ color: "0xff1100"});
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

我在哪里犯错了？顺便说一句，要渲染四边形，我可以使用 Face4 还是必须使用 Face3？有没有什么好的资源可以在一个地方学习 webgl 功能？ Three.js 文档组织良好且完整。

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

不再支持四边形。你需要使用两个Face3s，像这样：

var a = { x:10,
          y:10 }
var b = { x:50,
          y:50 }

var geometry = new THREE.Geometry();

geometry.vertices.push( new THREE.Vector3( a.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, a.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( b.x, b.y, 2 ) );
geometry.vertices.push( new THREE.Vector3( a.x, b.y, 2 ) );

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) ); // counter-clockwise winding order
geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );

geometry.computeFaceNormals();
geometry.computeVertexNormals();

提示：设置 material.side = THREE.DoubleSide 以便渲染几何图形的两侧。当您确定您的几何图形正确时，您可以将其设置回THREE.FrontSide。

有关学习three.js 和WebGL 的建议，请参阅Learning WebGL and three.js

three.js r.70

【讨论】：

谢谢！它真的很有帮助。 :)