No shadows with loaded model

[J_L]

Hi, guys, I’ve seen this question asked numerous times, and the answer always appears to be simple. However, none of the solutions I have tried have had any effect.

The problem is, I am loading a model but none of the shadows appear to be working. I have included the image I am using from the source (), along with how it looks within my react project:

Original:

Mine:

Original interior:

Mine:

import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const BasketballCourt = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const { nodes, scene } = useLoader(
    GLTFLoader,
    `${process.env.PUBLIC_URL}/assets/models/court/scene.gltf`
  );

  useMemo(() => {
    Object.values(nodes).forEach((obj) => {
      if (obj.isMesh) {
        Object.assign(obj, { castShadow: true, receiveShadow: true });
      }
    });
  }, [nodes]);

  useEffect(() => {
    setIsLoaded(true);
  }, [nodes, setIsLoaded]);

  return (
    <>
      {isLoaded && (
        <primitive
          position={[0, 0, 0]}
          object={scene}
          scale={[0.08, 0.08, 0.08]}
          rotation={[0, 0, 0]}
          castShadow
          receiveShadow
        />
      )}
    </>
  );
};

export default BasketballCourt;```

[J_L]

I forgot to include my Lighting component:

  return (
    <>
      <ambientLight intensity={0.2} l />
      <spotLight intensity={1} position={[4, 2000, 4]} />
    </>
  );
};

export default Lighting;

And my app component:
const App = () => {

  return (
    <CanvasContainer>
      <Canvas
        onCreated={({ gl }) => {
          gl.shadowMap.enabled = true;
          gl.shadowMap.type = THREE.PCFSoftShadowMap;
        }}
      >
        <Suspense fallback={<Loader />}>
          <group>
            <Lighting />
            <Ground />
            <BasketballCourt />
          </group>
          <PerspectiveCamera position={[4, 3, 6]} makeDefault />
          <OrbitControls
            enablePan={true}
            enableZoom
            enableRotate
            zoomSpeed={0.6}
            panSpeed={0.5}
            rotateSpeed={0.4}
          />
        </Suspense>
      </Canvas>
    </CanvasContainer>
  );
};

[J_L]

All the smart people on this forum, but this seems to have stumped everyone. Or maybe I didn’t provide enough info? Any help or suggestions would be greatly appreciated.

Thanks!
Joe

Source code:

GitHub - joelinstrum/threejs-basketball

[phil_crowther]

That stadium looks amazing. I would also be interested in the answer as I have been unable to get a GLTF model to cast/receive shadows. Perhaps this tutorial will help?

EDIT: I think my problem is that I did not properly declare a shadowmap with my light.

[drcmda]

where to begin, the code doesn’t look well to me. why is this so complicated? 40 lines just to render a gltf. this is all you need:

function BasketballCourt(props) {
  const { scene } = useGLTF('/assets/models/court/scene.gltf')
  useLayoutEffect(() => scene.traverse(o => o.isMesh && (o.castShadow = o.receiveShadow = true)), [])
  return <primitive object={scene} {...props} />
}

<Canvas shadows>
  <Suspense fallback={null}>
    <BasketballCourt scale={0.08} />
  ...
  <spotLight intensity={1} position={[4, 2000, 4]} castShadow />

• process.env.PUBLIC_URL, for what?
• isLoaded does nothing, it renders the component twice for no reason
• useGLTF (from drei) is better than useLoader because it takes care of draco/meshopt
• scenes don’t have castShadow and receiveShadow props
• canvas has a short access shadows prop
• using gltf raw on the web is no good, check out gltf.report which compresses them
• your light doesn’t cast shadows, that’s the root issue most likely

if you have lights properly set up and they are at the right spot you will see shadows with the above.

you can also look at https://github.com/pmndrs/gltfjsx this is a formidable tool for gltf workflow on the web. there’s no traverse and mutation with this, and the models now become re-usable.

[drcmda]

ps here’s the simplest gltf example + shadows that i could find: gltf simple example - CodeSandbox

pps if you do face further issues, there’s poimandres discord which is usually a better place for react + three since most people on here will just ignore if they spot a pair of < >.

[J_L]

Hey thanks! This is great! I even got a free PR review ( lol – had I known this was going to happen, I would have cleaned up my code and gotten rid of my isLoading stuff, which I was using to debug ).
I hadn’t heard of useGltf, that was very helpful. I’ve tried several different lighting examples, none have worked. But at least my code is cleaner, so thanks again.

[J_L]

Phil – I will definitely let you know if I figure this out.

[drcmda]

it works but the windows are blocking light. i’ve used gltfjsx and removed everything that said “glassShader” and now the light comes in Basic demo (forked) - CodeSandbox

[J_L]

@drcmda , your demo looks amazing! Nice clean code, too.
I am now using your demo code verbatim, but oddly enough, it looks slightly different from mine. I’m going to mess with it a bit more to see if I can’t get it looking more like yours.
Thanks so much for your help!

Mine:

Yours:

[drcmda]

i am using dreis meshreflectormaterial on the floor

[phil_crowther]

I’m glad you found an answer that works. It’s looking really great. Be sure to showcase the final result in time for March Madness!

My inability to get shadows to work was a case of simple stupidity - I had the directional light positioned far beyond the far view of the shadow camera.