David Duperron

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

Thanks GlifTek but I am not loading/unloading assets, but displaying different pages (Vue files) that load different Verge3D gltf files. And each time a new gltf is loaded, the memory usage increases and I cannot find a way to stop this behaviour…

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

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

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

Basically seeing this demo:
https://cdn.soft8soft.com/demo/examples/index.html?q=svg#webgl_loader_svg
I thought it was possible to load a SVG file in the 3D scene, and benefit from its SVG crispness to display complicated schematics (electrical, networks, …) and eventually also interact with the SVG itself like what is possible in HTML (active links, change properties, colors…).
It seems that it is a little more complicated than expected!
Ans as I’m far from expert in Javascript and coding, it’s a little bit out of my league I’m afraid…

Thanks for your answer! But…
I’ve had a look, but unless I’m wrong the textures use a “flat” projection… I could not find any with the “box” projection (wood, wall, etc…). From version 2.15 it is said that “We supported all available projection modes”. Can you indicate me which material uses this projection mode?
Thanks very much!

David