使用 THREE.js 创建自定义网格答案

【问题标题】：Creating a custom mesh with THREE.js使用 THREE.js 创建自定义网格
【发布时间】：2016-12-18 13:13:06
【问题描述】：

我尝试使用以下代码使用 Three.js 创建自定义网格：

var geom = new THREE.Geometry();

//geom verts

geom.vertices.push(new THREE.Vector3(-1,-1,-1));
geom.vertices.push(new THREE.Vector3(0,-1,-1));
geom.vertices.push(new THREE.Vector3(-1,0,-1));
geom.vertices.push(new THREE.Vector3(0,0,-1));

//faces
geom.faces.push(new THREE.Face3(0,1,2));
geom.faces.push(new THREE.Face3(1,2,3));

当我渲染对象时，只有一个三角形渲染（第一个）。如果有人能告诉我出了什么问题（或在没有搅拌器的情况下创建自定义网格的指南），那就太棒了。

【问题讨论】：

也许这也有帮助？ stackoverflow.com/questions/9252764/…

标签： javascript 3d three.js

【解决方案1】：

在添加顶点和面后尝试调用geom.computeFaceNormals();。

【讨论】：

【解决方案2】：

面绕组是不同的，第一个三角形是逆时针的，第二个三角形是顺时针的。您可以通过两种不同的方式解决问题 -

1) 以正确的顺序提供顶点 -

geom.faces.push(new THREE.Face3(0,1,2));
geom.faces.push(new THREE.Face3(1,3,2));

2) 渲染三角形的两边。

var material = new MeshBasicMaterial({side: THREE.DoubleSide});

【讨论】：