Usé @react-three/fiber, @react-three/drei, three js y gltfjsx para crear un sitio web de representación en 3D. Quiero renderizar un archivo gltf y ya pude hacerlo con éxito, pero con un problema que es cada vez que el servidor de desarrollo inicia, la pantalla parpadea y se queda en blanco. Aunque si uso mallas proporcionadas por drei como cubo y esfera, la pantalla no se quedará en blanco, pero tan pronto como quiera usar el modelo gltf personalizado, la pantalla se quedará en blanco debajo de mi componente jsx y el archivo app.js

COMPONENTE DEL MODELO

 /* Auto-generated by: https://github.com/pmndrs/gltfjsx */ import React, { useRef } from 'react' import { useGLTF } from '@react-three/drei' export default function Model({ ...props }) { const group = useRef() const { nodes, materials } = useGLTF('/linear_irl.gltf') return ( <group ref={group} {...props} dispose={null} scale={10}> <mesh geometry={nodes.sphere.geometry} material={nodes.sphere.material} /> <mesh geometry={nodes.sphere_1.geometry} material={nodes.sphere_1.material} /> <mesh geometry={nodes.sphere_2.geometry} material={nodes.sphere_2.material} /> </group> ) } useGLTF.preload('/linear_irl.gltf')

Aplicación.js

 <Canvas className="Canvas"> <ambientLight intensity={0.5}/> <directionalLight position={[-2,5,2]}/> <Suspense fallback={null}></Suspense> <OrbitControls/> <Linear_irl/> </Canvas>

Enlace al archivo gltf debajo del archivo GLTF Enlace de Google Drive