时间戳

首页 > 解决方案 > A-Frame 相对论组件请求

javascript - A-Frame 相对论组件请求

问题描述

在 A-Frame 上，实体相对于其父级。如果您移动父实体，子实体也会移动。那太棒了。但我认为，如果有一种方法可以指定一个实体相对于另一个实体（不一定是它的父实体），那就太好了。甚至要相对于屏幕。这是一个代码片段来说明我的意思：

<a-entity id="entity1" position="0 0 0">
    <a-entity id="entity2" relative = ""></a-entity> <!-- "" or "#entity1" would make it relative to "entity1". This is the way it already works, so the relative component would have "" as the default value -->
    <a-entity id="entity3" relative = "#entity4"></a-entity> <!-- This makes "entity3" relative to "entity4", not "entity1" -->
    <a-entity id="entity5" relative = "#entity1 #entity4" relativeWeight = "0.5 0.5"></a-entity> <!-- This makes "entity5" half influenced by "entity1" and half by "entity4". But it could have other values like "0.8 0.2" or "1 0"(80% affected by entity1 and 20% by entity 4, then 100% affected by entity1 and 0% by entity4) -->
</a-entity>

<a-entity id="entity4" position="0 1 0">
</a-entity>

<a-entity id="entity6" relative="Screen"> <!-- I was thinking of some special values, like "Screen", "TopScreen", "BottomScreen", to make elements be relative to the center of the screen, top, bottom, etc.  -->
</a-entity>

<a-entity id="entity7" relative="#entity5"> <!-- This entity is relative to entity5, which in turn is relative to both entity1 and entity4. In practice, this makes entity7 be indirectly affected by entity1 and entity4 as well because of entity5. -->
</a-entity>

然后，您将能够为 relativeWeight 组件设置动画，以将实体的相对性平滑地过渡到另一个实体。

Unity 有这个：https ://docs.unity3d.com/Manual/Constraints.html

ZapWorks Studio 也有这个：https ://docs.zap.works/studio/scripting/reference/node/functions/relativeto-setter/和https://docs.zap.works/studio/scripting/reference/node/函数/relativetoprop-setter/。

我认为这是一个非常有用的功能。

这方面的一个示例用法是在增强现实体验中拥有一个与跟踪相关的 UI，但如果用户远离跟踪，则 UI 会转到屏幕。

标签： javascriptentityaugmented-realityaframevirtual-reality

解决方案

约束的概念在物理库中很常见，最近通过这样的项目在 2D UI 中很常见：https ://www.react-spring.io/

我还没有看到一个 A-Frame 库来支持这种 UI 弹簧约束的特定用例，但去年我做了一些自己的例子。

显示带有 A-Frame Physics 组件的弹簧约束的基本示例：https ://aframe-ammo-spring.glitch.me/

这是一个使用弹簧约束将剪贴板保持在 VR 用户的 oculus 控制器附近的示例：https ://aframe-signals-clipboard-spring.glitch.me/

这是另一个实验。在桌面模式下，颜色选择器“停靠”到天空。当您进入 VR 模式时，它会与用户的手腕“对接”：https ://glitch.com/edit/#!/aframe-vr-menu-dock它不像我希望的那样工作

您会注意到弹簧约束不适用于 A-Frame 物理库上的弹药驱动程序。它已在此票证中解决但尚未推送到主仓库：https ://github.com/n5ro/aframe-physics-system/issues/171

推荐阅读