如何在Autodesk Forge问题示例中实现遮挡效果？

要让问题标记被3D模型遮挡，核心是把原本叠加在Canvas上层的DOM标记，转移到WebGL场景中作为3D元素，这样就能遵循深度测试规则，实现遮挡效果。以下是具体实现方案：

方案1：自定义3D标记元素 #

放弃使用HTML DOM元素做标记，直接在Viewer的3D场景中创建Mesh或Sprite对象，这类元素会受WebGL深度测试影响，自然被模型遮挡。

创建Mesh标记示例 #

function add3DMarker(viewer, worldPos) {
    // 创建球体作为标记（可替换为自定义几何体）
    const geo = new THREE.SphereGeometry(6, 16, 16);
    const mat = new THREE.MeshBasicMaterial({ color: 0xff3333 });
    const marker = new THREE.Mesh(geo, mat);
    
    // 转换世界坐标到模型空间（抵消模型全局偏移）
    const modelOffset = viewer.model.getData().globalOffset;
    marker.position.set(
        worldPos.x - modelOffset.x,
        worldPos.y - modelOffset.y,
        worldPos.z - modelOffset.z
    );
    
    // 标记为自定义元素，方便后续交互识别
    marker.userData.isMarker = true;
    
    // 添加到Viewer场景并更新
    viewer.impl.scene.add(marker);
    viewer.impl.sceneUpdated(true);
}

创建Sprite标记示例（适合图标类标记） #

如果需要用图标作为标记，使用THREE.Sprite时需手动开启深度测试：

function addSpriteMarker(viewer, worldPos, iconUrl) {
    const texture = new THREE.TextureLoader().load(iconUrl);
    const mat = new THREE.SpriteMaterial({
        map: texture,
        transparent: true,
        depthTest: true, // 关键：开启深度测试，让图标被模型遮挡
        depthWrite: false // 可选：避免标记影响模型的深度缓存
    });
    const sprite = new THREE.Sprite(mat);
    
    // 调整图标大小
    sprite.scale.set(40, 40, 1);
    
    // 坐标转换
    const modelOffset = viewer.model.getData().globalOffset;
    sprite.position.set(
        worldPos.x - modelOffset.x,
        worldPos.y - modelOffset.y,
        worldPos.z - modelOffset.z
    );
    
    sprite.userData.isMarker = true;
    viewer.impl.scene.add(sprite);
    viewer.impl.sceneUpdated(true);
}

方案2：使用Forge内置Markups扩展的3D模式 #

Forge的MarkupsCore扩展支持3D空间标记，开启后标记会自动融入3D场景，默认具备遮挡效果：

async function enable3DMarkups(viewer) {
    // 加载并启用Markups扩展
    const markupsExt = await viewer.loadExtension('Autodesk.Viewing.MarkupsCore');
    markupsExt.enterEditMode();
    
    // 此时创建的标记（如箭头、文本）会处于3D空间中，自动被模型遮挡
}

可选：添加标记交互 #

如果需要点击标记触发事件，可通过Viewer的场景相交检测实现：

viewer.canvas.addEventListener('click', (e) => {
    const screenPoint = { x: e.clientX, y: e.clientY };
    // 检测场景中被点击的元素
    const hits = viewer.impl.intersectScene(screenPoint, true);
    
    hits.forEach(hit => {
        if (hit.object.userData.isMarker) {
            // 处理标记点击逻辑
            console.log('标记被点击');
        }
    });
});

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