formatting

components/canvascomponent.js

@@ -8,19 +8,19 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { useGLTF, useGLB } from "@react-three/drei";
 import { Box3, Vector3 } from 'three';
 
-export function CanvasComponent({setCanvasRef, gltfModel}) {
+export function CanvasComponent({ setCanvasRef, gltfModel }) {
   return (
-      <>
+    <>
       <Canvas
-          camera={{ fov: 40, position: [0, 0, 5]}}
-          gl={{ alpha:true, preserveDrawingBuffer: true }}
+        camera={{ fov: 40, position: [0, 0, 5] }}
+        gl={{ alpha: true, preserveDrawingBuffer: true }}
       >
-          <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef}/>
-          <OrbitControls dampingFactor={0.3} />
+        <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef} />
+        <OrbitControls dampingFactor={0.3} />
       </Canvas>
 
-      </>
-    )
+    </>
+  )
 }
 
 function Scene({ setCanvasRef, gltfModel }) {
@@ -28,14 +28,14 @@ function Scene({ setCanvasRef, gltfModel }) {
 
   // Set camera position closer to the object
   // camera.position.set(0, 0, 5);  // x, y, z
-  
+
   setCanvasRef(gl.domElement);
 
   return (
     <>
       <ambientLight />
       <pointLight position={[1, 1, 1]} />
-      <Light brightness={100} color={"white"}/> // highlight-line
+      <Light brightness={100} color={"white"} /> // highlight-line
       <Model gltfModel={gltfModel} />
     </>
   );
@@ -60,12 +60,10 @@ function Model({ gltfModel, ...props }) {
       const maxSize = Math.max(sizeModel.x, sizeModel.y, sizeModel.z);
       const scale = Math.min(size.width, size.height) / maxSize;
 
-
       console.log("scaling factor is ", scale)
       // Apply the scaling factor to the model
       modelRef.current.scale.set(scale, scale, scale);
-      
-      
+
       const boxAfterScaling = new Box3().setFromObject(modelRef.current);
       const sizeModelAfterScaling = new Vector3();
       boxAfterScaling.getSize(sizeModelAfterScaling);
@@ -74,8 +72,8 @@ function Model({ gltfModel, ...props }) {
       const maxSizeAfterScaling = Math.max(sizeModelAfterScaling.x, sizeModelAfterScaling.y, sizeModelAfterScaling.z);
 
       // Optional: Adjust the camera if necessary
-      camera.position.z =( maxSizeAfterScaling / (1 * Math.tan((camera.fov * Math.PI) / 360)));
-  
+      camera.position.z = (maxSizeAfterScaling / (1 * Math.tan((camera.fov * Math.PI) / 360)));
+
       console.log("camera position is ", camera.position.z)
       camera.near = 0.1;
       camera.far = 10000;