Reset camera position and target on selection change

main.js

@@ -26,15 +26,23 @@ document.body.appendChild( renderer.domElement );
 
 
 //CAMERA
+const DEFAULT_CAMERA_POS = new THREE.Vector3(0, 0, 2); // Camera default position
+const DEFAULT_TARGET = new THREE.Vector3(0, 0, 0); // Camera default target
+
 const camera = new THREE.PerspectiveCamera( 65, sizes.width / sizes.height, 0.1, 1000 );
-camera.position.x = 0;
+// Apply default position initially
-camera.position.y = 0;
+camera.position.copy(DEFAULT_CAMERA_POS);
-camera.position.z = 2;
+camera.lookAt(DEFAULT_TARGET);
+
+// camera.position.x = 0;
+// camera.position.y = 0;
+// camera.position.z = 2;
 
 const controls = new OrbitControls( camera, renderer.domElement );
 controls.enableDamping = true;
 controls.dampingFactor = 0.05; // Friction
 controls.screenSpacePanning = false; // Vertical panning along screen
+controls.target.copy(DEFAULT_TARGET);
 controls.update();
 
 
@@ -126,6 +134,15 @@ gui.add(params, 'selectedModel', modelPaths)
    .name('Displayed Model:')
    .onChange((newUrl) => {
        loadNewModel(newUrl);
+
+       // Reset camera position and target
+       camera.position.copy(DEFAULT_CAMERA_POS);
+       if (controls) {
+           controls.target.copy(DEFAULT_TARGET);
+           controls.update();
+       } else {
+           camera.lookAt(DEFAULT_TARGET);
+       }
    });
 
 // Load the initial default model right away