[Beginner] Extremely Confused on how to implement GLTFLoader properly

Questions
,
1

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)

light_ship_gltf-viewer

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.

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

		canvas {
			width: 100%;
			height: 100%
		}
	</style>
</head>
<body>
	<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>
	<script>
		if (WEBGL.isWebGLAvailable() === false) {
			document.body.appendChild(WEBGL.getWebGLErrorMessage());
		}
		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;

		document.body.appendChild(renderer.domElement);

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

		var loader = new THREE.GLTFLoader();

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


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

		animate();
	</script>
</body>
</html>
2

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.

image
image1660×1478 305 KB

1 Like
3

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:

4

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

5

This is what appears :smile:

image

Seems like there’s a problem… lol

Maybe I am referencing the wrong classes?

6

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>
2 Likes
8

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