I am attempting to display a GLTF object provided by the guidance from three.js (https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/DamagedHelmet)
In order to achieve this, I have used the loader mentioned in their documentation ()
Following the instructions from three.js, I have written the following code to load and render a GLTF file:
"use strict";
const loader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const ratio = window.innerWidth / window.innerHeight
const camera = new THREE.PerspectiveCamera( 75, ratio, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
const path = 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'
camera.position.set(0,0,0)
camera.lookAt(10,0,0)
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
loader.load(path, function ( gltf ) {
gltf.scene.position.x=10
scene.add( gltf.scene );
}, function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}, function ( error ) {
console.log( 'An error occurred' , path);
});
Unfortunately, even though the browser successfully loads the resource files from the internet and there are no errors in the console, the scene remains black.
Therefore, my question is: how can I correct my codepen to display a GLTF object in a web browser using three.js?
EDIT: thanks to the best answer, here's a working codepen example: https://codepen.io/spocchio/pen/vYJpaLg