The GLTF Model disappears when i navigate back to page where it was. How do I properly configure it?
import { useGLTF, useTexture } from '@react-three/drei'
import { Suspense, useEffect, useState } from 'react'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import type { Object3D } from 'three'
export default function GltfModel() {
// const [model, setModel] = useState<Object3D>(null!)
// useEffect(() => {
// const gltfLoader = new GLTFLoader()
// gltfLoader.load('/models/tef4.gltf', async (gltf) => {
// const nodes = await gltf.parser.getDependencies('node')
// setModel(nodes[0])
// })
// }, [])
const model = useGLTF('/models/tef4.gltf')
const [colorMap, displacementMap, normalMap, roughnessMap, aoMap] = useTexture([
'/textures/Carpet_Color.png',
'/textures/Carpet_Displacement.png',
'/textures/Carpet_Normal.png',
'/textures/Carpet_Roughness.png',
'/textures/Carpet_ao.png',
])
return (
<>
<primitive object={model.scene} />
<group>
<mesh position={[-15.35, -0.05, 0]}>
<boxGeometry args={[15.35, 0.1, 6.05]} />
<meshStandardMaterial displacementScale={0} map={colorMap} displacementMap={displacementMap} normalMap={normalMap} roughnessMap={roughnessMap} aoMap={aoMap} />
</mesh>
<mesh position={[0, -0.05, 0]}>
<boxGeometry args={[15.35, 0.1, 6.05]} />
<meshStandardMaterial displacementScale={0} map={colorMap} displacementMap={displacementMap} normalMap={normalMap} roughnessMap={roughnessMap} aoMap={aoMap} />
</mesh>
<mesh position={[15.35, -0.05, 0]}>
<boxGeometry args={[15.35, 0.1, 6.05]} />
<meshStandardMaterial displacementScale={0} map={colorMap} displacementMap={displacementMap} normalMap={normalMap} roughnessMap={roughnessMap} aoMap={aoMap} />
</mesh>
</group>
</>
)
}
useGLTF.preload("/models/tef4.gltf")
before i added the useGLTF i used to load it with useEffect as you can see commented. But that is not satisfying, because every time i interact with the objects in the Canvas, the model blinks as hell :D