This is a case study of Three.js, where the material ball is displayed when an object is clicked. I haven’t found such a case study in Babylon.js. Please tell me the implementation process, relevant code, or related case studies. What I want is either the material display of the entire scene in a list, or when I click on a certain object, I can dynamically obtain the material ball of this object and display it as shown in the figure
https://showroom.littleworkshop.fr/
I’m not sure where the difficulty here is. Do you have any playground started?
- create materials
- create spheres with different materials and place in scene
- create target (e.g. furniture)
- on any sphere picked, assign picked sphere’s material to target
What I want is to obtain all the materials in the scene in real-time and display them in a certain list, rather than pre-setting them。In the case, it can be set up in advance
What I want is either the material display of the entire scene in a list
when I click on a certain object, I can dynamically obtain the material ball of this object and display it as shown in the figure
I think inspector’s function explains it.
The scene’s mesh list (if you loaded a model, you can also call the model’s internal list) and the material list are inherent, so you can just call them and replace the corresponding texture or create multiple materials and replace them.
What’s interesting about this site is that the exchange of textures and such transitions smoothly.
There is no free way to create what you want, and it will require some amount of UI work, modeling, classification, etc.
Prerequisites
- A specific mesh exists (e.g., a chair model).
- Create multiple materials containing the corresponding textures, or load multiple materials into a dummy model when loading the model (for texture transplantation).
This makes it simpler. Check the material list with
1-1. scene.materials, find the materials you want to use, and create a list.
or
1-2. When calling the model, use SceneLoader.LoadAssetContainer You can retrieve the material list from the container.
2. Clicking on a material in the list should change the material of the intended mesh. (It might be a good idea to create a rule for dummy material sets for changes in 1-2 to automate this process.)
3, Create additional scenes and canvases with 2D layout structures to “preview” the effects of the changes in 2.
The reason this isn’t “free” is because you’d have to create another canvas to “preview” this, which would require creating a new engine and scene, and trying to replicate all the modeling and structure of the existing scene.
For example, if you put a texture in a texture node in nme, it will cost twice as much, one in nme and one to pass the copied value to the scene.
@1114257133 Here’s a quick example:
@1114257133 and here it is with everything (materials and pickable material spheres) being created dynamically:
Nice, your idea is great. Your approach is indeed the implementation solution for the case I mentioned earlier. However, I don’t want it to be preset. In my project, the loaded model is uncertain, so I need to directly obtain it from scene.materials and use a technology similar to RTT to display it in a list. Selecting a material can quickly locate it.