Move camera around a center

Questions
1

Hello,

I’m currently delving into learning three.js and encountering a hurdle. My aim is to maneuver the camera around a model while keeping the model stationary. Essentially, I envision the model as the center of a circle, with the camera orbiting around it, always facing the center. Additionally, I’d like to incorporate a subtle zoom and a slight upward translation with the camera maintaining its focus on the model (an overhead view). I hope this description clarifies my query. Any guidance you can provide would be greatly appreciated. Thank you in advance.

(I’ve searched for solutions but haven’t found any that suit my needs.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js GLTFLoader Example</title>
    <style>
        body { margin: 0; overflow-x: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script>

        const scene = new THREE.Scene();
        
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.set(0, 0, 5); // Set initial camera position
        
        // renderer
        const renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // Load model
        const loader = new THREE.GLTFLoader();
        loader.load('./angel2.glb', function (gltf) {
            const model = gltf.scene;
            scene.add(model);

            // Center model
            const bbox = new THREE.Box3().setFromObject(model);
            const center = bbox.getCenter(new THREE.Vector3());
            model.position.sub(center);

            var controls = new THREE.OrbitControls(camera, renderer.domElement);
            // controls.enableRotate = false;
            // controls.enableZoom = true;
            controls.rotateSpeed = 1.0; //rotation speed
            controls.zoomSpeed = 1.2; //zoom speed
            controls.maxPolarAngle = Math.PI / 2;
            controls.minDistance = 3;
            controls.maxDistance = 5;
            controls.enableDamping = true;
            controls.dampingFactor = 0.25; //0.05

            function render() {
                controls.update();
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }

        }, undefined, function (error) {
            console.error(error);
        });
        
        // Add lights
        const ambientLight = new THREE.AmbientLight(0xffffff, 1.5); // Soft white light
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // Directional light
        directionalLight.position.set(10, 10, 10); // Position light
        scene.add(directionalLight);
        
        // Render loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

    </script>

</body>
</html>