I'm trying to zoom to fit the object to the center point when panned or rotate to different point.
I have tried it by capturing the center point of the object through bounding box and center point of the scene and passing it to the camera, but still it doesn't have a clear output. The object is getting fit to the camera but not to the center point when I load bigger models.
I have attached a fiddle
document.querySelector('button').addEventListener('click', () => {
const boundingBox = new THREE.Box3()
boundingBox.setFromObject(cube)
const center = new THREE.Vector3()
boundingBox.getCenter(center)
camera.position.y = center.y
camera.position.x = center.x
camera.updateProjectionMatrix()
const size = new THREE.Vector3()
boundingBox.getSize(size)
const fov = camera.fov * (Math.PI / 180)
const maxDim = Math.max(size.x, size.y, size.z)
let cameraZ = Math.abs((maxDim / 4) * Math.tan(fov * 2))
camera.position.z = cameraZ
camera.updateProjectionMatrix()
camera.lookAt(center)
})