时间戳

首页 > 解决方案 > 动态应用 Mixin 的问题 - A-FRAME

javascript - 动态应用 Mixin 的问题 - A-FRAME

问题描述

我试图弄清楚如何使用 mixins 作为一种状态。

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

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

但正如您从示例中看到的那样，它确实改变了 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>

标签： javascriptaframe

解决方案

我建议使用实体和组件与原语。Primitives 是一种学习工具，像 mixins 这样的高级功能测试较少，可能仍然存在一些错误

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

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

推荐阅读