How to use third person like controls using PointerLockControls?

Question

I'm trying to create a third-person game like this one using three.js.

The code for the above demo looks like this -

let anchor = new THREE.Object3D()
// anchor = character
anchor.position.y = 10

// Somewhere in the middle, a perspective camera is defined

anchor.add(camera) // Parents camera to Anchor
controls = new PointerLockControls(anchor, container)

Now, in a different project, I am trying to recreate the third-person controls experience using PointerLockControls and make the screen revolve around the character, and not the camera like it's doing here.

The code I wrote so far looks like this (for the 2nd demo above)

//Somewhere, a perspective camera is defined

camera.position.set(4, 4, 0)
const webglContainer = document.getElementById('webgl-container')

if (webglContainer) {
    const controls = new PointerLockControls(camera, webglContainer)

    scene.add(controls.getObject())

    webglContainer.addEventListener('click', () => {
        controls.lock()
    })
}

In the 1st example, PointerLockControls class accepts Object3D because it's an older version of three.js (I think). But now, it needs the camera as its constructor arg.

So I have been struggling to make the scene rotate around the character. I've tried moving the camera, Grouping the camera and the model, and moving the model, but it always seems to revolve around the camera instead of the character (or anchor in the above code). Is there anything I'm missing? I know I can do it manually capturing mouse events and rotating but I was wondering if I could achieve it with PointerLockControls. Highly appreciate any solutions or comments.

Answer 1

For anyone who comes across this in the future, I couldn't find any resources/examples for using ThreeJS' PointerLockControls that lets the user orbit around the model instead of the camera after the API has changed.

So I ended up using the raw PointerLock API and it turned out to be pretty easy actually to achieve what I wanted -

Here's an example code -

// Assuming canvas is defined
canvas.addEventListener('click', async () => {
    canvas.requestPointerLock()
})

document.addEventListener('pointerlockchange', handlePointerLock, false)

let isPointerLocked = false

function handlePointerLock (evt) {
    isPointerLocked = !isPointerLocked
    
    if(isPointerLocked) {
        // Get mouse events
        canvas.addEventListener('mousemove', mouseMoveHandler)
    } else {
        // remove event listening on pointer lock exit
        canvas.removeEventListener('mousemove', mouseMoveHandler)
    }
}

// And finally,
function mouseMoveHandler (e) {
    console.log(e.movementX)
    // I added my model as a parent to my camera
    // and rotated my model with movementX data
    // Something like this -

    model.scene.rotation.y += e.movementX

}