使用three.js的基本2D彩色三角形 [英] Basic 2D colored triangle using three.js

问题描述

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

I am having issues creating a simple 2D scene with Three.js. I would like to create a 2D view on a colored triangle. I am not able to make the triangle colored (eg. red). I believe that I will need the following for that:

• THREE.OrthographicCamera
• 简单三角形->即THREE.Geometry()涂成红色

我不希望有任何阴影，只是在正交场景中只是一个简单的红色2D三角形.欢迎提出任何建议，以使其成为现实.

I do not want any shadows, just a simple red 2D triangle in the orthographic scene.Any suggestions on how to make it are welcome.

推荐答案

如果要使用基本Geometry类，则需要将所有自己的顶点添加到场景中.您可以像这样用Vertex类完成此操作

If you are going to use the base Geometry class you need to add all your own vertices to the scene. You can do this with the Vertex class like so

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);

然后我们需要根据我们的顶点构造一个面，您将顶点的索引按其推入上方的顺序传递.

We then need to construct a face from our vertices, you pass in the indices of the vertices in the order they are pushed above..

:正如mrdoob指出的那样，您还需要按逆时针顺序添加它们.

: As mrdoob points out below, you also need to add them in counter clock-wise order.

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

This was the problem with my fiddle. You can view the fixed demo here.

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

最后创建一种材质，并将其与您的几何体组合在一起以创建网格.即使对于2D，我相信您也需要创建一个网格才能显示它.

Finally create a material and combine it with your geometry to create a Mesh. Even for 2D I believe you are required to create a mesh in order to display this.

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

这篇关于使用three.js的基本2D彩色三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！