DOM 叠加

单目屏幕的 AR 会话可使用普通 HTML 和 CSS 界面，DOM Overlay 允许其覆盖 AR 视图。

启动会话前，先指定叠加层根元素：

app.xr.domOverlay.root = element;
app.xr.start(camera, pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);

支持

检查是否支持：

if (app.xr.domOverlay.supported) {
    // DOM Overlay is supported
}

app.xr.on('start', () => {
    if (app.xr.domOverlay.available) {
        // DOM Overlay is available
    }
});

事件

DOM 元素交互和普通 HTML 一致，但应用输入源的 select 仍可能触发。要避免穿透，可拦截事件：

const buttons = app.xr.domOverlay.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('beforexrselect', (evt) => {
        evt.preventDefault();
    });
}