A-Frame 相对论组件请求答案

【问题标题】：A-Frame Relativity Component RequestA-Frame 相对论组件请求
【发布时间】：2021-05-18 08:49:08
【问题描述】：

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

<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/functions/relativetoprop-setter/。

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

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

【问题讨论】：

也许从用例UI that is relative to the tracking in an augmented reality experience, but if the user moves away from the tracking, the UI goes to the screen 开始，并用你尝试过的代码来展示代码，这样可以更有效地帮助人们提供帮助和建议解决方案。给猫剥皮的方法总是不止一种。祝你好运。

标签： javascript entity augmented-reality aframe virtual-reality

【解决方案1】：

约束的概念在物理库中很常见，最近通过这样的项目在 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

【讨论】：

我正在寻找的并不是物理学特有的，但我很感激这些信息。我会研究 react-spring，也许它可以作为指导，这样我就可以自己制作组件了。

【解决方案2】：

您可以使用此 A-Frame 组件来实现此功能。

https://github.com/diarmidmackenzie/screen-display#blend-transforms

代替这种语法：

<a-entity id="entity5" relative = "#entity1 #entity4" relativeWeight = "0.5 0.5">
</a-entity>

...组件使用以下语法：

<a-entity id="entity5" blend-transforms="objectA:#entity1;
                                         objectB:#entity4;
                                         percentage: 50">
</a-entity>

基本上，这正是这里所要求的。

对于 AR，当您想要将对象移入/移出屏幕时，可以与 screen-display 组件（在同一个 repo 中）结合使用，该组件提供了在屏幕上定位对象的简单语法。

【讨论】：