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

CodePudding user response：

I noticed 2 issues:

1. Your scene needs lights. When meshes get added to the scene they're not illuminated so they stay black.
2. You're only calling 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);
});