I am curious if there is a method in three.js that allows users to click on a model (such as an imported gltf file from Blender) and trigger another action upon the click, such as displaying a pop-up box or an image.
I attempted to search for this feature on the official three.js website, but all I found was the raycaster class. However, my understanding is that this only works with objects that have a mesh, which means it only works with models created in three.js itself using geometry properties.
I also came across tutorials utilizing threex.domevents, but I couldn't figure out how to use it with models imported from Blender. When I tried implementing it, my models vanished from the screen.
Is there another solution available? Or is it simply not possible to achieve this functionality?
Your help would be greatly appreciated. Thank you very much.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles/mycss.css" />
</head>
<body>
<script src="three.min.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<script src="threex.domevents.js"></script>
<script>
// JavaScript code here
</script>
</body>
</html>
The car model can be downloaded from:
I am learning how to implement this feature based on tutorials I found on YouTube.