javascript - 如何在 Three.Js 中添加按钮作为 UI 元素

Question

因此，使用给定示例webxr_ar_hittest中的代码，我将一个对象放在我的房间里。现在我想通过按一下按钮来旋转对象。
我找到了一些关于如何添加 UI 和 HUD 元素的信息，但从未与任何“webxr 全屏”示例结合使用（我不知道如何调用它）。
所以我想要么有一个显示在我渲染场景上的 DOM 元素，要么有一个场景中的按钮。

有没有我没见过的threejs的任何功能可以帮助我？

Answer 1

有一个新的（实验性）Web API 可以完全启用此功能。它被称为WebXR DOM 覆盖模块。

根据Chrome Status Platform，这个功能应该从 Chrome 83 开始默认启用。

相关的现场演示之一在我的 Pixel 上运行良好：

https://klausw.github.io/three.js/examples/webvr_lorenzattractor.html

最相关的代码部分是：

document.body.appendChild( ARButton.createButton( renderer, {
    optionalFeatures: [ 'dom-overlay', 'dom-overlay-for-handheld-ar' ],
    domOverlay: { root: document.body } } )
);

如您所见，现在创建的 AR 按钮略有不同。