如何在Three.js中像使用BoxGeometry一样使用.obj文件？

当然可以实现！其实OBJ模型加载完成后，本质上和用BoxGeometry创建的Mesh对象是同一类东西，操作逻辑完全互通，下面一步步给你讲怎么搞：

1. 先搞定OBJ文件的加载 #

首先你需要用到Three.js的OBJLoader（如果是较新的版本，可能需要单独引入这个加载器模块）。加载完成后，OBJ文件会被解析成Object3D或者Mesh对象，直接就能拿来用。

举个简单的加载示例：

// 引入OBJLoader（根据你的项目环境调整，比如ES模块或者CDN引入）
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

// 创建加载器实例
const loader = new OBJLoader();

// 加载你的OBJ文件
loader.load(
  './your-model.obj',
  // 加载成功后的回调
  function (object) {
    // 这里的object就是加载好的OBJ模型，接下来你就能像操作普通Mesh一样处理它了
    console.log('模型加载完成', object);
    // 先把它添加到场景里看看效果
    scene.add(object);
  },
  // 加载进度回调（可选）
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  // 加载错误回调（可选）
  function (error) {
    console.log('加载出错了', error);
  }
);

2. 给OBJ模型添加/替换材质 #

很多OBJ文件本身不带材质（或者材质信息不全），这时候你可以像给BoxGeometry的Mesh加材质一样，给OBJ模型的子网格添加材质：

情况一：给整个OBJ模型统一加材质 #

如果OBJ模型是单个Mesh（或者你想统一用一种材质），可以直接遍历它的子元素，替换材质：

loader.load('./your-model.obj', function (object) {
  // 创建你想要的材质，比如标准材质
  const material = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5 });
  
  // 遍历模型的所有子网格，替换材质
  object.traverse(function (child) {
    if (child.isMesh) {
      child.material = material;
      // 如果需要的话，还可以开启顶点颜色或者其他属性
      child.geometry.computeVertexNormals(); // 确保法线正确，光照正常
    }
  });
  
  scene.add(object);
});

情况二：给不同子网格加不同材质 #

如果OBJ模型是由多个部分组成的，你可以针对每个子Mesh单独设置材质，比如：

loader.load('./your-model.obj', function (object) {
  const material1 = new THREE.MeshLambertMaterial({ color: 0xff0000 });
  const material2 = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
  
  object.traverse(function (child) {
    if (child.isMesh) {
      // 根据子网格的名字来分配材质（前提是你知道OBJ里的子网格命名）
      if (child.name === 'Part1') {
        child.material = material1;
      } else if (child.name === 'Part2') {
        child.material = material2;
      }
    }
  });
  
  scene.add(object);
});

3. 和BoxGeometry的Mesh一样操作模型 #

加载并设置好材质后，你对这个OBJ模型的操作就和用new THREE.Mesh(new THREE.BoxGeometry(), material)创建的对象完全一样了：

• 调整位置、旋转、缩放：

object.position.set(0, 1, 0);
object.rotation.y = Math.PI / 4;
object.scale.set(2, 2, 2);

• 添加到场景、移除场景：

scene.add(object);
// 之后想移除的话
scene.remove(object);

• 甚至可以修改它的几何体属性（比如顶点位置、UV坐标），就像操作BoxGeometry一样：

object.traverse(function (child) {
  if (child.isMesh) {
    // 比如修改第一个顶点的位置
    child.geometry.attributes.position.array[0] += 0.5;
    child.geometry.attributes.position.needsUpdate = true; // 告诉Three.js属性更新了
  }
});

小提示 #

• 如果你的OBJ文件带MTL材质文件，还可以用MTLLoader配合OBJLoader一起加载，直接还原OBJ里的材质设置，这样就不用手动加材质了。
• 加载大的OBJ文件时，建议开启压缩或者用Draco压缩格式优化加载速度，提升性能。

内容的提问来源于stack exchange，提问作者EPICBRONY