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