WebVR 使用 aframe.io 覆盖弯曲图像答案

【问题标题】：WebVR Overlay a curved image using aframe.ioWebVR 使用 aframe.io 覆盖弯曲图像
【发布时间】：2017-06-22 05:19:50
【问题描述】：

目前，当我专注于弯曲图像时，我会更改其颜色。

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

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

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>

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

【问题讨论】：

标签： javascript virtual-reality aframe webvr

【解决方案1】：

据我所知，如果您想让素材成为当前视频帧 + 播放图标，则需要动态创建一个由当前视频帧中的播放图标 + 解析图像组成的纹理。

但我认为这太难了，我建议一个解决方法：
创建一个实体，由您的弯曲图像和平面上的播放图标组成：

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

我更改了比例，因为更改可见性有时会阻碍我的光线投射器，但您可以使用scale、visible 甚至opacity 属性来做到这一点。如果您希望它看起来被覆盖，请使用另一个靠近视频的 <a-curvedimage> 而不是平面。

【讨论】：