mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-06-30 16:29:11 +00:00
feat: revamped toolbox page
This commit is contained in:
parent
f032e4b935
commit
e2b5f1078b
10 changed files with 657 additions and 108 deletions
28
src/routes/toolbox/models/Github.svelte
Normal file
28
src/routes/toolbox/models/Github.svelte
Normal file
|
@ -0,0 +1,28 @@
|
|||
<!--
|
||||
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('/models/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} material={gltf.materials['SVGMat.001']} />
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
37
src/routes/toolbox/models/Kubernetes.svelte
Normal file
37
src/routes/toolbox/models/Kubernetes.svelte
Normal file
|
@ -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 lang="ts">
|
||||
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>
|
31
src/routes/toolbox/models/TerraformFlat.svelte
Normal file
31
src/routes/toolbox/models/TerraformFlat.svelte
Normal file
|
@ -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>
|
37
src/routes/toolbox/models/Warp.svelte
Normal file
37
src/routes/toolbox/models/Warp.svelte
Normal file
|
@ -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/warp.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/warp-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.Warp.geometry}
|
||||
material={gltf.materials.SVGMat}
|
||||
rotation={[Math.PI / 2, 0, 0.3]}
|
||||
/>
|
||||
<T.Mesh
|
||||
geometry={gltf.nodes.Warp001.geometry}
|
||||
material={gltf.materials.Gradient}
|
||||
rotation={[Math.PI / 2, 0, 0.3]}
|
||||
/>
|
||||
{:catch error}
|
||||
<slot name="error" {error} />
|
||||
{/await}
|
||||
|
||||
<slot {ref} />
|
||||
</T>
|
Loading…
Add table
Add a link
Reference in a new issue