Currently in the process of developing a basic 3D object viewer website using Next.js and React-Three-Fiber. Everything was running smoothly until I added a DirectionalLight instance and attempted to make all meshes receive shadows.
https://i.sstatic.net/KafAn.jpg
Tried various methods, including adjusting the dpr parameter of the Fiber's Canvas, but unfortunately, nothing seemed to resolve the issue.
Below is my Canvas setup:
<Canvas shadows={true} dpr={[1, 2]} orthographic camera={{ zoom: 200, position: [0, 5, 10] }}>
<Suspense fallback={<Loader />}>
<OrbitControls enableDamping enableZoom />
<Model
position={[0, -1, 0]}
scale={[0.4, 0.4, 0.4]}
receiveShadow
/>
<ambientLight intensity={0.25} />
<directionalLight
castShadow
ref={directionalLightRef}
shadowMapHeight={1024}
shadowMapWidth={1024}
shadowCameraFar={50}
shadowBias={-0.05}
intensity={1}
position={[1.5, 5, 7]}
/>
</Suspense>
</Canvas>