Question

我在A型框中有一个移动框，

<a-entity id="myboxes">
   <a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="-5 -1.3 -15" rotation="0 0 0" scale="2 0.5 3">
      <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation>
    </a-box>   
</a-entity>

我想把它放到一个新的位置，如果它到达了动画结束的最终位置，或者我单击了它。我这样尝试过：

document.getElementById("mybox").addEventListener('componentchanged', function(){
     if((document.getElementById("mybox").getAttribute('position').x >-1) && (document.getElementById("mybox").getAttribute('position').y >-1) && (document.getElementById("mybox").getAttribute('position').z >4.8)){
        newBox();
     }
});

function newBox() {
        var X = 0;
        var Z = 0;

        var val = Math.floor((Math.random() * 50) + 20);
        var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        X = val * plusOrMinus;
        val = Math.floor((Math.random() * 50) + 20);
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        Z = val * plusOrMinus;
        console.log("X: " + X + " Z: " + Z);
        document.getElementById('mybox').setAttribute('position', X + " -1.3 " + Z);
}

但这没有用，所以我这样尝试：

document.getElementById("mybox").addEventListener('componentchanged', function(){
     if((document.getElementById("mybox").getAttribute('position').x >-1) && (document.getElementById("mybox").getAttribute('position').y >-1) && (document.getElementById("mybox").getAttribute('position').z >4.8)){
        document.getElementById("myboxes").innerHTML = "";
        newBox();
     }
});

function newBox() {
        var X = 0;
        var Z = 0;

        var val = Math.floor((Math.random() * 50) + 20);
        var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        X = val * plusOrMinus;
        val = Math.floor((Math.random() * 50) + 20);
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        Z = val * plusOrMinus;
        console.log("X: " + X + " Z: " + Z);
        document.getElementById("myboxes").innerHTML = '<a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="' + X + ' -1.3 ' + Z + '" rotation="0 0 0" scale="2 0.5 3"> <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation></a-box>';
}

但是以这种方式，该框仅出现两次，一次是在页面加载和HTML运行时出现，另一次是在执行EventListener时出现。但是为什么它不运行第三，第四等时间呢？我该如何解决这个问题？

Answer 1

如果您每次创建事件侦听器时都将其添加到框中，那么它将起作用：

document.getElementById("myboxes").innerHTML = (....)
document.getElementById("mybox").addEventListener('componentchanged', listenerfnc)

就像我一样here。

但是IMO，您应该采取不同的方法。

1）如果需要更改位置，请更改位置，而不是覆盖整个innerHTML：

var newPosition = new THREE.Vector3( randomX, randomY, randomZ );
mybox.setAttribute("position", newPosition)

并重新启动动画：

a）设置动画开始的开始事件：

<a-animation begin="start">

b）发出

animationReference.emit("start")

c）（可选）查看Ngo Kevins动画组件
它应该很快替换<a-animation>，所以我建议您习惯一下。

2）使用document.createElement("a-box)创建HTML元素，而不是在innerHTML中进行更改

var box = document.createElement("a-box")
box.setAttribute("position", newPos)
box.addEventListener("event", callback)
sceneReference.appendChild(box)

Answer 2

使用处理程序将代码提取到函数中

function rebindBox() {
    document.getElementById("mybox").addEventListener('componentchanged', function(){
        if((document.getElementById("mybox").getAttribute('position').x >-1) && 
           (document.getElementById("mybox").getAttribute('position').y >-1) && 
           (document.getElementById("mybox").getAttribute('position').z >4.8)) {
            document.getElementById("myboxes").innerHTML = "";
            newBox();
        }
    });
}

并在重新创建后调用它：

document.getElementById("myboxes").innerHTML = '<a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="' + X + ' -1.3 ' + Z + '" rotation="0 0 0" scale="2 0.5 3"> <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation></a-box>';
rebindBox();

如果页面加载后是由js创建的，如何在HTML上运行eventlistener？

2 个答案: