Doc: Example on reactivity about vue-babylonjs HOT 9 OPEN

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 :/

from vue-babylonjs.

@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.

from vue-babylonjs.

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.

from vue-babylonjs.

@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!

from vue-babylonjs.

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:
vuejs/devtools#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.

from vue-babylonjs.

from vue-babylonjs.

from vue-babylonjs.

@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.

from vue-babylonjs.

from vue-babylonjs.