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

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

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

我不想有任何阴影,只是正交场景中的一个简单的红色2D三角形,欢迎提出任何建议.

解决方法:

如果要使用基本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

标签：webgl,three-js,javascript
来源： https://codeday.me/bug/20191101/1981928.html