soy bastante nuevo en reaccionar y three.js, estoy tratando de renderizar un archivo .gltf usando el método const Loader = new GLTFLoader() sin embargo, cuando se renderiza el sitio web y lo veo en el navegador, veo el mensaje de error, Ocurrió un error SyntaxError: token inesperado < en JSON en la posición 0 , si alguien supiera en qué dirección señalarme, sería genial.

aquí está el código

rende.js:

 import * as THREE from "three"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; export default class Rende extends Component { componentDidMount() { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x424242, 1); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById("scene").appendChild(renderer.domElement); const loader = new GLTFLoader(); loader.load( "untitled.gltf", (gltf) => { scene.add(gltf.scene); }, (xhr) => { console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`); }, (error) => { console.error("An error happened", error); } ); } render() { return <div id="scene" className="potato"></div>; } }

y la página del componente correspondiente

casa.jsx:

 export default function Home() { return ( <Fragment> {" "} <div key={1} className="class"> tagline </div> <Rende /> </Fragment> ); }

si alguien puede ayudar sería muy apreciado. Gracias