three.js朗伯材料颜色未显示

Question

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

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

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

计算并设置您的面部法线,它们应该正确呈现.

所以对于一个三角形,它看起来像这样:

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