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,10 +60,12 @@ 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);
@@ -72,8 +74,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;

next.config.js

@@ -10,11 +10,6 @@ module.exports = {
         protocol: "https",
         hostname: "pbxt.replicate.delivery",
       },
-      {
-        protocol: "https",
-        hostname: "replicate.delivery",
-        pathname: '/pbxt/**',
-      },
     ],
   },
   // async headers() {
@@ -26,6 +21,7 @@ module.exports = {
   //           key: 'Content-Security-Policy',
   //           value: "default-src 'self'; img-src 'self' blob: https://replicate.com https://pbxt.replicate.delivery; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob:; connect-src 'self' blob:;"
   //         }
+                       
   //       ],
   //     },
   //   ];