GLTF Model lost on navigating to another page and back in NextJS

14 Views Asked by At

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

0

There are 0 best solutions below