javascript - 使用 A 框架在相机 View 中生成实体，无需嵌套

Question

如何直接在相机 View 中生成实体而不将其嵌套为子节点？

我试图在某些情况下在用户面前生成立方体，即使相机移动到特定的 VR 设备(例如纸板)，这些立方体也保持在其绝对位置。

一个常见的嵌套示例:

<a-camera position="0 1.6 0">
    <a-box position="0 0.5 -1"></a-box> <!-- Unclickable button on cardboard -->
</a-camera>

默认相机 View 的普通按钮示例是:

<a-box position="0 0.5 -1"></a-box> <!-- Clickable button on cardboard-->
<a-camera postion="0 1.6 0"></a-camera>

上面的代码是简化版本，不包含按钮交互，因为它们与问题无关。

Answer 1

如果您想将“屏幕坐标”转换为场景“3D 世界坐标” - Three.js 可以提供帮助:

// x, y are screen coordinates, but rescaled to <-1 : 1>
var position = new THREE.Vector3( x, y, -1 ).unproject( camera );

x,y 的范围必须在 -1 到 1 之间，因此您必须重新调整位置:

x = ((positionOnScreen - screenWidth/2) / screenWidth/2)

就像我一样here (“foo”组件，红色框，尽管我必须沿着计算的方向移动它)。

---

另一方面，如果您正在做UI，那么如果您只创建一个响应式HTML<，您将为自己节省很多麻烦。/strong> 叠加。如果是“VR UI”，则尝试在相机前面创建一个“菜单区域”而不是固定菜单。