From ec8efdc0d2e9de25ec79ffd8eae479d02a6959a6 Mon Sep 17 00:00:00 2001
From: Juan Manuel Ibarra <olibar194@gmail.com>
Date: Tue, 13 Jun 2023 14:33:56 -0300
Subject: [PATCH] BallCanvas with a better camara control

---
 src/components/canvas/Ball.jsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/canvas/Ball.jsx b/src/components/canvas/Ball.jsx
index e247136f..2bd9a544 100644
--- a/src/components/canvas/Ball.jsx
+++ b/src/components/canvas/Ball.jsx
@@ -1,17 +1,17 @@
-import React, { Suspense } from "react";
-import { Canvas } from "@react-three/fiber";
+import React, { Suspense } from 'react'
+import { Canvas } from '@react-three/fiber'
 import {
   Decal,
   Float,
   OrbitControls,
   Preload,
   useTexture,
-} from "@react-three/drei";
+} from '@react-three/drei'
 
-import CanvasLoader from "../Loader";
+import CanvasLoader from '../Loader'
 
 const Ball = (props) => {
-  const [decal] = useTexture([props.imgUrl]);
+  const [decal] = useTexture([props.imgUrl])
 
   return (
     <Float speed={1.75} rotationIntensity={1} floatIntensity={2}>
@@ -34,8 +34,8 @@ const Ball = (props) => {
         />
       </mesh>
     </Float>
-  );
-};
+  )
+}
 
 const BallCanvas = ({ icon }) => {
   return (
@@ -45,13 +45,19 @@ const BallCanvas = ({ icon }) => {
       gl={{ preserveDrawingBuffer: true }}
     >
       <Suspense fallback={<CanvasLoader />}>
-        <OrbitControls enableZoom={false} />
+        <OrbitControls
+          enableZoom={false}
+          minPolarAngle={Math.PI / 4}
+          maxPolarAngle={Math.PI / 1.35}
+          minAzimuthAngle={-Math.PI / 4}
+          maxAzimuthAngle={Math.PI / 4}
+        />
         <Ball imgUrl={icon} />
       </Suspense>
 
       <Preload all />
     </Canvas>
-  );
-};
+  )
+}
 
-export default BallCanvas;
+export default BallCanvas