javascript - Aframe.io : Add border to <a-curvedimage> on mouseover using

Question

选择后如何向弯曲图像添加边框？

以下代码将更改图像的 Material 颜色，但我更愿意添加边框或发光。

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

    }
});