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

Rendering custom geometry in Three.js

本文关键字：自定义 几何体 Three js      更新时间：2023-09-26

我正在尝试使用三个.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功能的好资源？第三.js文档组织得很好，很完整。

不再

支持四边形。您需要使用两个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。

有关学习三.js和WebGL的建议，请参阅学习WebGL和三.js

三.js R.70

相关文章：