GLTFLoader Model not rendering, no errors on console or anywhere

[Gabriel]

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();
    this.camera = 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.scene.add(this.cube);

    //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) => {
        this.scene.add(gltf.scene);
        this.renderer.render(this.scene, this.camera);
    });        

    this.camera.position.x = 0;
    this.camera.position.y = 0;
    this.camera.position.z = 5;

    const controls = new OrbitControls(this.camera, 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);
    this.animate();
}

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

Here is the model:

[Gabriel]

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

With the right camera positioning I can see this.

EDIT:
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 );

I am using obj loader, but my obj can not be displayed at all

myown.obj.zip (2.5 MB) Hi, I want to play the attached obj file using threejs, what I did is to modify the webgl_loader_obj.html directly by pointing to this obj, using below: loader.load( ‘models/obj/myown.obj’, function ( obj ) { object = obj; }); But when I refresh the page, the whole page is empty. I am very new at using threejs, and do not know how to debug and find error, I don’t see any error in the console either. can you please help to tell me the error here? Thanks in advance

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

ZOOMOUT

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

[Mugen87]

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

gltf.scene.multiplyScalar( 0.1 );

[Gabriel]

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?

[Mugen87]

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

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?

[Gabriel]

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