MeshNormalMaterial 不适用于three.js 自定义几何图形:几何图形呈现为黑色 [英] MeshNormalMaterial not working on a three.js custom geometry: the geometry renders as black
问题描述
我试图通过声明其向量和面来使用three.js手动构建一个立方体;我可以使用下面的代码来做到这一点,但是,材料似乎没有按预期工作,而是立方体呈现为纯黑色.
I am trying to construct a cube manually using three.js by declaring its vectors and faces; I am able to do it using the code below, however, the material does not seem to be working as expected, instead the cube is rendering in a solid black color.
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3( -1, 1, 0.1 ),
v2 = new THREE.Vector3( 1, 1, 0.1 ),
v3 = new THREE.Vector3( 1, -1, 0.1 ),
v4 = new THREE.Vector3( -1, -1, 0.1 ),
v5 = new THREE.Vector3( -1, 1, 2 ),
v6 = new THREE.Vector3( 1, 1, 2 ),
v7 = new THREE.Vector3( 1, -1, 2 ),
v8 = new THREE.Vector3( -1, -1, 2 );
geom.vertices.push(v1,v2,v3,v4,v5,v6,v7,v8);
geom.faces.push(
new THREE.Face3(0,1,3),
new THREE.Face3(1,2,3),
new THREE.Face3(4,5,7),
new THREE.Face3(5,6,7),
new THREE.Face3(1,4,5),
new THREE.Face3(0,1,4),
new THREE.Face3(2,3,7),
new THREE.Face3(2,6,7),
new THREE.Face3(0,3,7),
new THREE.Face3(0,4,7),
new THREE.Face3(1,2,5),
new THREE.Face3(2,5,6)
);
var mat = new THREE.MeshNormalMaterial();
mat.side = THREE.DoubleSide;
var cube = new THREE.Mesh( geom, mat);
scene.add(cube);
如果我使用下面的代码正常渲染多维数据集,则多维数据集会按预期渲染.
If I render the cube normally, using the code that follows, the cube renders as expected.
cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2), new THREE.MeshNormalMaterial());
scene.add(cube);
推荐答案
您尚未指定顶点法线.对于一些快速的事情,计算面法线,如下所示:
You haven't specified vertex normals. For something quick, compute face normals, like so:
geom.computeFaceNormals();
但是您应该学习如何在自定义几何体中设置顶点法线.
but you should learn how to set vertex normals in your custom geometry.
此外,面缠绕顺序"应该是逆时针的.你并没有一直这样做.
Also, face "winding order" should be counter-clockwise. You are not consistently doing that.
如果你正确定义了面,你可以删除side = THREE.DoubleSide
.
If you define faces correctly, you can remove side = THREE.DoubleSide
.
three.js r.90
three.js r.90
这篇关于MeshNormalMaterial 不适用于three.js 自定义几何图形:几何图形呈现为黑色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!