Three.js 从坐标、索引和材料创建一个有效的网格

Question

我有包含coordinates、indices和material的数组的数据，我想在

Mesh

中表示为

Three.js

。

我有一个有效的

Scene

，我在其中定义了

AmbientLight

和

DirectionalLight

。 当我使用简单的

BoxGeometry

时，我可以看到一个红色的立方体，有阴影，完全没问题：

const geometry = new BoxGeometry(1, 1, 1);
const material = CompilePhongMaterial({ r: 255, g: 0, b: 0, a: 255 });
const boxMesh = new Mesh(geometry, material);
boxMesh.position.set(5, 0, 0);
boxMesh.receiveShadow = true;
scene.add(boxMesh);

当我尝试使用数据构建自己的

Mesh

时，我得到了一个完全“黑化”的

Mesh

。

Scene

中的几何图形看起来有效，但

Material

显示为黑色：

const geometry = new BufferGeometry();
geometry.computeVertexNormals();

const positionAttribute = new Float32BufferAttribute(data.coordinates, 3);
const indexAttribute = new Uint16BufferAttribute(data.indices, 1);
const material = CompilePhongMaterial({ r: 255, g: 0, b: 0, a: 255 });

geometry.setAttribute("position", positionAttribute);
geometry.setIndex(indexAttribute);

let newMesh = new Mesh(geometry, material);
newMesh.rotation.x = -Math.PI / 2;
newMesh.castShadow = true;
newMesh.receiveShadow = true;

scene.add(newMesh);

CompilePhongMaterial

函数是一个简单的

Material

构建器：

const CompilePhongMaterial = (materialColor) => {
const meshColor = new Color(materialColor.r / 255, materialColor.g / 255, materialColor.b / 255);

const newMaterial = new MeshPhongMaterial({
  color: meshColor,
  side: DoubleSide,
});

  return newMaterial;
};

我已经尝试研究

Objects

的

BoxGeometry

Mesh

以及我自己构建的

Mesh

，并且在材料方面它们具有完全相同的属性，即构建的颜色

 Mesh

被安慰为 red，但它在场景中显示为 black。

有什么调试方法吗？

Answer 1

const geometry = new BufferGeometry();
geometry.computeVertexNormals();

执行此操作时，几何体为空，无法计算法线。

尝试这样做：

const geometry = new BufferGeometry();

const positionAttribute = new Float32BufferAttribute(data.coordinates, 3);
const indexAttribute = new Uint16BufferAttribute(data.indices, 1);
const material = CompilePhongMaterial({ r: 255, g: 0, b: 0, a: 255 });

geometry.setAttribute("position", positionAttribute);
geometry.setIndex(indexAttribute);
geometry.computeVertexNormals(); // move the line here