feat: add soft shadows

readyplayerme · Feb 20, 2024 · 2acda6f · 2acda6f
1 parent b1fd881
commit 2acda6f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -1,5 +1,6 @@
 import React, { Suspense, FC, useMemo, CSSProperties, ReactNode, useEffect } from 'react';
 import { Vector3 } from 'three';
+import { ContactShadows } from "@react-three/drei";
 import { CameraControls } from 'src/components/Scene/CameraControls.component';
 import { Environment } from 'src/components/Scene/Environment.component';
 import { BaseModelProps, EnvironmentProps, SpawnState, EffectConfiguration, LightingProps } from 'src/types';
@@ -12,7 +13,6 @@ import { Provider, useSetAtom } from 'jotai';
 import Capture, { CaptureType } from 'src/components/Capture/Capture.component';
 import { Box, Background } from 'src/components/Background/Box/Box.component';
 import { BackgroundColor } from 'src/components/Background';
-import Shadow from 'src/components/Shadow/Shadow.component';
 import Loader from 'src/components/Loader';
 import Bloom from 'src/components/Bloom/Bloom.component';
 import { BlendFunction } from 'postprocessing';
@@ -260,7 +260,7 @@ const Avatar: FC<AvatarProps> = ({
       />
       {AvatarModel}
       {children}
-      {shadows && <Shadow />}
+      {shadows && <ContactShadows position={[0, 0, 0]} opacity={1} scale={10} blur={1.0} far={0.5} />}
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
       {background?.color && <BackgroundColor color={background.color} />}

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -104,7 +104,7 @@ export const Showcase: StoryFn<typeof Avatar> = (args: AvatarProps & { ambientOc
 
   return (
     <Avatar {...args} effects={{ ambientOcclusion: args?.ambientOcclusion, bloom: pulsatingBloom }}>
-      <Sparkles color="white" count={50} opacity={0.9} scale={5} size={0.5} speed={0.35} />
+      <Sparkles color="white" count={50} opacity={0.9} scale={5} size={0.5} speed={0.35} position={[0, 3, 0]}/>
     </Avatar>
   );
 };

diff --git a/src/components/Avatar/Examples.stories.tsx b/src/components/Avatar/Examples.stories.tsx
@@ -98,7 +98,7 @@ FloatingSparkles.argTypes = {
 
 export const SpawnEffectAndAnimation: StoryFn<typeof Avatar> = (args) => (
   <Avatar {...args}>
-    <Sparkles color="white" count={50} opacity={0.9} scale={5} size={0.5} speed={0.35} />
+    <Sparkles color="white" count={50} opacity={0.9} scale={5} size={0.5} speed={0.35} position={[0, 3, 0]}/>
   </Avatar>
 );
 SpawnEffectAndAnimation.args = {

diff --git a/src/components/Lights/Lights.component.tsx b/src/components/Lights/Lights.component.tsx
@@ -15,14 +15,14 @@ export const LIGHT_CONFIG = Object.freeze({
   silhouetteLightPosition: new Vector3(-1.5, 0.1, -1.5),
   defaultProps: {
     keyLightIntensity: 1.2,
-    keyLightColor: '#FFFFFF',
     fillLightIntensity: 0.8,
-    fillLightColor: '#6794FF',
-    fillLightPosition: new Vector3(-0.5, 1.6, -0.5),
     backLightIntensity: 2.2,
-    backLightColor: '#FFB878',
+    fillLightPosition: new Vector3(-0.5, 1.6, -0.5),
     backLightPosition: new Vector3(0.5, 1.6, -1.0),
-    lightTarget: new Vector3(0.0, 1.7, 0.0)
+    lightTarget: new Vector3(0.0, 1.7, 0.0),
+    keyLightColor: '#FFFFFF',
+    fillLightColor: '#6794FF',
+    backLightColor: '#FFB878',
   } as Required<LightingProps>
 });
 
@@ -66,6 +66,7 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.fillLightAngle}
         color={fillLightColor}
         intensity={fillLightIntensity}
+        castShadow
       />
       {/* Back light that by default creates light warm rim on the left face side. */}
       <spotLight
@@ -74,6 +75,7 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.backLightAngle}
         color={backLightColor}
         intensity={backLightIntensity}
+        castShadow
       />
       {/* Key light that creates soft face light. */}
       <spotLight
@@ -82,6 +84,7 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.keyLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity}
+        castShadow
       />
       {/* Lift light that creates soft light on body and shoes. */}
       <spotLight
@@ -90,6 +93,7 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.keyLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity * 0.25}
+        castShadow
       />
       {/* Silhouette light on arms and legs. */}
       <spotLight
@@ -98,6 +102,7 @@ const Lights: FC<LightingProps> = (lightingProps) => {
         angle={LIGHT_CONFIG.silhouetteLightAngle}
         color={keyLightColor}
         intensity={keyLightIntensity * 0.25}
+        castShadow
       />
       {/* Dummy directional light for shadow casting from behind avatar. */}
       <directionalLight position={LIGHT_CONFIG.dirLightPosition} target={targets.shoe} castShadow intensity={0.0} />