三.js 朗伯材质颜色不显示答案

【问题标题】：three.js lambert material color not showing三.js 朗伯材质颜色不显示
【发布时间】：2020-02-02 16:08:44
【问题描述】：

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

但是，如果我将材料设置为基本材料，我可以看到颜色。

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

三个.js r64

【问题讨论】：

如果几何为THREE.CubeGeometry，颜色是否显示为红色？
几何不是 THREE.CubeGeometry 它是 THREE.Geometry。
请将您的arrowGeometry 替换为THREE.CubeGeometry 并回答我原来的问题。
它没有用。仍然是黑色的，我的箭头形状坏了。
@kocyigityunus：很高兴看到您解决了自己的问题。请将解决方案作为答案发布并标记为accepted。

标签： javascript three.js

【解决方案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();

【讨论】：

【解决方案2】：

我在我的机器上遇到了同样的问题，发现 PointLight 是罪魁祸首。将“距离”设置为零（或将其保留为默认值）会导致灯完全关闭。将距离显式设置为较大的数字会打开灯，然后我的所有 Lambert 材质都正常显示。

所以，而不是

pointLight = new THREE.PointLight(0xFFFFFF);

我用过

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

一切都解决了。据我所知，这个问题仅限于 PointLight，并且与机器有关（GPU 或 GPU 驱动程序，不确定到底是哪个）。但是很容易将大量数字放入其中并避免问题。

【讨论】：

这不应该发生。你用的是哪个版本的three.js？
我相信是版本 71。
如果您可以演示如您所描述的三个.js 错误，如果您报告它会很有帮助。请参阅guidelines 中的“如何报告错误”。
我会在下周尝试这样做。顺便说一句，我会注意到，即使 MeshLambertMaterial 文档页面顶部的演示对我来说也是黑色的。
是的。在我的机器上是黑色的。

【解决方案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
);

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

【讨论】：

如何回答原始问题？