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

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

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

<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> （而不是平面）放置在视频附近。