Make camera size match the model's (#31)

* Make camera size match the model's Signed-off-by: Frank Noirot <[email protected]> * Linting --------- Signed-off-by: Frank Noirot <[email protected]>
KittyCAD · Oct 24, 2023 · 187561d · 187561d
1 parent 391f7ea
commit 187561d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/src/components/ModelPreviewer.svelte b/src/components/ModelPreviewer.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { GLTF, OrbitControls, interactivity } from '@threlte/extras'
+	import * as THREE from 'three'
+	import { T, useThrelte } from '@threlte/core'
+	import { GLTF, OrbitControls, interactivity, useGltf } from '@threlte/extras'
 	export let dataUrl: string
 	export let pausable = true
 
+	const { size: threlteSize } = useThrelte()
+
 	interactivity()
 
 	let shouldAutoRotate = true
@@ -21,19 +24,39 @@
 			shouldAutoRotate = true
 		}, AUTO_ROTATE_PAUSE)
 	}
+
+	const loadedModel = useGltf(dataUrl)
+	let maxDistance = 0
+	$: if ($loadedModel) {
+		const size = new THREE.Vector3()
+		const boundingBox = new THREE.Box3()
+		boundingBox.setFromObject($loadedModel.scene)
+		boundingBox.getSize(size)
+		maxDistance = Math.max(size.x, size.y, size.z)
+		console.log(maxDistance)
+	}
 </script>
 
-<T.PerspectiveCamera makeDefault fov={50} position={[20, 20, 20]}>
+<T.OrthographicCamera
+	makeDefault
+	position={[maxDistance * 2, maxDistance * 2, maxDistance * 2]}
+	near={0}
+	far={maxDistance * 10}
+	left={maxDistance * -1}
+	right={maxDistance}
+	top={maxDistance * ($threlteSize.height / $threlteSize.width)}
+	bottom={maxDistance * ($threlteSize.height / $threlteSize.width) * -1}
+>
 	<OrbitControls
 		enableDamping
 		autoRotate={shouldAutoRotate}
 		on:start={disableAutoRotate}
 		on:end={reenableAutoRotate}
 	/>
-</T.PerspectiveCamera>
+</T.OrthographicCamera>
 
 <T.AmbientLight color="white" />
 <T.DirectionalLight color="white" />
 <T.DirectionalLight color="white" position={[5, 0, -5]} />
 
-<GLTF url={dataUrl} position={[0, 0, 0]} scale={300} />
+<GLTF url={dataUrl} position={[0, 0, 0]} />
diff --git a/src/lib/paths.ts b/src/lib/paths.ts
@@ -1,9 +1,8 @@
 export const SIGN_OUT_PARAM = 'signout'
 
 export const paths = {
-	SIGN_IN: (callbackUrl: string) => import.meta.env.VITE_SITE_BASE_URL +
-	'/signin/?callbackUrl=' +
-	encodeURIComponent(callbackUrl),
+	SIGN_IN: (callbackUrl: string) =>
+		import.meta.env.VITE_SITE_BASE_URL + '/signin/?callbackUrl=' + encodeURIComponent(callbackUrl),
 	HOME: '/',
 	DASHBOARD: '/dashboard',
 	SIGN_OUT: `/?${SIGN_OUT_PARAM}=true`