Nuevo en ThreeJS

Tengo un modelo GLB e intento cargarlo, se carga correctamente sin ningún error en la consola, pero en la página no se muestra nada, intenté jugar con las luces y la posición de la cámara, pero nada funciona. Cuando intenté abrir el modelo en el Editor ThreeJS, carga el modelo pero luego tengo que seleccionar el entorno como "Visor de modelo" para ver el modelo, no sé exactamente cuál es el problema con mi modelo.

Código:

 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()

El modelo se carga aquí https://drive.google.com/file/d/15NeEfkYS698Gy4HNBO9p19HiOIS2uOmB/view?usp=sharing