importing GLTFLoader only shows white screen

Question

i have begun learning three.js for my project, but it seems that when i try to import my glb model (exported from blender), hosted in localhost with Vite as instructed in threejs documentations only results in white screen. I will attach the code below. The script file is in the same root with the 3d file. I have tested the 3d file in gtlf viewer and it works fine. Any help will be much appreciated.

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

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(60, innerHeight, innerWidth, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const light = new THREE.AmbientLight(0xffffff, 1);
    scene.add(light);

const controls = new OrbitControls( camera, renderer.domElement );

const loader = new GLTFLoader();
loader.load( './testmodel.glb' , function (gltf) {
    scene.add( gltf.scene);
});

Answer 1

You didn't initialize scene. Probably this will fix your issue.

And keep in mind, that even when you will render everything properly, you might not seen model... because is huge. Try later play less with scale.

const scene = new THREE.Scene();

https://threejs.org/docs/#manual/en/introduction/Creating-a-scene