如何在Three.js中仅加载3D房屋模型的指定局部区域？

当然可以实现！针对你想要加载大型房屋模型特定555立方体区域的需求，我从直接修改模型和更高效的加载策略两个方向给你梳理方案：

一、直接在Three.js中截断模型 #

如果已经加载了完整模型，你可以通过顶点筛选或CSG运算来保留目标区域的部分：

1. 简易顶点筛选法（快速实现） #

这种方法会遍历模型的所有三角面，只保留三个顶点都在目标立方体内的面，适合对精度要求不高的场景：

// 假设model是已加载完成的Object3D实例
// 定义目标区域：中心在(0,0,0)，边长5的立方体（可根据需求调整坐标）
const clipBounds = {
  min: new THREE.Vector3(-2.5, -2.5, -2.5),
  max: new THREE.Vector3(2.5, 2.5, 2.5)
};

// 遍历模型所有子网格
model.traverse(child => {
  if (!child.isMesh) return;

  const geo = child.geometry;
  // 先删除原有法线、UV等属性，后续重新计算
  geo.deleteAttribute('normal');
  geo.deleteAttribute('uv');

  const positions = geo.attributes.position.array;
  const newPositions = [];
  const newIndices = [];
  let index = 0;

  // 遍历每个三角面（每9个元素对应3个顶点）
  for (let i = 0; i < positions.length; i += 9) {
    // 获取三个顶点坐标
    const v1 = new THREE.Vector3(positions[i], positions[i+1], positions[i+2]);
    const v2 = new THREE.Vector3(positions[i+3], positions[i+4], positions[i+5]);
    const v3 = new THREE.Vector3(positions[i+6], positions[i+7], positions[i+8]);

    // 判断顶点是否在目标区域内
    const isV1In = checkInBounds(v1, clipBounds);
    const isV2In = checkInBounds(v2, clipBounds);
    const isV3In = checkInBounds(v3, clipBounds);

    // 仅保留三个顶点都在区域内的面（避免残缺面）
    if (isV1In && isV2In && isV3In) {
      newPositions.push(...positions.slice(i, i+9));
      newIndices.push(index, index+1, index+2);
      index += 3;
    }
  }

  // 更新几何体数据
  geo.setAttribute('position', new THREE.Float32BufferAttribute(newPositions, 3));
  geo.setIndex(newIndices);
  geo.computeVertexNormals(); // 重新计算法线保证光照正常
  geo.computeBoundingBox();
  geo.computeBoundingSphere();
});

// 辅助函数：判断顶点是否在立方体内
function checkInBounds(v, bounds) {
  return v.x >= bounds.min.x && v.x <= bounds.max.x &&
         v.y >= bounds.min.y && v.y <= bounds.max.y &&
         v.z >= bounds.min.z && v.z <= bounds.max.z;
}

2. CSG精确裁剪（适合复杂场景） #

如果需要精确裁剪穿过目标区域的面（比如模型的墙体刚好被立方体切开），可以使用Three.js的CSG扩展库three-bvh-csg。它能通过布尔运算（交集）直接提取模型和目标立方体重叠的部分：

import { CSG } from 'three-bvh-csg';

// 1. 创建用于裁剪的立方体
const clipBox = new THREE.Mesh(
  new THREE.BoxGeometry(5,5,5).translate(0,0,0), // 中心位置和边长对应你的需求
  new THREE.MeshBasicMaterial()
);

// 2. 对模型执行交集运算，只保留重叠部分
const csgResult = CSG.intersect(model, clipBox);

// 3. 替换原模型为裁剪后的结果
scene.remove(model);
scene.add(csgResult);

二、更高效的局部加载方案 #

直接加载完整模型再裁剪对超大型模型来说可能存在内存压力，更推荐这些前置优化方案：

• 模型预分割：在Blender等建模软件中，将大型房屋按照555的网格切成多个独立的模型块，导出后在Three.js中只加载目标区域对应的块。这是性能最优的方案，完全避免加载冗余数据。
• 空间索引查询：加载完整模型后，用Octree（八叉树）构建空间索引，然后查询目标区域内的网格/顶点，只渲染这些部分。Three.js有官方维护的扩展工具支持Octree构建与查询，适合需要动态切换加载区域的漫游场景。
• 流式加载格式：使用支持按需加载的模型格式（如带空间分区的glTF扩展、USDZ），导出时配置分区信息，加载时仅请求目标区域的模型数据，无需加载完整模型。

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