GLTFLoader Model not rendering, no errors on console or anywhere

Basically I’m trying to render any GLTF model/scene.

The cube and orbit controls are great.
The animation loop looks fine too…

But so far no luck rendering the GLFT model.
Doesn’t make any sense to me, I don’t know where to go.

Can anyone provide some light?

Here is my code.

main() {
    this.scene = new THREE.Scene(); = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    //this blue cube is rendered, very nice!!!
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    this.cube = new THREE.Mesh(geometry, material);

    //This model is NOT rendered or it is invisible somehow...
    const gltfLoader = new GLTFLoader();
    const url = '/Models/cartoon_lowpoly_small_city_free_pack/scene.gltf';
    gltfLoader.load(url, (gltf) => {
    });     = 0; = 0; = 5;

    const controls = new OrbitControls(, this.renderer.domElement);
    // How far you can orbit vertically, upper and lower limits.
    controls.minPolarAngle = 0;
    controls.maxPolarAngle = Math.PI;
    // How far you can dolly in and out ( PerspectiveCamera only )
    controls.minDistance = 0;
    controls.maxDistance = Infinity;
    // controls.enableZoom = true; // Set to false to disable zooming
    // controls.zoomSpeed = 1.0;
    controls.enablePan = true; // Set to false to disable panning (ie vertical and horizontal translations)
    controls.enableDamping = true; // Set to false to disable damping (ie inertia)
    controls.dampingFactor = 0.25;

    this.animate = this.animate.bind(this);

animate() {

Here is the model:

Looks like the model is being loaded and rendered, but all in black.

With the right camera positioning I can see this.

I´ve added some code from @Mugen87
from this post:

var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );

var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );

Looks like some light did good, this is another model, from REVIT, but when I zoom out:


No luck with the small city model, it’s entire black,
I can only see one red square for a moment

Your model from REVIT could have a high scaling. Do you see any improvements by doing this:

gltf.scene.multiplyScalar( 0.1 );
1 Like

Hello @Mugen87, thanks for the reply!

I’m now sure that the main problem is basically 2 related things:

  • Viewing frustum
  • Model size

I´ve been playing with the camera constructor parameters:

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

It fixed the problem on the model not rendering (black canvas) and also the behavior: “zooming out = darkness eats your model”. The problem is clear when you see this:

So that’s one less problem.
But now I have this behavior: the yellow thing underneath the asphalt is glitching

When you change the camera position or zoom, the yellow thing “moves/changes”

I tried to do what you have suggested, but so far I haven’t been able to find the correct object to do the scalar multiplication.

gltf.scene.multiplyScalar( 0.1 );
This throws me an method not found exception.

I will keep working to fix the new issue with the yellow thing being visible though the asphalt.

I would like to understand the the source of this problem (like understanding the Camera frustum), so that I can properly solve the issue.

Is this glich on the asphalt related with scale/camera fostrum?

When importing the asset into the following three.js based glTF-viewer, the result looks just fine. You might want to debug the viewer in order to retrieve optimal camera parameters. Or just use the code in your app since it’s open source :wink:

I’m afraid I can’t provide useful help without debugging your scene. Can you share your code with all related files (e.g. assets) as a github repo?

1 Like

Perfect, I’ll look into it.
If I find anything useful I’ll post, but for now let’s assume this as solved.

Thanks for your help @Mugen87

1 Like