如何在three.js中制作自定义三角形 [英] How to make a custom triangle in three.js

问题描述

我正在尝试在 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();

这是它呈现的内容

推荐答案

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

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

这篇关于如何在three.js中制作自定义三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！