feat: add orbit control scene without transform

src/routes/tools/+page.svelte

@@ -1,7 +1,9 @@
 <!-- src/routes/tools/+page.svelte -->
 <script lang="ts">
 	import { Canvas } from '@threlte/core';
-	import Scene from './Scene.svelte';
+	import { T } from '@threlte/core';
+	import { ContactShadows, Float, Grid, OrbitControls } from '@threlte/extras';
+	import Github from './Github.svelte';
 </script>
 
 <svelte:head>
@@ -11,7 +13,51 @@
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">Tools</h2>
 
-	<Canvas>
-		<Scene />
+	<Canvas size={{ width: 800, height: 800 }}>
+		<T.PerspectiveCamera makeDefault position={[-10, 10, 40]} fov={15}>
+			<OrbitControls
+				autoRotate
+				enableZoom={false}
+				enableDamping
+				autoRotateSpeed={0.5}
+				target.y={3}
+			/>
+		</T.PerspectiveCamera>
+
+		<T.DirectionalLight intensity={0.8} position.x={5} position.y={10} />
+		<T.AmbientLight intensity={0.2} />
+
+		<Grid
+			position.y={-0.001}
+			cellColor="#ffffff"
+			sectionColor="#ffffff"
+			sectionThickness={0}
+			fadeDistance={50}
+			cellSize={2}
+		/>
+
+		<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
+
+		<Float floatIntensity={1} floatingRange={[0, 1]}>
+			<T.Mesh position.y={1.2} position.z={-0.75}>
+				<T.BoxGeometry />
+				<T.MeshStandardMaterial color={[0.2, 0.2, 0.5]} />
+			</T.Mesh>
+		</Float>
+
+		<Float floatIntensity={1} floatingRange={[0, 1]}>
+			<T.Mesh position={[1.2, 1.5, 0.75]} rotation.x={5} rotation.y={71}>
+				<T.TorusKnotGeometry args={[0.5, 0.15, 100, 12, 2, 3]} />
+				<T.MeshStandardMaterial color={[0.5, 0.9, 0.5]} />
+			</T.Mesh>
+		</Float>
+
+		<Float floatIntensity={1} floatingRange={[0, 1]}>
+			<!-- <T.Mesh position={[-1.4, 1.5, 0.75]} rotation={[-5, 128, 10]}>
+				<T.IcosahedronGeometry />
+				<T.MeshStandardMaterial color={[0.2, 0.9, 0.8]} />
+			</T.Mesh> -->
+			<Github />
+		</Float>
 	</Canvas>
 </main>

src/routes/tools/Github.svelte

@@ -0,0 +1,28 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb
+-->
+
+<script>
+  import { Group } from 'three'
+  import { T, forwardEventHandlers } from '@threlte/core'
+  import { useGltf } from '@threlte/extras'
+
+  export const ref = new Group()
+
+  const gltf = useGltf('/src/lib/assets/vectors/github.glb')
+
+  const component = forwardEventHandlers()
+</script>
+
+<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
+  {#await gltf}
+    <slot name="fallback" />
+  {:then gltf}
+    <T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} />
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
+
+  <slot {ref} />
+</T>

src/routes/tools/Scene.svelte

@@ -1,48 +0,0 @@
-<!-- src/routes/tools/Scene.svelte -->
-<script>
-	import Github3d from '$lib/components/gltf/Github3d.svelte';
-	import { T, useFrame } from '@threlte/core';
-	import { interactivity } from '@threlte/extras';
-	import { spring } from 'svelte/motion';
-
-	interactivity();
-	const scale = spring(1);
-
-	let rotation = 0;
-	useFrame((_state, delta) => {
-		rotation += delta;
-	});
-</script>
-
-<T.PerspectiveCamera
-	makeDefault
-	position={[10, 10, 10]}
-	on:create={({ ref }) => {
-		ref.lookAt(0, 1, 0);
-	}}
-/>
-
-<T.DirectionalLight position={[0, 10, 10]} />
-
-<T.Mesh
-	rotation.y={rotation}
-	position.y={1}
-	scale={$scale}
-	on:pointerenter={() => scale.set(1.5)}
-	on:pointerleave={() => scale.set(1)}
-	on:click={() => scale.set(3)}
->
-	<T.BoxGeometry args={[1, 2, 1]} />
-	<T.MeshBasicMaterial color={[255, 255, 255]} />
-</T.Mesh>
-
-
-<Github3d
-  position={[0, 0, 0]}
-	scale={$scale}
-	on:pointerenter={() => scale.set(1.5)}
-	on:pointerleave={() => scale.set(1)}
-	on:click={() => scale.set(3)}
->
-</Github3d>
-