feat: wip

.eslintrc.js

@@ -50,7 +50,8 @@ module.exports = {
       }
     ],
     'prefer-regex-literals': ['error', { disallowRedundantWrapping: false }],
-    'no-plusplus': 'off'
+    'no-plusplus': 'off',
+    "no-console": 'off'
   },
   settings: {
     'import/resolver': {

src/App/App.component.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Sparkles, StatsGl } from '@react-three/drei';
+import { StatsGl } from '@react-three/drei';
 
-import { Avatar } from 'src/components/Avatar';
-import { EnvironmentModel } from 'src/components/Models';
+import { Avatar, CAMERA } from 'src/components/Avatar';
 
 import styles from './App.module.scss';
 
@@ -20,18 +19,17 @@ function App() {
       <div className={styles.container}>
         <div className={styles.card}>
           <Avatar
-            modelSrc="https://models.readyplayer.me/64d61e9e17883fd73ebe5eb7.glb?morphTargets=ARKit,Eyes Extra&textureAtlas=none&lod=0"
+            modelSrc="https://api.readyplayer.dev/v3/avatars/66a8c2c63577d83a8ee86378.glb"
             shadows
-            animationSrc="/male-idle-2.fbx"
             style={{ background: 'rgb(9,20,26)' }}
             fov={45}
             effects={{
               ambientOcclusion: true
             }}
+            cameraTarget={CAMERA.TARGET.FULL_BODY.FEMALE}
+            cameraInitialDistance={CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
           >
             <StatsGl />
-            <EnvironmentModel environment="spaceStation" scale={1} />
-            <Sparkles count={70} scale={3} size={3} speed={1} opacity={0.04} color="#ccff00" />
           </Avatar>
         </div>
       </div>

src/App/App.module.scss

@@ -5,6 +5,7 @@ body,
   margin: 0;
   height: 100%;
   width: 100%;
+  background-color: blueviolet;
 }
 
 .app {

src/components/Avatar/Avatar.component.tsx

@@ -13,11 +13,11 @@ 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 Loader from 'src/components/Loader';
 import Bloom from 'src/components/Bloom/Bloom.component';
 import { BlendFunction } from 'postprocessing';
 import Lights from 'src/components/Lights/Lights.component';
 import { spawnState } from '../../state/spawnAtom';
+import { Loader } from '../Loader/Loader.component';
 
 export const CAMERA = {
   TARGET: {
@@ -47,7 +47,7 @@ export const CAMERA = {
 
 export type Emotion = Record<string, number>;
 
-export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseModelProps, 'setModelFallback'> {
+export interface AvatarProps extends LightingProps, EnvironmentProps, BaseModelProps {
   /**
    * Arbitrary binary data (base64 string, Blob) of a `.glb` file or path (URL) to a `.glb` resource.
    */
@@ -187,7 +187,7 @@ const Avatar: FC<AvatarProps> = ({
   backLightPosition,
   lightTarget,
   fov = 50
-}) => {
+}) => {  
   const setSpawnState = useSetAtom(spawnState);
 
   useEffect(() => {
@@ -268,7 +268,14 @@ const Avatar: FC<AvatarProps> = ({
         controlsMaxDistance={halfBody ? CAMERA.CONTROLS.HALF_BODY.MAX_DISTANCE : CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
         updateCameraTargetOnZoom={!halfBody}
       />
-      {AvatarModel}
+      <Suspense fallback={
+          <StaticModel
+          modelSrc={`${modelSrc}?textureQuality=low`}
+          scale={scale} emotion={emotion} bloom={effects?.bloom}
+        />
+      }>
+        {AvatarModel}
+      </Suspense>
       {children}
       {shadows && <ContactShadows position={[0, 0, 0]} opacity={2} scale={10} blur={1.0} far={1.0} />}
       {background?.src && <Box {...background} />}
@@ -324,7 +331,8 @@ const Avatar: FC<AvatarProps> = ({
 };
 
 const AvatarWrapper = (props: AvatarProps) => (
-  <Suspense fallback={props.loader ?? <Loader />}>
+  // <Avatar modelSrc={`${props.modelSrc  }?textureChannels=none`} />
+  <Suspense fallback={<Loader />} >
     <Provider>
       <Avatar {...props} />
     </Provider>

src/components/Exhibit/Exhibit.component.tsx

@@ -10,7 +10,7 @@ import { BaseCanvas } from 'src/components/BaseCanvas';
 import Capture, { CaptureType } from 'src/components/Capture/Capture.component';
 import { BackgroundColor } from 'src/components/Background';
 
-export interface ExhibitProps extends CameraProps, EnvironmentProps, Omit<BaseModelProps, 'setModelFallback'> {
+export interface ExhibitProps extends CameraProps, EnvironmentProps, BaseModelProps {
   /**
    * Arbitrary binary data (base64 string | Blob) of a `.glb` file or path (URL) to a `.glb` resource.
    */

src/components/Models/AnimationModel/AnimationModel.component.tsx

@@ -3,7 +3,7 @@ import { useFrame, useGraph } from '@react-three/fiber';
 import { AnimationMixer, Group } from 'three';
 
 import { Model } from 'src/components/Models/Model';
-import { useHeadMovement, useGltfLoader, useFallback, useIdleExpression, useEmotion } from 'src/services';
+import { useHeadMovement, useGltfLoader, useIdleExpression, useEmotion } from 'src/services';
 import { BaseModelProps } from 'src/types';
 import { loadAnimationClip } from 'src/services/Animation.service';
 import { Emotion } from 'src/components/Avatar/Avatar.component';
@@ -26,7 +26,6 @@ export const AnimationModel: FC<AnimationModelProps> = ({
   rotation = 20 * (Math.PI / 180),
   scale = 1,
   idleRotation = false,
-  setModelFallback,
   onLoaded,
   headMovement = false,
   emotion,
@@ -74,7 +73,6 @@ export const AnimationModel: FC<AnimationModelProps> = ({
   useHeadMovement({ nodes, enabled: headMovement });
   useEmotion(nodes, emotion);
   useIdleExpression('blink', nodes);
-  useFallback(nodes, setModelFallback);
 
   return (
     <Model

src/components/Models/AnimationModel/AnimationModel.container.tsx

@@ -1,16 +1,9 @@
-import React, { FC, Suspense, useState } from 'react';
+import React, { FC } from 'react';
 import { AnimationModel, AnimationModelProps } from './AnimationModel.component';
 
 /**
  * Contains model to handle suspense fallback.
  */
-export const AnimationModelContainer: FC<AnimationModelProps> = (props) => {
-  /* eslint-disable-next-line react/jsx-no-useless-fragment */
-  const [fallback, setFallback] = useState<JSX.Element>(<></>);
-
-  return (
-    <Suspense fallback={fallback}>
-      <AnimationModel setModelFallback={setFallback} {...props} />
-    </Suspense>
+export const AnimationModelContainer: FC<AnimationModelProps> = (props) => (    
+      <AnimationModel {...props} />
   );
-};

src/components/Models/BoundsModel/BoundsModel.container.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useState, cloneElement, useMemo, ReactElement, useCallback } from 'react';
+import React, { FC, ReactNode, useEffect, cloneElement, useMemo, ReactElement, useCallback } from 'react';
 import { useBounds } from '@react-three/drei';
 import { BaseModelProps } from 'src/types';
 import { triggerCallback } from 'src/services';
@@ -11,7 +11,6 @@ export interface BoundsModelContainerProps extends BaseModelProps {
 
 export const BoundsModelContainer: FC<BoundsModelContainerProps> = ({ modelSrc, children, fit, onLoaded }) => {
   const bounds = useBounds();
-  const [fallback, setFallback] = useState<JSX.Element>(<></>);
 
   const onChildLoaded = useCallback(() => {
     if (fit) {
@@ -24,7 +23,7 @@ export const BoundsModelContainer: FC<BoundsModelContainerProps> = ({ modelSrc,
   const childModel = useMemo(
     () =>
       React.Children.map(children, (child) =>
-        cloneElement(child as ReactElement, { setModelFallback: setFallback, onLoaded: onChildLoaded })
+        cloneElement(child as ReactElement, { onLoaded: onChildLoaded })
       ),
     [modelSrc, children, onChildLoaded]
   );
@@ -33,7 +32,7 @@ export const BoundsModelContainer: FC<BoundsModelContainerProps> = ({ modelSrc,
     if (fit) {
       bounds.refresh().clip().fit();
     }
-  }, [modelSrc, fit, fallback]);
+  }, [modelSrc, fit]);
 
   return <>{childModel}</>;
 };

src/components/Models/EnvironmentModel/EnvironmentModel.component.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import { useFallback, useGltfLoader, CustomNode, Transform, triggerCallback } from 'src/services';
+import { useGltfLoader, CustomNode, Transform, triggerCallback } from 'src/services';
 import { useGraph } from '@react-three/fiber';
 import { BaseModelProps } from 'src/types';
 import { EnvironmentModels } from 'src/services/Environment.service';
@@ -9,13 +9,14 @@ export interface EnvironmentModelProps extends BaseModelProps {
   scale?: number;
 }
 
-export const EnvironmentModel: FC<EnvironmentModelProps> = ({ environment, scale = 1, setModelFallback, onLoaded }) => {
+export const EnvironmentModel: FC<EnvironmentModelProps> = ({ environment, scale = 1, onLoaded }) => {
   const transform = new Transform();
   const { scene } = useGltfLoader(environment);
   const { nodes } = useGraph(scene);
 
-  useFallback(nodes, setModelFallback);
-  useEffect(() => triggerCallback(onLoaded), [scene, onLoaded]);
+  useEffect(() => {
+    triggerCallback(onLoaded); 
+  }, [scene, onLoaded]);
 
   return (
     <group>

src/components/Models/EnvironmentModel/EnvironmentModel.container.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Suspense, useState } from 'react';
+import React, { FC, Suspense } from 'react';
 import { EnvironmentModels, environmentModels } from 'src/services/Environment.service';
 import { EnvironmentModel, EnvironmentModelProps } from './EnvironmentModel.component';
 
@@ -7,14 +7,13 @@ import { EnvironmentModel, EnvironmentModelProps } from './EnvironmentModel.comp
  */
 export const EnvironmentModelContainer: FC<EnvironmentModelProps> = (props) => {
   /* eslint-disable-next-line react/jsx-no-useless-fragment */
-  const [fallback, setFallback] = useState<JSX.Element>(<></>);
   const { environment } = props;
   const isStaticPreset = environment in environmentModels;
   const environmentSrc = isStaticPreset ? environmentModels[environment as EnvironmentModels] : environment;
 
   return (
-    <Suspense fallback={fallback}>
-      <EnvironmentModel setModelFallback={setFallback} {...props} environment={environmentSrc} />
+    <Suspense>
+      <EnvironmentModel {...props} environment={environmentSrc} />
     </Suspense>
   );
 };

src/components/Models/FloatingModel/FloatingModel.container.tsx

@@ -1,16 +1,11 @@
-import React, { FC, Suspense, useState } from 'react';
+import React, { FC, Suspense } from 'react';
 import { FloatingModel, FloatingModelProps } from './FloatingModel.component';
 
 /**
  * Contains model to handle suspense fallback.
  */
-export const FloatingModelContainer: FC<FloatingModelProps> = (props) => {
-  /* eslint-disable-next-line react/jsx-no-useless-fragment */
-  const [fallback, setFallback] = useState<JSX.Element>(<></>);
-
-  return (
-    <Suspense fallback={fallback}>
-      <FloatingModel {...props} setModelFallback={setFallback} />
+export const FloatingModelContainer: FC<FloatingModelProps> = (props) => (
+    <Suspense>
+      <FloatingModel {...props} />
     </Suspense>
   );
-};

src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx

@@ -2,7 +2,7 @@ import React, { FC, useRef } from 'react';
 import { useFrame, useGraph } from '@react-three/fiber';
 import { Model } from 'src/components/Models/Model';
 import { BaseModelProps } from 'src/types';
-import { useEmotion, useHeadMovement, useGltfLoader, useFallback, useIdleExpression } from 'src/services';
+import { useEmotion, useHeadMovement, useGltfLoader, useIdleExpression } from 'src/services';
 import { Group } from 'three';
 import { Emotion } from '../../Avatar/Avatar.component';
 
@@ -23,7 +23,6 @@ export const HalfBodyModel: FC<HalfBodyModelProps> = ({
   rotation = 20 * (Math.PI / 180),
   idleRotation = false,
   emotion,
-  setModelFallback,
   onLoaded,
   headMovement = false,
   bloom
@@ -61,7 +60,6 @@ export const HalfBodyModel: FC<HalfBodyModelProps> = ({
   useHeadMovement({ nodes, isHalfBody: true, enabled: headMovement });
   useIdleExpression('blink', nodes);
   useEmotion(nodes, emotion);
-  useFallback(nodes, setModelFallback);
 
   return <Model modelRef={ref} scene={scene} scale={scale} onLoaded={onLoaded} bloom={bloom} />;
 };

src/components/Models/HalfBodyModel/HalfBodyModel.container.tsx

@@ -1,16 +1,11 @@
-import React, { FC, Suspense, useState } from 'react';
+import React, { FC, Suspense } from 'react';
 import { HalfBodyModel, HalfBodyModelProps } from './HalfBodyModel.component';
 
 /**
  * Contains model to handle suspense fallback.
  */
-export const HalfBodyModelContainer: FC<HalfBodyModelProps> = (props) => {
-  /* eslint-disable-next-line react/jsx-no-useless-fragment */
-  const [fallback, setFallback] = useState<JSX.Element>(<></>);
-
-  return (
-    <Suspense fallback={fallback}>
-      <HalfBodyModel setModelFallback={setFallback} {...props} />
+export const HalfBodyModelContainer: FC<HalfBodyModelProps> = (props) => (
+    <Suspense>
+      <HalfBodyModel {...props} />
     </Suspense>
   );
-};

src/components/Models/Model/Model.component.tsx

@@ -15,7 +15,7 @@ interface ModelProps extends BaseModelProps {
 
 const ROTATION_STEP = 0.005;
 
-export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, onSpawnAnimationFinish, bloom }) => {
+export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, onSpawnAnimationFinish, bloom }) => { 
   const { materials } = useGraph(scene);
   const { gl } = useThree();
   const [isTouching, setIsTouching] = useState(false);
@@ -66,7 +66,9 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
     }
   });
 
-  useEffect(() => triggerCallback(onLoaded), [scene, materials, onLoaded]);
+  useEffect(() => {
+    console.log("avatar model loaded");
+    triggerCallback(onLoaded); }, [scene, materials, onLoaded]);
 
   useEffect(() => {
     gl.domElement.addEventListener('mousedown', setTouchingOn);
@@ -98,7 +100,7 @@ export const Model: FC<ModelProps> = ({ scene, scale = 1, modelRef, onLoaded, on
   return (
     <group ref={modelRef} dispose={null} rotation={[0, 0, 0]}>
       <primitive object={scene} scale={scale} />
-      {spawnComponent}
+        {spawnComponent}
     </group>
   );
 };

src/components/Models/PoseModel/PoseModel.component.tsx

@@ -2,7 +2,7 @@ import React, { FC, Ref } from 'react';
 import { useGraph } from '@react-three/fiber';
 import { Model } from 'src/components/Models/Model';
 import { Group } from 'three';
-import { mutatePose, useEmotion, useFallback, useGltfLoader } from 'src/services';
+import { mutatePose, useEmotion, useGltfLoader } from 'src/services';
 import { BaseModelProps } from 'src/types';
 import { Emotion } from '../../Avatar/Avatar.component';
 
@@ -20,7 +20,6 @@ export const PoseModel: FC<PoseModelProps> = ({
   modelRef,
   scale = 1,
   emotion,
-  setModelFallback,
   onLoaded,
   bloom
 }) => {
@@ -31,7 +30,6 @@ export const PoseModel: FC<PoseModelProps> = ({
 
   mutatePose(nodes, sourceNodes);
   useEmotion(nodes, emotion);
-  useFallback(nodes, setModelFallback);
 
   return <Model modelRef={modelRef} scene={scene} scale={scale} onLoaded={onLoaded} bloom={bloom} />;
 };

src/components/Models/PoseModel/PoseModel.container.tsx

@@ -1,16 +1,11 @@
-import React, { FC, Suspense, useState } from 'react';
+import React, { FC, Suspense } from 'react';
 import { PoseModel, PoseModelProps } from './PoseModel.component';
 
 /**
  * Contains model to handle suspense fallback.
  */
-export const PoseModelContainer: FC<PoseModelProps> = (props) => {
-  /* eslint-disable-next-line react/jsx-no-useless-fragment */
-  const [fallback, setFallback] = useState<JSX.Element>(<></>);
-
-  return (
-    <Suspense fallback={fallback}>
-      <PoseModel setModelFallback={setFallback} {...props} />
+export const PoseModelContainer: FC<PoseModelProps> = (props) => (
+    <Suspense>
+      <PoseModel {...props} />
     </Suspense>
   );
-};