使用three.js的基本2D彩色三角形

Question

我在使用Three.js创建简单的2D场景时遇到问题。我想在彩色三角形上创建一个2D视图。我无法使三角形变色（例如红色）。我相信我需要以下内容：

• THREE.OrthographicCamera
• 简单三角形 - ＆gt;即THREE.Geometry（）用红色着色

我不想要任何阴影，只需要在正交场景中使用简单的红色2D三角形。欢迎提出如何制作它的任何建议。

Answer 1

如果要使用基础Geometry类，则需要将所有自己的顶点添加到场景中。你可以像这样使用Vertex类

var geometry = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);   // Vector3 used to specify position
var v2 = new THREE.Vector3(1,0,0);
var v3 = new THREE.Vector3(0,1,0);   // 2d = all vertices in the same plane.. z = 0

// add new geometry based on the specified positions
geometry.vertices.push(v1);
geometry.vertices.push(v2);
geometry.vertices.push(v3);

然后我们需要从顶点构造一个面，你按照它们被推到上面的顺序传入顶点的索引。

[编辑]：正如mrdoob指出的那样，你还需要以逆时针顺序添加它们。

这是我小提琴的问题。您可以查看 fixed demo here 。

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

最后创建一个材质并将其与几何图形组合以创建网格。即使对于2D我也相信你需要创建一个网格才能显示它。

var redMat = new THREE.MeshBasicMaterial({color: 0xff0000});
var triangle = new THREE.Mesh(geometry, redMat);
scene.add(triangle)                               // added at the origin