Uso react-thee/fiber 7.0.0 y tengo un archivo GLTF con un archivo bin. Cuando miro mi modelo en gltf-viewer.donmccurdy.com, puedo ver todos los materiales metálicos y vidrio transparente. Pero cuando lo agrego en el lienzo, puedo ver el color negro en lugar de metálico y sin transparencia con partes de vidrio ((
Así es como cargo el modelo:
const loader = new GLTFLoader(); loader.load(modelUrl, function(obj) {setScene(obj.scene)}Así es como se ven mis accesorios de Canvas:
camera={{position: [3, 2, -3], enablePan: true}} colorManagement={true} shadows={true} onCreated={({ gl }) => { gl.outputEncoding = sRGBEncoding; gl.physicallyCorrectLights = true; gl.shadowMap.enabled = true; gl.shadowMap.type = PCFSoftShadowMap; }}¡¡Ayuda!!
estos materiales necesitan luz. sin luz parecen negros. el visor gltf en línea que está probando agrega algunas luces de forma predeterminada.
no necesita cargar modelos como ese, y si ejecuta eso en las funciones de renderizado, es un error.
import { useGLTF } from '@react-three/drei' function Model() { const { scene } = useGLTF(url) return <primtive object={scene} />este gancho se encarga de todo, incluso puede manejar gltfs comprimidos con draco o meshopt sin que tengas que hacer nada.
la cámara no tiene una propiedad enablePan. colores administrados por lienzo de forma predeterminada, "colorManagement" no existe como accesorio. no necesita cambiar a srgb, es predeterminado. puede habilitar las sombras con un accesorio rápido. básicamente hacer esto:
<Canvas shadows camera={{ position: [3, 2, -3] }} />por último, pero no menos importante, comprima su archivo en un archivo glb. también puede consultar gltfjsx, que es perfecto para los modelos en reacción. también tiene una opción de transformación que comprime y deduplica.