From 01af679e31a2fde040ff08c3be81723eeae8d43b Mon Sep 17 00:00:00 2001
From: Elar Huik <ehexec@gmail.com>
Date: Wed, 13 Jul 2022 20:28:06 +0300
Subject: [PATCH] feat: allow enabling idle rotation

---
 src/components/Avatar/Avatar.component.tsx        | 15 +++++++++++----
 src/components/Avatar/Avatar.stories.tsx          |  1 +
 .../AnimationModel/AnimationModel.component.tsx   |  9 ++++++++-
 .../HalfBodyModel/HalfBodyModel.component.tsx     | 12 +++++++++++-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
index c26e520e..e322344a 100644
--- 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,7 +106,8 @@ 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)) {
@@ -110,11 +115,13 @@ export const Avatar: FC<AvatarProps> = ({
     }
 
     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)) {
@@ -122,7 +129,7 @@ export const Avatar: FC<AvatarProps> = ({
     }
 
     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
index f45ea830..4bf027c7 100644
--- 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
index 2b761582..4ad01895 100644
--- 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
index 34381deb..aec9d20b 100644
--- 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;