javascript - 在 ReactVR 中创建 2D 场景

Question

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

Answer 1

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

虚拟现实

您通常不希望永久覆盖或随用户移动的组件。除非非常仔细地设计和正确实施，否则这往往会破坏沉浸感。您仍然可以使用内置的 、 和 组件来渲染 2D 元素Text，Image但是View您必须对交互很聪明。这种方法的一个常见替代方案是每当用户朝特定方向看时（例如，当看地面时），在菜单/HUD 中淡入淡出。

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

在 WEB 和移动设备上

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

链接的示例显示了如何使用纯 React、html、css 等在 2D 中实现您需要的东西。在这种情况下，它呈现一个带有文本的简单叠加层，但您可以使用它来实现持久叠加层、菜单或其他任何东西您认为在 2D 中而不是在 360 度场景中更好地使用 UI。