Ivan Lyubovnikov

Oh, I see where the problem now is. The iframe in your app currently looks like this:
<iframe id="v3d-scene" width="999" height="800" src="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4821bbbc03/mousetrack/mousetrack.html"></iframe>

It has the id attribute set to v3d-scene but there’s already a div element with the same id on the page, that’s why the code in the script part cannot access the iframe and fails to work.

Can you try this snippet now:

<iframe id="v3d-iframe" width="999" height="800" src="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4821bbbc03/mousetrack/mousetrack.html"></iframe>
<script>
    let v3dIframe = document.getElementById('v3d-iframe');
    v3dIframe.addEventListener('load', e => {
        let v3dContainer = v3dIframe.contentDocument.getElementById('v3d-container');

        document.body.addEventListener('mousemove', e => {
            let customEvent = new v3dIframe.contentWindow.MouseEvent('mousemove',
                    { clientX: e.clientX, clientY: e.clientY });
            v3dContainer.dispatchEvent(customEvent);
        });
    });
</script>

– I just changed “v3d-scene” to “v3d-iframe” in both the iframe element and the code inside script so there shouldn’t be the id collision.

Can you change the iframe’s src from
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4821bbbc03/applications/mousetrack/index.html
to
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4821bbbc03/applications/mousetrack/mousetrack.html
and check if this works?

Because right now your 3d scene (which is applications/mousetrack/mousetrack.html) is located inside an iframe (in applications/mousetrack/index.html) which in its turn is also located in an iframe (through Webflow’s HTML embed element). And it would make the code interacting with the original scene a bit more difficult.

I guess you need to add the script part at the same place where you embed your 3d scene. I mean in the Webflow interface inside the HTML Embed Code Editor. I can’t test it myself by I’ve found the video showing how to do that: https://www.youtube.com/watch?v=uA0sGXetNPs.

Try to paste the following snippet in the editor window:

<iframe id="v3d-scene" width="500" height="300" src="mousetrack.html"></iframe>
<script>
    let v3dIframe = document.getElementById('v3d-scene');
    v3dIframe.addEventListener('load', e => {
        let v3dContainer = v3dIframe.contentDocument.getElementById('v3d-container');

        document.body.addEventListener('mousemove', e => {
            let customEvent = new v3dIframe.contentWindow.MouseEvent('mousemove',
                    { clientX: e.clientX, clientY: e.clientY });
            v3dContainer.dispatchEvent(customEvent);
        });
    });
</script>

The OBJ format itself doesn’t support morphing. So, you need to use a workaround for that. For example, you can try to export your model several times: as a base shape (all keys set to 0) and as a single morph shape (with the respective key set to 1) – that way you’ll get several obj files that represent morphing. And you also need to think about combining them somehow depending on what you want to use them for.

Hi,

The exporter script you linked is a bit outdated since it references THREE.Geometry which was removed from Three.js and is not available in Verge3D too. You can use this version of OBJExporter instead: https://github.com/Soft8Soft/verge3d-code-examples/blob/master/js/exporters/OBJExporter.js

Hi,

From the second picture it looks like it may be a shader crash. Can you check the browser console to see if it shows any errors?

Hi FunJoy.Tech,

Thanks for the test case! We’ve managed to fix this bug!