feat: disable zoom via props

readyplayerme · Dec 17, 2024 · ab6eb66 · ab6eb66
1 parent eb70101
commit ab6eb66
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git a/src/App/components/Nova.tsx b/src/App/components/Nova.tsx
@@ -65,6 +65,7 @@ export const AvatarNova: FC = () => {
         ))}
       </SettingsPanel>
       <Avatar
+        disableZoom
         modelSrc={modelSrc}
         emotion={emotions.smile}
         animations={animations}

diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -160,6 +160,7 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
    */
   materialConfig?: MaterialConfiguration;
   onAnimationEnd?: (action: AnimationAction) => void;
+  disableZoom?: boolean;
 }
 
 /**
@@ -205,7 +206,8 @@ const Avatar: FC<AvatarProps> = ({
   lightTarget,
   fov = 50,
   onAnimationEnd,
-  materialConfig
+  materialConfig,
+  disableZoom
 }) => {
   const setSpawnState = useSetAtom(spawnState);
 
@@ -228,6 +230,7 @@ const Avatar: FC<AvatarProps> = ({
           scale={scale}
           onLoaded={onLoaded}
           bloom={effects?.bloom}
+          disableZoom={disableZoom}
           onAnimationEnd={onAnimationEnd}
           materialConfig={materialConfig}
         />
@@ -303,7 +306,8 @@ const Avatar: FC<AvatarProps> = ({
     materialConfig,
     onAnimationEnd,
     idleRotation,
-    headMovement
+    headMovement,
+    disableZoom
   ]);
 
   useEffect(() => triggerCallback(onLoading), [modelSrc, animationSrc, onLoading]);

diff --git a/src/components/Models/Model/Model.component.tsx b/src/components/Models/Model/Model.component.tsx
@@ -10,13 +10,15 @@ interface ModelProps extends BaseModelProps {
   scene: Group;
   modelRef?: Ref<Group>;
   scale?: number;
+  disableZoom?: boolean;
   onSpawnAnimationFinish?: () => void;
 }
 
 const ROTATION_STEP = 0.005;
 
 export const Model: FC<ModelProps> = ({
   scene,
+  disableZoom,
   scale = 1,
   modelRef,
   onLoaded,
@@ -77,6 +79,13 @@ export const Model: FC<ModelProps> = ({
   useEffect(() => triggerCallback(onLoaded), [scene, onLoaded]);
 
   useEffect(() => {
+    const disableZoomHandler = (e: WheelEvent) => {
+      if (disableZoom) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
     gl.domElement.addEventListener('mousedown', setTouchingOn);
     gl.domElement.addEventListener('touchstart', setTouchingOn, { passive: true });
     window.addEventListener('mouseup', setTouchingOff);
@@ -86,6 +95,10 @@ export const Model: FC<ModelProps> = ({
     window.addEventListener('mousemove', onTouchMove);
     gl.domElement.addEventListener('touchmove', onTouchMove, { passive: true });
 
+    if (disableZoom) {
+      gl.domElement.addEventListener('wheel', disableZoomHandler, { passive: false });
+    }
+
     return () => {
       gl.domElement.removeEventListener('mousedown', setTouchingOn);
       gl.domElement.removeEventListener('touchstart', setTouchingOn);
@@ -95,8 +108,12 @@ export const Model: FC<ModelProps> = ({
 
       window.removeEventListener('mousemove', onTouchMove);
       gl.domElement.removeEventListener('touchmove', onTouchMove);
+
+      if (disableZoom) {
+        gl.domElement.removeEventListener('wheel', disableZoomHandler);
+      }
     };
-  });
+  }, [disableZoom, gl.domElement, onTouchMove]);
 
   const spawnComponent = useMemo(
     () => <Spawn avatar={scene} onSpawnFinish={onSpawnAnimationFinish} />,

diff --git a/src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx b/src/components/Models/MultipleAnimationModel/MultipleAnimationModel.component.tsx
@@ -14,11 +14,13 @@ export interface MultipleAnimationModelProps extends BaseModelProps {
   activeAnimation: string;
   scale?: number;
   emotion?: Emotion;
+  disableZoom?: boolean;
   onAnimationEnd?: (action: AnimationAction) => void;
 }
 
 export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   modelSrc,
+  disableZoom,
   animations,
   activeAnimation,
   scale = 1,
@@ -106,5 +108,14 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   useIdleExpression('blink', scene);
   useFallbackScene(scene, setModelFallback);
 
-  return <Model scene={scene} scale={scale} onLoaded={onLoaded} bloom={bloom} materialConfig={materialConfig} />;
+  return (
+    <Model
+      scene={scene}
+      scale={scale}
+      disableZoom={disableZoom}
+      onLoaded={onLoaded}
+      bloom={bloom}
+      materialConfig={materialConfig}
+    />
+  );
 };