如何在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

好的，想通了...万一有人遇到同样的问题- 相机正在看我网格的错误一侧。此调整将使其呈现双面

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