How to make object rotate according to mouseposition [Need puzzle help]

Hi,

I’m not very familiar with webflow but if you use an iframe element for embedding then you can try the following piece of code:

<iframe id="v3d-scene" width="500" height="300" src="./my_v3d_scene.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>

– just change the iframe’s src property so that it points to your verge3d scene.

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>

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.

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.

Ah, yes, it doesn’t simply work like that because the main page and the iframe are not of the same origin (basically, they are from different domains: one is https://testing-file.webflow.io/ and the other – https://cdn.soft8soft.com – and that is not allowed for security reasons).

There’s a way to work with that but it requires a bit different approach.

You need to paste the following code sample into the Embed Code Editor in Webflow:

<iframe width="999" height="800" src="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:4821bbbc03/mousetrack/mousetrack.html"></iframe>
<script>
    let v3dPort;
    window.addEventListener('message', e => {
        if (e.data = 'v3dChannelInit') {
            v3dPort = e.ports[0];
        }
    });
    document.body.addEventListener('mousemove', e => {
        if (v3dPort !== undefined) {
            v3dPort.postMessage({ type: 'mousemove', x: e.clientX,
                    y: e.clientY });
        }
    });
</script>

– you can notice that the iframe doesn’t need “id” anymore.

And you also need to add the following code snippet into the 3d scene:

let channel = new MessageChannel();
channel.port1.onmessage = e => {
    if (e.data.type === 'mousemove') {
        let customEvent = new MouseEvent('mousemove', 
                { clientX: e.data.x, clientY: e.data.y } );
        app.container.dispatchEvent(customEvent);
    }
};

window.parent.postMessage('v3dChannelInit', '*', [channel.port2]);

– you can do that in the Puzzles Editor via the “exec script” puzzle like this:

This way both the main page and the iframe window can interact with each other.

Hmm, that’s weird because I just tried your link: https://testing-file.webflow.io/snipcart on my machine and it works without problems. Can you show if there are any error messages in the browser console?

Can you test if the demo works for you in other browsers, especially in Firefox?