# Can't get gltf to work

**URL:** <https://discourse.threejs.org/t/cant-get-gltf-to-work/7090>\
**Category:** Questions\
**Tags:** getting-started\
**Created:** [April 14, 2019, 10:40pm UTC](https://discourse.threejs.org/t/cant-get-gltf-to-work/7090 "2019-04-14T22:40:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gswartz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gswartz/32/5080_2.png) [@gswartz](https://discourse.threejs.org/u/gswartz)\
**Post date:** [April 14, 2019, 10:40pm UTC](https://discourse.threejs.org/t/cant-get-gltf-to-work/7090/1 "2019-04-14T22:40:51Z")

</div>

I’m just starting to explore three.js. I exported a simple model from c4d and tried copying the code from [this demo](https://threejs.org/examples/webgl_loader_gltf.html). I don’t get any errors in my console but the model doesn’t show up. Attached is the gtlf file. Here’s my html. What am I doing wrong? Thanks.

```
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
			}
			canvas { width: 100%; height: 100% }
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #75ddc1;
				font-weight: bold;
			}
		</style>
		<title>My first three.js app</title>
	</head>
	<body>
		<script src="js/three.js"></script>

		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/loaders/GLTFLoader.js"></script>

		<script src="js/pmrem/PMREMGenerator.js"></script>
		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>

		<script src="js/WebGL.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script>

			if ( WEBGL.isWebGLAvailable() === false ) {

				document.body.appendChild( WEBGL.getWebGLErrorMessage() );

			}

			var container, stats, controls;
			var camera, scene, renderer;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
				camera.position.set( - 1.8, 0.9, 2.7 );

				controls = new THREE.OrbitControls( camera );
				controls.target.set( 0, - 0.2, - 0.2 );
				controls.update();

				scene = new THREE.Scene();

				var loader = new THREE.GLTFLoader();
				loader.load( 'models/test.glb', function ( gltf ) {

					scene.add( gltf.scene );

				}, undefined, function (error) {
					console.error(error);
				} );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.gammaOutput = true;
				container.appendChild( renderer.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

				// stats
				stats = new Stats();
				container.appendChild( stats.dom );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				renderer.render( scene, camera );

				stats.update();

			}

		</script>

	</body>
</html>

```

[test.gltf](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2d25a9cff6cbe0744470ac2745953f98a9e70879.gltf) (21.6 KB)

---

<div class="post-metadata">

**Author:** ![titansoftime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/titansoftime/32/1044_2.png) [@titansoftime](https://discourse.threejs.org/u/titansoftime)\
**Post date:** [April 14, 2019, 11:04pm UTC](https://discourse.threejs.org/t/cant-get-gltf-to-work/7090/2 "2019-04-14T23:04:19Z")

</div>

Your camera position has really low values. Perhaps your scene is spaced out much larger than the demo you copied and your camera is sort of caught inside, unable to see anything. Try increasing your camera position to like (500,500,500) or something and see if you can see your scene. Try different values.

If that doesn’t work, make sure your returned gltf data is correct.

---

<div class="post-metadata">

**Author:** ![gswartz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gswartz/32/5080_2.png) [@gswartz](https://discourse.threejs.org/u/gswartz)\
**Post date:** [April 14, 2019, 11:18pm UTC](https://discourse.threejs.org/t/cant-get-gltf-to-work/7090/3 "2019-04-14T23:18:02Z")

</div>

Sorry I had attached and referenced the wrong file in the html. The correct file is attached. I changed the position to 500,500,500 but still it doesn’t show up. I’ve also tried loading the file [here](https://gltf-viewer.donmccurdy.com/) and it loads fine. Beyond that, how do I confirm the gtlf data is correct?

[test.glb](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fa7f3157041013cb70a0a99e0ef44fbbb9e72d47.glb) (16.2 KB)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 15, 2019, 8:24am UTC](https://discourse.threejs.org/t/cant-get-gltf-to-work/7090/4 "2019-04-15T08:24:12Z")

</div>

Try to add some lights to your scene. For instance:

```auto
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );

var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );
scene.add( camera );

```

---

<div class="post-metadata">

**Author:** ![Usnul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/usnul/32/2355_2.png) [@Usnul](https://discourse.threejs.org/u/Usnul)\
**Post date:** [April 15, 2019, 8:31am UTC](https://discourse.threejs.org/t/cant-get-gltf-to-work/7090/5 "2019-04-15T08:31:04Z")

</div>

I use @donmccurdy 's [GLTF Viewer](https://gltf-viewer.donmccurdy.com), there’s a validator attached, so you can find any compliance issues.  
If it runs there - the problem is probably somewhere in your code, since the viewer is written using three.js.
