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

Tagged: Mouse tracking

This topic has 26 replies, 3 voices, and was last updated 2 years, 5 months ago by Jonathan Wan.

Viewing 12 posts - 16 through 27 (of 27 total)

← 1 2

Author

Posts
2022-05-07 at 4:42 pm #51797

Jonathan Wan
Customer

Hi Ivan, it works perfectly on both microsoft edge and firefox. Problem is limited to chrome, thanks for the advice.

[Please refer to page 1 of the thread, thanks!]

2022-05-07 at 4:54 pm #51798

Ivan Lyubovnikov
Staff

Good to know!

I think it might be one of chrome extensions you use that causes this issue. You can try to browse chrome as a guest: https://support.google.com/chrome/answer/6130773?hl=en&co=GENIE.Platform%3DDesktop
In guest mode extensions are not available, so it’s a good way to test if the demo works or not at all in chrome.

Co-founder and lead developer at Soft8Soft.

2022-05-07 at 5:11 pm #51799

Jonathan Wan
Customer

Thank you so much for the help, I’ve managed to narrow down the fault to the metamask chrome extension. Would be great to know why as their chrome extension has a sizable userbase.

Am currently still testing as I suspect multiple extensions[Edit: “Metamask”, “Wappalyzer – Technology profiler”] cause a compounding effect, with metamask as the cause. With only metamask installed, it works ~50% of the time, as compared to ~10% previously. Without metamask installed, there are no errors 100% of the time.
After testing, it seems that once the error(failure to track) occurs, subsequent refreshes will also have the error.

Apart from that, I’m relieved that I’ve finally got what I was looking for. Really big thanks for helping me throughout this, would not have thought it was possible!

2022-05-07 at 5:48 pm #51805
Ivan Lyubovnikov
Staff
So I tested metamask and found out that it was just a simple bug I made in the code inside the “<script>” part, so that’s on me :)

Here’s the fixed version that should go into the Embed Code Editor:
```
<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>
```
– the issue was that the old code made it possible for metamask to disrupt the messaging process between the main page and the iframe. And metamask is not the one to blame here, it just uses the same browser messaging mechanism for its own goals.

Co-founder and lead developer at Soft8Soft.
2022-05-07 at 5:57 pm #51806

Jonathan Wan
Customer

The code works perfectly, Thanks so much! Will highly recommend verge3d whenever I can, great product, amazing support!

Thanks again!
Jonathan

2022-05-07 at 5:59 pm #51807

Ivan Lyubovnikov
Staff

Glad it helped!

Co-founder and lead developer at Soft8Soft.

2022-05-11 at 1:29 pm #51945

Jonathan Wan
Customer

Hi Ivan, the fix has been working great so far. However, a few small issues have cropped up.

1. More than one embeds on the page doesn’t work as the mouse-tracking only works for either of them as seen from https://testing-file.webflow.io/snipcart-copy

2. The mouse tracking seems to glitch when the embed is not located on the top-left of the page. it seems that the rotation is based on if the embed was located on the top left of the page as seen at https://testing-file.webflow.io/snipcart-copy-2

Adding original file for reference https://testing-file.webflow.io/snipcart [original -working]

On another note, is there a way to remove the borders that are seen in the embed.

Thanks, not sure if i should create a new thread for this

2022-05-17 at 3:28 am #52111

Jonathan Wan
Customer

Hi, have been looking for a fix but am unsuccessful so far, would appreciate if anyone could help on this thanks!

2022-05-17 at 3:54 am #52113

xeon
Customer

Firefox and WebGL. They don’t get along very well. For 99% of the people that have good WebGL card, Firefox will just not work. Won’t even recognize the hardware as capable. OSX and Firefox even worse.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2022-05-17 at 4:10 am #52114

xeon
Customer

Not sure why anyone tests in Firefox given its low usage number and even lower WebGL compatibility. To my surprise…the answers:

Mac OSX 12.3.1 using FireFox 100 is WebGL will not work on Intel based Mac running AMD Vega
Windows 10 – FireFox 100. – Works
Windows 11 – FireFox 100. – Works fine
OSx Simulator – FireFox 100 – Works fine

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2022-05-17 at 4:50 am #52115

Jonathan Wan
Customer

Hi Xeon, I am using chrome as my main browser to test. Only installed firefox to test if the issue was due to google chrome. sorry for any confusion as this is the second page of the thread, thanks!

2022-06-01 at 6:56 am #52553

Jonathan Wan
Customer

Hi Ivan, the fix has been working great so far. However, a few small issues have cropped up.

1. More than one embeds on the page doesn’t work as the mouse-tracking only works for either of them as seen from https://testing-file.webflow.io/snipcart-copy

2. The mouse tracking seems to glitch when the embed is not located on the top-left of the page. it seems that the rotation is based on if the embed was located on the top left of the page as seen at https://testing-file.webflow.io/snipcart-copy-2

Adding original file for reference https://testing-file.webflow.io/snipcart [original -working]

On another note, is there a way to remove the borders that are seen in the embed.

Thanks, not sure if i should create a new thread for this
Author

Posts