I want to provide HTML input to upload own 3d model using GLTF/GLB format from local using React three fiber, react three drei, and three-stdlib within NextJs App, but I received error with the message is
Unhandled Runtime Error TypeError: url.lastIndexOf is not a function
The following is my snippet code, I still don't know which line of code caused 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 ThreeDModel2Is there any suggestion to solve this problem? is my code still haven't worked fine yet? Your help is very thankful for me