<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js"></script>
body {
  margin: 0;
  border: none;
  padding: 0;
  box-sizing: border-box;
}
var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        
        camera.position.set(0, 0, 5);
        var light = new THREE.AmbientLight(0xffffff, 1);
        scene.add(light);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);



        
        
        var loader = new THREE.GLTFLoader();				
        loader.load('https://assets.codepen.io/5755392/sphere.glb',function ( gltf ) {
            
        camera.lookAt(gltf.scene.position);
        
        
		scene.add( gltf.scene );

		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Group
		gltf.scenes; // Array<THREE.Group>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

	    },
	    // called while loading is progressing
	    function ( xhr ) {

		    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	    },
	    // called when loading has errors
	    function ( error ) {

		    console.log( 'An error happened' );

	    }
        );
        
        function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.