Trying to make a GLB/GLTF appear

Questions
,
1

Hello. I have a model of type glb that I want to display. I followed the setup for creating a scene, then I followed the instructions for adding a gltf 3d model to the scene.
I have made something appear before (rotating cube), and the error handler on the gltf load function is not being triggered.
I tried scaling and I tried adding a light source. (edit; the light is actually not showing up)
Right now the screen is just black.
Any advice/questions?

EDIT: I just tried this with an example gltf file (boombox), and nothing is showing up still.

import * as THREE from './three.js/build/three.module.js';
import { GLTFLoader } from './three.js/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );

const loader = new GLTFLoader();
loader.load( 'gpaglb.glb', function ( gltf ) {
    gltf.scene.scale.set(1, 1, 1);
    scene.add( gltf.scene );
}, undefined, function ( error ) {
    console.error( error );
} );
2

Hi!
You need to add animation loop.

renderer.setAnimationLoop( () => {
  renderer.render(scene, camera);
});

and also set position of your camera, as for now it’s just in the center of the scene.

3 Likes