问题描述
我正在使用 A-frame 和 Super Hands。
我有一个容器实体,我在初始化时(以编程方式)使用组件向它附加了 9 个 a-Box。如果我为这些 a-Box 设置了 'draggable' 和 'grabbable' 属性(即使它们触发了 'loaded' 事件),它们将无法拖动,它不起作用。
但是,如果我将这些实体手动编写为 HTML,它就可以工作。 好像我遗漏了一些与生命周期挂钩相关的东西?
任何帮助将不胜感激。
代码笔: https://codepen.io/amichai-dani/pen/GRNWQLp
<html>
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/super-hands@^3.0.1/dist/super-hands.min.js"></script>
<script>
AFRAME.registerComponent('add-Boxes',{
init: function () {
const container = this.el;
let count = 1;
let positionX = -0.5;
let positionY = 2;
while (count <= 9) {
let elBox = document.createElement('a-Box');
elBox.setAttribute('position',positionX + ' ' + positionY + ' -0.8');
elBox.setAttribute('color','red');
elBox.setAttribute('scale','0.3 0.3 0.05');
elBox.setAttribute('Box-number',count);
elBox.setAttribute('after-Box-loaded','');
container.appendChild(elBox);
positionX += 0.5;
if (count % 3 === 0) {
positionX = -0.5;
positionY -= 0.4;
}
count++;
}
}
})
AFRAME.registerComponent('after-Box-loaded',{
init: function () {
this.el.setAttribute('grabbable','')
this.el.setAttribute('stretchable','')
this.el.setAttribute('draggable','')
this.el.setAttribute('dropppable','')
}
})
</script>
</head>
<body>
<a-scene>
<a-entity>
<a-camera></a-camera>
<a-entity sphere-collider="objects: a-Box" super-hands hand-controls="hand: left"></a-entity>
<a-entity sphere-collider="objects: a-Box" super-hands hand-controls="hand: right"></a-entity>
</a-entity>
<a-entity add-Boxes></a-entity>
</a-scene>
</body>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)