[Beginner] Extremely Confused on how to implement GLTFLoader properly

Hello! I have recently started to learn three.js and I have ran into some roadblocks right at the start…

I have followed the getting started instructions and was able to start a local server with basic shapes/lines.

But now I want to start using GLTFLoader, but I have been tackling this issue for the past few hours and I have sadly no results.

I am trying to get this pirate ship to show up, but it will not load.

ship_light.bin (494.9 KB)

ship_light.gltf (30.7 KB)


I was using the webgl GLTFLoader on github as a reference, and other things I found on stack overflow that may have helped (like moving the camera in case it was inside the gLTF object).

But honestly, I am just looking for guidance and better practices for facing this issue… It shouldn’t be this difficult lol.

	<title>My first three.js app</title>
		body {
			margin: 0;

		canvas {
			width: 100%;
			height: 100%
	<script src="examples/js/loaders/GLTFLoader.js"></script>
	<script src="examples/js/controls/OrbitControls.js"></script>
	<script src="examples/js/WebGL.js"></script>
	<script src="build/three.js"></script>
	<script src="build/three.min.js"></script>
		if (WEBGL.isWebGLAvailable() === false) {
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.set(100, 100, 100);
		camera.lookAt(new THREE.Vector3(0, 0, 0));

		var renderer = new THREE.WebGLRenderer({
			alpha: true
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.gammaOutput = true;


		var light = new THREE.HemisphereLight(0xbbbbff, 0x444422);
		light.position.set(0, 1, 0);

		var loader = new THREE.GLTFLoader();

		loader.load('light_ship.gltf', function (gltf) {
			var ship = gltf.scene;

		var animate = function () {
			renderer.render(scene, camera);


Is this a syntax error in your code? In any event, you can use the code from the this example as a basis for your own app. I have just replaced the URL of GLTFLoader.load() in order to load your asset and everything works fine.

1 Like

If you could open the JS console and let us know what errors (if any) appear, that would also help to diagnose the issue. :slight_smile:

Thank you for noticing that! I removed it but still nothing. I think the error is occurring when I am loading the ship.

This is what appears :smile:


Seems like there’s a problem… lol

Maybe I am referencing the wrong classes?

Oh, the scripts are out of order, and threejs is there twice. threejs must be included first, then the addons:

<script src="build/three.min.js"></script>
<script src="examples/js/loaders/GLTFLoader.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/WebGL.js"></script>

Thank you so much!! I can’t believe I didn’t see it.