如何在web-ifc-viewer中获取THREE内部组件？

web-ifc-viewer 基于 THREE.js 封装，它直接暴露了核心的 THREE.js 实例，你可以通过以下方式访问并使用这些组件来修改相机位置、添加场景对象等操作：

1. 核心 THREE 对象的访问路径 #

当你创建并初始化 Viewer 实例后，可以通过 viewer.three 直接获取核心 THREE.js 组件：

• 场景（Scene）：viewer.three.scene
• 相机（Camera）：viewer.three.camera（默认是 PerspectiveCamera）
• 渲染器（Renderer）：viewer.three.renderer
• 轨道控制器（OrbitControls）：viewer.three.controls

2. 修改相机位置与视角 #

你可以直接操作相机的位置属性，同时如果需要保持控制器的同步，要更新控制器的目标点：

// 假设你已经初始化了viewer实例
// 设置相机位置
viewer.three.camera.position.set(10, 10, 10);
// 更新控制器目标（让相机看向场景中心）
viewer.three.controls.target.set(0, 0, 0);
// 强制更新控制器状态
viewer.three.controls.update();
// 触发渲染
viewer.render();

3. 向场景添加自定义 THREE 对象 #

直接将 THREE.js 创建的对象添加到 viewer.three.scene 即可，示例如下：

// 创建一个THREE立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
// 设置立方体位置
cube.position.set(5, 5, 5);
// 添加到viewer的场景中
viewer.three.scene.add(cube);
// 触发渲染更新
viewer.render();

4. 注意事项 #

• 确保在 viewer初始化完成 后再访问这些属性，比如在 IFCLoader 的加载完成回调中，或者监听 viewer 的 ready 事件：

  viewer.on('ready', () => {
    // 在这里访问THREE组件
  });
  

• 如果你需要修改相机的控制逻辑，可以直接操作 viewer.three.controls，比如禁用旋转、设置相机移动范围等。

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