3D引擎制作的突破：从零构建WebGL 3D引擎（第七部分）——加载.obj模型与顶点法线计算

前端

2023-11-03 21:56:19

加载.obj模型并计算顶点法线，让3D模型栩栩如生

前言

在上一篇文章中，我们已经搭建了3D引擎的基础渲染流程。现在，让我们更进一步，探索如何加载.obj模型并计算顶点法线。这些技术将使我们在WebGL 3D引擎中加载和渲染复杂的3D模型。

加载.obj模型

.obj文件是一种常见的3D模型文件格式，因为它易于解析和加载到引擎中。.obj文件通常包含以下信息：

头部信息：文件格式信息和模型名称
顶点信息：模型中所有顶点的坐标
纹理信息：模型中所有纹理的名称和路径
面信息：模型中所有面的索引

我们可以使用JavaScript的FileReader对象来加载.obj文件。

const fileReader = new FileReader();
fileReader.onload = function() {
  const objData = fileReader.result;
  // 解析objData，并将其转换为模型数据
};
fileReader.readAsText(file);

计算顶点法线

顶点法线是一种数据，用于表示模型表面法线的方向。它通过计算模型中每个面的法线，并将其分配给与该面相连的顶点来计算。顶点法线的计算步骤如下：

对于每个面，计算法线。
对于每个顶点，计算与该顶点相连的所有面的法线。
归一化这些法线向量，得到顶点法线。

function calculateVertexNormals(modelData) {
  // 计算每个面的法线
  for (let i = 0; i < modelData.faces.length; i++) {
    const face = modelData.faces[i];
    const v1 = modelData.vertices[face[0] - 1];
    const v2 = modelData.vertices[face[1] - 1];
    const v3 = modelData.vertices[face[2] - 1];
    const faceNormal = calculateFaceNormal(v1, v2, v3);
    modelData.faceNormals.push(faceNormal);
  }

  // 计算每个顶点的法线
  for (let i = 0; i < modelData.vertices.length; i++) {
    const vertex = modelData.vertices[i];
    const vertexNormal = new THREE.Vector3();
    for (let j = 0; j < modelData.faces.length; j++) {
      const face = modelData.faces[j];
      if (face[0] - 1 === i || face[1] - 1 === i || face[2] - 1 === i) {
        vertexNormal.add(modelData.faceNormals[j]);
      }
    }
    vertexNormal.normalize();
    modelData.vertexNormals.push(vertexNormal);
  }

  return modelData;
}

渲染模型

有了加载.obj模型和计算顶点法线的能力，我们就可以将模型渲染到画布上了。

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(modelData.vertices, 3));
geometry.setAttribute('normal', new THREE.BufferAttribute(modelData.vertexNormals, 3));
const material = new THREE.MeshPhongMaterial({
  color: 0xff0000
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);