First Person Controller Sample not working on Mac safari but on chrome

First Person Controller Sample not working on Mac safari but on chrome. Its working perfectly on windows and mobile.In mac working fine on chrome but not on safari.
How to solve this issue.
Please help us. I have pro license

Original Post on Discord

by user 1141289362336784394

Changed the channel name: First Person Controller Sample not working on Mac safari but on chrome.

by user 1141289362336784394

cc @herbst🌵

Hi, thanks for letting us know. This looks like a regression. The sample currently only allows movement when the pointer is locked (cursor disappears like in FPS games), and it seems Safari silently fails setting the pointer lock and thus there’s no movement.

We’ll take a look!

OK, turns out on Safari requesting the pointer lock must be a direct consequence of a user action and can’t be done later in the frame.

You can fix it for Safari by adding these lines in FirstPersonCharacter.ts:

        // register pointer event so we can lock the cursor
        window.addEventListener("pointerdown", () => {
            if(!PointerLock.IsLocked && !this.isMobile) {
                this.lock.lock();
            }
        });

We’ll make sure to include this change in the next samples release too. I already updated the live sample so that it works on Safari now.

Thanks again for the report!

Wow thanks for the quick support

by user 1141289362336784394

Hello
I can’t seem to lock my curser using PointerLock, nor lock.lock().

I couldn’t find anything in your documantations regarding that functionality…

Please assist me with how to use it

by user 198447544408342528

Hi, do you get any errors or logs in the browser? What’s your current state exactly?

Thank you for the fast reply. I get an error in Unity saying PointerLock isn’t recognized

by user 198447544408342528

usually I can ctrl+. and get the “import from *” but not for this function…

by user 198447544408342528

Can you show the error in Unity and the code that you currently have?

It’s right here. I’ve tried the whole code, and even just PointerLock.IsLocked and this.lock.lock()

by user 198447544408342528

this is the whole thing:
image.png

by user 198447544408342528

And where is this code? Is it in a script of yours?

I tried to clean it a bit to send something half readable… sorry for the lack of conventions and mess, im new to TS

import { Behaviour, Input, serializable} from "@needle-tools/engine"
import { Vector3 } from "three"

const lockUnlock= (): void => { /* if pointer is locked, unlock. else lock*/ }

export class LookAround extends Behaviour {

    /** The movement sensitivity */
    @serializable() sensitivity?: number;

    onEnable(): void {
        window.addEventListener("touchmove", this.onTouchMove, false);
        window.addEventListener("mousemove", this.onMouseMove, false);
    }

    onTouchMove(event){        
        let x = event.touches[0].clientX;
        let y = event.touches[0].clientY;
        this.rotate(x, y);
    }
    
    onMouseMove(event){
        let x = event.clientX;
        let y = event.clientY;
        this.rotate(x, y);
    }

    rotate(leftRight: number, upDown: number): void{
        this.gameObject.rotateOnWorldAxis(new Vector3(0,1,0), leftRight);
        this.gameObject.rotateOnWorldAxis(new Vector3(1,0,0), upDown);
    }

    update(): void {
       if (this.context.input.isKeyDown("Space")){
            lockUnlock();
       }
    }

}```

*by user 198447544408342528*

im trying to fulfil lockUnlock() and cant find the way to do so

by user 198447544408342528

Pro tip :slightly_smiling_face: You can wrap your message in backticks ` (see screenshot) to make eit more readable in discord
image.png

3 backticks + ts make discord treat your code as if it was typescript code and highlight it properly

Regarding the content: it looks like you’re missing a big chunk of the actual pointer lock code?