动态应用 Mixin 的问题 - A-FRAME答案

【问题标题】：Issues with applying Mixin dynamically - A-FRAME动态应用 Mixin 的问题 - A-FRAME
【发布时间】：2020-11-11 04:19:14
【问题描述】：

我正在尝试弄清楚如何将 mixins 用作一种状态。

但是我遇到了一个问题，当我有一个已经有 mixin 的元素然后尝试更新该元素的 mixin 值时。它确实更改了 mixin，但不会将旧 mixin 的属性更改为新的 mixin

默认情况下，元素具有makeitblue mixin，但在超时后它会获得makeitred mixin。

但正如您从示例中看到的那样，它确实改变了 mixin，但它并没有改变元素属性（我也得到了很多空属性）。

<head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script>

        AFRAME.registerComponent('test-element', {

            init: function () {

                let element = this.el;

                setTimeout(function(){
                    element.setAttribute('mixin', 'makeitred')
                }, 3000);

            },

        });


    </script>
</head>
<body>
<a-scene>
    <a-assets>
        <a-mixin id="makeitred" position="-2 0.5 -3"  material="color: red"></a-mixin>
        <a-mixin id="makeitblue" position="2 0.5 -3" material="color: blue"></a-mixin>
    </a-assets>
    <a-cylinder test-element mixin="makeitblue"></a-cylinder>
</a-scene>
</body>
</html>

【问题讨论】：

标签： javascript aframe

【解决方案1】：

我建议使用 entities and components 与原语。 Primitives 是一种学习工具，像 mixins 这样更高级的功能测试较少，可能仍然有some bugs

您尝试使用a-cylinder 原语的等效实体/组件扩展来完成的示例：

https://glitch.com/edit/#!/bold-celestial-windshield?path=index.html%3A26%3A20

【讨论】：

对不起，您知道我对这个原语仍然很陌生，只是一个具有预设属性的预制实体，对吗？我也不知道它是如何在实体上工作的，但在 cilinder 上却没有，抱歉：沉思：就像我知道原语只是用来学习使用这些实体一样，但是一旦你理解了它们，你应该只使用几何属性来指定原始权利？ “原语是一种学习工具，像 mixins 这样更高级的功能测试较少，可能仍然存在一些错误”我不明白你的意思，mixins 也是原始的吗？