Question

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

Answer 1

不再支持四边形。您需要使用两个Face3，如下所示：

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

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

1 个答案: