I am trying to render a GLTF object provided by the three.js guide (https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/DamagedHelmet)
To do so, I tried with the following loader provided in their guide (https://threejs.org/docs/#examples/en/loaders/GLTFLoader)
Following the threejs guide, I wrote this code that should 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 happened' , path);
});
Unfortunatley the scene stays black even if the browser correctly loads the resource files from the internet and there are no errors in the console.
So, my question is: how can fix my codepen so it shows a GLTF object in a browser using three.js?
EDIT: thanks to the best answer, here a codepen that works right: https://codepen.io/spocchio/pen/vYJpaLg
I noticed 2 issues:
renderer.render() once, and that happens before you load your GLTF. So when the helmet is finally loaded no rendering takes place.I made these 2 updates in your Codepen, and the helmet showed up.
renderer.render( scene, camera );
// Add ambient light
scene.add(new THREE.AmbientLight());
loader.load(path, function ( gltf ) {
gltf.scene.position.x=10
scene.add( gltf.scene );
// Render scene after assets have been added
renderer.render( scene, camera );
}, function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
}, function ( error ) {
console.log( 'An error happened' , path);
});