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

Questions
1

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>
2

Are the object.position and object.scale properties values you habe evaluatet bevor? Your object would be to small after scale it so small or it could be mich Mord away Form your camera that you expect.

Are there any errors in the console?

3

I tried playing with the position and scale but nothing changed. Nope no errors. All it says in the console is “THREE.WebGLRenderer 87” and “OBJLoader: 1282.401123046875 ms”

4

There might be many reasons for a model not showing up:

  • scale and position of the model
  • position and orientation of the camera
  • properties of the light and materials
  • properties of the geometry (e.g. orientation of polygons)
  • using old version to Three.js

When I try to load the model, it shows on the screen (I used the latest Three.js):

https://codepen.io/boytchev/full/XWyvzja

image

5

Yo Pavel, can you give me your discord, twitter, instagram or another social media to ask you a question ?