feat: add more 3d objects and add contrast

src/routes/toolbox/+page.svelte

@@ -27,9 +27,11 @@
 			</p>
 		</div>
 		<div class="md:col-span-1 flex justify-end">
-			<Canvas>
-				<Scene />
-			</Canvas>
+			<div class="sm:h-60 w-full">
+				<Canvas>
+					<Scene />
+				</Canvas>
+			</div>
 		</div>
 	</div>
 

src/routes/toolbox/Scene.svelte

@@ -5,19 +5,40 @@
 
 	import { interactivity } from '@threlte/extras';
 	import { spring } from 'svelte/motion';
+	import GithubFluid from './models/GithubFluid.svelte';
+	import Warp from './models/Warp.svelte';
+	import TerraformFlat from './models/TerraformFlat.svelte';
 
 	interactivity();
-	const scale = spring(1);
 
-	let rotation = 0;
+	const githubScale = spring(1);
+	let githubRotation = 0;
 	useFrame((state, delta) => {
-		rotation += delta;
+		githubRotation += 0.5 * delta;
+	});
+
+	const kubernetesScale = spring(1);
+	let kubernetesRotation = 30;
+	useFrame((state, delta) => {
+		kubernetesRotation += 0.3 * delta;
+	});
+
+	const warpScale = spring(1);
+	let warpRotation = 10;
+	useFrame((state, delta) => {
+		warpRotation += 0.2 * delta;
+	});
+
+	const terraformScale = spring(1);
+	let terraformRotation = 90;
+	useFrame((state, delta) => {
+		terraformRotation += 0.6 * delta;
 	});
 </script>
 
 <T.PerspectiveCamera
 	makeDefault
-	position={[10, 10, 10]}
+	position={[10, 5, 8]}
 	on:create={({ ref }) => {
 		ref.lookAt(0, 1, 0);
 	}}
@@ -26,12 +47,51 @@
 <T.AmbientLight intensity={0.9} />
 <Float floatIntensity={2} floatingRange={[0, 1]}>
 	<Kubernetes
-		rotation.y={rotation}
-		position.y={-1}
+		rotation.y={kubernetesRotation}
+		position.y={-4}
 		position.z={-2}
-		position.x={-1}
-		scale={$scale}
-		on:pointerenter={() => scale.set(1.5)}
-		on:pointerleave={() => scale.set(1)}
+		position.x={-4}
+		scale={$kubernetesScale}
+		on:pointerenter={() => kubernetesScale.set(1.3)}
+		on:pointerleave={() => kubernetesScale.set(1)}
 	/>
 </Float>
+
+<Float floatIntensity={2} floatingRange={[0, 0.5]}>
+	<GithubFluid
+		rotation.y={githubRotation}
+		position.y={0}
+		position.z={-4}
+		position.x={3}
+		scale={$githubScale}
+		on:pointerenter={() => githubScale.set(1.3)}
+		on:pointerleave={() => githubScale.set(1)}
+	/>
+</Float>
+
+<Float floatIntensity={2} floatingRange={[0.2, 0.3]}>
+	<Warp
+		rotation.y={warpRotation}
+		position.y={0}
+		position.z={2}
+		position.x={-8}
+		scale={$warpScale}
+		on:pointerenter={() => warpScale.set(1.3)}
+		on:pointerleave={() => warpScale.set(1)}
+	/>
+</Float>
+
+<Float floatIntensity={2} floatingRange={[0.2, 0.3]}>
+	<TerraformFlat
+		rotation.y={terraformRotation}
+		position.y={-2}
+		position.z={-4}
+		position.x={-6}
+		scale={$terraformScale}
+		on:pointerenter={() => terraformScale.set(1.3)}
+		on:pointerleave={() => terraformScale.set(1)}
+	/>
+</Float>
+
+<!-- <T.AxesHelper></T.AxesHelper>
+<T.GridHelper></T.GridHelper> -->

src/routes/toolbox/models/GithubFluid.svelte

@@ -0,0 +1,46 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/github-fluid.glb --transform
+-->
+
+<script>
+	import { Group } from 'three';
+	import { T, forwardEventHandlers } from '@threlte/core';
+	import { useGltf } from '@threlte/extras';
+
+	export const ref = new Group();
+	const initialScale = 30;
+
+	const gltf = useGltf('/models/github-fluid-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.circle4.geometry}
+			material={gltf.materials['SVGMat.010']}
+			position={[0.0 * initialScale, 0.0 * initialScale, 0 * initialScale]}
+			rotation={[Math.PI / 2, 0, 0]}
+			scale={initialScale}
+		/>
+		<T.Mesh
+			geometry={gltf.nodes.path4.geometry}
+			material={gltf.materials['SVGMat.012']}
+			position={[-0.017 * initialScale, -0.02 * initialScale, 0 * initialScale]}
+			rotation={[Math.PI / 2, 0, 0]}
+			scale={initialScale}
+		/>
+	{:catch error}
+		<slot name="error" {error} />
+	{/await}
+
+	<slot {ref} />
+</T>
+
+<!-- position={[0.06 * initialScale, 0.06 * initialScale, 0 * initialScale]}
+
+position={[0.045 * initialScale, 0.04 * initialScale, 0 * initialScale]} -->

src/routes/toolbox/models/TerraformFlat.svelte

@@ -3,12 +3,19 @@ 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>
+<script lang="ts">
 	import { Group } from 'three';
 	import { T, forwardEventHandlers } from '@threlte/core';
 	import { useGltf } from '@threlte/extras';
 
 	export const ref = new Group();
+	const initialScale = 30;
+	const offsetOrigin: [number, number, number] = [-0.1, 0, -0.034];
+	const multipliedOffset: [number, number, number] = [
+		offsetOrigin[0] * initialScale,
+		offsetOrigin[1] * initialScale,
+		offsetOrigin[2] * initialScale
+	];
 
 	const gltf = useGltf('/models/terraform-flat-transformed.glb', { useDraco: true });
 
@@ -20,8 +27,18 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/terraform-flat.glb --tr
 		<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.Mesh
+				geometry={gltf.nodes.Curve_1.geometry}
+				material={gltf.materials.SVGMat}
+				position={multipliedOffset}
+				scale={initialScale}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Curve_2.geometry}
+				material={gltf.materials['SVGMat.001']}
+				position={multipliedOffset}
+				scale={initialScale}
+			/>
 		</T.Group>
 	{:catch error}
 		<slot name="error" {error} />

src/routes/toolbox/models/Warp.svelte

@@ -3,12 +3,19 @@ Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
 Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform
 -->
 
-<script>
+<script lang="ts">
 	import { Group } from 'three';
 	import { T, forwardEventHandlers } from '@threlte/core';
 	import { useGltf } from '@threlte/extras';
 
 	export const ref = new Group();
+	const initialScale = 20;
+	const offsetOrigin: [number, number, number] = [-0.1, 0, -0.034];
+	const multipliedOffset: [number, number, number] = [
+		offsetOrigin[0] * initialScale,
+		offsetOrigin[1] * initialScale,
+		offsetOrigin[2] * initialScale
+	];
 
 	const gltf = useGltf('/models/warp-transformed.glb', { useDraco: true });
 
@@ -23,11 +30,15 @@ Command: npx @threlte/gltf@1.0.0-next.13 ./static/models/warp.glb --transform
 			geometry={gltf.nodes.Warp.geometry}
 			material={gltf.materials.SVGMat}
 			rotation={[Math.PI / 2, 0, 0.3]}
+			position={multipliedOffset}
+			scale={initialScale}
 		/>
 		<T.Mesh
 			geometry={gltf.nodes.Warp001.geometry}
 			material={gltf.materials.Gradient}
 			rotation={[Math.PI / 2, 0, 0.3]}
+			position={multipliedOffset}
+			scale={initialScale}
 		/>
 	{:catch error}
 		<slot name="error" {error} />