GLTFLoader, Cant seem to load my own model but can with others

Questions
,
1

Hey everyone, Im still new to threejs and have been having some trouble loading in a model I built from blender through the gltf loader. I’ve tried loading models I’ve found on the web and they work perfect. I’ve also tried loading my exported gltf file into https://gltf-viewer.donmccurdy.com/ and I can see if fine too so it must be something in my code. I just cant figure out what.

Here is my code: Thanks in advance

 <!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
		<!-- <div class="scene"></div> -->
		<script src="libraries/three.min.js"></script>
		<script src="libraries/PointerLockControls.js"></script>
			<script src="libraries/OrbitControls.js"></script>
		<script src="libraries/GLTFLoader.js"></script>



		<script>

	     	let scene,camera,renderer, controls, model;

			  function init(){

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xFFFFFF );
//Camera Things

						camera = new THREE.PerspectiveCamera( 75, window.innerWidth/  window.innerHeight, 0.1, 5000 );
						camera.position.set(0,25,50);


// Lighting Things
						const ambient = new THREE.AmbientLight(0xFFFFFF,4);
						scene.add(ambient);
						//
						// const light = new THREE.DirectionalLight(0xFFFFFF,2);
						// light.position.set(0,50,100);
						// scene.add(light);


// Renderer
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);
			renderer.setPixelRatio(window.devicePixelRatio);

			//Injects the canvas into HTML Page
						document.body.appendChild( renderer.domElement );

			//--------------- Above is always the same with setting a scene up in three

			// controls
								controls = new THREE.PointerLockControls(camera, renderer.domElement);
									// controls = new THREE.OrbitControls(camera, renderer.domElement);

									document.body.addEventListener( 'click', function () {
										  controls.lock();
											}, false );

					


							  	scene.add( new THREE.AxesHelper(500));
								// controls.update();



						      	camera.position.y = 1;
						        camera.position.z = 2;


						        const onKeyDown = function (event) {
						            switch (event.keyCode) {
						                case 87: // w
						                    controls.moveForward(.25);
						                    break;
						                case 65: // a
						                    controls.moveRight(-.25);
						                    break;
						                case 83: // s
						                    controls.moveForward(-.25);
						                    break;
						                case 68: // d
						                    controls.moveRight(.25);
						                    break;
						            }
												};



document.addEventListener('keydown', onKeyDown, false);

}

// basic Animation
												function animate() {
												// controls.update();
												requestAnimationFrame( animate );
												renderer.render( scene, camera);
											};
  init();
		animate();


// Load Model

				  new THREE.GLTFLoader().load('3d/trial1/file3.gltf', result => {
					model = result.scene.children[0];
					model.position.set(0,-5,0);
					scene.add(model);
					animate();
				})



		// 	function onWindowResize(){
		// 	camera.aspect = window.innerWidth / window.innerHeight;
		// 	camera.updateProjectionMatrix( );
		// 	renderer.setSize(window.innerWidth , window.innerHeight);
		// };
		//
		// 	window.addEventListener('resize',onWindowResize,false);




		</script>
	</body>
</html>

file3.bin (1.8 MB) file3.gltf (868.2 KB)

2
  1. Did you try downloading the models from the web and then loading them using your code, or did you load them using an external URL?
  2. Do you get any errors in dev console?
3

Hey,

  1. Yep I downloaded the models and loaded them locally.
  2. Just this stuff here which I think are just warnings: No errors :confused:

PointerLockControls.js:1 THREE.PointerLockControls: As part of the transition to ES6 Modules, the files in ‘examples/js’ were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in three.js docs.
(anonymous) @ PointerLockControls.js:1

OrbitControls.js:1 THREE.OrbitControls: As part of the transition to ES6 Modules, the files in ‘examples/js’ were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in three.js docs.
(anonymous) @ OrbitControls.js:1

GLTFLoader.js:1 THREE.GLTFLoader: As part of the transition to ES6 Modules, the files in ‘examples/js’ were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in three.js docs.

4

It depends on how your model is organised, but changing this:

model = result.scene.children[0];
model.position.set(0,-5,0);
scene.add(model);

to just:

model = result.scene;
model.position.set(0,-5,0);
scene.add(model);

seems to solve issue when trying to load damaged helmet.

I can’t load your model because of CORS, but 2 things to check:

  1. In devtools, check in the network panel whether the model is loaded at all.
  2. If it is, console.log({ result }) to see how it is structured. If you’re adding result.scene.children[0] there’s a chance you’re adding an empty group / mesh instead of the actual model.
5

Removing the children[0] seemed to fix it! Thankyou so much