GLTF file loaded partly black ThreeJS, React, Typescript, How to add color/light for all 3D object

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

You’ll usually need an environment map (IBL) if you have any PBR materials. I’m not sure of the react syntax for adding that.

What do you mean IBL? Can you give me an example?

By IBL I mean “image-based lighting”: an environment map, material.envMap, or scene.environment. These are all basically the same thing. See this example for how to load a glTF model and apply an environment map to the scene: three.js examples … however, it would be a bit different in React probably, you may have to search for these terms in the react-three-fiber documentation.

@Nazar_Romanchuk did you manage to fix it? I am facing the same problem