Aframe.io：使用鼠标悬停在<a-curvedimage>上添加边框

Question

选择后如何为曲线图像添加边框？

以下代码会更改图片的素材颜色，但我更喜欢添加边框或发光。

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

    }
});

这是显示上述

的JSBIN

Answer 1

在你的背后创建一个略大的<a-curvedimage>，但不要给它一个图像纹理src，只提供一个纯色，也许可以切换不透明度/可见度。

AFRAME.registerComponent('selectable', {

    init: function () {
        var el = this.el;
        var backgroundEl = el.sceneEl.querySelector('#backgroundEl');
        this.el.addEventListener('mouseenter', function (evt) {
            backgroundEl.setAttribute('visible', true);

        });
        this.el.addEventListener('mouseleave', function (evt) {
            backgroundEl.setAttribute('visible', false)
        });

    }
});