I use react-thee/fiber 7.0.0 and I have GLTF file with a bin file. When I look at my model in gltf-viewer.donmccurdy.com - I can see all metallic materials and transparent glass. But when I add it on canvas I can see black color instead of metallic and no transparency with glass parts ((
Thats how i load model:
const loader = new GLTFLoader();
loader.load(modelUrl, function(obj) {setScene(obj.scene)}
Thats how my Canvas props looks:
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;
}}
Help!!
these materials need light. without light they appear black. the online gltf viewer you're trying adds some lights by default.
you don't need to load models like that, and if you execute that in the render functions that's a mistake.
import { useGLTF } from '@react-three/drei'
function Model() {
const { scene } = useGLTF(url)
return <primtive object={scene} />
this hook takes care of everything, it can even handle gltfs compressed with draco or meshopt without you having to do a thing.
the camera does not have a enablePan property. canvas managed colors by default, "colorManagement" doesn't exist as a prop. you dont need to switch to srgb, it's default. you can enable shadows with a quick prop. basically do this:
<Canvas shadows camera={{ position: [3, 2, -3] }} />
last but not least, compress your file into a glb. you can also look into gltfjsx which is perfect for models in react. it also has a transform option which compresses and dedupes.