顔に色を追加するには？

Question

私が作成した図形に色を追加するtryint。私は形に顔を追加しようとしましたが、間違っているか、やり方がわかりません。この例のフィドルはhttp://jsfiddle.net/gbLohvu8/です。

私はこのthree.jsページの例が、didntの仕事に従っています

var material = new THREE.MeshStandardMaterial({ color : 0x00cc00 }); 

//create a triangular geometry 
var geometry = new THREE.Geometry(); 
geometry.vertices.push(new THREE.Vector3(-50, -50, 0)); 
geometry.vertices.push(new THREE.Vector3( 50, -50, 0)); 
geometry.vertices.push(new THREE.Vector3( 50, 50, 0)); 

//create a new face using vertices 0, 1, 2 
var normal = new THREE.Vector3(0, 1, 0); //optional 
var color = new THREE.Color(0xffaa00); //optional 
var materialIndex = 0; //optional 
var face = new THREE.Face3(0, 1, 2, normal, color, materialIndex); 

//add the face to the geometry's faces array 
geometry.faces.push(face); 

geometry.computeFaceNormals(); 
geometry.computeVertexNormals(); 

scene.add(new THREE.Mesh(geometry, material)); 

Answer 1

、不規則なボックスや図形を行うには良い方法は、形状関数を使用しています。ここでは、図形を使用している例を更新しています：http://jsfiddle.net/gbLohvu8/2/

公式ドキュメントを使用した例。詳細情報 Here.

var heartShape = new THREE.Shape(); 

heartShape.moveTo(25, 25); 
heartShape.bezierCurveTo(25, 25, 20, 0, 0, 0); 
heartShape.bezierCurveTo(30, 0, 30, 35,30,35); 
heartShape.bezierCurveTo(30, 55, 10, 77, 25, 95); 
heartShape.bezierCurveTo(60, 77, 80, 55, 80, 35); 
heartShape.bezierCurveTo(80, 35, 80, 0, 50, 0); 
heartShape.bezierCurveTo(35, 0, 25, 25, 25, 25); 

var extrudeSettings = 
{ amount: 8, bevelEnabled: true, bevelSegments: 2, 
steps: 2, bevelSize: 1, bevelThickness: 1 }; 

var geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings); 

var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial()); 

Answer 2

あなたがラインの外にオブジェクトを構築しています。面が固いオブジェクトを作成する場合は、this exampleのように、組み込みプリミティブのうちの1つをBoxGeometryのように使用します。興味がある人のため

var geometry = new THREE.BoxBufferGeometry(200, 200, 200); 
var material = new THREE.MeshBasicMaterial({ map: texture }); 
mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh);