Three.js阴影未在对象上显示。

Question

我是Three JS的初学者，我的代码存在一些问题。 我的问题在于每个我附加的对象上都无法正确显示阴影。 这是图片：

这是我在沙盒中的代码：

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

请帮我解决这个问题。或者告诉我是否有任何解决方法可以摆脱它。

- Sayedul Karim

Answer 1

正交阴影相机的默认设置为左侧和底部为-5，右侧和顶部为5（请参见DirectionalLightShadow）。这个范围对于您的场景来说不够大。您需要调整正交阴影相机的视图体积。例如：

<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}
/>

- Rabbid76