three js shadow is not showing on object

Question

I'm a beginner at Three JS and have some issues with my code. My problem is I don't get the shadow properly in every object I attached. Here's the picture:

Here's my code in the sandbox:

https://codesandbox.io/s/threejs-code-3rlk8b

import React, { Suspense, useRef } from 'react';

import { Canvas, useFrame } from '@react-three/fiber';
import { ContactShadows, OrbitControls, useGLTF } from '@react-three/drei'

import './PartOne.css';
import { RoomOne } from '../assets/Room1';
import { Room2 } from '../assets/Room2';
import { Room3 } from '../assets/Room3';
import { Room4 } from '../assets/Room4';
import { Room5 } from '../assets/Room5';
import { Room6 } from '../assets/Room6';
import { Room7 } from '../assets/Room7';
import { Room8 } from '../assets/Room8';

const PartOne = () => {
    return (
        <div className='wrapper' >
            <Canvas shadows camera={{ fov:70, position: [0,0,30] }} >
                <Suspense fallback={null}  >
                    <ambientLight intensity={0.3} />
                    <directionalLight castShadow receiveShadow intensity={2} position={[80,80,80]} />
                    
                    {/* <spotLight castShadow receiveShadow intensity={2} position={[80,80,80]} /> */}
                    <RoomOne />
                    <Room2 />
                    <Room3 />
                    <Room4 />
                    <Room5 />
                    <Room6 />
                    <Room7 />
                    <Room8 />
                    <ContactShadows />

                </Suspense>
                <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
            </Canvas>

        </div>
    )
}

export default PartOne

Please help me with this problem. Or tell me if there is any solution to get rid of it.

Answer 1

The default setting of the orthographic shadow camera is -5 for left and bottom and 5 for right and top (see DirectionalLightShadow). This range is not big enough for your scene. You need to adjust the view volume of the orthographic shadow camera. e.g.:

<directionalLight 
    castShadow receiveShadow intensity={2} position={[80,80,80]} 
    shadow-normalBias={0.1} 
    shadow-camera-left={-12}
    shadow-camera-right={12}
    shadow-camera-top={12}
    shadow-camera-bottom={-12}
    shadow-camera-near={0.5}
    shadow-camera-far={200}
/>