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

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

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

<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>放置在视频附近。

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

1 个答案: