Currently, I am working with a scene extracted from a THREEJS example (https://threejs.org/examples/webgl_loader_fbx.html) that involves importing and displaying a threejs.json scene. The rendering of the scene works perfectly; I have a grid in place with my model positioned on top of it.
The issue arises when I interact with the scene by dragging or zooming using my mouse. The camera remains focused on the center of the screen, whereas my model sits at the bottom of the scene, often being out of the camera's view.
Is there a way to adjust the camera so that its focus aligns with the location of my model?
I attempted to modify the camera's position using
camera.lookAt(new THREE.Vector3( 0, 0, 0 ))Below is the code snippet showcasing the setup:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Code for setting up the page -->
</head>
<body>
<div id="info">
Test
</div>
<script src="js/three.js"></script>
<!-- Additional script include statements -->
<script>
// JavaScript code for handling the scene setup
function init() {
// Scene initialization logic
}
function animate() {
// Animation rendering logic
}
function render() {
// Rendering method
}
// Event listener for window resize
</script>
</body>
</html>
To offer a clearer visual representation of the issue, I have created a GIF: