Three.js Change color of a surface of my BufferGeometry

Hello Everyone,

I am having an Issue related to the color change of a given surface. The source file of my angular component is attached.

The process of the component is that a user can upload a .stp file.
In my API endpoint this is getting transformed and then returned as a .stl

This .stl file I now convert to a mesh and I add it to my scene.

Now with my current config when I move over the mesh and I try to change colors it changes the entire mesh. I have used the approach of groups but that also didn’t work for me. My goal is that a user can select a given surface area and it gets “marked”.

Is this possible or should I move this to my backend ?

Hoping someone can help me.

Thank you and regards from Germany

three-view.component.ts (5.9 KB)

Huh…that’s an interesting question:
FYI: I didn’t download the link above but here is my hypothesis

I’m thinking that if your using a glb format…then the entire model will be effected.
If you use a gltf…then it’s a folder with textures, in which case, when you click on something with one of the textures it will change color…
Like I said before…I didn’t download the link so this might not be helpful at all.

My second guess would be that you need to make a decal so that when you click on something, the only thing that turns colored is the actual place you clicked… there are videos done by SimonDev on YouTube that show you how to do this
Sorry if this wasn’t helpful… feel free to email me with further details at

I have found a solution.
I am using the BufferGeometry and the initial process was to create a single .stl file which I used to create a mesh. I now create a single stl file for the entire object still, but I also create a single .stl for every surface in my .stp file. With this setup I can detect rays on the “Main” mesh and then detect which submesh this reffers to. Based on this submesh I then change the color of the submesh.
So when I create the meshes I have an array of submeshes which makes it really easy to detect which one was clicked on.

I needed to implement the surface detection and sub .stl creation in my API enpoint but now it works perfectly.
Sharing this approach for everyone with the same issue or goal!

@JacksonUptain thank you anyway for the feedback!!!


1 Like
No problem…sorry I wasn’t more useful, however I’m glad you got it working