Skip to content
This repository was archived by the owner on Jan 28, 2025. It is now read-only.
This repository was archived by the owner on Jan 28, 2025. It is now read-only.

Doc: Example on reactivity #14

@DigitTwin

Description

@DigitTwin

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.

Activity

BrainBacon

BrainBacon commented on Sep 24, 2018

@BrainBacon
Collaborator

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.

Nodragem

Nodragem commented on Sep 28, 2018

@Nodragem

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

Nodragem

Nodragem commented on Sep 28, 2018

@Nodragem

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-v6#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.

DigitTwin

DigitTwin commented on Sep 28, 2018

@DigitTwin
Author
Nodragem

Nodragem commented on Sep 29, 2018

@Nodragem

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

DigitTwin

DigitTwin commented on Sep 29, 2018

@DigitTwin
Author
BrainBacon

BrainBacon commented on Sep 29, 2018

@BrainBacon
Collaborator

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

Nodragem

Nodragem commented on Sep 30, 2018

@Nodragem

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

DigitTwin

DigitTwin commented on Oct 9, 2018

@DigitTwin
Author
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    docsdocumentation enhancement or changeenhancementNew feature or requestgood first issueGood for newcomershelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @BrainBacon@Nodragem@DigitTwin

        Issue actions

          Doc: Example on reactivity · Issue #14 · Beg-in/vue-babylonjs