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

Question

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

threejs 有什么我没见过的功能可以帮到我吗？

Answer 1

有一个新的（实验性的）Web API 可以实现此功能。它被称为 WebXR DOM Overlays Module。

根据 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 按钮略有不同。