Merge pull request #77 from bartvdbraak/feat/3js-tools

Feat/3js tools

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,11 @@
 <!-- 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';
+	import TerraformFlat from './TerraformFlat.svelte';
+	import Kubernetes from './Kubernetes.svelte';
 </script>
 
 <svelte:head>
@@ -12,6 +16,40 @@
 	<h2 class="text-3xl font-bold mb-8">Tools</h2>
 
 	<Canvas>
-		<Scene />
+		<T.PerspectiveCamera makeDefault position={[-10, 10, 30]} fov={15}>
+			<OrbitControls
+				autoRotate
+				enableZoom={false}
+				enableDamping
+				autoRotateSpeed={0.2}
+				target.y={3}
+			/>
+		</T.PerspectiveCamera>
+
+		<T.DirectionalLight intensity={0.5} position.x={5} position.y={10} />
+		<T.AmbientLight intensity={0.2} />
+
+		<Grid
+			position.y={-0.001}
+			cellColor="#ffffff"
+			sectionColor="#ffffff"
+			sectionThickness={0}
+			fadeDistance={40}
+			cellSize={2}
+		/>
+
+		<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
+
+		<Float floatIntensity={1} floatingRange={[0, 1]}>
+			<Github position.y={0.4} position.z={-0.75} scale={50} />
+		</Float>
+
+		<Float floatIntensity={1} floatingRange={[0, 1]}>
+			<TerraformFlat position.y={0.4} position.z={-4} scale={10} />
+		</Float>
+
+		<Float floatIntensity={1} floatingRange={[0, 1]}>
+			<Kubernetes position.y={0.4} position.z={-2} position.x={-3} scale={100} />
+		</Float>
 	</Canvas>
 </main>

src/routes/tools/Github.svelte

@@ -1,5 +1,3 @@
-<!-- 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
@@ -9,9 +7,10 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --t
   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('/models/github-transformed.glb', { useDraco: true })
 
   const component = forwardEventHandlers()
 </script>

src/routes/tools/Kubernetes.svelte

@@ -0,0 +1,37 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/kubernetes.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('/models/kubernetes-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.Curve.geometry}
+      material={gltf.materials['SVGMat.006']}
+      rotation={[Math.PI / 2, 0, 0]}
+    />
+    <T.Mesh
+      geometry={gltf.nodes.Curve001.geometry}
+      material={gltf.materials['SVGMat.007']}
+      rotation={[Math.PI / 2, 0, 0]}
+    />
+  {: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>
-

src/routes/tools/TerraformFlat.svelte

@@ -0,0 +1,31 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.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('/models/terraform-flat-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.Group rotation={[Math.PI / 2, 0, 5]}>
+      <T.Mesh geometry={gltf.nodes.Curve_1.geometry} material={gltf.materials.SVGMat} />
+      <T.Mesh geometry={gltf.nodes.Curve_2.geometry} material={gltf.materials['SVGMat.001']} />
+    </T.Group>
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
+
+  <slot {ref} />
+</T>