A-Frame: Change an objects color on hover

A-Frame is quite fun to work with, but it takes a while to get into.. As I’m doing a project in A-Frame at the moment, you’ll probably see some more insights on this library on my blog in the next couple of weeks.

Special thanks to Diarmid Mackenzie for helping me out in the A-Frame Slack Channel.

In this case, I’ve used an object file (.obj) and a material file (.mtl) and loaded it in A-Frame using the following code:

<a-asset-item id="arrow" src="/assets/objects/arrow.obj">
<a-asset-item id="arrow-mtl" src="/assets/objects/arrow.mtl">

<a-entity mouse-over class="link" obj-model="obj: #arrow; mtl:#arrow-mtl;"></a-entity>

Now, in order to see the object change it’s color when hovering over it, we need to add an A-Frame component that hooks into the ThreeJS object to then change the material color, as you see below:

AFRAME.registerComponent('mouse-over', {
    init() {
        this.el.addEventListener('model-loaded', () => {
            this.el.addEventListener('mouseenter', this.mouseenter);
            this.el.addEventListener('mouseleave', this.mouseleave);
        })
    },
    mouseenter(evt) {
        const model = evt.target.getObject3D('mesh');
        model.traverse((obj) => {
            if (!obj.material) return
            obj.material.color.setHex(0xFFFFFF)
        })
    },
    mouseleave(evt) {
        const model = evt.target.getObject3D('mesh');
        model.traverse((obj) => {
            if (!obj.material) return
            obj.material.color.setHex(0x333333)
        })
    },
});

That’s it! Light and breezy 🙂

Happy developing!