Different Click/Event Listener in a 3d Model

Hi,

We are trying to do some highlighting in our model (it is a building).
We have a 3D building and what we would like to achieve is to click the different level/unit/apartment, it should be highlighted. For example, the highlight can be: available as green, sold as red or some similar functionalities.

As you may know that uploading every level/unit individually is not a proper solution for the building that have many units/floors. Possible to have different click/event listeners in single 3D model? or any possible suggestion or solution?

Please look at
https://drive.google.com/drive/folders/1PePlCkkfpuJ5HarslN3zD-EdEOy94n2f?usp=sharing
images for the sample.

Thank you

@Mugen87
Do not ignore me bro :wink:

This formulation is a bit problematic since three.js does not provide the possibility to register event listeners at 3D models. I guess you are talking about raycasting.

Raycasting happens against 3D objects and potentially recursively (meaning descendant objects are tested as well). If you model a 3D building as a single large mesh, there is no way to select individual components like windows or doors. If you split up the model, this might indeed impact performance because too many draw calls are generated.

Unfortunately, I’m not aware of an easy solution that provides both performance and flexibility. One possible approach is to render the building differently by having for each reusable component (doors, windows etc.) an instance of THREE.InstancedMesh. This would make it possible to interact with different instances and also highlight them (by setting an instance color). However the composition of the entire 3D model (the building) gets more complex.

I don’t. But keep in mind that I’m not the only community member answering questions. If you don’t get feedback, your question is probably too broad and unspecific. So instead of pinging people, consider to improve the quality/structure of your question.

2 Likes

Hi,

Many thanks for the reply and descriptions.

Tbh I saw you are replying everywhere and most active one in Three JS community, that is why I chose you :slightly_smiling_face:.

Thank you