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

Question

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

• 三、正交相机
• 简单的三角形 -> 即 THREE.Geometry() 以红色着色

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

Answer 1

如果要使用基本几何类，则需要将所有自己的顶点添加到场景中。您可以像这样使用 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 在下面指出的那样，您还需要按逆时针顺序添加它们。

这是我的小提琴的问题。您可以在此处查看固定演示。

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