David Duperron

Hi!
Thanks for the answers.
I juste tried the “Locked Track” constraints, whch again works well within Blender but does not in Verge3D…
see capture below:

The x axis of the piston is the “locked axis”, but then when I rotate the crane around its z axis, the piston x axis remains the same and does not rotate together with the crane as it should be…
Any idea?? please help!!

David

Ok thank you for your answer! I’ll find another way to represent what I need in that case…
When you say “requires coding”… what does it mean exactly? is it a big amount of coding? where? in the puzzle editor??
Thanks again

David

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