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]
- 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!