javascript - three.js 兰伯特 Material 颜色不显示

Question

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

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

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

Answer 1

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

如果您的场景中确实有灯光，并且您通过创建顶点和面自己创建了几何体，问题很可能在于您的面法线设置为 Vector3( 0, 0, 0 );

计算并设置您的面部法线，它们应该正确渲染。

所以对于单个三 Angular 形，它看起来像这样:

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