Javascript WebVR使用aframe.io覆盖曲线图像

当前，当我聚焦于曲线图像时，我会改变其颜色

相反，我想用一个图标覆盖它，比如一个播放图标

我怎样才能做到这一点？代码如下：

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>

---

据我所知，如果要使材质成为当前视频帧+播放图标，则需要动态创建由播放图标+当前视频帧解析图像组成的纹理

但我认为这太难了，我建议采取一种变通办法：
创建一个实体，由曲面图像和平面上的播放图标组成：

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

我更改比例，因为更改可见性有时会妨碍我的光线投射器，但您可以使用

比例

、

可见

，甚至

不透明度

属性来执行此操作。如果你想让它看起来像是重叠的，可以使用另一个靠近视频的

，而不是一个平面

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

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);
    });  
  }
});