Try to load 3d model (gltf), what im doing wrong?

hey im try to upload 3D model (gltf) to the website and for some reason i do it wrong and it doesnt work… ill glad for help.

im a beginner with js.
i load 2 documents from three: the main “three.js” and the “GLTFLoader.js”.
thansk for helping!

i upload the model file for you.

this is the html:

<!DOCTYPE html>
		<meta charset=utf-8>
		<title>My first three.js app</title>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		<script src="three.js"></script>
		<script src="GLTFLoader.js"></script>


			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

var loader = new THREE.GLTFLoader();

loader.load( 'model/scene.gltf', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );
</html> (2.9 MB)

When you are new to three.js, you should read some tutorials or guides in order to get familiar with the library. The following documents might be very helpful since youe code snippet misses some essential parts of a 3D scene (e.g. an animation loop and lights)

i read it all several times and still dont understand what im doing wrong…want me to uplaod my project file?

this is my rar, can u see what i did wrong and send me this fixed plz so i can see the dieffernce? ill appriciate it very much.
3D.rar (3.0 MB)

I get an error when extracting your rar file.

In the meanwhile, use the code from the following example. That should be a good starting point.

There’s a gltf previewer here - which you can check to see if your model works (which it does, I checked). But as @Mugen87 says, you need to work on the set-up of your scene first to understand why your code isn’t working (render loop, lighting etc).

1 Like

i checked my gltf already and its works.
ill try to check the setup again…

Hello, I have a problem quite similar to this. I am trying to load a 3D model from the example. The link is the following :
And my HTML code is the following :

<!DOCTYPE html><html lang="en-US"><head><title>GLTF Loader</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
body {margin:0}
style {display:block}
</style></head><body><script src="three.js"></script><script src="GLTFLoader.js"></script>
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,500);
	var renderer = new THREE.WebGLRenderer();

	var loader = new THREE.GLTFLoader();
		console.log('model loaded');

	var animate = function(){

I am unable to load the model. Now I have several questions:

  1. What is exact file for GLTFLoader?

For the second file there are several library dependencies (three.module.js)
I don’t want to include the entire github repo with my code.
2. Which file(s) should I use for the above code?
I have visited the following link:
It works fine. But when I try to open the file from the entirely cloned github repo it fails.
[GLTF_Loader (local)](file:///root/Desktop/three.js-dev/examples/webgl_loader_gltf.html)

NOTE: I don’t want to set up a server right now.
I have visited the following link:
How To Run Things Locally
How to solve this problem?

Steps to reproduce the problem: 1. Save the above the HTML code in a file.
2. Download three.js 3. Download GLTFLoader.js
4. Download Flower.js
5. Put them in a same directory
6. Open the HTML file in browser

In your case, you have to use option 1.

This could be related to a security issue since you have to host your app on a local web server. It does not work if you open your index.html directly from file. The respective guide should describe the necessary steps.

I had tried the previous link. However I managed to set up a server and the github code snippet is working properly. But I didn’t manage to successfully run my html code in order to display the model. Is there anything wrong?

Well it might be problematic to position the camera at the origin since the model could be at the exact same spot. Try to position the camera at ( 100, 100, 100 ) and see if it solves the issue.

I managed to download a working model in github.
It works with my model as well. It also runs for both camera.position.set(0,0,0); and
camera.lookAt(0,0,0); as well as camera.lookAt(100,100,100);
But I am unable to dry run the code.
I downloaded the previous file 3D.rar
which is mentioned in this thread. But that code snippet is not working. Can you please provide a step by step explanation?
The problem with this js library is that I can’t debug it as it generally does not throw any error or warning.

UPDATE: I managed to update the code of following file (which is mentioned in this thread before)

My first three.js app body { margin: 0; } canvas { width: 100%; height: 100% }

		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );

		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		var loader = new THREE.GLTFLoader();

		loader.load( 'model/scene.gltf', handle_load);
		var mesh;
		function handle_load( gltf ) {
			mesh = gltf.scene;
			mesh.children[0].material = new THREE.MeshLambertMaterial();
			scene.add( mesh );
			mesh.position.z = -10;
		function animate(){
				mesh.rotation.y += 0.01;
But it is showing something like the following:

Can you please resolve this issue ?

If mesh is undefined in this case, it’s not really an error situation. Keep in mind that you are loading your glTF asset asynchronously. That means the mesh variable is set not at some point in the future when the scene.gltf has been loaded and parsed. So it’s better to implement animate() like so:

function animate(){


    if (mesh) mesh.rotation.y += 0.01;


You can ignore the shader warnings since they are only highlighting the fact that a certain WebGL extensions is not supported by your device.

But I am unable to see the model .

How about sharing your entire project as a github repo? This will make it easier to debug your issue.

Ok. I will upload and share.

Anyway this thing is working on my android phone.It is also working after installing windows using virtualbox. Just can’t resolve this thing on linux. Will do a fresh linux reinstallation then follow everything from scratch. Anyway thanks for assistance. Will inform if I encounter this same thing later.

I have another problem while loading gltf 2.0 using gltfloader. In blender the mesh is visible but in webpage it it black but the lighting is still enabled.
I have several questions:

  1. Is the problem is the mesh itself ?
  2. Blender has a terrible UV mapping system (atleast it is complicated for me). So what is the possible way to load mesh and texture seperately and then map them in three.js ?
    I have seen an option regarding this.
    var cube = new THREE.Mesh( geometry, material );
    So what is the possible way to do it here ?

    Alternatively, you can show me a fast and efficient way for uvmapping of custom mesh in blender.

The model seems to work fine in the three.js editor.

I’ve added an ambient and directional light to the scene. The materials of the model have a metalness value of 1. That means just adding an ambient light won’t show any effect. Consider to apply an environment map to the model.

This line creates a mesh and has nothing to do with uv unwrapping. I suggest you author texture coordinates in Blender. Please google the topic since there are many existing resources about it.