Loading a single GLTF file not working

Questions
,
1

Hi All,

I am very new to the three.js world and learning as I go along. I am in the process of trying to set up a model viewer and have been following the Red Stapler tutorial on Youtube.

I have managed to get the model viewer up and running, however, its only loading parts of my gltf file.

When I drop my file I have had created into https://gltf-viewer.donmccurdy.com/ I see this:

Screenshot 2021-09-23 at 11.11.45
Screenshot 2021-09-23 at 11.11.451920×1712 54.7 KB

But then when I load my file into my local dev I only get this:

Screenshot 2021-09-23 at 11.12.37
Screenshot 2021-09-23 at 11.12.372078×1250 44.3 KB

As you can all see it is missing the top part of the file.

Here is my code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { 
                width: 100vw;
                height: 100vh;
                margin: 0;
                overflow: hidden; 
            }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
        <script src="js/GLTFLoader.js"></script>
        <script src="js/OrbitControls.js"></script>
		<script>
            
            let scene, camera, renderer;
            function init() {
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0xdddddd);
                camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
                camera.rotation.y = 45/180*Math.PI;
                camera.position.x = 800;
                camera.position.y = 100;
                camera.position.z = 1000;

                renderer = new THREE.WebGLRenderer({antialias:true});
                renderer.setSize(window.innerWidth,window.innerHeight);
                document.body.appendChild(renderer.domElement);


                controls = new THREE.OrbitControls(camera,renderer.domElement);
                controls.addEventListener('change', renderer);
                hlight = new THREE.AmbientLight (0x404040,100);
                scene.add(hlight);
                directionalLight = new THREE.DirectionalLight(0xffffff,100);
                directionalLight.position.set(0,1,0);
                directionalLight.castShadow = true;
                scene.add(directionalLight);
                light = new THREE.PointLight(0xc4c4c4,10);
                light.position.set(0,300,500);
                scene.add(light);
                light2 = new THREE.PointLight(0xc4c4c4,10);
                light2.position.set(500,100,0);
                scene.add(light2);
                light3 = new THREE.PointLight(0xc4c4c4,10);
                light3.position.set(0,100,-500);
                scene.add(light3);
                light4 = new THREE.PointLight(0xc4c4c4,10);
                light4.position.set(-500,300,500);
                scene.add(light4);



                let loader = new THREE.GLTFLoader();
                loader.load('./assets/bottle.gltf', function(gltf){
                    car = gltf.scene.children[0];
                    car.scale.set(10,10,10);
                    scene.add(gltf.scene);
                    animate();
                    
                });
                loader.load('bottle.gltf', onLoad, undefined, onError);
            }
            function animate() {
                renderer.render(scene,camera);
                requestAnimationFrame(animate);
            }
            init();
		</script>
	</body>
</html>

Any help on where I am going terribly wrong will be much appreciated.

Thanks

3

This line might be a source of trouble – it attaches only the first object in the glTF file to your scene, and there could be several. Most often you would want something like car = gltf.scene instead.

loader.load('bottle.gltf', onLoad, undefined, onError);

^this line doesn’t seem to make sense, as it’s loading the same file from a different URL than before, and does not define the onLoad function.