Making clickable areas on a 3D model in Three js - three.js

Question

I'm creating a webpage for a new beer brand for gamers.
So far, I've created a spinning beer can in Three js. I found a GLTF model, made a texture, added lighting and reflections - all the simple basics - using Drei and Fiber.
What I would love to achieve right now, is to use the beer can as navigation for the page. So if you mouse over the logo on the face of the can, the logo should change color to indicate you can click it, and if you click it, something happens (let's say a modal opens). You can then spin the can around and click different parts of it (some text, an icon, the barcode, etc) to get different content.
I'm not sure how I would achieve this or approach this. I've had a couple of different thoughts:
Map up clickable areas on the model somehow. This didn't seem possible.
Make all the different clickable parts separate objects in the model. This seems like a ton of work, and I'd have to spend a lot of time learning Blender. The can model is pretty simple (used a free one from sketchfab.com for now).
Map up html-elements onto the can using css3drenderer. But I didn't find a way to bend it onto the can well, and it didn't seem like I could use the model for that.
Use many textures with alphas on top of each other on the can and somehow look for transparency on click for each layer. Didn't find any way to do this.
Any ideas on what techniques to use to achieve this? I've done game dev in Unity, but I'm new to Three js and WebGL, so it's really hard to know where to start searching.

Answer 1

The common approach is to use raycasting to detect interaction with a model.
What you're really looking for is a hyperlink. Although you can't manually apply a hyperlink to three.js, you can use THREE.Raycaster() as a loophole.
Once you determine that the model was clicked on, you just do the following to redirect the user:
window.location.href = 'https://example.com/'
That should do it~
EDIT:
Here is an example, based on my reply to your comment:
if(intersects.length > 0){
if(intersects[0] == model.children[2]){ //Second child
window.location.href = 'https://example.com/'
}
}