Hi there, I had some help in another post, but I had difficulty figuring out the code, so I thought I would try and think of an easier way of doing things. I am now using a 3-frame animation and I hope my idea will work with the code I have.
If you right-click on the red roof area in my playground a sphere will appear. Select it (left click… the gizmo appears) then click the blue Ch.1 button. The sphere changes to blue. By default, the sphere has a cube marked 3 inside it, but a cube for 1 and 2 are inside the model too. Frame 0 has the 3 cube, Frame1 has the 1 cube and, Frame 2 has the 2 cube.
I was hoping at the point where you change colours (clicking Ch.1 or Ch.2) there is code that will select and display the correct cube by moving to, and stopping at, the correct frame of the built-in animation. There will be a green Ch.3 button as well, but I have left this out for now.
In the end, several spheres of different colours will be dotted about the roof area. Each displaying the number that corresponds to its colour. And any sphere should be able to be deleted, along with its number cube.
This method seems easier than the last one I had. However, in saying that, I have no idea how to do it. And would this new method work with the code I already have?
The sphere animation was exported from Blender. I hope I have exported it correctly for the 3 states to show.
Hey @Bov - Thanks so much for walking us through what you’d like to accomplish…I think that’s always helpful to get you to the best path to achieve your goals.
While it’s definitely possible to do this with animation, I’m not sure that animation is the best way to achieve what you’re trying to do.
If I understand correctly, you’d like your user to be able to place a cube on the red ceiling…that happens with a right click. After a cube has been placed, you can select that cube with a left click. Once you’ve selected the cube, you can then use GUI elements to change that cube (and it’s surrounding sphere) to a different channel.
I think there’s a pivotal question to ask first. Based on the answer you can go one of two different paths.
Do you want the models of the spheres and cubes to be the same? In other words…do the spheres change shape at all depending on what channel you have the cube set to?
Let’s assume for a minute that the cube and sphere will be exactly the same shape for each channel, but you want to change the color/texture based on which channel you have a cube set to.
Here’s the path I’d explore.
Create your cube and sphere in Blender. Make sure they’re properly UV’d. No animation on them. Export to .gltf.
Import your objects into Babylon.
Create 6 different materials…You’ll want one material for the cube and one for the sphere for EACH channel option. (channel1CubeMaterial, channel1SphereMaterial, etc)
Once you’ve placed a cube/sphere on the ceiling and selected it, changing its channel will simply change the material to the matching materials. So changing from channel 3 to channel 2 would swap both the cube and the sphere to the channel 2 materials.
I hope that makes sense. I think you’ll find that quite a bit easier to manage than going the animation route.
Hi PirateJC, thank you very much for your explanation, it was very clear and easy to understand.
So, what I think you are saying is to load the models (without seeing them) and then swap over the texture of the appropriate sphere/cube at the point a coloured Channel is selected. This does sound simpler than my other method.
I am now just wondering about the execution of the code. I have Googled to try and find code for accessing and swapping texture inside a glb file, but with no luck. I did find this post in the forum, but it didn’t have an answer.
Question…for what I am after, could I just use 3 textures…just use the colour that is currently being applied to the sphere and just swap over the cube texture?
I wonder if you could give me a hint on how this swap could be coded.
Thanks again.
Ps, I really like the Babylon.js YouTube videos, mainly the ones related to manipulation. Videos like the cannon animation and the hex flip. I kind of want to learn the mechanics of building something before embellishing it with particles and shaders (although I have a future project that may include particles).
Glad this though process is helpful. There’s a distinction here to make between textures, and materials. For the solution I’m proposing, you’ll need different materials…each one with a different assigned texture.
The reason you can’t use one material and swap out the textures is because any item that’s using that material in the scene will be updated as well. So for example…let’s say you have 3 channel 2 cubes inside of your scene. If you were to select one of the cubes and try to change it’s texture, all 3 would inherit the new texture. If you use materials however, then you’ll be all set.
Here’s a simple playground example of how to create and swap materials:
In this playground I create 2 different materials. I assign a unique texture to each of the materials. Then I assign one of the materials to the sphere, and one to the ground.
Lastly there’s a some interaction logic that when a mesh is clicked on, if it has the first material, swap it to the second, and if it has the second material, swap it to the first.
Hi PirateJC, thanks again for taking the time to help me. Texturing is an area I am keen to learn, as I have never worked with texture in Blender…I have just changed basic colours.
Sorry…I am a tad confused. I thought the material image was gathered from inside the glb file, since I am guessing the image data is inside it. But it looks like the material swap I am hoping to do uses basic JPGs, as seen in your demo.
I had a bit of a hard time figuring out how to export a JPG from Blender, but eventually I found this video that gave me an idea how to do it.
I managed to export the image below…is this correct? Can this be used to create my green numbered spheres? Will I get the same look?
Cheers
Yup, if it looks correct in Blender, that means that your UVs are set up properly to work with your texture.
So once you’ve exported that texture, you host it somewhere…github perhaps…and you can use it as the diffuseTexture for the standard material as in my example. You’d just replace the “textures/bloc.jpg” with the url to your texture instead.
