<script src="https://unpkg.com/three@0.87.1/build/three.js"></script>
<script src="https://unpkg.com/three@0.87.1/examples/js/controls/OrbitControls.js">
</script>
<script src="https://unpkg.com/three@0.87.1/examples/js/loaders/GLTFLoader.js"></script>
// Load 3D Scene
var scene = new THREE.Scene();

// Load Camera Perspective
var camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 200 );
// camera.position.set(20, 20, 0);

var renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
renderer.setClearColor( 0xC5C5C3 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load Light
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );

var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );

// Load a glTF resource
var loader = new THREE.GLTFLoader();
loader.crossOrigin = true;
THREE.ImageUtils.crossOrigin = "";
loader.load(
	// Resource URL
	'https://cbii.reddico.io/resource.glb',
	// Called when the resource is loaded
	function (gltf) {
		camera = gltf.cameras[0];
    camera.near = 1;
    camera.far = 200;
		camera.aspect = window.innerWidth / window.innerHeight;

		camera.updateProjectionMatrix();
		camera.updateMatrix()
		scene.add(gltf.scene);

		render();
		animate();
	},
	// Called while loading is progressing
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	// Called when loading has errors
	function ( error ) {
		console.log(error);
		console.log( 'An error happened' );
	}
);

function animate() {
	render();
	requestAnimationFrame( animate );
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.