Vue/Quasar Integration

Ivan Lyubovnikov wrote:

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

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

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:

        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 () { });

Hello!
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!
Thanks

David