Custom a-frame component integration

[Mert_Ozcan]

Hey team quick question on how to add a custom a-frame component - I’m trying to tap a box and change its color (should be super simple, but the tapping doesn’t do any color changing). Here is the relevant part body.html:

<a-entity
      id="myObject"
      geometry="primitive: box"
      scale="0.1 0.1 0.1"
      material="color: #FFF"
      change-color-on-tap></a-entity>

and here is the a-frame component, named “change-color-on-tap.js”

const changeColorComponent = {
  schema: {
    colors: {type: 'array', default: ['#FF0000', '#00FF00', '#0000FF']},  // Default colors to cycle through
  },
  init() {
    const {el} = this  // Reference to the entity that this component is attached to
    const {data} = this  // Access to the schema data
    let colorIndex = 0  // Keep track of which color we're on

    el.addEventListener('click', () => {
      // Change the color of the entity
      el.setAttribute('material', 'color', data.colors[colorIndex])

      // Update the color index for the next tap
      colorIndex = (colorIndex + 1) % data.colors.length
    })
  },
}

export {changeColorComponent}

I’m using a-frame 1.5.0
…
if I add this to my app.js like so:

import {changeColorComponent} from './change-color-on-tap'

AFRAME.registerComponent('change-color-on-tap', changeColorComponent)

then I don’t see my image target but only the “myObject” box.

Many many thanks!

[Evan]

Hey Mert!

It seems like this question is more related to A-Frame than to 8th Wall - I’d recommend directing similar questions to the broader A-Frame community in the future (via StackOverflow or the A-Frame developer slack).

As a general debugging tip, I always find it helpful to add a console log inside of click event listeners to check whether the click is actually being picked up by the entity.

At a first glance, it doesn’t seem like the entity is set up for raycasting. Make sure you add the raycaster/cursor components to the camera and add the cantap class to the entity you want to raycast against.