Issue with Plane Click Interaction in A-Frame Component

[Zouhair_Mudakka]

Hello,

I’m trying to implement a clickable plane in my 8th Wall project that opens a URL when clicked. While the component initializes correctly, the click interaction isn’t working as expected.

Here’s my setup:

• Component implementation (components.js):

[code]const planeLinkComponent = {

schema: {

url: {type: ‘string’, default: ‘https://facebook.com’}

},

init: function() {

console.log(‘Plane link component initialized’);

const {object3D} = this.el;

object3D.visible = true;

this.el.setAttribute(‘material’, {

color: ‘#FFFFFF’,

shader: ‘standard’,

transparent: true,

opacity: 0.9

});

const textEntity = document.createElement(‘a-entity’);

textEntity.setAttribute(‘text’, {

value: ‘Click to visit website’,

align: ‘center’,

width: 2,

color: ‘#000000’

});

textEntity.setAttribute(‘position’, ‘0 0 0.01’);

textEntity.setAttribute(‘rotation’, ‘90 0 0’);

this.el.appendChild(textEntity);

this.el.setAttribute(‘class’, ‘cantap clickable’);

const handleClick = () => {

console.log(‘Click detected’);

try {

window.open(this.data.url, ‘blank’);

} catch (error) {

console.error(‘Failed to open URL:’, error);

}

};

this.el.addEventListener(‘click’, handleClick);

}

};[/code]

• Scene setup in body.html:

[code]<a-scene

xrextras-gesture-detector

xrextras-loading

xrextras-runtime-error

cursor-raycast

renderer=“colorManagement: true”

xrweb=“allowedDevices: any”>

<a-camera

id=“camera”

position=“0 1.75 4”

raycaster=“objects: .clickable; far: 100; interval: 100”

cursor=“fuse: false; rayOrigin: mouse”>

<a-plane

id=“plane1”

class=“clickable”

position=“0 0 0”

rotation=“-90 0 0”

width=“1”

height=“1”

material=“shader: standard; color: #FFFFFF; transparent: true; opacity: 0.9”

plane-link=“url: https://facebook.com”>

[/code]

3. Component registration in app.js:

[code]window.addEventListener(‘load’, () => {

if (window.AFRAME) {

console.log(‘AFRAME found, registering component’)

AFRAME.registerComponent(‘plane-link’, planeLinkComponent)

}

})

window.addEventListener(‘xrloaded’, () => {

console.log(‘XR8 is ready’)

})[/code]

Current Behavior:

[list]

The plane and text render correctly

The component initializes (confirmed via console logs)

Click/tap events are not being detected

Getting AudioContext warning in console

[/list]

What I’ve Tried:

[list]

Added cantap and clickable classes

Implemented both click and touch event listeners

Verified raycaster configuration

Simplified material settings

[/list]

Questions:

[list=1]

Is there a specific way to handle click events in 8th Wall that I’m missing?

Should I be using a different approach for URL opening in WebXR?

Is the AudioContext warning related to the interaction issues?

[/list]

Any guidance would be greatly appreciated!

[rama_rambudiarto]

this.el.setAttribute(‘class’, ‘cantap clickable’);

i think you must
this.el.setAttribute(‘class’,‘.clickable’)
or
this.el.setAttribute(‘class’,‘clickable’)

[Zouhair_Mudakka]

[quote]Thanks for the suggestion! However, the current syntax ‘cantap clickable’ is correct for adding multiple classes. The dot prefix (.) is only used in CSS selectors and raycaster queries, not when setting class names.

We need both classes:

• cantap for 8th Wall’s touch handling

• clickable for the raycaster

Using setAttribute(‘class’,‘.clickable’) would actually create an invalid class name with a dot in it.[/quote]

[GeorgeButler]

Here’s a sample project that creates a clickable plane: Call to Action Link | 8th Wall Playground | 8th Wall

[Zouhair_Mudakka]

I already cloned it and it didn’t work. My initial code was based on it, then I tried to do some modifications. But couldn’t get the planes to become clickable.

[GeorgeButler]

Strange, I just tested the sample project on my device and it worked. When you cloned it what did you change?