Quiero cargar un modelo 3D con GLTFLoader pero me da error de sintaxis

y probé estas formas

• const cargador = nuevo TRES.GLTFLoader();
• const cargador = nuevo GLTFLoader(); después de importarlo

pero todo lo anterior no funcionó conmigo

¿Cómo puedo resolver esto sin usar React Fiber?

 import { useEffect } from "react"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import Stats from "three/examples/jsm/libs/stats.module"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; export default function Main() { useEffect(() => { /** * scene */ const scene = new THREE.Scene(); /** * textures */ const textureLoader = new THREE.TextureLoader(); const matcapTexture = textureLoader.load("./static/textures/matcaps/1.png"); /** * objects */ // torus const torusGeometry = new THREE.TorusBufferGeometry(0.2, 0.1, 15, 45); // const torusMaterial = new THREE.MeshMatcapMaterial({ map: matcapTexture }); const torusMaterial = new THREE.MeshNormalMaterial(); const torus = new THREE.Mesh(torusGeometry, torusMaterial); torus.position.set(0, 0.3, 0); scene.add(torus); // 3D model const loader = new GLTFLoader(); loader.load("./model_1/scene.gltf", (gltf) => { scene.add(gltf.scene); }); /** * camera */ const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 10000 ); camera.position.set(0, 0, 4); scene.add(camera); /** * renderer */ const canvas = document.querySelector("#canvasElement"); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, }); renderer.setSize(window.innerWidth, 400); renderer.setClearColor("white"); }, []); }