three.jsでカスタム三角形を作る方法

Question

こんにちは私はThree.jsでカスタム三角形を作ろうとしています。下のコードは私の三角形のワイヤフレームをレンダリングしますが、他のものはレンダリングしません。ワイヤーフレームをオフにすると、目に見えなくなります。このレンダリングをどのようにして色の三角形にすることができますか？

var scene = new THREE.Scene(); 
    var WIDTH = $("#three1").width(); 
    var HEIGHT = $("#three1").width(); 
    var camera = new THREE.PerspectiveCamera(75, WIDTH/HEIGHT, 1, 10000); 
    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(WIDTH, HEIGHT); 
    renderer.setClearColor(new THREE.Color(1.0, 1.0, 1.0)); 
    $("#three1").append(renderer.domElement); 
    var light = new THREE.PointLight(0xff0000, 1, 100); 
    light.position.set(0, 0, 200); 
    scene.add(light); 

    /* 
     Relevant stuff here. 
    */ 
    var material = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true}); 
    var geom = new THREE.Geometry(); 
    var v1 = new THREE.Vector3(0,0,0); 
    var v2 = new THREE.Vector3(0,500,0); 
    var v3 = new THREE.Vector3(500,500,0); 
    geom.vertices.push(v1); 
    geom.vertices.push(v2); 
    geom.vertices.push(v3); 
    geom.faces.push(new THREE.Face3(0, 1, 2)); 
    var object = new THREE.Mesh(geom, material); 
    scene.add(object); 

    camera.position.z = 1000; 
    function render() { 
     requestAnimationFrame(render); 
     renderer.render(scene, camera); 
    }; 
    render(); 

Here's what it renders

Answer 1

OK]をクリックして、それを考え出した...場合は誰もが同じ問題を抱えている - カメラは私のメッシュの間違った側を見ていました。この調整により、両面がレンダリングされます

var material = new THREE.MeshBasicMaterial({ 
    color: 0xff0000, 
    side: THREE.DoubleSide 
});