他のオブジェクトでアクションをトリガーする「mouseenter」オブジェクトがあるシーンがあります。
<a-entity class="hover" position="1.3 1.5 0" rotation="0 90 0">
<a-entity mixin="hoverbox"></a-entity>
<a-obj-model src="#profile1" scale="0.01 0.01 0.01" material="height: 512; width: 512" mixin="skybox">
<a-animation attribute="rotation" dur="10000" easing="linear" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
<a-animation attribute="position" dur="300" to="0 0 -.5" begin="hoveron"></a-animation>
<a-animation attribute="position" dur="300" to="0 0 0" begin="hoveroff"></a-animation>
</a-obj-model>
</a-entity>
これはホバーボックス ミックスインです。
<a-mixin id="hoverbox" class="hoverbox" material="color:#fff; opacity:.5;" geometry="primitive: sphere; radius: .45;"></a-mixin>
そして、それに添付されたこのJavaScript：
var sceneEl = document.querySelector('a-scene');
var hoverEls = sceneEl.querySelectorAll('.hover');
for(var i = 0; i < hoverEls.length; i++) {
var hoverEl = hoverEls[i];
hoverElBox = hoverEl.querySelector('a-entity');
hoverElBox.addEventListener('mouseenter', function(evt) {
// evt.stopPropagation();
console.log('mouseenter', evt);
evt.target.nextElementSibling.emit('hoveron');
}, true);
hoverElBox.addEventListener('mouseleave', function(evt) {
// evt.stopPropagation();
console.log('mouseleave', evt.target.parentNode);
evt.target.nextElementSibling.emit('hoveroff');
}, true);
}
これにより、ユーザーが「ホバーボックス」球体をホバーすると、要素の再配置がトリガーされます。また、カーソルがホバーボックスから離れたときに、通常の位置に戻るようにトリガーします。
カーソル要素は次のようになります。
<a-entity cursor="fuse:true, fuseTimeout: 50;" raycaster="far: 10; objects: .hoverbox" />
したがって、他のオブジェクトでイベントを発行しません。
ただし、動作はちょっとバギーです。カーソルが球体から離れたときに「hoveroff」イベントがトリガーされない場合や、球体がマウス入力を登録しない場合があります。
これを機能させる方法を知っている人はいますか？
完全なコードについては、こちらをご覧ください: http://vr.dco.rocks/