I would like to make it to look nice and modern and I would like to have a little bit of guidance about how to start developing it. I thought something about like this:
Learn basics of Babylonjs (follow documentation): setting up a scene, importing objects, camera movements, drag and drop objects…
Setup the UI: probably with React as it is a framework I know. Make a mult-step form like UI.
Import the scene into the UI and learn how to link the events of the UI with the scene.
Do you think it’s a good aproach to the problem? Do you recommend me following another path or modifying it?
Looks like a good approach. I started with babylon.js 2.5, but I knew React first as well. It will be essential for you to first go through the basics. The configurator in that example is really basic and the image doesn’t change when parameters do, so likely that is something you will improve on.
I would imagine getting 90% of the way there will not be too much effort and then things like stretching textures and maybe a need for parametric 3d models may arise. I would probably worry more about those afterwards. A strong grasp of models, meshes and “scale”/stretch will help, but even potentially how textures are mapped and even UV mapping. Another skill that is helpful is 3d modeling (ie: Blender), but will further steepen the learning curve.
Thank you, brianzinn. I really appreciate your help.
I have also seen that you are one of the crators of “react-babylonjs”. Do you think the integration between the react based UI and the scene will be easy? I have basic knowledge of React, but I’m not an expert.
I think actually moving the belt itself is going to be hard. Either removing the belt detail or faking it by only moving the detail, would allow spending more time in other areas.
Depends on your definition of “easy”, but it’s certainly possible. One thing that may make it easier to get started is to have the interactions occurring from DOM elements (as per your example) like buttons and then revisit if you want also same from the canvas (or do everything in the canvas with babylon.js GUI). Keeping the flow of interactions one-way will simplify the integration, but by no means is a requirement.
One of your early decisions will be if you want to build declarative components or an imperative scene. So, the react-babylonjs library you mentioned is optional. It’s how I would build it, but you can also do everything imperatively (ie: babylonjs-hook) or copy the code there and use inline.
I would recommend using a state management library like Zustand. It will be an easy way to push state to the canvas and DOM in one place.
Another thing that would make it easier, if you have a budget, is to hire a 3D designer to build your models.
If I had more time I would build an e-commerce configurator example, but I am just too busy lately unfortunately to build examples for the community. Perhaps you will be able to share your creation! Cheers.
Yes, I will begin just with the box that dynamically changes it’s size with parameters. The most important part is the last step of the wizard, where we have to be able to create a pallet with different box configurations.
I love the product customizer. May be worth adding the discussion around it. As always with Patrick, there are some valuable insights given about the approach used. Let me link it here:
@binflo13, one of the things that may be of big help specifically in this project is our new feature, the node geometry editor. It is already live and the initial docs are in PR review now. But if you know the layout pattern for your boxes in the pallet based on the box dimensions, you can create the geometry on the fly, including distributing and rotating the meshes. This is the v1 release, so there may be some things that you want to do that aren’t supported yet but give it a look and maybe this will help you over some of your hurdles.
Not any public ones. I use Zustand a lot with react-babylonjs. Zustand is, besides being a great library, able to cross the renderer boundaries from DOM renderer to 3d renderer. If you aren’t using a custom React renderer then really any state management library of choice is good. You can still cross the renderer boundaries by creating a Context bridge on each side of the boundary. ie: react-babylonjs/…/examples/…/ContextBridge.tsx at react-babylonjs (github.com)
I would really like to switch over the examples that I have to Zustand, unfortunately they were written 5 years ago before Zustand existed. Although I do like the Redux/Elm concept of reducers and their testability - there is for me too much boilerplate code. I should archive this Redux example repo( brianzinn/create-react-app-babylonjs)!
drcmda makes pretty sweet demos. valtio and zustand both have same 2 main contributors and both are good choices - valtio also works with any renderers!!
Thank you Patrick. For this project I think I’m not using it because I have lot of the backend alrady programmed in another language, but it’s good to know it exists. It would also be very helpful to have a use-case example to see it’s potential.
Just as an update, I think I’m not using React for this project. Even if it’s helpful to create components and design the UI, it feels like while you advance in the project and it gets more complicated, you lose control over the Babylonjs objects, it’s properties and methods. For example, if I want to create a component that imports a box mesh (I know I could use a Babylonjs box) with the SceneLoader then it’s difficult to access to the mesh properties in the parent. Could be that I’m not an expert on React, but it looks that using just Babylonjs could simplify things.
