# Gltf-loader no error but black screen

**URL:** <https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [June 29, 2020, 2:34pm UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647 "2020-06-29T14:34:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![ALTRAN-CFD-TEAM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/altran-cfd-team/32/11169_2.png) [@ALTRAN-CFD-TEAM](https://discourse.threejs.org/u/ALTRAN-CFD-TEAM)\
**Post date:** [June 29, 2020, 2:34pm UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647/1 "2020-06-29T14:34:05Z")

</div>

Hello, i have a probleme with a gltf file.  
I can read it inside [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cfe87641987d3a23fa6aef04d0c6b08232380f34.jpeg)

This file is build with BLENDER.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cd74c315737f44ecea0b4eb72b87117a0ee2ad46.jpeg)

The export give a only file export.gltf  
See the attached part  
[export\_x3d.7z](https://discourse.threejs.org/uploads/short-url/5BVFQ8tvmCJHXZ3UtEvWeyeutMC.7z) (3.1 MB)

I’m glad if you can help me with this mistake

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 29, 2020, 3:01pm UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647/2 "2020-06-29T15:01:21Z")

</div>

Hi!  
Do you have lights in your scene? Is your camera looking at the model? Any typos in your code?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 29, 2020, 3:20pm UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647/3 "2020-06-29T15:20:40Z")

</div>

If the model works in [https://gltf-viewer.donmccurdy.com/](https://gltf-viewer.donmccurdy.com/) then three.js supports it, and the problem is likely to be in your code. You’ll need to share your code and any errors you see in the JS console for us to help.

---

<div class="post-metadata">

**Author:** ![ALTRAN-CFD-TEAM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/altran-cfd-team/32/11169_2.png) [@ALTRAN-CFD-TEAM](https://discourse.threejs.org/u/ALTRAN-CFD-TEAM)\
**Post date:** [June 29, 2020, 4:00pm UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647/4 "2020-06-29T16:00:43Z")

</div>

see my code

```
<!DOCTYPE html>

<html lang="en">

    <head>

        <title>three.js - GLTF loader</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <link type="text/css" rel="stylesheet" href="/css/main.css">

    </head>

    <body>

        <script type="module">

            import * as THREE from '../build/three.module.js';

            import Stats from './jsm/libs/stats.module.js';

            import { OrbitControls } from './jsm/controls/OrbitControls.js';

            import { FBXLoader } from './jsm/loaders/FBXLoader.js';

            import dat from './jsm/libs/dat.gui.module.js';

            import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

            var container, stats, controls;

            var camera, scene, renderer, light;

            var clock = new THREE.Clock();

            var mixer;

            init();

            animate();

            function init() {

                container = document.createElement( 'div' );

                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

                camera.position.set( 100, 200, 300 );

                scene = new THREE.Scene();

                scene.background = new THREE.Color( 0xa0a0a0 );

                scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

                light = new THREE.HemisphereLight( 0xffffff, 0x444444 );

                light.position.set( 0, 200, 0 );

                scene.add( light );

                light = new THREE.DirectionalLight( 0xffffff );

                light.position.set( 0, 200, 100 );

                light.castShadow = true;

                light.shadow.camera.top = 180;

                light.shadow.camera.bottom = - 100;

                light.shadow.camera.left = - 120;

                light.shadow.camera.right = 120;

                scene.add( light );

                // scene.add( new CameraHelper( light.shadow.camera ) );

                // ground

                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );

                mesh.rotation.x = - Math.PI / 2;

                mesh.receiveShadow = true;

                scene.add( mesh );

                var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );

                grid.material.opacity = 0.2;

                grid.material.transparent = true;

                scene.add( grid );

                //model GLTF

                var gltfLoader = new GLTFLoader();

                gltfLoader.load('/models/gltf/export_x3d.gltf', (gltf) => {

                var root = gltf.scene;

                console.log(gltf);

                scene.add(root);

                } );

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

                renderer.setPixelRatio( window.devicePixelRatio );

                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.shadowMap.enabled = true;

                container.appendChild( renderer.domElement );

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

                controls.target.set( 0, 100, 0 );

                controls.update();

                window.addEventListener( 'resize', onWindowResize, false );

                // stats

                stats = new Stats();

                container.appendChild( stats.dom );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;

                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                var delta = clock.getDelta();

                if ( mixer ) mixer.update( delta );

                renderer.render( scene, camera );

                stats.update();

            }

        </script>

    </body>

</html>
```

---

<div class="post-metadata">

**Author:** ![ALTRAN-CFD-TEAM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/altran-cfd-team/32/11169_2.png) [@ALTRAN-CFD-TEAM](https://discourse.threejs.org/u/ALTRAN-CFD-TEAM)\
**Post date:** [June 29, 2020, 4:04pm UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647/5 "2020-06-29T16:04:03Z")

</div>

i see a strange thing:  
the folder /models/ not appear in the source console.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/97878e45be734b74bc083d533f30a9a1c07d4372.png)

---

<div class="post-metadata">

**Author:** ![ALTRAN-CFD-TEAM](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/altran-cfd-team/32/11169_2.png) [@ALTRAN-CFD-TEAM](https://discourse.threejs.org/u/ALTRAN-CFD-TEAM)\
**Post date:** [June 30, 2020, 7:03am UTC](https://discourse.threejs.org/t/gltf-loader-no-error-but-black-screen/16647/6 "2020-06-30T07:03:57Z")

</div>

ok i change some details in my code:

i replace  
` gltfLoader.load('models/gltf/export_x3d.gltf', (gltf) => {`  
by  
` gltfLoader.load('models/gltf/export_x3d.gltf', function (gltf) {`

And the scale of the model is to small, i not ajust fit automatcaly, so a add a scale of 200% to see something.

```
//model GLTF

                var modelgl

                var gltfLoader = new GLTFLoader();

                gltfLoader.load('models/gltf/export_x3d.gltf', function (gltf) {

                    var modelgl = gltf.scene;

                    modelgl.scale.set(200,200,200)

                    console.log(modelgl);

                    scene.add(modelgl);

                } );

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2f38b44ee2a13742763ea43db30f3e0ed26901f6.png)
