Home › Forums › Programming › Vue/Quasar Integration
- This topic has 11 replies, 3 voices, and was last updated 1 year, 10 months ago by David Duperron.
-
AuthorPosts
-
2020-10-14 at 12:18 pm #34153David DuperronCustomer
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! :)
CheersDavid
2020-10-19 at 1:13 pm #34310Ivan LyubovnikovStaffHi 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.
2020-10-19 at 2:14 pm #34311David DuperronCustomerHope 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
2020-10-21 at 2:00 pm #34457David DuperronCustomerMade 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?? ;)
CheersDavid
2020-10-22 at 4:20 pm #34505Ivan LyubovnikovStaffNext 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:
v3d.puzzles.procedures['myProcedure']();
You also can use the application instance directly like this:
v3d.apps[0]
, and then access the app’s scenev3d.apps[0].scene
, the camerav3d.apps[0].camera
, etc…Co-founder and lead developer at Soft8Soft.
2020-10-23 at 3:22 am #34507GLiFTeKCustomerHey 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…
Jk
Visit the GLIFTEK Verge3D Plugins Store!
GLIFTEK.com for Plugin Documentation & LIVE DEMOS!
LIKE The GLIFTEK Facebook Page for updates!
Join the Verge 3D Discord Server!
plz share Discord link & on your signature!2020-10-27 at 7:48 am #34614David DuperronCustomerHi Ivan! Simple as that… :) I will try it ASAP!
Thank you very muchAnd 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!
CheersDavid
2020-10-29 at 1:48 pm #34711David DuperronCustomerHi!
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…
Any idea how to solve this??
2020-10-29 at 2:07 pm #34714David DuperronCustomerOk, 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:
registerOnClick(getObjectsFrom(['GROUP', 'triggerAnim'], 'ALL'), function () { setHTMLElemStyle('cursor', 'default', ['BODY'], false); console.log(['Trigger ', _pGlob.pickedObject, ' has been clicked'].join('')); pickedObject = _pGlob.pickedObject; var VARS = Object.defineProperties({}, { "animObject": { get: function () { return animObject; }, set: function (val) { animObject = val; } }, "animObjectState": { get: function () { return animObjectState; }, set: function (val) { animObjectState = val; } }, "hoveredObject": { get: function () { return hoveredObject; }, set: function (val) { hoveredObject = val; } }, "pickedObject": { get: function () { return pickedObject; }, set: function (val) { pickedObject = val; } }, }); Function('app', 'v3d', 'VARS', 'PROC', (('// Built-in variables: app, v3d, VARS, PROC' + '\n' + 'v3d.PL._vueEventBus.$emit(\'Object-clicked\', { id: VARS[\'pickedObject\']});')))(appInstance, v3d, VARS, PROC); }, function () { }); registerOnClick(getObjectsFrom(['GROUP', 'modules'], 'ALL'), function () { setHTMLElemStyle('cursor', 'default', ['BODY'], false); console.log(['Module ', _pGlob.pickedObject, ' has been clicked'].join('')); pickedObject = _pGlob.pickedObject; Function('app', 'v3d', 'VARS', 'PROC', (('// Built-in variables: app, v3d, VARS, PROC' + '\n' + 'v3d.PL._vueEventBus.$emit(\'Object-clicked\', { id: VARS[\'pickedObject\']});')))(appInstance, v3d, VARS, PROC); }, function () { });
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??
registerOnClick(getObjectsFrom(['GROUP', 'triggerAnim'], 'ALL'), function () { setHTMLElemStyle('cursor', 'default', ['BODY'], false); console.log(['Trigger ', _pGlob.pickedObject, ' has been clicked'].join('')); pickedObject = _pGlob.pickedObject; var VARS = Object.defineProperties({}, { "animObject": { get: function () { return animObject; }, set: function (val) { animObject = val; } }, "animObjectState": { get: function () { return animObjectState; }, set: function (val) { animObjectState = val; } }, "hoveredObject": { get: function () { return hoveredObject; }, set: function (val) { hoveredObject = val; } }, "pickedObject": { get: function () { return pickedObject; }, set: function (val) { pickedObject = val; } }, }); Function('app', 'v3d', 'VARS', 'PROC', (('// Built-in variables: app, v3d, VARS, PROC' + '\n' + 'v3d.PL._vueEventBus.$emit(\'Object-clicked\', { id: VARS[\'pickedObject\']});')))(appInstance, v3d, VARS, PROC); }, function () { }); registerOnClick(getObjectsFrom(['GROUP', 'modules'], 'ALL'), function () { setHTMLElemStyle('cursor', 'default', ['BODY'], false); console.log(['Module ', _pGlob.pickedObject, ' has been clicked'].join('')); pickedObject = _pGlob.pickedObject; var VARS = Object.defineProperties({}, { "animObject": { get: function () { return animObject; }, set: function (val) { animObject = val; } }, "animObjectState": { get: function () { return animObjectState; }, set: function (val) { animObjectState = val; } }, "hoveredObject": { get: function () { return hoveredObject; }, set: function (val) { hoveredObject = val; } }, "pickedObject": { get: function () { return pickedObject; }, set: function (val) { pickedObject = val; } }, }); Function('app', 'v3d', 'VARS', 'PROC', (('// Built-in variables: app, v3d, VARS, PROC' + '\n' + 'v3d.PL._vueEventBus.$emit(\'Object-clicked\', { id: VARS[\'pickedObject\']});')))(appInstance, v3d, VARS, PROC); }, function () { });
2020-10-29 at 2:43 pm #34722Ivan LyubovnikovStaffHi 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.
2023-01-30 at 3:28 pm #60023David DuperronCustomerHello!
I’m pulling this old thread up, as I am struggling to update my limited knowledge to the latest developments…
Ivan,
I’ve followed the latest instructions to create a Vue App and integrate Verge3D app. Everything works fine and I manage to get your example vue page (with the four V3D apps instances) in my Quasar application. Now I would like to be able to run the same kind of dialogs between the verge3D app integrated into the vue page, with the quasar app itself… and that’s where I find my limits…
I had this code in the previous versions:mounted: function () { v3d.PL = v3d.PL || {}; v3d.PL._vueEventBus = eventBus; eventBus.$on("Object-clicked", (data) => { this.infoModals[data.id] = true; }); eventBus.$on("showNotif", (data) => { this.showNotif(data.id); }); V3DApp.createApp("scene01.gltf", "scene01_logic.js"); //V3DApp; },
“Object-clicked” and “showNotif” are procedure defined in the puzzles.
It seems that in the latest template, this “mounted()” hook is replaced by a “created()” hook, and the “mounted()” hook is only containing this.loadApp().
Any help would be greatly appreciated!
ThanksDavid
2023-01-30 at 4:04 pm #60025David DuperronCustomerBasically I think that the migration from Vue2 to Vue3 completely lost me… :(
-
AuthorPosts
- You must be logged in to reply to this topic.