We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

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

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

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts
  • #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!]

    • This reply was modified 1 month, 1 week ago by Jonathan Wan.
    • This reply was modified 3 weeks, 3 days ago by Jonathan Wan.
    #51798

    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.

    #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!

    • This reply was modified 1 month, 2 weeks ago by Jonathan Wan.
    • This reply was modified 1 month, 2 weeks ago by Jonathan Wan.
    • This reply was modified 1 month, 2 weeks ago by Jonathan Wan.
    • This reply was modified 1 month, 2 weeks ago by Jonathan Wan.
    #51805

    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.

    #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

    #51807

    Glad it helped! :good:

    Co-founder and lead developer at Soft8Soft.

    #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

    • This reply was modified 1 month, 2 weeks ago by Jonathan Wan.
    • This reply was modified 1 month, 1 week ago by Jonathan Wan.
    #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!

    #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

    #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

    #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!

    #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

Viewing 12 posts - 16 through 27 (of 27 total)
  • You must be logged in to reply to this topic.