2016-05-05 1 views
0

Salut, j'essaie de créer un triangle personnalisé dans Three.js. Le code ci-dessous rend le fil de fer de mon triangle mais rien d'autre. Donc, si je désactive le wireframe, il devient invisible. Comment puis-je rendre ce rendu un triangle couleur?Comment faire un triangle personnalisé dans trois.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

Répondre

0

Ok figured it out ... Dans le cas où quelqu'un a le même problème - La caméra regardait le mauvais côté de mon filet. Ce réglage permet de rendre les deux côtés

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

La face avant est déterminée par l'ordre d'enroulement des sommets. Vous devez spécifier vos sommets dans le sens anti-horaire. Vous n'aurez alors plus à utiliser de matériel recto-verso. – WestLangley