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

问题描述

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

I am trying to draw a quad between four vertices in the space using three.js. I have written the following code but it doesn't work:

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文档组织良好且完整。

where am I making a mistake?By the way, to render quads, can I use Face4 or do I have to use Face3?Is there any good source for learning webgl features all in one place? Three.js documentation is very well organized and complete.

推荐答案

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

Quads are no longer supported. You need to use two Face3s, like so:

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 。

Tip: set material.side = THREE.DoubleSide so both sides of your geometry render. You can set it back to THREE.FrontSide when you are sure your geometry is correct.

有关学习的建议three.js和WebGL见

For advice on learning three.js and WebGL see Learning WebGL and three.js

three.js r.70

three.js r.70

这篇关于在Three.js中渲染自定义几何体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！