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>。