从零开始搭建开源智慧城市项目（二）：模型线框和物理材质

前言

在上一章中，我们通过GLTFLoader将模型数据加载到了场景中。现在，让我们对这些数据进行进一步处理。首先，我们将模型分为三类：建筑（CITY_UNTRIANGULATED）、道路（ROAD）和植被（VEGETATION）。

模型分类

我们可以使用three.js的traverse()方法来遍历场景中的所有对象，并根据其名称对它们进行分类。

const classifyModels = () => {
  scene.traverse((object) => {
    if (object.name.startsWith('CITY_UNTRIANGULATED')) {
      object.category = 'building';
    } else if (object.name.startsWith('ROAD')) {
      object.category = 'road';
    } else {
      object.category = 'vegetation';
    }
  });
};

线框渲染

线框渲染可以帮助我们快速查看模型的结构，而无需渲染纹理。我们可以使用setMaterial()方法将线框材质应用于每个对象。

const setWireframeMaterial = () => {
  const wireframeMaterial = new THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true,
  });

  scene.traverse((object) => {
    if (object.category === 'building') {
      object.material = wireframeMaterial;
    }
  });
};

物理材质

物理材质可以为模型添加逼真的光照和阴影效果。我们可以使用PhysicalMaterial()构造函数创建一个物理材质。

const createPhysicalMaterial = () => {
  const physicalMaterial = new THREE.PhysicalMaterial({
    color: 0xffffff,
    roughness: 0.5,
    metalness: 0.5,
  });

  return physicalMaterial;
};

然后，我们可以将物理材质应用于每个建筑对象。

const setPhysicalMaterial = () => {
  const physicalMaterial = createPhysicalMaterial();

  scene.traverse((object) => {
    if (object.category === 'building') {
      object.material = physicalMaterial;
    }
  });
};

示例代码

// 模型分类
classifyModels();

// 线框渲染
setWireframeMaterial();

// 物理材质
setPhysicalMaterial();

通过这些步骤，我们完成了模型的分类、线框渲染和物理材质应用。这些技术将增强我们开源智慧城市项目中虚拟环境的视觉保真度和真实感。