Currently, my goal is to develop a third-person game similar to the one showcased here using three.js.
The code snippet from the above demonstration looks like this -
let anchor = new THREE.Object3D()
// anchor = character
anchor.position.y = 10
// In between, a perspective camera is initialized
anchor.add(camera) // Attaches camera to Anchor
controls = new PointerLockControls(anchor, container)
Now, in another project, I am working on replicating the third-person control functionality utilizing PointerLockControls and aiming to have the screen orbit around the character rather than the camera, as seen here.
The code I have written for the second demo so far is as follows:
//At some point, a perspective camera is established
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 first example, the PointerLockControls class accepts Object3D since it's an older version of three.js. However, for the current version, it requires the camera as its constructor argument.
I've been encountering challenges trying to make the environment rotate around the character. Various attempts such as adjusting the camera position, grouping the camera with the model, or moving the model itself have led to the rotation occurring around the camera instead of the character (or anchor as indicated in the initial code). Any insights or suggestions on how I can achieve this properly using PointerLockControls would be greatly appreciated. Thank you!