vue-babylonjs
vue-babylonjs copied to clipboard
Beg-in
Doc: Example on reactivity
It would be great to have an example on the real reactivity power of the vue with babylonjs combination. E.g. 3 sliders (or similar control in vue) for x, y, z position and a 3D object in babylonjs. While the object is moved, the sliders are updated. While a slider thumb moves, the 3D object also moves along the respective axis. Similarly for zooming.
That's a good idea. I don't think I'll be able to jump into that right away since my goals are working on bugs, tests, and features at the moment, However, I'm happy to look at any pull requests for docs. I recently refactored the docs site code to be a bit friendlier to newcomers.
@DigitTwin I am not sure the example you are giving would be very impressive as you can already do a slider that controls a 3D object without Vue.js ... Here an example with dat.gui, but the slider could be made with Babylon.GUI too: https://www.babylonjs-playground.com/#NGS9AU#1
A maybe better example of the power of Vue.js would be code hot swapping for game developers, such as here: https://www.youtube.com/watch?v=PS4oMLPyYfI
That would totally impress game developers, as you could tweak your game without reloading the game!
Speaking of reactivity, I tried the Vue dev-tool. They say that we can edit the properties of the objects in the Scene in real time with Chrome debugger. That sounds very great and is a step towards a code hot swapping as illustrated in the Youtube link I sent above.
However, I can't edit the values of the properties for some reason when I run the vue-babylonjs example here: https://glitch.com/edit/#!/misty-dive?path=index.js:7:13 I was expecting to get editable fields in the vue dev-tool, as seen here: https://github.com/vuejs/vue-devtools/pull/484
It seems that we still can edit the values using this method: https://medium.com/fabricgroup/debugging-vuejs-in-chrome-console-d27ecbf3960c But it is less elegant.
... as you can already do a slider that controls a 3D object without Vue.js ... Yes -- but the 3D object does NOT update the slider, so it is not reactive! The x-, y- and z-slider are just an example on the reactivity. The importanent part is that while an object in the scene is manipulated (e.g. moved), the respective data (e.g. x, y, z of the obeject) is ALSO updated in the vue (finally Typescript/JASON) structure (or even multiple structures). So, the more comprehensive example would be a vue tree structure. The nodes of the tree comprise graphical CAD like 3D object definitions TOGETHER WITH other data, including links to further Typescript/JSON data (e.g. structures of technical detail description matching the 3D object instance). [So this cannot be completely in the babylonjs-only part.] So selecting a 3D object description in a Vue node leaf (of the tree structure) would display it. Than changing the 3D object in the vue-babylon based application part would implicitly update the vue structures. That would be the cool part! And that is the point where it would be necessary to be able to bind a property of the 3D object to a vue-structure element.
Le ven. 28 sept. 2018 à 11:45, Geoffrey Mégardon [email protected] a écrit :
@DigitTwin https://github.com/DigitTwin I am not sure the example you are giving would be very impressive as you can already do a slider that controls a 3D object without Vue.js ... Here an example with dat.gui, but the slider could be made with Babylon.GUI too: https://www.babylonjs-playground.com/#NGS9AU#1
A maybe better example of the power of Vue.js would be code hot swapping for game developers, such as here: https://www.youtube.com/watch?v=PS4oMLPyYfI
That would totally impress game developers, as you could tweak your game without reloading the game!
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Beg-in/vue-babylonjs/issues/14#issuecomment-425383232, or mute the thread https://github.com/notifications/unsubscribe-auth/AoihQqWIz3nZrVse2NzPNMDrDQUt-MuJks5ufe_TgaJpZM4W3XM9 .
Do you have a working example? I am not sure I understand what you want to do...
What I have in mind is that: https://www.youtube.com/watch?v=PS4oMLPyYfI But I am far from reproducing it with vue-babylonjs at the moment :/
... not sure I understand what you want to do... Do you have a working example?
No. Our understanding (with the master student in CC) is that you would need to expose more object properties, of babylong objects so they can be reactively bound to vue data. So if could connect the x, y, z posiion of a babylon object, than we will be able to implement the example.
Thans and greetings fro Oslo!
Le sam. 29 sept. 2018 à 15:02, Geoffrey Mégardon [email protected] a écrit :
Do you have a working example? I am not sure I understand what you want to do...
What I have in mind is that: https://www.youtube.com/watch?v=PS4oMLPyYfI But I am far from reproducing it with vue-babylonjs at the moment :/
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Beg-in/vue-babylonjs/issues/14#issuecomment-425643696, or mute the thread https://github.com/notifications/unsubscribe-auth/AoihQs55er0UOdXdzs90CcsVEYnLDkgKks5uf29cgaJpZM4W3XM9 .
@Nodragem that YouTube example is not far off from what this library is already capable of. What does your build process look like? Are you using Webpack with vue-loader? Hot reload needs to be enabled on the webpack-dev-server for that to work. As for the editable properties in Vue devtools, I've never tried it, but this library doesn't use data in components and I don't know if props are editable or not.
@DigitTwin position binding is already reactive. If you bind to position on components that support transformations they will change xyz coordinates accordingly. Additionally as of beta.6 I expose all observables as listeners, so you may be able to use onAfterWorldMatrixUpdateObservable which is exposed as @after-world-matrix-update$ on the component. See https://doc.babylonjs.com/api/classes/babylon.transformnode for details on that Observable.
@BrainBacon I had a look at the doc, and I am not exactly sure how the reactivity of vue.js translates in vue-babylonjs. As far as I understand, BabylonJs, being a game engine, is already reactive. For instance, you can link an object position to a slider in a two-way binding, each updating the other. What vue.js seems to add is that any game object data is watched by default and can be updated at runtime, through the debug console (or the vue.js devtool, that I can't get to work).
However, it seems that vue.js could only update game object data at runtime, and can't update game object logic. I believe that you could update the game object logic with HMR in webpack if your game object logic is in a separate file than the game loop. But I guess it would work also when using BabylonJS without vue-babylonjs.
Am I right? I have to admit that I am totally unsure whether what I am saying is correct.
We have added two sliders for box movement and rotation (Thanks Likith!). Please find the source code and demo in the below link:
Code: https://glitch.com/edit/#!/cookie-billboard
App: https://cookie-billboard.glitch.me
You can directly copy the link and paste it in github and it works.
Brianbacon@vue-babylonjs Can you please extend our example by the missing babylon to vue reactivity? So that while the cube is moved the slider is also implicitly moved.
Thanks a lot! Karl
Le lun. 24 sept. 2018 à 23:00, Brian Jesse [email protected] a écrit :
That's a good idea. I don't think I'll be able to jump into that right away since my goals are working on bugs, tests, and features at the moment, However, I'm happy to look at any pull requests for docs. I recently refactored the docs site code to be a bit friendlier to newcomers.
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Beg-in/vue-babylonjs/issues/14#issuecomment-424123205, or mute the thread https://github.com/notifications/unsubscribe-auth/AoihQgshcm9TZyv4IQdOspeEGd4-ZC1Oks5ueUfrgaJpZM4W3XM9 .