PerspectiveCamera and PointerLockControls

Questions
1

Hello,

I can’t find a way to make perspectiveCamera work with PointerLockControls.
I have to use PerspectiveCamera to follow an AnimationClip imported via a glb, and I would like to be able to change to rotation of that Camera while the animation is going.

import React, { useRef, useEffect } from "react";
import {
  useGLTF,
  PerspectiveCamera,
  useAnimations,
  PointerLockControls
} from "@react-three/drei";

export function CleanCamera({ ...props }) {
  const group = useRef();
  const { animations } = useGLTF(
    "./models/camera/animation_camera.glb"
  );
  const { actions } = useAnimations(animations, group);

  useEffect(() => {
    actions.Action.play();
  }, []);



  return (
    <>
      <group ref={group} {...props} dispose={null}>
        <group name="Camera">
          <PerspectiveCamera  makeDefault/>
        </group>
      </group>
      <PointerLockControls />
    </>
  );
}

is there a simple way to connect the PerspectiveCamera to the Controls ?

Thank you

2

Is there any way to do this.
I was also thinking to use PointerLockControls by default and move camera by getting the path of the action.
For that I need to get the path for a selected time. Is there a way to do that ?

3

The THREE.PointerLockControls is designed to work with the THREE.FirstPersonControls class, which is based on the THREE.OrbitControls class. However, it is possible to make it work with the THREE.PerspectiveCamera by using the THREE.Object3D class to create a camera holder object, and adding both the camera and the THREE.PointerLockControls to it.

Here is an example of how you can do this:

// Create a camera holder object
const cameraHolder = new THREE.Object3D();

// Create a perspective camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// Add the camera to the camera holder object
cameraHolder.add( camera );

// Create the PointerLockControls
const controls = new THREE.PointerLockControls( camera );

// Add the controls to the camera holder object
cameraHolder.add( controls.getObject() );

// Add the camera holder object to the scene
scene.add( cameraHolder );

// Add the animation clip
const mixer = new THREE.AnimationMixer( cameraHolder );
const clip = THREE.AnimationClip.parseAnimation( glb.animations[ 0 ], glb.parser.getObjectByName( glb.animations[ 0 ].name ) );
mixer.clipAction( clip ).play();

By doing this, you can change the rotation of the camera holder object, and the camera and the controls will follow along, while the animation is playing.

It’s important to note that THREE.PointerLockControls only works with the THREE.Object3D class, so the camera must be added to it. Also, the THREE.AnimationMixer must be added to the cameraHolder object to apply the animation to the camera.

I hope this helps you achieve the desired effect!