feat: added threlte & threejs implementations

package.json

@@ -34,7 +34,9 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@threlte/core": "6.0.0-next.11",
+		"@threlte/extras": "5.0.0-next.16",
 		"@types/three": "^0.154.0",
-		"three": "^0.154.0"
+		"three": "^0.155.0"
 	}
 }

pnpm-lock.yaml

@@ -5,12 +5,18 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@threlte/core':
+    specifier: 6.0.0-next.11
+    version: 6.0.0-next.11
+  '@threlte/extras':
+    specifier: 5.0.0-next.16
+    version: 5.0.0-next.16(three@0.155.0)
   '@types/three':
     specifier: ^0.154.0
     version: 0.154.0
   three:
-    specifier: ^0.154.0
+    specifier: ^0.155.0
-    version: 0.154.0
+    version: 0.155.0
 
 devDependencies:
   '@skeletonlabs/skeleton':
@@ -486,6 +492,19 @@ packages:
       - supports-color
     dev: true
 
+  /@threlte/core@6.0.0-next.11:
+    resolution: {integrity: sha512-mW7tCxUiXTrMvTb9NLD/fBNlMtnSDnIdBykf7bXKw6Jd5lKUGNq1zQp/8jg456g17XJazmAY1nO/oJ54ye1qoA==}
+    dev: false
+
+  /@threlte/extras@5.0.0-next.16(three@0.155.0):
+    resolution: {integrity: sha512-KcjvVrRlvTtHlzHdRtvEHmQa+ijyr6CFLIIN1kISZHvvnReg4HuNOZQRgAfjXCDs8Rrmoq31H9nvcayfEDrIwA==}
+    dependencies:
+      lodash: 4.17.21
+      troika-three-text: 0.47.2(three@0.155.0)
+    transitivePeerDependencies:
+      - three
+    dev: false
+
   /@tweenjs/tween.js@18.6.4:
     resolution: {integrity: sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ==}
     dev: false
@@ -751,6 +770,12 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
+  /bidi-js@1.0.2:
+    resolution: {integrity: sha512-rzSy/k7WdX5zOyeHHCOixGXbCHkyogkxPKL2r8QtzHmVQDiWCXUWa18bLdMWT9CYMLOYTjWpTHawuev2ouYJVw==}
+    dependencies:
+      require-from-string: 2.0.2
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -1449,6 +1474,10 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: false
+
   /lru-cache@6.0.0:
     resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
     engines: {node: '>=10'}
@@ -1817,6 +1846,11 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2152,8 +2186,8 @@ packages:
       any-promise: 1.3.0
     dev: true
 
-  /three@0.154.0:
+  /three@0.155.0:
-    resolution: {integrity: sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==}
+    resolution: {integrity: sha512-sNgCYmDijnIqkD/bMfk+1pHg3YzsxW7V2ChpuP6HCQ8NiZr3RufsXQr8M3SSUMjW4hG+sUk7YbyuY0DncaDTJQ==}
     dev: false
 
   /to-regex-range@5.0.1:
@@ -2168,6 +2202,30 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /troika-three-text@0.47.2(three@0.155.0):
+    resolution: {integrity: sha512-qylT0F+U7xGs+/PEf3ujBdJMYWbn0Qci0kLqI5BJG2kW1wdg4T1XSxneypnF05DxFqJhEzuaOR9S2SjiyknMng==}
+    peerDependencies:
+      three: '>=0.125.0'
+    dependencies:
+      bidi-js: 1.0.2
+      three: 0.155.0
+      troika-three-utils: 0.47.2(three@0.155.0)
+      troika-worker-utils: 0.47.2
+      webgl-sdf-generator: 1.1.1
+    dev: false
+
+  /troika-three-utils@0.47.2(three@0.155.0):
+    resolution: {integrity: sha512-/28plhCxfKtH7MSxEGx8e3b/OXU5A0xlwl+Sbdp0H8FXUHKZDoksduEKmjQayXYtxAyuUiCRunYIv/8Vi7aiyg==}
+    peerDependencies:
+      three: '>=0.125.0'
+    dependencies:
+      three: 0.155.0
+    dev: false
+
+  /troika-worker-utils@0.47.2:
+    resolution: {integrity: sha512-mzss4MeyzUkYBppn4x5cdAqrhBHFEuVmMMgLMTyFV23x6GvQMyo+/R5E5Lsbrt7WSt5RfvewjcwD1DChRTA9lA==}
+    dev: false
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
@@ -2282,6 +2340,10 @@ packages:
       vite: 4.4.4
     dev: true
 
+  /webgl-sdf-generator@1.1.1:
+    resolution: {integrity: sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==}
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}

src/lib/assets/vectors/github.svg

@@ -0,0 +1 @@
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

src/lib/components/gltf/Github3d.svelte

@@ -0,0 +1,29 @@
+<!--
+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
+-->
+
+<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 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}
+			><T.MeshPhysicalMaterial color={[0,0,0]} /></T.Mesh
+		>
+	{:catch error}
+		<slot name="error" {error} />
+	{/await}
+
+	<slot {ref} />
+</T>

src/lib/extrude-svg.ts

@@ -0,0 +1,45 @@
+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,98 +1,7 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { Canvas } from '@threlte/core';
-	import { browser } from '$app/environment';
+	import Scene from './Scene.svelte';
-	import * as THREE from 'three';
+	import Github3d from '$lib/components/gltf/Github3d.svelte';
-	import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
-
-	const svgGitHub = `<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>`;
-	const loader = new SVGLoader();
-
-	let canvasContainer: HTMLDivElement;
-	let scene: THREE.Scene;
-	let camera: THREE.PerspectiveCamera;
-	let renderer: THREE.WebGLRenderer;
-
-	onMount(() => {
-		if (!browser) return; // Ensure it runs only in the browser environment
-
-		initThreeJS();
-		animate();
-	});
-
-	function initThreeJS() {
-		scene = new THREE.Scene();
-		camera = new THREE.PerspectiveCamera(
-			75,
-			canvasContainer.clientWidth / canvasContainer.clientHeight,
-			0.1,
-			1000
-		);
-		camera.position.z = 5;
-
-		renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
-		renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
-		renderer.setClearColor(0x000000, 0); // Transparent background
-
-		const svgData = loader.parse(svgGitHub);
-		const svgGroup = new THREE.Group();
-		const material = new THREE.MeshNormalMaterial();
-
-		// Loop through all of the parsed paths
-		svgData.paths.forEach((path, i) => {
-			const shapes = path.toShapes(true);
-
-			// Each path has array of shapes
-			shapes.forEach((shape, j) => {
-				// Finally we can take each shape and extrude it
-				const geometry = new THREE.ExtrudeGeometry(shape, {
-					depth: 20,
-					bevelEnabled: false
-				});
-
-				// Create a mesh and add it to the group
-				const mesh = new THREE.Mesh(geometry, material);
-
-				svgGroup.add(mesh);
-			});
-		});
-
-		// Add our group to the scene (you'll need to create a scene)
-		scene.add(svgGroup);
-
-		canvasContainer.appendChild(renderer.domElement);
-
-		// Handle window resizing
-		window.addEventListener('resize', onWindowResize);
-	}
-
-	function onWindowResize() {
-		if (!camera || !renderer) return;
-
-		camera.aspect = canvasContainer.clientWidth / canvasContainer.clientHeight;
-		camera.updateProjectionMatrix();
-		renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
-	}
-
-	function animate() {
-		if (!browser) return; // Ensure it runs only in the browser environment
-
-		requestAnimationFrame(animate);
-		// Add animations or changes to the scene here if needed
-		if (scene && camera && renderer) {
-			renderer.render(scene, camera);
-		}
-	}
-
-	// Cleanup function
-	function cleanup() {
-		if (!browser) return; // Ensure it runs only in the browser environment
-
-		window.removeEventListener('resize', onWindowResize);
-		renderer?.dispose();
-	}
-
-	// Cleanup when the component is destroyed
-	onDestroy(cleanup);
 </script>
 
 <svelte:head>
@@ -101,13 +10,9 @@
 
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">Tools</h2>
+
+	<Canvas>
+		<Scene />
+		<Github3d />
+	</Canvas>
 </main>
-
-<div bind:this={canvasContainer} class="canvas-container" />
-
-<style>
-	.canvas-container {
-		width: 100%;
-		height: 100%;
-	}
-</style>

src/routes/tools/Scene.svelte

@@ -0,0 +1,42 @@
+<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.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={[0, 0, 0]} />
+</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)}
+/>

vite.config.ts

@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+  ssr: {
+    noExternal: ['three']
+  }
 });