GLFTLoader does not load model

Questions
1

Hello, everyone. I am freshmen for three.js.
I am trying to load GLTF model that downloaded from online.It looks well on onlie-viewer but when I try to load it on my local, it doesn’t work anymore. I printed the model content in console and it looks like follows.
And one thing more, if I use gbl model file from tutor, it shows that model.

image
image939×553 22 KB

But on canvas, nothing appear.
I hope who help me.
Thank you.

2

Can you please share your code as a live example or as a git repository?

In any event, please share the problematic glTF model in this thread so it’s possible for the community to validate the asset.

3

Thank you Mugen for your so quick reply.
Here is my source code and It’s assembled from some tutors.
forth.html (8.1 KB)
Now it doesn’t show the model.
This is the model that I downloaded.
Sorry, maybe model file seems too large, I can’t upload it.
You can find it on my google drive.


image
image1920×1080 159 KB

This is current result.
Please help me.Thank you again.

1 Like
4

I’ve update your HTML code so you can actually see the model. The glTF file itself is fine, the problem is it has an extreme scaling (it’s quite large). I’ve added some code to improve this and also adjusted the camera parameters. Besides, the house is now centered at the origin (which is recommended for model viewers).

forth.html.zip (3.3 KB)

BTW: I’ve noticed three.js and GLTFLoader are from different releases:

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/mrdoob/Three.js@r92/examples/js/loaders/GLTFLoader.js'></script>

As you can see, three.js is from R108 and GLTFLoader from R92. This is really bad! Please always use example files from the same release. Mixing versions is not supported.

3 Likes
5

Thank you very much.
This code works very well.
And may I ask one more?
I tried another model and it is tank model.
So it appears on screen but the texture doesn’t apply.

image
image1920×1080 247 KB

So I got it’s material manually and skinned it to tank.
let texture = new THREE.TextureLoader().load(’./models/t-34_tank/textures/body_and_truck_baseColor.png’);
//texture.flipY = false;
const tank_material = new THREE.MeshPhongMaterial({
map: texture,
color: 0xffffff,
skinning: true
});
let loader = new THREE.GLTFLoader();
loader.load(’./models/t-34_tank/scene.gltf’, function (gltf) {
model = gltf.scene;

        model.traverse(o => {
            if (o.isMesh) {
                o.castShadow = true;
                o.receiveShadow = true;
                o.material = tank_material; // Add this line
            }
        });
        scene.add(model);

But result is like this:

image
image1920×1080 156 KB

So I need to do this manually like above? Or it applied automatically?
If you need, here is my working file and model file.
fifth.html (2.0 KB)
Kindly help me again.
And if possible, would you like to give me your contact?:smiley:

6

Oh, I found the solution. The problem was Light.
I change the light’s brightness from 0xffffff to 0x111111.
So it works well.

image
image1920×1080 194 KB

Thank you very much, Mr.Mugen.

2 Likes