如何将Three.js创建的对象纳入Autodesk Forge Viewer模型并实现点击？

一、实现点击交互 #

Forge Viewer默认拾取逻辑仅处理原生模型构件，自定义Three.js overlay对象需要手动监听事件并做命中检测：

1. 在扩展中注册点击事件
   在你的DrawToolExtension的initialize方法里，添加Viewer点击事件监听：

initialize() {
    // 其他初始化代码...
    this.viewer.addEventListener(Autodesk.Viewing.CLICK_EVENT, this._handleCustomMeshClick.bind(this));
}

2. 实现点击检测逻辑
   新增方法检测鼠标是否命中自定义对象：

_handleCustomMeshClick(event) {
    const { clientX, clientY } = event;
    // 屏幕坐标转视口坐标
    const pointer = this.viewer.impl.clientToViewport(clientX, clientY);
    // 复用Viewer内置射线检测器
    const raycaster = this.viewer.impl.raycaster;
    raycaster.setFromCamera(pointer, this.viewer.impl.camera);
    
    // 获取你的Overlay组
    const overlayGroup = this.viewer.impl.getOverlayGroup(DrawToolOverlay);
    // 检测射线与组内对象的交集
    const intersects = raycaster.intersectObjects(overlayGroup.children, true);
    
    if (intersects.length > 0) {
        // 自定义点击逻辑，比如高亮、弹窗
        const clickedMesh = intersects[0].object;
        // 示例：切换对象颜色
        clickedMesh.material.color.setHex(0xff0000);
        console.log('点击自定义对象', clickedMesh);
    }
}

二、让自定义对象融入Viewer模型 #

Overlay对象属于独立图层，不参与模型剖切、测量等操作。要让它和原生模型行为一致，需用Viewer的Fragment API将Three.js对象转为模型片段：

修改你创建对象的代码，替换addOverlay为以下逻辑：

// 原代码：this.viewer.impl.addOverlay(DrawToolOverlay, this.mesh);
// 替换为：
const geometry = this.mesh.geometry;
const material = this.mesh.material;

// 获取模型片段列表（确保模型已加载完成）
const fragList = this.viewer.model.getFragmentList();
// 添加新片段
const fragId = fragList.addFragment(geometry, material);
// 同步Three.js对象的位置、旋转、缩放
fragList.setWorldMatrix(fragId, this.mesh.matrixWorld);

// 更新Viewer场景
this.viewer.impl.sceneUpdated(true);

如果Viewer未加载原生模型，需先创建空模型容器再添加片段，可参考官方空模型创建示例。

三、新手学习方向 #

• 核心概念：重点理解模型结构、Fragment体系、事件系统三个Viewer核心模块
• 官方教程：优先看「添加自定义几何体到Viewer」的分步指南
• API手册：直接查阅Autodesk.Viewing.Viewer3D、Autodesk.Viewing.Private.FragmentList类的方法说明
• 示例库：参考包含自定义对象交互、片段操作的官方示例代码

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