I'm currently working on a 3D art gallery using Three.js and PointerLockControls for navigation.
My goal is to have the artwork on the gallery walls clickable, triggering a pop-up window with additional information. However, it seems that PointerLockControls restrict clicking and mouse interaction beyond looking around.
Is there a way to enable clicking and display the mouse cursor while still utilizing PointerLockControls?
I've tried adding event listeners for clicks but without success. The console.log function doesn't even output any messages when attached to the artwork element.
The artwork renders correctly, yet the desired pop-up remains elusive. Below is the code snippet related to this issue:
Snippet of the code :
let art2Texture = new THREE.TextureLoader().load('img/art/2.png');
const art2Geometry = new THREE.PlaneBufferGeometry(8, 8);
const art2Material = new THREE.MeshBasicMaterial({
map: art2Texture
});
const art2 = new THREE.Mesh(art2Geometry, art2Material);
art2.position.z = -49.9;
art2.position.y = 3.5;
art2.userData = {
name: 'Artwork 2',
description: 'This is the description of Artwork 2',
link: 'https://here-goes-the-link',
};
art2.addEventListener('click', () => {
console.log('Artwork 2 clicked!');
const popup = document.createElement('div');
popup.className = 'popup';
const title = document.createElement('h2');
title.textContent = art2.userData.name;
const description = document.createElement('p');
description.textContent = art2.userData.description;
const link = document.createElement('a');
link.href = art2.userData.link;
link.target = '_blank';
link.textContent = 'View on OpenSea';
popup.appendChild(title);
popup.appendChild(description);
popup.appendChild(link);
document.body.appendChild(popup);
});
// CSS for the pop-up
const popupCSS = `
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 2px solid black;
padding: 16px;
width: 300px;
text-align: center;
z-index: 1;
}
.popup h2 {
margin-top: 0;
}
.popup a {
display: block;
margin-top: 16px;
}
`;
const popupStyle = document.createElement('style');
popupStyle.textContent = popupCSS;
document.head.appendChild(popupStyle);
scene.add(art2);