We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Vue/Quasar Integration

Home Forums Programming Vue/Quasar Integration

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #34153

    Hi All,
    I recently discovered the Quasar framework, which is based on Vue.js, and provides fantastic tools to quickly set-up multiplatform applications.
    I’ve managed to integrate a simple Verge3D scene inside a Quasar App, following the Vue tutorial here (https://www.soft8soft.com/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html#Verge3D_Vue).
    However, I am now stuck due to my – very – limited javascript skills. I would like to be able to send informations, or trigger behaviours or functions from the verge3D App (so basically from within the visual_logic.js file), and eventually the other way: controlling the Verge3D scene using Vue/Quasar interface elements.
    I’ve setup a Git repository showing the project as it is now here:
    https://github.com/Davdup/QuasarVerge3D
    If you install Quasar, and then run the commands as indicated in the readme, you should be able to see the basic app in dev mode, and play with it. For example here I would like to trigger the dialog opening by clicking on the cube (the same way it can be done right now by clicking on the bottom right Quasar button).
    Anyone interested in digging in this direction is kindly invited! :)
    Cheers

    David

    #34310

    Hi David,

    For example here I would like to trigger the dialog opening by clicking on the cube (the same way it can be done right now by clicking on the bottom right Quasar button).

    I’ve managed to achieve that by utilizing vue’s event system. You can trigger custom events like “cube was clicked” from within the visual logic script and listen to them in a vue/quasar component.

    I merged a pull request into the repository: https://github.com/Davdup/QuasarVerge3D/commit/dbde6a9f59d07769a5cd9450502640fe6a9d1ae5

    Hope this helps!

    Co-founder and lead developer at Soft8Soft.

    #34311

    Hope this helps!

    Indeed it helps a lot!! :)
    Now I have a starting point to customize the event and the “listener” to trigger different behaviors depending on which object is clicked.
    I will continue to implement this on the Github project.
    Thanks a lot!

    David

    #34457

    Made a little progress. Now I can trigger events that pass on the clicked object, which is just what I needed.
    Next step, set-up the same kind of communication the other way around: from the Vue page script to the V3D app script, to trigger animations for example. If you have a few minutes to guide me in the right direction?? ;)
    Cheers

    David

    #34505

    Next step, set-up the same kind of communication the other way around: from the Vue page script to the V3D app script, to trigger animations for example. If you have a few minutes to guide me in the right direction?? ;)

    If you want to use some code defined in the puzzles logic file, then you can put it inside a procedure puzzle, let’s name it “myProcedure”, and then just call it like this from within a Vue component:

    You also can use the application instance directly like this: v3d.apps[0], and then access the app’s scene v3d.apps[0].scene, the camera v3d.apps[0].camera, etc…

    Co-founder and lead developer at Soft8Soft.

    #34507
    GlifTekGlifTek
    Licensee

    Hey David,
    Fantastic effort here, I’d like to say.

    I’ve been investigating the potential of Quasar / Vue with Verge 3D on and off for quite a while during production of our main project.

    To have the ability to deploy to all possible platforms under one codebase is just so efficient and powerful.

    I haven’t had the time budgeted to both, fully explore either as much as I’d like, so was actually hoping for someone curious/wise enough to take the reigns and make this step.

    I’ll be keeping an eye here and your.
    Github!

    Looking forward to seeing how things develop, and am here for any advice w the Verge 3D ideas etc.

    …as I ammm so prolific with it…
    B-)

    Jk :mail:

    • This reply was modified 1 month, 1 week ago by GlifTekGlifTek.
    #34614

    Hi Ivan! Simple as that… :) I will try it ASAP!
    Thank you very much

    And Thanks GlifTek! In fact I discovered this framework on one of your posts here! ;) As you said the fact that you can deploy to any platform with one single code is just perfect… The other things is the great number of built-in components and functions, that look just great out of the box and are so easy to integrate in your app!!
    I’ll keep my Github updated as I progress with this exercise, and try to document it… do not hesitate to clone it and come discuss it here!
    Cheers

    David

    #34711

    Hi!
    I continue to work on this subject. As you suggested Ivan I started to call v3d procedures directly from the Quasar/Vue interface and it works like a charm.
    However, I encounter a strange behaviour… I don’t know if it’s a bug or a mistake somewhere, but as soon as I have two active “exec script” blocks in my puzzles, I have an error popping:
    Uncaught ReferenceError: VARS is not defined
    It’s like I can use the VARS[‘myVar’] only once…

    Capture-d-e-cran-2020-10-29-a-14-42-43
    Capture-d-e-cran-2020-10-29-a-14-40-59

    Any idea how to solve this??

    #34714

    Ok, I finally found out where was the problem in the logic.js file. For some reason, the VARS object is only defined once (in the first procedure, acting on the triggerAnim group Objects). see below:

    if I simply copy/paste the VARS definition in the second “registerOnClick” (acting on the Modules group objects) it works… the problem is that I will have to do it again each time I regenerate the js fil from my puzzles… is it a bug??

    #34722

    Hi David,

    if I simply copy/paste the VARS definition in the second “registerOnClick” (acting on the Modules group objects) it works… the problem is that I will have to do it again each time I regenerate the js fil from my puzzles… is it a bug??

    Yes, it’s a bug in verge3d 3.4.0. But we already fixed it in one of the 3.5.0 prereleases. You can download the latest 3.5.0pre2 version here https://www.soft8soft.com/get-verge3d/ or wait for the stable 3.5.0 release. I think it should be enough to just replace the file https://github.com/Davdup/QuasarVerge3D/blob/master/public/v3d.js with the file build/v3d.js from the latest verge3d distribution.

    BTW, we’ve also updated the default react/vue template and the relevant documentation page since 3.4.0 (not on the website yet, but available on localhost – http://localhost:8668/docs/manual/en/programmers_guide/Integration-with-Reactjs-Vuejs.html, also there’s a section about “integrating” a react/vue app into the puzzle editor). Thanks to user feedback, we’ve made it a bit easier to use the verge3d application instance (in regard to v3d.apps[0], which was a bit hacky) and also fixed some issues with memory leaks. So, now it makes sense to create the app from scratch.

    Co-founder and lead developer at Soft8Soft.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.