feat: disable zoom via props

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

Hide file tree

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

diff --git a/src/components/Avatar/Avatar.component.tsx b/src/components/Avatar/Avatar.component.tsx
@@ -160,7 +160,8 @@ export interface AvatarProps extends LightingProps, EnvironmentProps, Omit<BaseM
    */
   materialConfig?: MaterialConfiguration;
   onAnimationEnd?: (action: AnimationAction) => void;
-  disableZoom?: boolean;
+  controlsMinDistance?: number;
+  controlsMaxDistance?: number;
 }
 
 /**
@@ -207,7 +208,8 @@ const Avatar: FC<AvatarProps> = ({
   fov = 50,
   onAnimationEnd,
   materialConfig,
-  disableZoom
+  controlsMinDistance,
+  controlsMaxDistance
 }) => {
   const setSpawnState = useSetAtom(spawnState);
 
@@ -230,7 +232,6 @@ const Avatar: FC<AvatarProps> = ({
           scale={scale}
           onLoaded={onLoaded}
           bloom={effects?.bloom}
-          disableZoom={disableZoom}
           onAnimationEnd={onAnimationEnd}
           materialConfig={materialConfig}
         />
@@ -306,8 +307,7 @@ const Avatar: FC<AvatarProps> = ({
     materialConfig,
     onAnimationEnd,
     idleRotation,
-    headMovement,
-    disableZoom
+    headMovement
   ]);
 
   useEffect(() => triggerCallback(onLoading), [modelSrc, animationSrc, onLoading]);
@@ -328,8 +328,8 @@ const Avatar: FC<AvatarProps> = ({
         cameraTarget={cameraTarget}
         cameraInitialDistance={cameraInitialDistance}
         cameraZoomTarget={cameraZoomTarget}
-        controlsMinDistance={halfBody ? CAMERA.CONTROLS.HALF_BODY.MIN_DISTANCE : CAMERA.CONTROLS.FULL_BODY.MIN_DISTANCE}
-        controlsMaxDistance={halfBody ? CAMERA.CONTROLS.HALF_BODY.MAX_DISTANCE : CAMERA.CONTROLS.FULL_BODY.MAX_DISTANCE}
+        controlsMinDistance={controlsMinDistance}
+        controlsMaxDistance={controlsMaxDistance}
         updateCameraTargetOnZoom={!halfBody}
       />
       {AvatarModel}

diff --git a/src/components/Models/Model/Model.component.tsx b/src/components/Models/Model/Model.component.tsx
@@ -10,15 +10,13 @@ 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,
@@ -79,13 +77,6 @@ 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);
@@ -95,10 +86,6 @@ 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);
@@ -108,12 +95,8 @@ 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,13 +14,11 @@ 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,
@@ -108,14 +106,5 @@ export const MultipleAnimationModel: FC<MultipleAnimationModelProps> = ({
   useIdleExpression('blink', scene);
   useFallbackScene(scene, setModelFallback);
 
-  return (
-    <Model
-      scene={scene}
-      scale={scale}
-      disableZoom={disableZoom}
-      onLoaded={onLoaded}
-      bloom={bloom}
-      materialConfig={materialConfig}
-    />
-  );
+  return <Model scene={scene} scale={scale} onLoaded={onLoaded} bloom={bloom} materialConfig={materialConfig} />;
 };