我正试图弄清楚如何使用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>
我建议使用实体和组件,而不是基元。Primitives是一种学习工具,像Mixin这样的高级功能测试较少,可能仍有一些错误
使用a-cylinder
基元的等效实体/组件扩展尝试实现的示例:
https://glitch.com/edit/#/大胆的天体挡风玻璃?路径=index.html%3A26%3A20