360度视频A帧播放暂停

Question

我正在尝试让360视频播放和暂停，不幸的是，当用户单击a-image元素时，我还不知道如何做到这一点，但每次单击浏览器窗口时都会发生这种情况。这是我的代码：

<a-scene>
<a-assets>
<video id="video" loop crossorigin="anonymous" playsinline webkit-playsinline src="video/SphereVideo.mp4">
</video>
</a-assets>
<img id="play" alt="play" src="photos/play.png">
<img id="pause" alt="pause" src="photos/pause.png" >
<a-videosphere rotation="0 -90 0" src="#video"  position="0 0 -1.5" play-pause></a-videosphere>
</a-videosphere>
<a-camera>
<a-image id="videoControls" src="#play" position="0 0 -1.5" scale="0.2 0.2 1" ></a-image>
</a-camera>
</a-scene>

和

AFRAME.registerComponent('play-pause', {
init: function () {
var videoControls=document.querySelector('#videoControls');
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);

},
pause: function () {
window.removeEventListener('click', this.onClick);

},
onClick: function (evt) {
var videoEl = this.el.getAttribute('material').src;
if (!videoEl) { return; }
if(videoControls.getAttribute('src')=='#play'){
videoEl.play();
videoControls.setAttribute('src','#pause');
}
else {
videoEl.pause();
videoControls.setAttribute('src','#play');  
}

}
});

只有当用户点击元素a-image时，我才能纠正窗口的错误并暂停播放？谢谢你抽出时间！

Answer 1

如果您想捕捉图像上的click事件，您需要一个光标，例如，它会将光线从鼠标位置投射到场景中：

<a-scene cursor="rayOrigin: mouse">

有了它，你可以简单地监听元素(a-planes或a-images(并做出相应的反应：

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('play-pause', {
init: function() {
const torus = document.querySelector('a-torus'); // the animated torus
const resumeImg = document.getElementById("resume")
const pauseImg = document.getElementById("pause")
resumeImg.addEventListener('click', () => torus.emit("resume")); // resume the animation
pauseImg.addEventListener('click', () => torus.emit("pause")); // pause the animation
}
});
</script>
<a-scene play-pause cursor="rayOrigin: mouse" raycaster="objects: a-plane">
<a-torus position="0 1.5 -3" scale="0.5 0.5 0.5" color="blue" 
animation="property: rotation; to: 0 360 0; loop: true; dur: 1000; 
easing: linear; resumeEvents: resume; pauseEvents: pause"></a-torus>
<a-plane id="resume" scale="0.5 0.5 0.5" position="-0.5 1 -2" color="green"></a-plane>
<a-plane id="pause" scale="0.5 0.5 0.5" position="0.5 1 -2" color="yellow"></a-plane>
</a-scene>