Merge pull request #6 from readyplayerme/feature/idle-rotation

Feature - idle rotation
readyplayerme · Jul 13, 2022 · 476bdc2 · 476bdc2
2 parents 91efbd3 + 01af679
commit 476bdc2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -78,6 +78,10 @@ export interface AvatarProps extends LightingProps {
    * Pass styling to canvas element.
    */
   style?: CSSProperties;
+  /**
+   * Applies an idle rotation to the animated and half-body models.
+   */
+  idleRotation?: boolean;
 }
 
 /**
@@ -102,27 +106,30 @@ export const Avatar: FC<AvatarProps> = ({
   spotLightAngle = 0.314,
   cameraTarget = CAMERA.TARGET.FULL_BODY,
   cameraInitialDistance = CAMERA.INITIAL_DISTANCE.FULL_BODY,
-  style
+  style,
+  idleRotation = false
 }) => {
   const AvatarModel = useMemo(() => {
     if (!isValidGlbUrl(modelUrl)) {
       return null;
     }
 
     if (!!animationUrl && !halfBody && isValidGlbUrl(animationUrl)) {
-      return <AnimationModel modelUrl={modelUrl} animationUrl={animationUrl} scale={scale} />;
+      return (
+        <AnimationModel modelUrl={modelUrl} animationUrl={animationUrl} scale={scale} idleRotation={idleRotation} />
+      );
     }
 
     if (halfBody) {
-      return <HalfBodyModel modelUrl={modelUrl} scale={scale} />;
+      return <HalfBodyModel modelUrl={modelUrl} scale={scale} idleRotation={idleRotation} />;
     }
 
     if (isValidGlbUrl(poseUrl)) {
       return <PoseModel modelUrl={modelUrl} scale={scale} poseUrl={poseUrl!} />;
     }
 
     return <StaticModel modelUrl={modelUrl} scale={scale} />;
-  }, [halfBody, animationUrl, modelUrl, scale, poseUrl]);
+  }, [halfBody, animationUrl, modelUrl, scale, poseUrl, idleRotation]);
 
   return (
     <BaseCanvas background={backgroundColor} position={new Vector3(0, 0, 3)} fov={50} style={style}>

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -14,6 +14,7 @@ Static.args = {
   environment: 'city',
   shadows: false,
   halfBody: false,
+  idleRotation: false,
   ambientLightColor: '#fff5b6',
   ambientLightIntensity: 0.25,
   dirLightPosition: new Vector3(-3, 5, -5),

diff --git a/src/components/Models/AnimationModel/AnimationModel.component.tsx b/src/components/Models/AnimationModel/AnimationModel.component.tsx
@@ -10,6 +10,7 @@ interface AnimationModelProps {
   animationUrl: string;
   rotation?: number;
   scale?: number;
+  idleRotation?: boolean;
 }
 
 let currentRotation = 0;
@@ -18,7 +19,8 @@ export const AnimationModel: FC<AnimationModelProps> = ({
   modelUrl,
   animationUrl,
   rotation = 20 * (Math.PI / 180),
-  scale = 1
+  scale = 1,
+  idleRotation = false
 }) => {
   const ref = useRef<Group>();
   const { scene } = useLoader(GLTFLoader, modelUrl);
@@ -31,6 +33,11 @@ export const AnimationModel: FC<AnimationModelProps> = ({
 
   useFrame((state, delta) => {
     mixer?.update(delta);
+
+    if (!idleRotation) {
+      return;
+    }
+
     if (ref?.current) {
       currentRotation += delta * 0.2;
       ref.current.rotation.y = rotation + Math.sin(currentRotation) / 3;

diff --git a/src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx b/src/components/Models/HalfBodyModel/HalfBodyModel.component.tsx
@@ -9,11 +9,17 @@ interface HalfBodyModelProps {
   modelUrl: string;
   rotation?: number;
   scale?: number;
+  idleRotation?: boolean;
 }
 
 let currentRotation = 0;
 
-export const HalfBodyModel: FC<HalfBodyModelProps> = ({ modelUrl, scale = 1, rotation = 20 * (Math.PI / 180) }) => {
+export const HalfBodyModel: FC<HalfBodyModelProps> = ({
+  modelUrl,
+  scale = 1,
+  rotation = 20 * (Math.PI / 180),
+  idleRotation = false
+}) => {
   const ref = useRef<Group>();
   const { scene } = useLoader(GLTFLoader, modelUrl);
   const { nodes } = useGraph(scene);
@@ -34,6 +40,10 @@ export const HalfBodyModel: FC<HalfBodyModelProps> = ({ modelUrl, scale = 1, rot
   });
 
   useFrame((state, delta) => {
+    if (!idleRotation) {
+      return;
+    }
+
     if (ref?.current) {
       currentRotation += delta * 0.2;
       ref.current.rotation.y = rotation + Math.sin(currentRotation) / 3;