Quiero proporcionar una entrada HTML para cargar un modelo 3D propio usando el formato GLTF/GLB desde local usando React tres fibra, reaccionar tres drei y tres-stdlib dentro de la aplicación NextJs, pero recibí un error con el mensaje:
Error de tiempo de ejecución no controlado TypeError: url.lastIndexOf no es una función
El siguiente es mi código de fragmento, todavía no sé qué línea de código causó el error
if (e.target.files[0].name?.includes('glb') || e.target.files[0].name?.includes('gltf')) { const reader = new FileReader() reader.readAsDataURL(e.target.files[0]) reader.onload = (_url) => { setThreeDUrl(_url) setThreeDFile(e.target.files[0]) setShowAudioThumbnailModal(true) } } return( <Canvas> <Model1 threeDUrl={threeDUrl} threeDFile={threeDFile} /> </Canvas> ) import React from 'react' import { useLoader } from '@react-three/fiber' import { GLTFLoader } from 'three-stdlib' import { OrbitControls } from '@react-three/drei' const ThreeDModel2 = ({ threeDUrl }) => { const loadedGltf = useLoader(GLTFLoader, threeDUrl) return ( <> <primitive object={loadedGltf.scene}></primitive> <OrbitControls /> <ambientLight /> </> ) } export default ThreeDModel2¿Hay alguna sugerencia para solucionar este problema? ¿Mi código aún no ha funcionado bien? tu ayuda es muy agradecida para mi