ThreeJS GLB model is blank when loaded

Questions
1

New to ThreeJS

I have a GLB model and trying to load it, it loads successfully without any errors in the console but on the page nothing is displayed, I tried playing around with lights & camera position, but nothing works. When I tried opening the model in the ThreeJS Editor, it loads the model but then I have to select the environment as “Model viewer” to see the model, don’t know exactly whats wrong with my model.

Code:

import './style.css'
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {GUI} from 'dat.gui';

const gui = new GUI();
const modelLoader = new GLTFLoader();

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xf5f5f5);

let cube;

modelLoader.load('/models/jewel.glb', function (gltf) {
    cube = gltf.scene;
    scene.add(cube);
}, undefined, function (error) {
    console.error(error);
});


// Lights
const pointLight = new THREE.PointLight(0xffffff, 200)
pointLight.position.x = 2
pointLight.position.y = 5
pointLight.position.z = 15
scene.add(pointLight);

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

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight - 200
}

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(0, 0, 4);
scene.add(camera)

const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    domElement: document.getElementById("canvas")
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

const clock = new THREE.Clock()

const tick = () => {
    renderer.render(scene, camera)
    window.requestAnimationFrame(tick)
}

tick()

Model is uploaded here jewel.glb - Google Drive

2

According to the three.js editor, your model has a large offset from the origin and also an unusual large scale.

If you select the model in the editor and click on Edit - Center the model should appear in the default viewport. You just have to zoom out and add an ambient and directional light to achieve the result of the below screenshot.

image
image1025×737 33.9 KB

If you author the model by yourself (it seems it is exported from Blender), fix the offset and scale during the design phase and not in your app.