Merge pull request #13 from readyplayerme/feature/addons-polishing

Feature/addons polishing

src/components/Avatar/Avatar.component.tsx

@@ -10,6 +10,7 @@ import { HalfBodyModel, StaticModel, PoseModel } from 'src/components/Models';
 import { isValidGlbUrl } from 'src/services';
 import Capture, { CaptureType } from '../Capture/Capture.component';
 import Box, { Background } from '../Background/Box/Box.component';
+import Shadow from '../Shadow/Shadow.components';
 
 export const CAMERA = {
   TARGET: {
@@ -91,7 +92,7 @@ export interface AvatarProps extends LightingProps {
    */
   emotion?: Emotion;
   /**
-   * Applies Box background for canvas.
+   * Applies Box background for canvas, make sure that image is loadable to prevent bg errors.
    */
   background?: Background;
   /**
@@ -174,14 +175,7 @@ export const Avatar: FC<AvatarProps> = ({
           updateCameraTargetOnZoom={!halfBody}
         />
         {AvatarModel}
-        {shadows && (
-          <group position={[0, 0, 0]}>
-            <mesh key="shadow-catcher" receiveShadow position={[0, 0, 0]} rotation-x={-Math.PI / 2}>
-              <planeBufferGeometry attach="geometry" args={[5, 5]} />
-              <shadowMaterial attach="material" transparent opacity={0.2} />
-            </mesh>
-          </group>
-        )}
+        {shadows && <Shadow />}
         {background?.src && <Box {...background} />}
         {capture && <Capture {...capture} />}
       </Suspense>

src/components/Background/Box/Box.component.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useRef } from 'react';
 import { Mesh, TextureLoader } from 'three';
-import { useFrame, useLoader } from '@react-three/fiber';
+import { useLoader } from '@react-three/fiber';
 import { MeshProps } from '@react-three/fiber/dist/declarations/src/three-types';
 
 export type Background = { src?: string } & MeshProps;
@@ -9,17 +9,10 @@ const Box: FC<Background> = ({ src = '', ...baseProps }) => {
   const ref = useRef<Mesh>();
   const texture = useLoader(TextureLoader, src);
 
-  useFrame(() => {
-    if (ref.current?.rotation.y) {
-      ref.current.rotation.y += 0.01;
-    }
-  });
-
   return (
     <mesh ref={ref} castShadow receiveShadow {...baseProps}>
       <boxBufferGeometry />
       <meshPhysicalMaterial map={texture} />
-      <axesHelper />
     </mesh>
   );
 };

src/components/Shadow/Shadow.components.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+
+const Shadow: FC = () => (
+  <group position={[0, 0, 0]}>
+    <mesh key="shadow-catcher" receiveShadow position={[0, 0, 0]} rotation-x={-Math.PI / 2}>
+      <planeBufferGeometry attach="geometry" args={[5, 5]} />
+      <shadowMaterial attach="material" transparent opacity={0.2} />
+    </mesh>
+  </group>
+);
+
+export default Shadow;