Three.JS 3D Model Added but it's not visible

I'm trying to add a 3D Model to my website. I'm using three.js. I tried all I could but I can not make the 3d model visible. In the network tab in developer tools I can see that MTL and OBJ files are loaded but the page is just blank. I tried with 3 different 3D models but same issue persists. I would apricate any help.

<html>
<head>
    <title>3D Model</title>
    <style>
        html, body {
            margin: 0;
            background-color: white;
            overflow: hidden;
        }
    </style>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="/js/OrbitControls.js"></script>
<script src="/js/OBJLoader.js"></script>
<script src="/js/MTLLoader.js"></script>

<script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 5);
    camera.lookAt(scene.position);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xeeeeee); // Light gray background color
    document.body.appendChild(renderer.domElement);

    const light = new THREE.AmbientLight(0x404040);
    scene.add(light);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    var MTLLoader = new THREE.MTLLoader();
    MTLLoader.setPath("/models/Silivri001/");
    MTLLoader.load("odm_textured_model_geo.mtl", function(material) {
        material.preload();

        // Set the path for the OBJLoader
        var OBJLoader = new THREE.OBJLoader();
        OBJLoader.setMaterials(material);
        OBJLoader.setPath("/models/Silivri001/"); // Set the correct path here

        OBJLoader.load("odm_textured_model_geo.obj", function(object) {
             object.position.set(0, -60, 0); // Adjust the values as needed
        object.scale.set(0.1, 0.1, 0.1)
            scene.add(object);
        });
    });

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

</script>
</body>
</html>

Solution

By changing the CDN of the files to the more modern UNPKG CDN, loading all the three.js files from there, and also loading the 3D model from the URL you pasted on the comment, I was able to load the file successfully. I also tweaked the position of the object to -5 and the scale to 0.05. Here is the code that worked for me:

<html>

<head>
    <title>3D Model</title>
    <style>
        html,
        body {
            margin: 0;
            background-color: white;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://unpkg.com/three@0.147.0/examples/js/loaders/OBJLoader.js"></script>
    <script src="https://unpkg.com/three@0.147.0/examples/js/loaders/MTLLoader.js"></script>

    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 10000);
        camera.position.set(0, 0, 5);
        camera.lookAt(scene.position);


        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xeeeeee); // Light gray background color
        document.body.appendChild(renderer.domElement);

        const light = new THREE.AmbientLight();
        scene.add(light);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        const controls = new THREE.OrbitControls(camera, renderer.domElement);

        var MTLLoader = new THREE.MTLLoader();

        MTLLoader.load("https://elipptic5g.com/models/Silivri001/odm_textured_model_geo.mtl", function (material) {
            material.preload();
            console.log(material)

            // Set the path for the OBJLoader
            var OBJLoader = new THREE.OBJLoader();
            OBJLoader.setMaterials(material);


            OBJLoader.load("https://elipptic5g.com/models/Silivri001/odm_textured_model_geo.obj", function (object) {
                object.position.set(0, -5, 0); // Adjust the values as needed
                object.scale.set(0.05, 0.05, 0.05)
                object.rotation.x = -Math.PI / 2;

                console.log(object)
                scene.add(object);
            });
        });

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

    </script>
</body>

</html>

Here is what I see in my browser: