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

**URL:** <https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907>\
**Category:** Questions\
**Tags:** obj-loader\
**Created:** [August 13, 2023, 3:16pm UTC](https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907 "2023-08-13T15:16:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![beilavi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/beilavi/32/38968_2.png) [@beilavi](https://discourse.threejs.org/u/beilavi)\
**Post date:** [August 13, 2023, 3:16pm UTC](https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907/1 "2023-08-13T15:16:31Z")

</div>

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.

```javascript
<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>

```

---

<div class="post-metadata">

**Author:** ![fleixi](https://avatars.discourse-cdn.com/v4/letter/f/3da27b/32.png) [@fleixi](https://discourse.threejs.org/u/fleixi)\
**Post date:** [August 14, 2023, 10:18am UTC](https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907/2 "2023-08-14T10:18:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![beilavi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/beilavi/32/38968_2.png) [@beilavi](https://discourse.threejs.org/u/beilavi)\
**Post date:** [August 14, 2023, 11:10am UTC](https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907/3 "2023-08-14T11:10:07Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [August 14, 2023, 12:19pm UTC](https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907/4 "2023-08-14T12:19:38Z")

</div>

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](https://codepen.io/boytchev/full/XWyvzja)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/0/70e82f92500ce40fb58b4fb84a0f9c0ef7335c5c.jpeg)](https://codepen.io/boytchev/full/XWyvzja)

---

<div class="post-metadata">

**Author:** ![GeorgiKarchev1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/georgikarchev1/32/47006_2.png) [@GeorgiKarchev1](https://discourse.threejs.org/u/GeorgiKarchev1)\
**Post date:** [April 21, 2024, 12:53pm UTC](https://discourse.threejs.org/t/three-js-3d-model-added-but-its-not-visible/54907/5 "2024-04-21T12:53:29Z")

</div>

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