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

【问题标题】：Basic 2D colored triangle using three.js使用 three.js 的基本 2D 彩色三角形
【发布时间】：2017-02-02 01:36:52
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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

【讨论】：

编辑：感谢 mrdoob，我被告知不再支持 THREE.Vertex。顶点只是作为它们的向量位置被推送。
感谢您的回复。我做的基本相同，但我只看到黑色。我一定做错了什么。你看到它是红色的吗？
嗯，你似乎是对的。我刚刚设置了这个jsfiddle here，我也没有得到颜色。不知道出了什么问题。也许 mrdoob 可以就可能出现的问题给出另一个答案。如果您取消注释该行以便创建一个 CubeGeometry ，那么它可以很好地呈现。
记得在CCW 中构造多边形。 new THREE.Face3(0, 2, 1) 而不是 new THREE.Face3(0, 1, 2)。
Demo 又坏了。介意修复它并改用 WebGLRenderer 吗？（快得多）