Can't get gltf to work

Questions
1

I’m just starting to explore three.js. I exported a simple model from c4d and tried copying the code from this demo. 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 (21.6 KB)

2

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.

3

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 and it loads fine. Beyond that, how do I confirm the gtlf data is correct?

test.glb (16.2 KB)

4

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

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 );
5

I use @donmccurdy 's GLTF Viewer, 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.