4

我正在尝试使用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 文档组织良好且完整。

4

1 回答 1

4

不再支持四边形。您需要使用两个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 的建议，请参阅学习WebGL 和three.js

三.js r.70

于 2013-09-30T02:27:53.890 回答