feat: add orbit control scene without transform

src/lib/extrude-svg.ts

@@ -1,45 +0,0 @@
-import type * as THREE from 'three';
-import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
-import type { SVGResult, SVGResultPaths } from 'three/examples/jsm/loaders/SVGLoader';
-
-import { Mesh } from 'three/src/objects/Mesh';
-import { Group } from 'three/src/objects/Group';
-import { MeshNormalMaterial } from 'three/src/materials/MeshNormalMaterial';
-import { ExtrudeGeometry } from 'three/src/geometries/ExtrudeGeometry';
-
-/**
- * Parses the provided SVG markup and extrudes it into a 3D model using THREE.js.
- * @param svgMarkup - SVG markup to extrude.
- * @return Group containing all of the extruded SVG paths.
- * @throws Error If the SVG markup is empty.
- */
-export function extrudeSvg(svgMarkup: string): Group {
-  if (!svgMarkup) {
-    throw new Error('SVG markup is empty');
-  }
-
-  const svgData: SVGResult = new SVGLoader().parse(svgMarkup);
-  const material: MeshNormalMaterial = new MeshNormalMaterial();
-
-  const svgGroup: Mesh[][] = svgData.paths.map(createShapeFromPath);
-
-  const group = new Group();
-  svgGroup.flat().forEach(mesh => group.add(mesh));
-
-  return group;
-
-  function createShapeFromPath(path: SVGResultPaths): Mesh[] {
-    const shapes: THREE.Shape[] = path.toShapes(true);
-
-    return shapes.map(shape => extrudeShape(shape, material));
-  }
-
-  function extrudeShape(shape: THREE.Shape, material: MeshNormalMaterial): Mesh {
-    const geometry = new ExtrudeGeometry(shape, {
-      depth: 20,
-      bevelEnabled: false
-    });
-
-    return new Mesh(geometry, material);
-  }
-}

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

@@ -1,17 +1,16 @@
-<!-- src/lib/components/gltf/Github3d.svelte -->
-
 <!--
 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 --transform
+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('./github-transformed.glb', { useDraco: true })
+  const gltf = useGltf('/src/lib/assets/vectors/github.glb')
 
   const component = forwardEventHandlers()
 </script>

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>
-