Merge 18794e002d into ff58cc16ff

🐛 Add remotePattern on replicate.delivery in next.config.js

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]}}
+        camera={{ fov: 40, position: [0, 0, 5] }}
-          gl={{ alpha:true, preserveDrawingBuffer: true }}
+        gl={{ alpha: true, preserveDrawingBuffer: true }}
       >
-          <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef}/>
+        <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef} />
-          <OrbitControls dampingFactor={0.3} />
+        <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;

next.config.js

@@ -10,6 +10,11 @@ module.exports = {
         protocol: "https",
         hostname: "pbxt.replicate.delivery",
       },
+      {
+        protocol: "https",
+        hostname: "replicate.delivery",
+        pathname: '/pbxt/**',
+      },
     ],
   },
   // async headers() {
@@ -21,7 +26,6 @@ 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:;"
   //         }
-                       
   //       ],
   //     },
   //   ];