PointerLockControl support for mobile?

[dskill]

Describe the feature you'd like:

I'm using PointerLockControl for a simple FPS experience. Works great on desktop, but I can't figure out how to get it to work on mobile with touch. I see a few examples of PointerLockControls working on mobile in vanilla three.js, but I'm not experienced enough in React Three Fiber to be able to port those over.

This thread has some good example: https://discourse.threejs.org/t/how-to-add-touch-on-pointerlockcontrols/2846/11

Any guidance much appreciated.

[dskill]

This looked promising as well, but for the life of me I can't get it to work... https://www.npmjs.com/package/@unegma/react-three-fpscontrols?activeTab=readme

[0xpolarzero]

Hi there, just in case someone runs into the same issue. You can use the above package (https://www.npmjs.com/package/react-three-fpscontrols).

Need to import it and use it inside the component:

// components/Player.jsx
import { FPSControls } from 'react-three-fpscontrols';

// ...

return (
  <FPSControls
    camProps={{
      makeDefault: true,
      fov: 60,
      position: USER.initialPosition,
    }}
    orbitProps={{
      target: USER.initialRotation,
    }}
    enableJoystick
  />
)

And then add the wrapper inside the page, which needs to be rendered before the FPSControls component, otherwise it will log an error.

<!-- index.html -->
<!--  ... -->
<div id="mobileInterface" class="noSelect">
  <div id="joystickWrapper1" />
</div>
<!-- ...  -->

[Dhruvisgoat]

Fps controls work well, but how to set them up to listen for rigid body collisions(ie. the camera should stop moving when it hits a rigid body )

[mirkodevs]

hi, is possible to add this three.js mobile feauture to vanillla JavaScript? no react.