Why raycaster is not finding the buttons in my scene

Questions
, ,
1

I am trying to create some buttons that can be clicked to perform a function. However, it registers the clicks but does not find an element in the scene with the button’s name. Please see the code and an image of the scene below

window.addEventListener('click', (e) => {
	const scene = SCREEN.getScene();
	const camera = SCREEN.getCamera();

	if (!scene || !camera) {
		console.warn("Scene or camera not yet initialized.");
		return;
	}

	mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
	mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;

	raycaster.setFromCamera(mouse, camera);
	const intersects = raycaster.intersectObjects(scene.children, true);

	if (intersects.length > 0) {
		const obj = intersects[0].object;
		console.log('Clicked object:', obj.name);

		if (obj.name === 'buttonYes' && buttonYesRef) {
			buttonYesRef.setState('selected');
			console.log('YES selected!');
		} else if (obj.name === 'buttonNo' && buttonNoRef) {
			buttonNoRef.setState('selected');
			console.log('NO selected!');
		}
	}
});

    const buttonYes = new ThreeMeshUI.Block( buttonOptions );
	const buttonNo = new ThreeMeshUI.Block( buttonOptions );
	buttonYes.name = 'buttonYes';
	buttonNo.name= 'buttonNo';
	// Add text to buttons

image
image1096×672 126 KB

3

You must use the Mesh type if you want the raycaster to find your buttons.

and it would be better to make a button from Plane and without using a module

1 Like