WebVR aframe.ioを使用して曲面画像をオーバーレイする

Question

現在、曲面画像に焦点を合わせると、その色が変わります。

代わりに、アイコン、再生アイコンなどでオーバーレイしたいと思います。

これをどのように達成できますか？コードは以下の通りである：

HTML

<a-curvedimage id="vid1" material="opacity: 0" data-src="vid1.mp4" selectable height="2" radius="5.3" theta-length="32" position="0 2.2 -0" rotation="0 65 0" scale="0.7 0.7 0.7" src="#tile1"> 
</a-curvedimage> 

JS

AFRAME.registerComponent('selectable', { 
    init: function() { 
     var el = this.el; 
     this.el.addEventListener('mouseenter', function (evt) { 
      this.setAttribute('material', 'color', 'blue'); 
     }); 
     this.el.addEventListener('mouseleave', function (evt) { 
      this.setAttribute('material', 'color', ''); 
     }); 
    }); 
} 

Answer 1

私は知っているから、あなたは材料が現在VideoFrameが+のプレイアイコンであることをしたい場合は、現在のビデオフレームから再生アイコン+解析された画像からなるテクスチャを動的に作成する必要があります。

が、私はそれがあまりにも難しいことだと思う、と私は回避策を示唆している：
があなたの湾曲した像と平面上の再生アイコンからなる、エンティティを作成：

<a-entity id="playerwrapper" selectable> 
    <a-curvedimage> 
    </a-curvedimage> 
    <a-plane id="playicon"> 
    </a-plane> 
</a-entity> 

ようにそれらを配置あなたがあなたのアイコンをしたい場所です。そして、JSを使用してあなたの飛行機を変更します。

AFRAME.registerComponent('selectable', { 
init: function() { 
    var el = this.el; 
    this.el.addEventListener('mouseenter', function (evt) { 
     el.children[1].setAttribute('scale', '1 1 1'); 
    }); 
    this.el.addEventListener('mouseleave', function (evt) { 
     el.children[1].setAttribute('scale', '0 0 0); 
    }); 
    } 
}); 

可視性を変更することが時々私のraycasterを妨げるので、私は、スケールを変更、しかし、あなたはscale、visible、あるいはopacity属性を使用してそれを行うことができます。オーバーレイされているように見えるようにするには、プレーヤの代わりに別の<a-curvedimage>をビデオの近くに配置します。