three.js兰伯特材质颜色未显示

Question

我用自己的顶点和索引创建了一个箭头，然后将lambert材质和材质颜色设置为红色。但是在渲染时我看不到材质颜色，只有黑色。

然而，如果我将材质设置为基础材质，就可以看到颜色。

arrowMesh = new THREE.Mesh(
    arrowGeometry,
    new THREE.MeshLambertMaterial({ color : 'red', side: THREE.DoubleSide })
);
arrowMesh.position.set(-10,5,95);
arrowMesh.rotation.x = -1.0;

arrowMesh.rotation.z = -0.2;
scene.add(arrowMesh);

three.js r64

- user_2738046

---

如果几何体是THREE.CubeGeometry，那么颜色是否显示为红色？ - WestLangley

几何图形不是THREE.CubeGeometry，而是THREE.Geometry。 - user_2738046

它没有起作用。仍然是黑色的，我的箭头形状也断了。 - user_2738046

我在场景中有两个定向光。 - user_2738046

@kocyigityunus：很高兴看到你解决了自己的问题。请将解决方案发布为答案并标记为已接受。 - Amal Murali

Answer 1

首先，当使用THREE.LambertMaterial时，你需要在场景中添加一些光源。

如果你的场景中已经有光源，并且你通过创建顶点和面来创建几何体，则问题很可能在于你的面法线被设置为Vector3( 0, 0, 0 );

计算并设置你的面法线，它们应该会被正确渲染。

因此，对于单个三角形，它看起来像这样:

var geometry = new THREE.Geometry();
geometry.vertices = [ a, b, c ];

var face = new THREE.Face3( 0, 1, 2 );

face.normal = new THREE.Vector3().crossVectors(
    new THREE.Vector3().subVectors( b, a ),
    new THREE.Vector3().subVectors( c, b )
).normalize();

var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({color: 0xff0000, side: 2, shading: THREE.FlatShading}));

你可以使用几何方法来计算它们，而不是手动计算：

geometry.computeFaceNormals();
geometry.computeVertexNormals();

- Wilt

Answer 2

我在自己的电脑上也遇到了同样的问题，发现PointLight是罪魁祸首。将“distance”设置为零（或将其保留默认值）会完全关闭灯光。显式地将距离设置为一个较大的数字可以打开灯光，然后所有我的Lambert材料都正常显示。

因此，不要使用：

pointLight = new THREE.PointLight(0xFFFFFF);

我使用了

pointLight = new THREE.PointLight(0xFFFFFF, 1, 100000);

问题已经解决。据我目前所知，这个问题仅限于PointLight，并且是机器相关的（GPU或GPU驱动程序，不确定具体是哪一个）。但是，只要在其中投入足够大的数字，就可以避免这个问题。

- neilw

---

不应该发生这种情况。你使用的 three.js 版本是哪个？ - WestLangley

如果您可以按照您所描述的方式展示出一个three.js的bug，它会很有帮助，如果您能够报告它。请参阅指南中的“如何报告错误”。 - WestLangley

我下周会尝试这样做。顺便说一句，我注意到即使是 MeshLambertMaterial 文档页面顶部的演示对我来说也是黑色的。 - neilw

是的。在我的机器上是黑色的。 - neilw

我也在几台安装了v71的Windows机器上看到过这种情况。一直在尝试调试Lambert Shader，等我有时间时可以提供规格和更多细节。 - baseten

Answer 3

我是这样解决我的问题的。

var ground_texture = THREE.ImageUtils.loadTexture('images/grass.png', {}, function() {
    renderer.render(scene,camera);
});
ground_material = Physijs.createMaterial(
    new THREE.MeshLambertMaterial({map : ground_texture}),
    .9, // high friction
    .9 // low friction
);

我在这个网站上找到了这个解决方案。

- user_2738046

---

这怎么回答原问题了？ - PowerAktar