Merge pull request #54 from readyplayerme/ACT-19-Background-color-gra…

…dients feat: add color property to background prop
readyplayerme · Sep 21, 2023 · 1e4e1a5 · 1e4e1a5
2 parents 85655fd + aaaec33
commit 1e4e1a5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -87,6 +87,8 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
   cameraInitialDistance?: number;
   /**
    * Apply styling to canvas DOM element.
+   * Note that background property can not be set via style prop, it will always be overridden to `transparent`.
+   * Instead, use `background` prop for that purpose.
    */
   style?: CSSProperties;
   /**
@@ -98,8 +100,10 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
    */
   emotion?: Emotion;
   /**
-   * Applies Box background in the scene with a provided image.
+   * Allows adding a background image and background color to the scene.
    * Make sure that image is loadable to prevent bg errors.
+   * background.src - Accepts URL string.
+   * background.color - Accepts Hexadeximal, RGB, X11 color name, HSL string, doesn't support CSS gradients.
    */
   background?: Background;
   /**
@@ -276,7 +280,7 @@ const Avatar: FC<AvatarProps> = ({
       {shadows && <Shadow />}
       {background?.src && <Box {...background} />}
       {capture && <Capture {...capture} />}
-      {style?.background && <BackgroundColor color={style.background as string} />}
+      {background?.color && <BackgroundColor color={background.color} />}
       <EffectComposer autoClear={false}>
         <Bloom
           luminanceThreshold={bloom?.luminanceThreshold}

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -49,7 +49,10 @@ Static.args = {
     intensity: 0.1,
     materialIntensity: 3.3
   },
-  style: { background: 'rgb(9,20,26)' },
+  background: {
+    color: 'rgb(9,20,26)'
+  },
+  style: {},
   /* eslint-disable no-console */
   onLoaded: () => console.info('EVENT: static avatar loaded'),
   onLoading: () => console.info('EVENT: loading static avatar')
@@ -127,7 +130,9 @@ Showcase.args = {
     intensity: 1,
     materialIntensity: 1
   },
-  style: { background: '#282038' },
+  background: {
+    color: '#282038'
+  },
   dpr: 2,
   ambientLightColor: '#ffffff',
   dirLightColor: '#ffffff',

diff --git a/src/components/Avatar/Examples.stories.tsx b/src/components/Avatar/Examples.stories.tsx
@@ -39,8 +39,8 @@ export const Bloom: StoryFn<BloomConfiguration> = (args: BloomConfiguration | un
     dirLightIntensity={2.2}
     spotLightIntensity={0.5}
     environment="apartment"
-    style={{
-      background: 'rgb(9,20,26)'
+    background={{
+      color: 'rgb(9,20,26)'
     }}
   />
 );
@@ -110,7 +110,7 @@ SpawnEffectAndAnimation.args = {
   cameraInitialDistance: CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE,
   modelSrc: getStoryAssetPath('male-emissive.glb'),
   animationSrc: getStoryAssetPath('male-idle.glb'),
-  style: { background: 'rgb(9,20,26)' }
+  background: { color: 'rgb(9,20,26)' }
 };
 SpawnEffectAndAnimation.argTypes = {
   ...ignoreArgTypesOnExamples,

diff --git a/src/components/Background/Box/Box.component.tsx b/src/components/Background/Box/Box.component.tsx
@@ -3,7 +3,7 @@ import { Mesh, TextureLoader } from 'three';
 import { useLoader } from '@react-three/fiber';
 import { MeshProps } from '@react-three/fiber/dist/declarations/src/three-types';
 
-export type Background = { src?: string } & MeshProps;
+export type Background = { src?: string; color?: string } & MeshProps;
 
 export const Box: FC<Background> = ({ src = '', ...baseProps }) => {
   const ref = useRef<Mesh>(null);

diff --git a/src/components/BaseCanvas/BaseCanvas.component.tsx b/src/components/BaseCanvas/BaseCanvas.component.tsx
@@ -24,7 +24,7 @@ export const BaseCanvas: FC<BaseCanvasProps> = ({
     key={fov}
     className={`${styles['base-canvas']} ${className ?? ''}`}
     shadows="soft"
-    gl={{ preserveDrawingBuffer: true, toneMappingExposure: 0.5 }}
+    gl={{ preserveDrawingBuffer: true, toneMappingExposure: 0.5, alpha: true }}
     dpr={dpr}
     camera={{ fov, position }}
     resize={{ scroll: true, debounce: { scroll: 50, resize: 0 } }}