Why is my GLB file from Blender not casting shadows in Three JS? (Specifically in React Three Fiber)

What are GLB files, anyway?

A GLB (GL Transmission Format) file is a binary container format that stores 3D model data, including geometry, materials, and animations. It’s an open standard developed by the Khronos Group, the same organization behind WebGL and OpenGL. GLB files are widely supported in various 3D engines, including Three JS.

Common Causes of the Issue

Before we dive into the solutions, let’s identify the common causes of this issue:

• Incorrect Export Settings in Blender: If you don’t configure the export settings correctly in Blender, the GLB file might not include the necessary shadow information.
• Lack of Shadow Receivers: In Three JS, objects need to be designated as shadow receivers to receive shadows. If your objects aren’t set up correctly, shadows won’t be cast.
• Incorrect Lighting Setup: A poorly set up lighting system in Three JS can prevent shadows from being cast.
• Version Conflicts: Using incompatible versions of Three JS, React Three Fiber, or Blender can lead to issues with shadow casting.

Solution 1: Correct Export Settings in Blender

Let’s start by ensuring you’re exporting your GLB file from Blender correctly:

1. Open Blender and select your 3D model.
2. Go to File > Export > GL Transmission Format (.glb).
3. In the Export GL Transmission Format window, make sure the following settings are enabled:
   • Include Shadows: This option includes shadow information in the GLB file.
   • UVs: This option includes UV coordinates, which are essential for texture mapping and shadow casting.
   • : This option includes normal data, which is necessary for correct shadow rendering.
4. Click Export to export your GLB file.

Solution 2: Designate Shadow Receivers in Three JS

In Three JS, you need to designate objects as shadow receivers to receive shadows. You can do this using the castShadow and receiveShadow properties:

import { useFrame, useLoader, useThree } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

function MyModel() {
  const { nodes, materials } = useLoader(GLTFLoader, 'model.glb');
  const { camera, scene } = useThree();

  useFrame(() => {
    // Get the mesh object
    const mesh = nodes['mesh_0'];

    // Set the mesh to cast shadows
    mesh.castShadow = true;

    // Set the mesh to receive shadows
    mesh.receiveShadow = true;
  });

  return ;
}

Solution 3: Correct Lighting Setup in Three JS

A properly set up lighting system is essential for casting shadows in Three JS. Here’s an example of a basic lighting setup:

import { useThree } from '@react-three/fiber';

function MyScene() {
  const { scene } = useThree();

  // Add a directional light
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(0, 5, 0);
  scene.add(directionalLight);

  // Add an ambient light
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambientLight);

  return (
    
      {/* Your 3D model goes here */}
    
  );
}

Solution 4: Version Compatibility Check

Ensure you’re using compatible versions of Three JS, React Three Fiber, and Blender. You can check the version compatibility by:

• Verifying the versions in your package.json file.
• Checking the Three JS and React Three Fiber documentation for compatible versions.
• Updating your versions to the latest compatible ones.

Additional Tips and Tricks

Here are some additional tips to help you troubleshoot and optimize your shadow casting:

• Use a Shadow Map: Enable shadow mapping on your directional light by setting light.shadow.mapSize.width and light.shadow.mapSize.height to a suitable value (e.g., 1024).
• Optimize Shadow Receivers: Limit the number of shadow receivers by only setting receiveShadow on objects that need to receive shadows.
• Use a Bounding Box: Use a bounding box to limit the area where shadows are calculated, reducing performance overhead.

Conclusion

Getting your GLB file from Blender to cast shadows in Three JS, specifically in React Three Fiber, can be a challenge. However, by following these solutions and tips, you should be able to troubleshoot and resolve the issue. Remember to:

• Correctly export your GLB file from Blender.
• Designate shadow receivers in Three JS.
• Set up a proper lighting system in Three JS.
• Verify version compatibility.

With these steps, you’ll be well on your way to creating stunning 3D scenes with realistic shadows in React Three Fiber!

Frequently Asked Question

Get ready to shed some light on the mystery of missing shadows in Three JS!