From 839521ef5e31c81ba70195b4b0543296d0909ad7 Mon Sep 17 00:00:00 2001
From: neil <nmathew87@gmail.com>
Date: Fri, 13 Oct 2023 10:42:54 -0400
Subject: [PATCH] scaling object to fit canvas

---
 components/canvascomponent.js                 |  57 +++++++++++++-----
 image_proc_server/app.py                      |   4 +-
 next.config.js                                |   2 +-
 .../ancient_vase.glb                          | Bin
 .../arm_chair__furniture.glb                  | Bin
 .../converse.glb                              | Bin
 .../sneaker.glb                               | Bin
 7 files changed, 46 insertions(+), 17 deletions(-)
 rename {components/sample_3d_models => sample_3d_models}/ancient_vase.glb (100%)
 rename {components/sample_3d_models => sample_3d_models}/arm_chair__furniture.glb (100%)
 rename {components/sample_3d_models => sample_3d_models}/converse.glb (100%)
 rename {components/sample_3d_models => sample_3d_models}/sneaker.glb (100%)

diff --git a/components/canvascomponent.js b/components/canvascomponent.js
index 07fceb4..f00f19d 100644
--- a/components/canvascomponent.js
+++ b/components/canvascomponent.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { Canvas, useFrame, useThree } from '@react-three/fiber'
 import styles from "../styles/studio.module.css";
 import { OrbitControls } from '@react-three/drei'
@@ -6,7 +6,7 @@ import { OrbitControls } from '@react-three/drei'
 import { useLoader } from '@react-three/fiber'
 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}) {
   return (
@@ -23,7 +23,6 @@ export function CanvasComponent({setCanvasRef, gltfModel}) {
     )
 }
 
-
 function Scene({ setCanvasRef, gltfModel }) {
   const { gl, camera } = useThree();
 
@@ -37,7 +36,7 @@ function Scene({ setCanvasRef, gltfModel }) {
       <ambientLight />
       <pointLight position={[1, 1, 1]} />
       <Light brightness={100} color={"white"}/> // highlight-line
-      <Model gltfModel={gltfModel} position={[0, 0, 0]} />
+      <Model gltfModel={gltfModel} />
     </>
   );
 }
@@ -45,19 +44,49 @@ function Scene({ setCanvasRef, gltfModel }) {
 
 function Model({ gltfModel, ...props }) {
 
-  const { nodes, materials } = gltfModel;
-  
-  console.log("model loaded")
-  return (
+  const modelRef = useRef();
+  const { camera, size } = useThree();
 
-    <group
-              scale={1}
-            >
-      <primitive object={gltfModel.scene} />
-      </group>
-  );
+  useEffect(() => {
+    if (modelRef.current) {
+      // Compute the bounding box of the loaded model
+      const box = new Box3().setFromObject(modelRef.current);
+      const sizeModel = new Vector3();
+      box.getSize(sizeModel);
+
+      console.log("model size 1 is ", sizeModel)
+
+      // Determine the scaling factor
+      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);
+      console.log("model size after scaling is ", sizeModelAfterScaling)
+
+      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)));
+  
+      console.log("camera position is ", camera.position.z)
+      camera.near = 0.1;
+      camera.far = 10000;
+      camera.updateProjectionMatrix();
+    }
+  }, [modelRef, camera]);
+
+  return <primitive ref={modelRef} object={gltfModel.scene} />;
 }
 
+
 function Light({ brightness, color }) {
   return (
     <rectAreaLight
diff --git a/image_proc_server/app.py b/image_proc_server/app.py
index 556a68f..f7938b4 100644
--- a/image_proc_server/app.py
+++ b/image_proc_server/app.py
@@ -20,13 +20,13 @@ def get_item_mask():
     image = Image.open(io.BytesIO(image_bytes))
 
     image = image.convert('RGBA')
-    image.save('input.png')
+    #image.save('input.png')
 
     jpeg_buffer = io.BytesIO()
 
     ai_mask_image = convert_to_black_and_white(image)
 
-    ai_mask_image.save("output.png")
+    #ai_mask_image.save("output.png")
     ai_mask_image = ai_mask_image.convert('RGB')
     ai_mask_image.save(jpeg_buffer, format="JPEG")
     ai_mask_image_base64 = base64.b64encode(jpeg_buffer.getvalue()).decode('utf-8')
diff --git a/next.config.js b/next.config.js
index b252f0d..18c4373 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     remotePatterns: [
       {
diff --git a/components/sample_3d_models/ancient_vase.glb b/sample_3d_models/ancient_vase.glb
similarity index 100%
rename from components/sample_3d_models/ancient_vase.glb
rename to sample_3d_models/ancient_vase.glb
diff --git a/components/sample_3d_models/arm_chair__furniture.glb b/sample_3d_models/arm_chair__furniture.glb
similarity index 100%
rename from components/sample_3d_models/arm_chair__furniture.glb
rename to sample_3d_models/arm_chair__furniture.glb
diff --git a/components/sample_3d_models/converse.glb b/sample_3d_models/converse.glb
similarity index 100%
rename from components/sample_3d_models/converse.glb
rename to sample_3d_models/converse.glb
diff --git a/components/sample_3d_models/sneaker.glb b/sample_3d_models/sneaker.glb
similarity index 100%
rename from components/sample_3d_models/sneaker.glb
rename to sample_3d_models/sneaker.glb