search

brianzinn / react-babylonjs

React for Babylon 3D engine
https://brianzinn.github.io/react-babylonjs/
825 stars 105 forks source link

Can this be used to create an editor #21

Closed fselcukcan closed 5 years ago

fselcukcan commented 5 years ago

Can this be used to create an editor that enables to add/edit objects, models, and read/update their various properties possbily presenting a panel like ui?

Main thing I wonder is if it is possible to see the properties of models, especially model files? I saw a <Model /> component. After loading a model file with it, is it holding all of the model file properties inside the component's state, or elsewhere? Anywhere these model properties can be taken to a store, to a state and some ui panel can be dedicated to view and edit them.

brianzinn commented 5 years ago

Absolutely. I've done menus and UI editors this way. On the demo project there are examples of what you are asking with a UI and a store: https://brianzinn.github.io/create-react-app-babylonjs/withProps

Also, with this project you can also declaratively build GUI, so you can even build textured/screens in the canvas with React components: https://brianzinn.github.io/create-react-app-babylonjs/with2DUI

Lots of flexibility and options. The demo page for models shows how you can scale/move models from a UI. I'm just moving an avocado up and down here, but you can update any properties this way: https://brianzinn.github.io/create-react-app-babylonjs/withModel

The babylonjs inspector doesn't use this project and is DOM only. Worth looking at. It uses the gizmo too, which I haven't added here yet.

Let me know how you progress. I've been wanting to add the gizmo, but very low on spare time these days.

fselcukcan commented 5 years ago

Can you clarify what you haev meant by babylonjs/innspector being DOM only. I am going through their repository, and docs, they mention they built it with React, that is the case I see in their code as well.

Briefly, I need to build a 3d scene builder, possibly on top of babylonjs, your project seems closer to me than their reactjs inspector since I have a React web background rather than a vanilla/classic js background, though I am comfortable with it too. Their react code seems a bit more complicated to me.

Also I wonder can all of the very detailed tens of strange props can be updated in a react vay by this project of yours. Is everything in babylonjs supported and interfaced with, or relatively easy/straightforward to do so? When you look at the babylonjs inspector with a mdoel file or a primitive object loaded into the scene you see many many properties of that object.

There should be a huge data in this kind of editor, it seems perfectly managable with a centralized client side store like in reduxjs. I would like to venture into this too.

fselcukcan commented 5 years ago

I would like to contribute to this, especially if I can use this for my purpose since I will have most of the time to do so in that case.

I would like to know how do you integrate with babylonjs and leverage the capabilities it supplies. To mention a few how do you load model files, how do you create primitives given by babylonjs itself, how do you change the state to update the model (scaling, translating).

Are there any rough corners, impossbilities, and difficulties?

fselcukcan commented 5 years ago

Any insights?

fselcukcan commented 5 years ago

What do you think is missing here compared to a full editor with capabilities of:

Babylonjs inspector has missings things/diffculties too:

brianzinn commented 5 years ago

Sorry - I've let the issues slide here a bit and want to pick them up. You can add hooks to the scene and dynamically generate a state and build out everything using this project. I have done it that way with redux-sage and 2-way updating. Since the model is added (looks like by drag 'n' drop or manually) then you have full access to the meshes in the callback.

For example, you can when a mesh is dropped use the loader (it will dynamically load based on the extension of the file). ie: if you drop "file.obj", it will use the ObjLoader. You can then just add this to your redux store and it would show up in a list of objects - then you can perform translation/scaling/rotation etc with other controls (can be buttons in React). Right now you would need to add the Gizmo yourself in code, since I haven't written the declarative version yet (although that is definitely a TODO thing).

Look at the "move avocado" buttons here: https://brianzinn.github.io/create-react-app-babylonjs/withModel