three.js를 사용하는 기본 2D 색 삼각형

Question

Three.js로 간단한 2D 장면을 만드는 데 문제가 있습니다. 색깔이있는 삼각형에 2D보기를 만들고 싶습니다. 삼각형을 채색 할 수 없습니다 (예 : 빨간색). - 내가 어떤 그림자를 원하지 않는다> 즉 THREE.Geometry() 빨간색

에 색, 단지

• THREE.OrthographicCamera
• 간단한 삼각형 : 나는 내가 그것에 대해 다음이 필요합니다 믿고 정사영 장면에서 간단한 빨간색 2D 삼각형. 그것을 만드는 방법에 대한 모든 제안은 환영합니다.

Answer 1

기본 기하학 클래스를 사용하려는 경우 모든 고유 정점을 장면에 추가해야합니다. 당신은 [... 우리가 다음 우리의 정점에서 얼굴을 구성하기 위해, 당신은 위에 밀어 순서대로 정점의 인덱스를 전달해야합니다 그래서

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

처럼 정점 클래스와

을 수행 할 수 있습니다 EDIT] : 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