THREE.js三角形是黑色的

所以我使用THREE.JS並創建了一個三角形。但即使我給它的顏色：0xFF0000，它在屏幕上顯示爲黑色。THREE.js三角形是黑色的

這裏是我的腳本：

var camera, scene, renderer; 
var geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 500; 
    scene.add(camera); 

    var geometry = new THREE.Geometry(200,200,200); 
    var v1 = new THREE.Vector3(200,0,0); // Vector3 used to specify position 
    var v2 = new THREE.Vector3(-100,0,0); 
    var v3 = new THREE.Vector3(0,50,0); // 2d = all vertices in the same plane.. z = 0 

    // Push vertices represented by position vectors 
    geometry.vertices.push(v1); 
    geometry.vertices.push(v2); 
    geometry.vertices.push(v3); 

    // Push face, defined with vertices in counter clock-wise order 
    geometry.faces.push(new THREE.Face3(0, 2, 1)); 

    // Create a material and combine with geometry to create our mesh 
    var redMat = new THREE.MeshLambertMaterial({color: 0xFF0000}); 
    var triangle = new THREE.Mesh(geometry, redMat); 
    scene.add(triangle); 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    requestAnimationFrame(animate); 
    render(); 

} 

function render() { 

    renderer.render(scene, camera); 

}

希望你能找到我所犯的錯誤。我相信這只是一件非常愚蠢的事情。

來源

2013-10-29 RenokK

工作正常，我。 JSFiddle：http://jsfiddle.net/ProgramFOX/cKu42/ – ProgramFOX

好的，那很奇怪。在瀏覽器中，它顯示爲黑色。但是，是的。在JSFiddle上它是紅色的...... – RenokK

您正在使用哪種瀏覽器？你使用的是最新版本的Three.js嗎？對我來說，Fiddle在Firefox，Chrome，Opera和Safari中運行良好（不在IE中，因爲IE不支持WebGL）。 – ProgramFOX

派對遲到......但對於所有追隨我的人。這裏的問題是使用

變化

new THREE.MeshLambertMaterial({color: 0xFF0000});

到

new THREE.MeshBasicMaterial({color: 0xFF0000});

材料的類型，它會顯示爲紅色

來源

2014-10-25 01:13:45 user3140515

即使我已經從這個問題掙扎一段時間。對於我來說，解決方案是如果您使用Lambert材料，則爲場景添加環境光線。

只需添加：

var light = new THREE.AmbientLight(0xffffff); 
scene.add(light);

來源

2016-12-05 18:29:37 eklavya

THREE.js三角形是黑色的

回答

相關問題