Naively scale up gLTFs for now, add orbit controls (#16)

src/components/ModelPreviewer.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { GLTF } from '@threlte/extras'
+	import { GLTF, OrbitControls, interactivity } from '@threlte/extras'
+	interactivity()
 	export let dataUrl: string
+
+	let shouldAutoRotate = true
+	const AUTO_ROTATE_PAUSE = 5000
+
+	let autorotateTimeout: ReturnType<typeof setTimeout> | undefined
+	const disableAutoRotate = () => {
+		shouldAutoRotate = false
+		clearTimeout(autorotateTimeout)
+	}
+	const reenableAutoRotate = () => {
+		autorotateTimeout = setTimeout(function () {
+			shouldAutoRotate = true
+		}, AUTO_ROTATE_PAUSE)
+	}
 </script>
 
-<T.PerspectiveCamera
-	makeDefault
-	on:create={({ ref }) => {
-		ref.lookAt(0, 1, 0)
-	}}
-/>
+<T.PerspectiveCamera makeDefault fov={50} position={[20, 20, 20]}>
+	<OrbitControls
+		enableDamping
+		autoRotate={shouldAutoRotate}
+		on:start={disableAutoRotate}
+		on:end={reenableAutoRotate}
+	/>
+</T.PerspectiveCamera>
+
+<T.AmbientLight color="white" />
+<T.DirectionalLight color="white" />
+<T.DirectionalLight color="white" position={[5, 0, -5]} />
 
-<GLTF
-	url={dataUrl}
-	position={[0, 1, 0]}
-	on:load={(payload) => {
-		console.log('loaded', payload)
-	}}
-/>
+<GLTF url={dataUrl} position={[0, 0, 0]} scale={300} />