So my idea is to create a ‘grid’ with many individual boxes, and animate them as in the playground example.
Problem that I have now is placing the text on only one side of the cube, and next how to ‘group’ them together so effects can be applied to the whole text block or row.
I was looking into the 3d gui, but I cannot see any way how would able to get that individual effect using buttons.
Any ideas on how one would go about replicating that in the video? Is the 3d gui suitable?
All gui 2d… each “tower” has a for-mesh advancedDynamicTexture (adt) atop it, with a single gui 2d buttonControl in each’s root container. (It could have been a textBlockControl, too. ButtonControls contain textBlockControls. (yawn)
The way I picture it… you’ll need 6 of these “mosaic panels”… parented together in a box shape. it all seems possible, though. The slider control “grooves” crossing multiple “towers”… should be a challenge.
What a project, and what an effect. Interesting! And, umm… welcome to the forum, JD! Thanks for the brain tumor-grade challenge. heh. Delightfully painful!
Making mesh P a parent of mesh C changes the frame of reference for mesh C to the local axes of mesh P. Re-positioning, rotating or scaling mesh P will apply the same transformations to mesh C. Positioning, rotation and scaling of mesh C will depend on the position and orientation of the local axes of C relative to those of P. https://doc.babylonjs.com/how_to/parenting
Thank you all for the suggestions, I am going to have a look at all of them. I like the idea of placing a plane on the side of the cube to generate the text, but @ycw solution also seems good, but the text is on all the sides, not just one.
Also @Wingnut solutions looks great.
My next question would be, where could I find some texture to get the same look as in the video?
Stunning! I really didn’t know all of this is even possible.
Something I did not consider yet are those ‘groves’ in the blocks. Will I need to create some custom shape to do that? Or can I apply some border magic somehow?
What do you all think is the best way to go about creating the cube ‘walls’?
I was thinking to create them ‘flat’, like a cardboard box, and the rotate the walls to fit.
The 1square required to fill in the edges can be filled in afterwards
+1. Especially for the animation it will be 1000 times faster and convenient to do it on a modeler than as code. Even the text could be a graphic asset made on a 3D modeler. When done, you just have to use transparent meshes (can be created on a modeler too) as meshButton3d to link user interactions on it and visual animations.
How can I apply the “brick” texture to the blocks with text so that they are on all sides, not just the side where the text is displayed? (hover on the text to see error)
What could I do to improve performance?
Where could I find some gallery of free textures and “bumpTexture”?
Apologies if the code gives you a brain-ache. This is my first 3d / babylon project, so its alot of experimenting.
Double the width of the dynamicTexture (line 165) and continue to write text as you are so it is on the left half. For a face with text set uv values for face to map left half and for blank faces use set uv values to the right half (lines 94 to 107)
For shadows, add a shadow generator and make your cubes shadow generators / shadow receivers.
For the brick texture, you can update the standard shader to only use the emissive color when the normal of a face is in a specific direction (see PG), though @JohnK offered a simpler way to do it.
Regarding performance, you should first monitor your code to see where time is spent. But there is only rendering going on, so you may be able to also use cloning for the moving cubes to help perf. You may also try to replace all the tiny cubes that don’t move by bigger cubes to cut down the number of vertices/indices, but really the scene is simple so it may not be necessary to bother too much.
Is custom material part of the preview version or something? i used npm to install babylon, but get a error when using the custom material.
*edit: even with “Babylon.js v4.2.0-alpha.2 - WebGL2”, I get "“TypeError: BABYLON__WEBPACK_IMPORTED_MODULE_7__.CustomMaterial is not a constructor” error
**Edit: fixed error above by importing materials library, now I get “TypeError: Cannot set property material of [object Object] which has only a getter” at the “box.material = materialBox;”
Typescript needed??
… straight forward and least performant