如何在iPad端通过手指操作Autodesk Viewer实现多对象选择？

问题背景 #

PC端使用Forge Viewer时，按住Ctrl键可进入多选模式并框选矩形区域，但iPad无Ctrl键，需通过自定义按钮或长按操作实现同等功能。

实现方案说明 #

现有代码优化解析 #

你已正确引入Autodesk.BoxSelection扩展，且通过代码在移动端加载扩展后显示工具栏按钮，这是实现iPad端框选功能的核心步骤，以下是代码的详细说明：

Autodesk.Viewing.Initializer(options, () => {
    const config3d = {
        extensions: [
            "Autodesk.DocumentBrowser",
            "Autodesk.BoxSelection", // 引入官方框选扩展
        ],
    };
    const viewer = new Autodesk.Viewing.GuiViewer3D(
        document.getElementById("forgeViewer"),
        config3d
    );

    // 仅在移动端加载框选扩展后显示工具栏触发按钮
    if (Autodesk.Viewing.isMobileDevice()) {
        viewer.addEventListener(
            Autodesk.Viewing.EXTENSION_LOADED_EVENT,
            (event) => {
                if (event.extensionId === "Autodesk.BoxSelection") {
                    let ext = viewer.getExtension(event.extensionId);
                    ext.addToolbarButton(true); // 显示按钮，点击后直接进入框选模式
                }
            }
        );
    }

    viewer.start();
    this.viewer = viewer;
    const documentId = "urn:" + urn;
    Autodesk.Viewing.Document.load(
        documentId,
        this.onDocumentLoadSuccess.bind(this),
        this.onDocumentLoadFailure.bind(this)
    );
});

• 点击工具栏新增的框选按钮后，iPad端用户可直接拖动屏幕绘制矩形框，完成模型元素的多选，效果与PC端按住Ctrl框选一致。

可选：长按触发框选模式 #

若希望通过长按屏幕触发框选，可添加以下触摸事件监听逻辑：

let touchTimeout;
// 监听触摸开始事件，设置超时判断长按
viewer.container.addEventListener('touchstart', (e) => {
    touchTimeout = setTimeout(() => {
        const boxExt = viewer.getExtension("Autodesk.BoxSelection");
        if (boxExt) {
            boxExt.activate(); // 激活框选模式
        }
    }, 500); // 长按500ms触发，可按需调整时长
});

// 触摸结束时清除超时，避免误触发
viewer.container.addEventListener('touchend', () => {
    clearTimeout(touchTimeout);
});

功能验证 #

• iPad端加载模型后，工具栏将出现框选按钮，点击后即可拖动屏幕完成框选多选；
• 若添加了长按逻辑，长按屏幕指定时长后自动进入框选模式，拖动结束即可完成选择。

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