How to make a custom triangle in three.js

问题

Hi i'm trying to make a custom triangle in Three.js. The code below renders the wireframe of my triangle but not anything else. So if i turn wireframe off it turns invisible. How can i make this render a coloured triangle?

    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

回答1:

Ok figured it out... In case anyone has the same problem - The camera was looking at the wrong side of my mesh. This adjustment will make it render both sides

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

来源：https://stackoverflow.com/questions/37046897/how-to-make-a-custom-triangle-in-three-js

标签

three.js