From 8c5bbe2e770400877fc1ac6633e6a2e6e548ef01 Mon Sep 17 00:00:00 2001 From: Bart van der Braak Date: Thu, 10 Aug 2023 12:11:53 +0200 Subject: [PATCH] feat: add more 3d objects and add contrast --- src/lib/assets/tools/github.svg | 9 +- src/lib/assets/tools/nvm.svg | 13 +-- src/lib/assets/tools/studio3t.svg | 11 ++- src/routes/theatre/+page.svelte | 5 +- src/routes/theatre/Scene.svelte | 21 +++-- src/routes/toolbox/+page.svelte | 8 +- src/routes/toolbox/Scene.svelte | 80 +++++++++++++++--- src/routes/toolbox/models/GithubFluid.svelte | 46 ++++++++++ .../toolbox/models/TerraformFlat.svelte | 23 ++++- src/routes/toolbox/models/Warp.svelte | 13 ++- static/github.glb | Bin 67016 -> 0 bytes static/models/github-fluid-transformed.glb | Bin 0 -> 21152 bytes static/models/github-fluid.glb | Bin 0 -> 150412 bytes static/models/github-transformed.glb | Bin 9976 -> 0 bytes 14 files changed, 191 insertions(+), 38 deletions(-) create mode 100644 src/routes/toolbox/models/GithubFluid.svelte delete mode 100644 static/github.glb create mode 100644 static/models/github-fluid-transformed.glb create mode 100644 static/models/github-fluid.glb delete mode 100644 static/models/github-transformed.glb diff --git a/src/lib/assets/tools/github.svg b/src/lib/assets/tools/github.svg index d5e6491..5113698 100644 --- a/src/lib/assets/tools/github.svg +++ b/src/lib/assets/tools/github.svg @@ -1 +1,8 @@ - \ No newline at end of file + + + + + + diff --git a/src/lib/assets/tools/nvm.svg b/src/lib/assets/tools/nvm.svg index 72ede62..69b2cf7 100644 --- a/src/lib/assets/tools/nvm.svg +++ b/src/lib/assets/tools/nvm.svg @@ -1,12 +1,13 @@ - + @@ -45,4 +46,4 @@ - + \ No newline at end of file diff --git a/src/lib/assets/tools/studio3t.svg b/src/lib/assets/tools/studio3t.svg index cad6e2a..11e7ae4 100644 --- a/src/lib/assets/tools/studio3t.svg +++ b/src/lib/assets/tools/studio3t.svg @@ -1,6 +1,9 @@ - - - - + + + \ No newline at end of file diff --git a/src/routes/theatre/+page.svelte b/src/routes/theatre/+page.svelte index d80ee29..71aa3c4 100644 --- a/src/routes/theatre/+page.svelte +++ b/src/routes/theatre/+page.svelte @@ -1,7 +1,8 @@ @@ -12,6 +13,8 @@ + + diff --git a/src/routes/theatre/Scene.svelte b/src/routes/theatre/Scene.svelte index 8ed3c2e..11175a2 100644 --- a/src/routes/theatre/Scene.svelte +++ b/src/routes/theatre/Scene.svelte @@ -1,18 +1,21 @@ + + + + - - - - - - + diff --git a/src/routes/toolbox/+page.svelte b/src/routes/toolbox/+page.svelte index bbfd41e..1d2ab52 100644 --- a/src/routes/toolbox/+page.svelte +++ b/src/routes/toolbox/+page.svelte @@ -27,9 +27,11 @@

- - - +
+ + + +
diff --git a/src/routes/toolbox/Scene.svelte b/src/routes/toolbox/Scene.svelte index 219732d..085a648 100644 --- a/src/routes/toolbox/Scene.svelte +++ b/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; }); { ref.lookAt(0, 1, 0); }} @@ -26,12 +47,51 @@ 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)} /> + + + githubScale.set(1.3)} + on:pointerleave={() => githubScale.set(1)} + /> + + + + warpScale.set(1.3)} + on:pointerleave={() => warpScale.set(1)} + /> + + + + terraformScale.set(1.3)} + on:pointerleave={() => terraformScale.set(1)} + /> + + + diff --git a/src/routes/toolbox/models/GithubFluid.svelte b/src/routes/toolbox/models/GithubFluid.svelte new file mode 100644 index 0000000..8fdebb6 --- /dev/null +++ b/src/routes/toolbox/models/GithubFluid.svelte @@ -0,0 +1,46 @@ + + + + + + {#await gltf} + + {:then gltf} + + + {:catch error} + + {/await} + + + + + diff --git a/src/routes/toolbox/models/TerraformFlat.svelte b/src/routes/toolbox/models/TerraformFlat.svelte index 348b845..b2cc863 100644 --- a/src/routes/toolbox/models/TerraformFlat.svelte +++ b/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 --> -