在Autodesk Forge Viewer中集成ThreeJS TransformControls的交互问题求解

Forge Viewer的独立Overlay场景默认仅负责分层渲染，不会自动接管场景内自定义对象的事件拾取、输入拦截逻辑，因此仅将TransformControls添加到场景中无法触发交互，必须补充以下配置：

核心必须执行的配置步骤 #

• 修正对象挂载方式：viewer.overlays.addMesh 仅支持添加纯Mesh类型对象，TransformControls是包含多个手柄子Mesh的组对象，无法通过该接口正常挂载，需直接将其作为子节点添加到独立场景实例中

  // 替换原有的 viewer.overlays.addMesh(transformControlTx, 'CubeTranformScene') 逻辑
  const overlayScene = viewer.overlays.getScene('CubeTranformScene');
  overlayScene.scene.add(transformControlTx);
  

• 开启场景拾取权限：默认创建的Overlay场景是关闭全局拾取的，需先显式开启场景的拾取能力，再将TransformControls的所有内部手柄对象加入交互白名单，避免对象被Forge默认的拾取逻辑过滤

  overlayScene.setPickable(true);
  // 遍历TransformControls的所有子节点，把可交互的手柄Mesh加入拾取列表
  transformControlTx.traverse(child => {
    if (child.isMesh) {
      overlayScene.addInteractableObject(child);
    }
  });
  

• 解决输入事件抢占问题：Forge Viewer的默认导航逻辑会全局拦截画布的鼠标事件，在交互内置模型时会直接吞掉事件，导致TransformControls的监听无法触发。需在控件交互时临时锁定Forge默认导航，事件结束后恢复

  // 控件被点击触发交互时，锁死默认导航的事件响应
  transformControlTx.addEventListener('mouseDown', () => {
    viewer.setNavigationLock(true);
  });
  // 交互结束后恢复默认导航
  transformControlTx.addEventListener('mouseUp', () => {
    viewer.setNavigationLock(false);
  });
  

• 适配渲染刷新逻辑：独立Overlay场景的渲染是独立于主场景的，原有的重绘回调如果只触发主场景渲染，会导致控件拖动时无法实时刷新状态，需将回调替换为主动触发对应Overlay场景的重绘

  const reRender = () => {
    overlayScene.requestRender();
  };
  transformControlTx.addEventListener('change', reRender);
  

• 校验坐标系一致性：TransformControls挂载的目标立方体，需和控件处于同一个场景坐标系下。如果立方体是主场景内的对象，需提前将立方体的世界坐标转换为独立Overlay场景的局部坐标，否则会出现手柄与目标对象位置错位、射线检测命中点偏移的问题，最终表现为无法正常交互缩放。

常见排查项 #

• 确认TransformControls初始化时传入的canvas参数，和当前Viewer实际渲染使用的canvas实例完全一致，避免因为Viewer内部DOM结构替换导致事件绑定失效
• 检查TransformControls的enabled属性是否为默认的true状态，部分自定义封装逻辑可能会意外将控件设置为禁用
• 确认控件的大小配置与目标立方体的尺寸匹配，手柄尺寸过小会导致射线检测难以命中，表现为点击无响应

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