Missing shadow - city model from Sketchfab

[Ivonig]

Hi there !

I have seen multiple posts about this problematic and have tried lot of solutions mentioned but I still do not manage to cast shadow on my model from SketchFab. Model is:

and this is the rendering in my project:

As you can see there is quite the difference. Here is my canvas and lighting:

      <Canvas shadows style={{ background: "black" }}>
        <directionalLight
          position={[0, 5, 0]}
          intensity={5}
          castShadow
          shadow-camera-near={0.1}
          shadow-camera-far={20}
          shadow-camera-left={-10}
          shadow-camera-right={10}
          shadow-camera-top={10}
          shadow-camera-bottom={-10}
          shadow-mapSize-width={1024}
          shadow-mapSize-height={1024}
        />
        <City />
        <PerspectiveCamera makeDefault ref={cameraRef} />
        <OrbitControls ref={controlsRef} />
      </Canvas>

I have generated the city component using:

npx gltfjsx

and I have added for any and in the component generated the props receiveShadow and castShadow, so the code looks like this:

    <group castShadow receiveShadow ref={group} {...props} dispose={null}>
      <group castShadow receiveShadow name="Sketchfab_Scene">
        <group
          castShadow
          receiveShadow
          name="Sketchfab_model"
          rotation={[-Math.PI / 2, 0, 0]}
        >
          <group castShadow receiveShadow name="root">
            <group
              castShadow
              receiveShadow
              name="GLTF_SceneRootNode"
              rotation={[Math.PI / 2, 0, 0]}
            >
              <group
                castShadow
                receiveShadow
                name="Cube004_3"
                position={[14.019, 7.064, -10.751]}
              >
                <mesh
                  castShadow
                  receiveShadow
                  name="Object_10"
                  geometry={nodes.Object_10.geometry}
                  material={materials.TRAIN}
                />

and so on, so on

I added another model, also from sketchfab, in the middle of my scene and I can see the light working on it. For the city it’s different, even without light I can see it all and lightning doesn’t seem to affect it whatsoever.

Any idea on how to tackle this problem ? I just want my imported model to look like the one on Sketchlab.

Thanks in advance.

[mjurczyk]

What you’re looking for is not shadows, but ambient occlussion (you can use either N8AO, or SSAO depending on your preference and postprocessing setup.)

[Ivonig]

Thanks for your reply, @mjurczyk

It solved the “flatness” of my scene, and it’s much closer to the one on SketchFab, however I still think there is a shadow issue somehow. If you look at this particular part of the scene on Sketchfab:

You can see the shades at the bottom of the building and from the circling lines in the middle, and these are still not visible on my new rendering: This is how I implement the AO:

      <Canvas shadows style={{ background: "black" }}>
        <directionalLight
          position={[0, 5, 0]}
          intensity={5}
          castShadow
          shadow-camera-near={0.1}
          shadow-camera-far={20}
          shadow-camera-left={-10}
          shadow-camera-right={10}
          shadow-camera-top={10}
          shadow-camera-bottom={-10}
          shadow-mapSize-width={10240}
          shadow-mapSize-height={10240}
        />
        <Move
          cameraRef={cameraRef}
          targetPosition={targetPosition}
          targetLookAt={targetLookAt}
          controlsRef={controlsRef}
        />
        <City />
        <PerspectiveCamera makeDefault ref={cameraRef} />
        <OrbitControls ref={controlsRef} />
        <EffectComposer>
          <N8AO
            color={0x00ff00}
            intensity={1}
            aoRadius={0.5}
            distanceFalloff={0.1}
          />
        </EffectComposer>
      </Canvas>

And this is how it looks now:

Much more colorful, much “crispier” but still no shadows.

Thanks if you have any extra ideas