javascript - 在 ReactVR 中创建 2D 场景

Question

我可以在 ReactVR 中创建 2D 场景吗？我的意思是像普通 React 一样在屏幕上显示元素，例如，经典的 Web 菜单将始终显示在屏幕上的同一位置。或者像 3D 游戏中的 HUD 之类的东西。

Answer 1

更多有关您想要实现的目标或您的目标平台的背景信息会有所帮助，但这里有一些指导原则:

VR

您通常不希望有永久的覆盖层或随用户移动的组件。除非经过精心设计和正确实现，否则这往往会破坏沉浸感。您仍然可以使用内置的 Text、Image 和 View 组件渲染 2D 元素，但您必须灵活处理交互。这种方法的一个常见替代方案是每当用户看向特定方向(例如，看向前方)时淡入菜单/HUD。当观察地面时。

无论哪种方式，您都会想看看 VrHeadModel以及它公开的 API，用于查询用户的 Yaw/Pitch/Roll 或如何监听头部旋转事件。

在网络和移动设备上

对于这些平台，您可以使用 DOM Overlay 实现菜单/HUD概念，在 360 度场景之上渲染传统的 2D 表面。

链接的示例展示了如何使用纯 React、html、css 等在 2D 中实现您需要的内容。在本例中，它呈现一个带有文本的简单叠加层，但您可以使用它来实现持久叠加层，菜单或任何您认为在 2D 中而不是在 360 度场景中使用效果更好的 UI。