Objects are not visible until i zoom in three js

Question

I am trying to load a 3d model in three js, and im setting the zoom camera attribute before initializing the renderer, but somehow my 3d model does not appear before I interact with orbit controls.

Here is my current code

import {
    OrbitControls
} from "OrbitControls";
import {
    GLTFLoader
} from "GLTFLoader";

var object = new THREE.Mesh();
var scene = new THREE.Scene();
var light = new THREE.AmbientLight(0x404040, 3.00); // soft white light
scene.add(light);

var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 1000)
camera.position.x = 1.3268086806975914
camera.position.y = 4.50
camera.position.z = 0.5734510644018176
camera.zoom = 400

const quaternion = new THREE.Quaternion(-0.1685149992965894, 0.5451446481682899, 0.11293564983939201, 0.8134282676308319);
camera.applyQuaternion(quaternion); // Apply Quaternion
camera.quaternion.normalize(); // Normalize Quaternion


var renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
});



renderer.setClearColor(0x000000, 0);
renderer.physicallyCorrectLights = true;
renderer.shadowMap.enabled = true;
// renderer.outputEncoding = THREE.sRGBEncoding
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
renderer.setPixelRatio(window.devicePixelRatio);
document.getElementsByClassName('elementor-element-271af50')[0].appendChild(renderer.domElement);
var controls = new OrbitControls(camera, renderer.domElement);

controls.enableDamping = false;
controls.enablePan = false
controls.rotateSpeed = 0.1

//loading the 3d model
var loader = new GLTFLoader();
loader.load(
    "models/3d_model_website.gltf",
    function(gltf) {
        gltf.scene.traverse(function(child) {
            if (child.isMesh) {
                var m = child;
                m.castShadow = true;
                m.receiveShadow = false;
            }
            if (child.isLight) {
                var l = child;
                l.castShadow = true;
                l.shadow.bias = -0.003;
                l.shadow.mapSize.width = 2048;
                l.shadow.mapSize.height = 2048;
            }
        });
        object = gltf.scene;
        scene.add(object);
    },
    function(xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    function(error) {
        console.log(error);
    }
);


light.target = object;

//event listener for changing the aspect ratio when the user zooms in and out
window.addEventListener("resize", onWindowResize, false);

function onWindowResize() {
    camera.updateProjectionMatrix();
    camera.aspect = window.innerWidth / window.innerHeight / 2;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
    render();
}

var point1 = new THREE.Vector3();
object.updateMatrixWorld();
object.getWorldPosition(point1);
console.log(point1);

//function for rendering the scene
function render() {
    renderer.render(scene, camera);
}


//functions for animating the scene
function animate() {
    object.rotateY(0.0003 * Math.PI)
    object.rotateX(0.0003 * Math.PI)
    object.rotateZ(0.0003 * Math.PI)
    
    requestAnimationFrame(animate);
    controls.update();
    render();
}
animate();

I have tried rendering the scene once again at the bottom but with no results. Everything worked perfectly until I added the camera.zoom = 400 so i figured it had to be something with that. Any help would be appreciated.