Hi everyone, I had my first contacts with Three.js recently and I need some help to do some tests.
At the moment I am trying to create an AR application, where an object is inserted into the real environment using the cell phone’s camera. Initially the object is presented on the screen in blue color, however in the top I want to put three buttons with three different colors, for example blue, red and green, and when touching one of the buttons the object just change its colors.
I created the object and its materials on Blender. One of the faces of the object has a material with a UV texture and the rest of the object has a second material, without textures, just a material with the initial node (created in the Blender cycles). So I’ve created 6 materials, 3 for the textures, one each, and 3 for the colors, one each as well. On Blender I exported this object as .glb with materials and textures.
Now I’m importing this object on Three.js, I already understood how to add this object to the scene and render it so that it appears on the phone’s screen. Inclusive the first materials that came with the object worked normally (coming from .glb), I didn’t create anything about the materials in Three.js, everything is shown in the scene so far comes from the .glb that I exported in blender and just loaded on three.js.
Now I need to create the second part of the application, that is: when I touch the button of one color, the object must change color, as well as the “texture”. And it is here that I need help.
How do I do this?
Do I need three different objects? Or just one object with all 6 materials? How can I do this features on three.js? I need help on Blender and on Three.js.
Can someone give a direction please? Or a link to a video or a good conversation about this theme.
Thanks in advance.