feat: revamped toolbox page

This commit is contained in:
Bart van der Braak 2023-08-07 20:30:20 +02:00
parent f032e4b935
commit e2b5f1078b
10 changed files with 657 additions and 108 deletions

View 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>

View 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>

View 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>

View 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>