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

时间:2013-12-21 20:04:33

标签: javascript three.js 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

3 个答案:

答案 0 :(得分:8)

首先,使用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();

答案 1 :(得分:2)

我在我的机器上遇到了同样的问题,发现PointLight是罪魁祸首。设置"距离"为零(或保持默认值)导致灯完全关闭。明确地将距离设置为大量的灯光,然后我的所有Lambert材料都正常显示。

所以,而不是

pointLight = new THREE.PointLight(0xFFFFFF);

我用过

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

一切都得到了修复。据我所知,到目前为止,这个问题仅限于PointLight,并且与机器有关(GPU或GPU驱动程序,不确定究竟是哪个)。但它很容易在那里投入大量数字并避免问题。

答案 2 :(得分:0)

我解决了这个问题。

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

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