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

🌵 Needle Engine
21
22

I am sorry I am really really new to Needle.
I am actually researching for the company I work for, as we are trying to find a fitting way to create 3d games that runs on mobile

by user 198447544408342528

23

Have a look at this code above!

24

Btw i might have good news: we’re currently working on introducing a nice character controller framework which will make this A LOT easier (ideally without you having to write much code, depending on what your usecase is)

25

I am just trying to lock around in a scene I created and I have been fiddiling with it for a few hours

by user 198447544408342528

26

any idea why downloading the package from the website didn’t provide the code available through Git repo?
image.png

by user 198447544408342528

27

The link i sent is from our samples and its a separate package. Install it via the menu item Needle Engine/Explore Samples
Needle Engine Samples or via the installer here

28

oh wow I completely missed that! thank you!

by user 198447544408342528

29

when I was browsing the samples in your website I was shocked at how smooth it runs. I was very curious to know how those samples were made, so this is great for my team!

by user 198447544408342528

30

too bad I got to it so late, ive spent a few hours studing TS and Needle to achieve a (very bad) head movement through mouse LMAO… ill just take the component from your first person shooter :slightly_smiling_face:

by user 198447544408342528

31

Before I scrape it all and use your component, may you help me understand where am I wrong?
As for PointerLock, I created a new file PointerLock.ts, pasted the code from the link you sent and added this function:

~ PointerLock from git~
...
    public lockUnlock(){
        if (PointerLock.IsLocked) this.lock();
        else this.unlock();
    }

This is my LookAround.ts script:

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


export class LookAround extends Behaviour {

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

    lock: PointerLock = new PointerLock(this.context.domElement);

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

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

    rotateFromMovement(leftRight: number, upDown: number){
        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")){
            this.lock.lockUnlock();
       }
    }

}

for some reason, when I move the mouse on playing on the browser I get this message:

Any idea whats wrong?

image.png
image.png1889×112 18.6 KB

image.png
image.png1889×112 18.6 KB

image.png
image.png1889×112 18.6 KB

by user 198447544408342528

32

Yes, that’s just javascript being javascript. You need to either write your mouse movement functions as onMouseMove = evt => { .. or you need to bind this this.onMouseMove.bind(this) (make sure to remove the callback in onDisable). I’d recommend you give this a read here: Typescript Essentials | Needle Engine Documentation