I used the next libraries: react-three-fiber, drei, three, react, react Material UI.
My .gltf file located in the public folder. After loading the file in the browser one part of them is partly black, and any Lights can’t change that part. If I open this file in the viewer - everything is correct.
My code:
import { Canvas, useLoader } from 'react-three-fiber'
import React, { Suspense } from 'react'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls, Html, useGLTFLoader, draco } from 'drei'
import { Box } from '@material-ui/core'
import * as THREE from 'three'
type Props = {
url: string
}
const Model = ({ url }: Props) => {
const { scene } = useLoader(GLTFLoader, url, draco())
scene.add(new THREE.AmbientLight(0x404040, 100))
return <primitive object={scene} dispose={null} />
}
export const Test = () => {
return (
<Box style={{ height: '700px' }}>
<Canvas invalidateFrameloop camera={{ position: [100, 5, 1] }}>
<ambientLight intensity={10} position={[100, 5, 1]} />
<directionalLight position={[100, 5, 1]} intensity={20} />
<directionalLight position={[-10, -10, -5]} intensity={10} />
<OrbitControls />
<Suspense fallback={<Html>loading..</Html>}>
<Model url="/4K/Soccer_Trophy_R01.glb" />
</Suspense>
</Canvas>
</Box>
)
}
Link to screen example - Dropbox - Screen Shot 2021-03-04 at 4.52.16 PM.png - Simplify your life