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
});

如何在three.js中创建自定义三角形

1 个答案: