Aframe.io: добавьте границу к ‹кривому изображению› при наведении курсора с помощью

Как добавить границу к изогнутому изображению при выборе?

Следующий код изменит цвет материала изображения, однако вместо этого я бы предпочел добавить рамку или свечение.

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, показывающий приведенное выше


person sidarcy    schedule 24.07.2017    source источник


Ответы (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)
        });

    }
});
person ngokevin    schedule 25.07.2017