Three.jsで基本的な三角形を描く

Question

私はthree.jsを学ぶためにtriyngですが、私のコードは機能しません。

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 1000); 
camera.position.z = 10; 


var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

var geometry = new THREE.Geometry(); 
geometry.vertices= [new THREE.Vector3(2,1,0), new THREE.Vector3(1,3,0), new THREE.Vector3(3,4,0)]; 
geometry.faces = [new THREE.Face3(0,1,2)]; 
var mesh= new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xffff00 })); 
scene.add(mesh); 


renderer.render(scene, camera); 

どこが間違っていますか？

Answer 1

頂点を顔に追加する順序には注意が必要です。順序が時計回りの順序に従うと、サーフェスの法線ベクトルがポイントし、カメラが上から見えるので、三角形は表示されません。注文が反時計回りの場合、ノーマルはカメラを指します。

geometry.faces = [new THREE.Face3(0,1,2)];をgeometry.faces = [new THREE.Face3(1,0,2)];に変更すると動作します。

その他のオプションはside: THREE.DoubleSideと材料を指定することがあるので、顔の両側に適用されます：new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide }

Hereがcodepen取り組んでいます。