THREE.js 三角形是黑色的答案

【问题标题】：THREE.js Triangle is BlackTHREE.js 三角形是黑色的
【发布时间】：2013-11-08 23:27:51
【问题描述】：

所以我使用 THREE.JS 并创建了一个三角形。但即使我给了它颜色：0xFF0000，它在屏幕上显示为黑色。

这是我的脚本：

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

}

希望你能找到我犯的错误。我敢肯定这只是一件非常愚蠢的事情。

【问题讨论】：

对我来说很好。 JSFiddle：jsfiddle.net/ProgramFOX/cKu42
好吧，这很奇怪。在我的浏览器中，它显示为黑色。但是，是的。在 JSFiddle 上它是红色的...
您使用的是哪个浏览器？你使用的是最新版本的 Three.js 吗？对我来说，Fiddle 在 Firefox、Chrome、Opera 和 Safari 中运行良好（在 IE 中不行，因为 IE 不支持 WebGL）。
我正在使用最新版本的 Three.js 和 Chrome。显示三角形，但仅以黑色显示。在具有相同代码的 JSFiddle 上，它显示为红色。
试着把你的脚本放在window.onload事件中，就像在小提琴中一样。

标签： javascript colors three.js geometry

【解决方案1】：

派对迟到了……但对于所有追随我的人。这里的问题是使用的材料类型

改变

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

到

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

它会显示为红色

【讨论】：

【解决方案2】：

即使我已经为这个问题苦苦挣扎了一段时间。如果您使用 Lambert 材质，我的解决方案是在场景中添加环境光。

只需添加：

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

【讨论】：

【解决方案3】：

尝试在几何对象上添加computeFaceNormals 调用：

geometry.computeFaceNormals();

*来自 https://stackoverflow.com/a/49226898/2154075

【讨论】：

现在工作。这就是我所缺少的。为什么 IvanM 没有得到任何支持？