The object gets rendered on the screen with the correct shape, but is completely black.

[LukasZvikas]

Hello, for some reason, the object gets rendered completely black, without any details, but the shape is correct. I checked my model in the gltf viewer and it gets rendered fine. Not entirely sure what can be the issue here, but I'm quite new to Three.js, so might be some noob mistake. Help would be greatly appreciated. Thanks.

import * as THREE from 'three';
import React, { useRef } from 'react';
import { useLoader, Canvas } from 'react-three-fiber';
import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader';

type GLTFResult = GLTF & {
  nodes: {
    Mesh_0: THREE.Mesh;
    Mesh_1: THREE.Mesh;
    Mesh_2: THREE.Mesh;
    Mesh_3: THREE.Mesh;
    Mesh_4: THREE.Mesh;
    Mesh_5: THREE.Mesh;
    Mesh_6: THREE.Mesh;
    Mesh_7: THREE.Mesh;
    Mesh_8: THREE.Mesh;
  };
  materials: {
    ['Material.002']: THREE.MeshStandardMaterial;
  };
};

const Logo = () => {
  const group = useRef<THREE.Group>();
  const { nodes, materials } = useLoader<GLTFResult>(
    GLTFLoader,
    'public/logo.glb'
  );

  return (
    <Canvas>
      <group ref={group} dispose={null}>
        <group rotation={[Math.PI / 2, 0, 0]} scale={[0.01, 0.01, 0.01]}>
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_0.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_1.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_2.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_3.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_4.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_5.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_6.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_7.geometry}
          />
          <mesh
            material={materials['Material.002']}
            geometry={nodes.Mesh_8.geometry}
          />
        </group>
      </group>
    </Canvas>
  );
};

export default Logo;

[drcmda]

you need light for materials to show.

[drcmda]

another thing is, you are using useLoader outside of canvas, that cannot work. see: https://github.com/react-spring/react-three-fiber/blob/master/api.md#hooks all hooks are context based, canvas is the context provider. https://codesandbox.io/s/r3f-ibl-envmap-simple-y541h?file=/src/App.js

it should be like this:

function Logo() {
  useLoader(...)
  ...

...

<Canvas>
  <ambientLight />
  <pointLight position={[10, 10, 10]} />
  <Suspense fallback={null}>
    <Logo />

[stephencorwin]

you are using useLoader outside of canvas, that cannot work
@drcmda

That isn't exactly true. The only hooks that will work only inside of the <Canvas /> are currently:
useFrame
useThree
useUpdate

It is possible to use useLoader outside of the canvas and in fact, I am doing this for the specific reason of preloading all assets rather than lazy loading them. I am making a video game though, so I would rather have my users hit a longer initial load and then no loading after that point. Here's a small clip of it in action: https://dl.dropboxusercontent.com/s/b9fch85eaj68w7y/useLoader.mp4

I can understand not necessarily wanting to make any guarantees about hooks outside of the <Canvas />, but the flexibility of being able to preload assets is fantastic. If you like, I can submit a PR to update api.md to reflect the true limitations.

[drcmda]

Right, I totally forgot about that, I have been doing this even. 😋

[Abdelrahmanhassan1]

I faced the same problem and HERE IS THE SOLUTION
You just need to add light to the scene inside the canvas

<Canvas> 
.
<ambientLight intensity={2} />
.
</Canvas>

[crapthings]

add light doesn't solve the problem, what is wrong?

16b20fdd-b23e-4b5c-88a8-ef94a5c128a4.glb.zip