I’m kind of new with three.js so I’d appreciate any help.
I’m loading an OBJ or a gLTF model, then I’d like to apply some colors to different areas of the mesh based on user inputs. For example let’s say the model contains a simple cube and I want to change the color of each side of the cube by picking de color in a selector outside the canvas. What should be the best approach for this?.
Thanks in advance
Hi
Im not sure what would be the absolute best approach, but the simplest one might be to open your favorite 3D software and assign different materials to various parts of the model, that you want to be changable.
So for example, give each side of the cube a material, then after loading (your object will be likely divided into several meshes) you can change the material.color based on some user inputs.
However keep in mind that each material is an additional draw call.
It just so happens, that I’ve made such an app in the past, so feel free to check out my implementation.
link: https://peterstylinsky.com/projects/Jewellery-Shop/
source code: https://github.com/DolphinIQ/Jewellery-Shop
Face coloring does not necessarily require a separate material per face, but it will require some tricks. One trick may be to use unindexed geometry and supply vertex colors in triples of the same value.
Check out THREE.Raycaster (and examples) for how to pick a face.
A simple GUI for setting color will be to use dat.GUI's addColor. You will typically set color on an object that exists only for the GUI, and use onChange to assign it to the vertices in the picked face.
Thank you so much for sharing, this is really helpful for what I need although is going to be much more complex is a good starting point.