A-フレームホバーアニメーション（mouseleave、MouseEnterイベント）の

Question

私は他のオブジェクトに対してアクションをトリガー 'の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> 

これはhoverboxのミックスインである：

<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'イベントはトリガされず、他の時間は球だけがマウス中心を登録しません。

誰でもこの作業を行う方法を知っていますか？

は完全なコードについてはこちらをご覧ください：

Answer 1

このhttp://vr.dco.rocks/は、フレームマスターブランチhttps://github.com/aframevr/aframe/commit/e4900e16ea9228af39d2a4fef6798393e79bd82aに固定し、まだコード中のいくつかのねじれがありますが。

A-Frame 0.2.0は信頼性の高い場合があります。