A-Frame 超级手:不适用于附加到场景的实体

问题描述

我正在使用 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 (将#修改为@)