mirror of
https://github.com/bartvdbraak/hellob.art.git
synced 2025-04-26 17:11:21 +00:00
feat: add more 3d objects and add contrast
This commit is contained in:
parent
49e6393338
commit
8c5bbe2e77
14 changed files with 191 additions and 38 deletions
|
|
@ -1 +1,8 @@
|
|||
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
|
||||
<svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient14"><stop stop-color="#2c2e31" offset="0"/><stop stop-color="#292b2f" offset="1"/></linearGradient><linearGradient id="linearGradient9" x1="10.738435" x2="500.10428" y1="-246.21698" y2="-246.21698" gradientUnits="userSpaceOnUse"><stop stop-color="#fdfdfd" stop-opacity=".99215686" offset="0"/><stop stop-color="#e7e4e4" stop-opacity=".99607843" offset="1"/></linearGradient><linearGradient id="linearGradient13" x1="253.45818" x2="253.45818" y1="2.6848919" y2="507.23813" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient14"/></defs>
|
||||
<style type="text/css">
|
||||
.st0{fill:#161614;}
|
||||
</style>
|
||||
|
||||
<circle transform="rotate(90)" cx="256" cy="-256" r="243" fill="url(#linearGradient9)" stroke-width=".864926"/><g transform="matrix(.85292969 0 0 .85351563 37.649999 31.170852)" fill="url(#linearGradient13)" style="mix-blend-mode:normal">
|
||||
<path class="st0" d="m256 6.3c-141.4 0-256 114.6-256 256 0 113.1 73.4 209.1 175.1 242.9 12.8 2.4 17.5-5.6 17.5-12.3 0-6.1-0.2-26.3-0.3-47.7-71.3 15.6-86.3-30.1-86.3-30.1-11.6-29.6-28.4-37.5-28.4-37.5-23.2-15.9 1.8-15.6 1.8-15.6 25.7 1.8 39.2 26.4 39.2 26.4 22.8 39.1 59.9 27.8 74.5 21.3 2.3-16.5 8.9-27.8 16.3-34.2-57-6.5-116.8-28.5-116.8-126.5 0-28 10-50.8 26.4-68.7-2.7-6.4-11.4-32.5 2.5-67.7 0 0 21.5-6.9 70.4 26.2 20.4-5.7 42.3-8.5 64.1-8.6 21.8 0.1 43.7 2.9 64.1 8.6 48.9-33.1 70.3-26.2 70.3-26.2 13.9 35.3 5.2 61.3 2.5 67.7 16.4 17.9 26.3 40.8 26.3 68.7 0 98.3-59.9 120-116.9 126.3 9.2 7.9 17.4 23.5 17.4 47.4 0 34.3-0.3 61.8-0.3 70.3 0 6.8 4.6 14.8 17.6 12.3 101.7-34 175-129.9 175-243 0-141.4-114.6-256-256-256zm-160.1 364.7c-0.6 1.3-2.6 1.7-4.4 0.8-1.9-0.8-2.9-2.6-2.3-3.8 0.6-1.3 2.6-1.7 4.4-0.8 1.9 0.8 2.9 2.5 2.3 3.8zm12.6 11.2c-1.2 1.1-3.6 0.6-5.2-1.2-1.7-1.8-2-4.2-0.8-5.3 1.3-1.1 3.6-0.6 5.3 1.2 1.6 1.8 2 4.2 0.7 5.3zm8.6 14.4c-1.6 1.1-4.1 0.1-5.7-2.2s-1.6-5 0-6.1 4.1-0.1 5.7 2.1c1.6 2.4 1.6 5.1 0 6.2zm14.6 16.7c-1.4 1.5-4.4 1.1-6.6-1s-2.9-5-1.5-6.5c1.4-1.6 4.4-1.1 6.6 1 2.3 2 3 4.9 1.5 6.5zm18.9 5.6c-0.6 2-3.5 2.9-6.4 2.1-2.9-0.9-4.8-3.2-4.2-5.3 0.6-2 3.5-3 6.4-2.1s4.8 3.2 4.2 5.3zm21.5 2.4c0.1 2.1-2.4 3.9-5.4 3.9-3.1 0.1-5.5-1.6-5.6-3.7 0-2.1 2.4-3.9 5.5-3.9 3-0.1 5.5 1.6 5.5 3.7zm21.1-0.8c0.4 2.1-1.8 4.2-4.8 4.7s-5.7-0.7-6.1-2.8 1.8-4.2 4.8-4.8c3-0.5 5.7 0.8 6.1 2.9z" fill="url(#linearGradient13)"/>
|
||||
</g></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 960 B After Width: | Height: | Size: 2.4 KiB |
|
|
@ -1,12 +1,13 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 568 200" style="enable-background:new 0 0 568 200;" xml:space="preserve">
|
||||
<svg version="1.1" id="a" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 568 200" style="enable-background:new 0 0 568 200;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#333333;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;}
|
||||
.st0{fill:#555;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#555;}
|
||||
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;stroke:#333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#555;stroke:#555;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
|
||||
.st3{fill:#F4DD4B;}
|
||||
.st4{fill-rule:evenodd;clip-rule:evenodd;}
|
||||
</style>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,6 +1,9 @@
|
|||
<svg width="510" height="218" viewBox="0 0 510 218" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M320.42 144.755C328.799 155.015 344.36 163.052 365.393 163.052C392.753 163.052 410.366 149.201 410.366 129.536C410.366 112.436 395.318 103.373 383.69 102.176C396.344 99.953 408.656 90.548 408.656 76.184C408.656 57.203 392.24 45.233 365.564 45.233C345.557 45.233 331.193 52.928 321.959 63.359L333.929 78.407C341.966 70.712 351.884 66.437 362.999 66.437C374.969 66.437 384.203 71.054 384.203 80.117C384.203 88.667 375.824 92.771 363.17 92.771C358.724 92.771 351.029 92.771 348.977 92.6V113.804C350.687 113.633 358.382 113.633 363.17 113.633C379.073 113.633 386.084 117.908 386.084 127.142C386.084 135.863 378.389 141.848 364.538 141.848C353.423 141.848 340.94 137.06 333.074 128.852L320.42 144.755Z" fill="#103B41"/>
|
||||
<path d="M447.514 161H471.967V68.318H505.141V46.943H414.169V68.318H447.514V161Z" fill="#103B41"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M285.841 90.901C283.667 87.8765 281.557 84.7813 279.921 81.3975C278.466 78.3878 277.389 75.1738 276.312 71.9594C274.997 68.0353 273.681 64.1104 271.678 60.5555C245.324 13.7932 198.299 -0.636655 152.857 0.0213467C111.169 0.624085 42.4664 24.575 11.5026 97.0003C9.51767 101.749 7.77495 106.611 6.30572 111.561C4.03706 119.196 2.36421 127.061 1.26409 135.018L1.21894 135.011C-3.8586 185.365 7.52161 211.547 24.3173 216.839C35.5584 220.381 45.4628 215.567 57.09 205.794C69.8718 195.05 74.8852 186.945 73.4694 175.79C72.0062 164.258 59.5603 155.869 48.2929 152.888C31.9926 148.178 38.5786 137.718 38.5786 137.718C38.5786 137.718 56.1258 150.304 84.4616 147.089C110.312 144.156 115.235 138.755 115.235 138.755C115.235 112.102 129.576 93.491 148.284 91.6724C135.277 97.8151 127.738 118.98 127.738 136.144V181.574H134.205C153.162 181.574 169.35 162.499 169.35 140.959V132.039C169.35 132.039 183.547 124.332 203.685 122.046C213.036 120.985 220.389 121.914 226.742 123.757C223.131 119.256 220.811 113.951 220.619 107.715C220.534 104.94 225.119 103.715 226.119 107.715C229.588 123.415 238.406 130.36 260.131 137.071C264.546 137.984 269.437 138.305 275.151 137.656C285.147 136.27 295.131 130.725 296.745 118.98C298.257 107.981 292.79 100.464 287.198 92.7736C286.745 92.1512 286.292 91.5276 285.841 90.901ZM177.579 136.378C180.127 161.91 165.619 172.715 165.619 172.715C185.842 171.471 208.739 152.947 207.618 129.198C207.618 129.198 198.654 127.906 177.579 136.378ZM253.619 95.7151C258.314 95.7151 262.119 91.6856 262.119 86.7151C262.119 81.7445 258.314 77.7151 253.619 77.7151C248.925 77.7151 245.119 81.7445 245.119 86.7151C245.119 91.6856 248.925 95.7151 253.619 95.7151Z" fill="white"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M285.802 91.1661C283.624 88.1359 281.508 85.0351 279.867 81.646C278.407 78.6318 277.325 75.4136 276.243 72.1948C274.922 68.2656 273.601 64.3356 271.592 60.7748C245.162 13.9353 198.107 -0.575021 152.656 0.0172949C110.96 0.559773 42.2783 24.4304 11.4153 96.8706C9.43694 101.62 7.70106 106.483 6.23885 111.436C3.98101 119.074 2.31947 126.943 1.2309 134.905L1.18573 134.898C-3.8183 185.286 7.60308 211.507 24.4101 216.828C35.6589 220.389 45.5582 215.585 57.1734 205.821C69.942 195.087 74.9444 186.982 73.5118 175.816C72.0312 164.272 59.5703 155.858 48.296 152.858C31.9854 148.12 38.5573 137.662 38.5573 137.662C38.5573 137.662 56.1268 150.284 84.4638 147.107C110.315 144.209 115.232 138.811 115.232 138.811C115.192 112.136 129.508 93.5305 148.218 91.7376C135.217 97.8664 127.708 119.038 127.733 136.216L127.801 181.684L134.269 181.693C153.23 181.721 169.393 162.654 169.361 141.096L169.348 132.168C169.348 132.168 183.536 124.475 203.675 122.218C213.207 121.149 220.666 122.146 227.106 124.072C223.36 119.51 220.939 114.115 220.733 107.756C220.644 104.982 225.231 103.765 226.238 107.764C229.827 123.884 239.048 130.784 262.107 137.698C266.008 138.332 270.293 138.493 275.179 137.945C285.175 136.571 295.153 131.037 296.75 119.285C298.246 108.278 292.767 100.747 287.162 93.0422C286.708 92.4186 286.254 91.7939 285.802 91.1661ZM177.698 136.341C180.286 161.865 165.782 172.643 165.782 172.643C186.021 171.429 208.91 152.948 207.753 129.209C207.753 129.209 198.779 127.905 177.698 136.341ZM252.737 91.8107C256.33 91.8159 259.238 88.6877 259.232 84.8237C259.226 80.9596 256.309 77.8229 252.716 77.8177C249.123 77.8125 246.215 80.9407 246.221 84.8047C246.227 88.6688 249.144 91.8055 252.737 91.8107Z" fill="#17AF66"/>
|
||||
<path
|
||||
d="M320.42 144.755C328.799 155.015 344.36 163.052 365.393 163.052C392.753 163.052 410.366 149.201 410.366 129.536C410.366 112.436 395.318 103.373 383.69 102.176C396.344 99.953 408.656 90.548 408.656 76.184C408.656 57.203 392.24 45.233 365.564 45.233C345.557 45.233 331.193 52.928 321.959 63.359L333.929 78.407C341.966 70.712 351.884 66.437 362.999 66.437C374.969 66.437 384.203 71.054 384.203 80.117C384.203 88.667 375.824 92.771 363.17 92.771C358.724 92.771 351.029 92.771 348.977 92.6V113.804C350.687 113.633 358.382 113.633 363.17 113.633C379.073 113.633 386.084 117.908 386.084 127.142C386.084 135.863 378.389 141.848 364.538 141.848C353.423 141.848 340.94 137.06 333.074 128.852L320.42 144.755Z"
|
||||
fill="#17AF66" />
|
||||
<path d="M447.514 161H471.967V68.318H505.141V46.943H414.169V68.318H447.514V161Z" fill="#17AF66" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M285.802 91.1661C283.624 88.1359 281.508 85.0351 279.867 81.646C278.407 78.6318 277.325 75.4136 276.243 72.1948C274.922 68.2656 273.601 64.3356 271.592 60.7748C245.162 13.9353 198.107 -0.575021 152.656 0.0172949C110.96 0.559773 42.2783 24.4304 11.4153 96.8706C9.43694 101.62 7.70106 106.483 6.23885 111.436C3.98101 119.074 2.31947 126.943 1.2309 134.905L1.18573 134.898C-3.8183 185.286 7.60308 211.507 24.4101 216.828C35.6589 220.389 45.5582 215.585 57.1734 205.821C69.942 195.087 74.9444 186.982 73.5118 175.816C72.0312 164.272 59.5703 155.858 48.296 152.858C31.9854 148.12 38.5573 137.662 38.5573 137.662C38.5573 137.662 56.1268 150.284 84.4638 147.107C110.315 144.209 115.232 138.811 115.232 138.811C115.192 112.136 129.508 93.5305 148.218 91.7376C135.217 97.8664 127.708 119.038 127.733 136.216L127.801 181.684L134.269 181.693C153.23 181.721 169.393 162.654 169.361 141.096L169.348 132.168C169.348 132.168 183.536 124.475 203.675 122.218C213.207 121.149 220.666 122.146 227.106 124.072C223.36 119.51 220.939 114.115 220.733 107.756C220.644 104.982 225.231 103.765 226.238 107.764C229.827 123.884 239.048 130.784 262.107 137.698C266.008 138.332 270.293 138.493 275.179 137.945C285.175 136.571 295.153 131.037 296.75 119.285C298.246 108.278 292.767 100.747 287.162 93.0422C286.708 92.4186 286.254 91.7939 285.802 91.1661ZM177.698 136.341C180.286 161.865 165.782 172.643 165.782 172.643C186.021 171.429 208.91 152.948 207.753 129.209C207.753 129.209 198.779 127.905 177.698 136.341ZM252.737 91.8107C256.33 91.8159 259.238 88.6877 259.232 84.8237C259.226 80.9596 256.309 77.8229 252.716 77.8177C249.123 77.8125 246.215 80.9407 246.221 84.8047C246.227 88.6688 249.144 91.8055 252.737 91.8107Z"
|
||||
fill="#17AF66" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 2.6 KiB |
|
|
@ -1,7 +1,8 @@
|
|||
<script lang="ts">
|
||||
import { Canvas } from '@threlte/core';
|
||||
import Scene from './Scene.svelte';
|
||||
import Scene from '../toolbox/Scene.svelte';
|
||||
import { Theatre } from '@threlte/theatre';
|
||||
import { T } from '@threlte/core';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -12,6 +13,8 @@
|
|||
<Canvas>
|
||||
<Theatre>
|
||||
<Scene />
|
||||
<T.AxesHelper />
|
||||
<T.GridHelper />
|
||||
</Theatre>
|
||||
</Canvas>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
<script>
|
||||
import { T } from '@threlte/core';
|
||||
import { T, useFrame } from '@threlte/core';
|
||||
import { OrbitControls } from '@threlte/extras';
|
||||
import { SheetObject } from '@threlte/theatre';
|
||||
import Kubernetes from '../toolbox/models/Kubernetes.svelte';
|
||||
import Warp from '../toolbox/models/Warp.svelte';
|
||||
|
||||
let githubRotation = 0;
|
||||
useFrame((state, delta) => {
|
||||
githubRotation += 0.1 * delta;
|
||||
});
|
||||
</script>
|
||||
|
||||
<T.PerspectiveCamera position={[0, 5, 10]} makeDefault>
|
||||
<OrbitControls target.y={1.5} />
|
||||
</T.PerspectiveCamera>
|
||||
<T.DirectionalLight intensity={0.5} position.x={2} position.y={3} />
|
||||
<T.AmbientLight intensity={0.9} />
|
||||
|
||||
<Warp rotation.y={githubRotation} />
|
||||
|
||||
<T.AxesHelper></T.AxesHelper>
|
||||
|
||||
<SheetObject key="Kubernetes" let:Transform>
|
||||
<Transform>
|
||||
<Kubernetes scale={1}></Kubernetes>
|
||||
</Transform>
|
||||
</SheetObject>
|
||||
<T.GridHelper></T.GridHelper>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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> -->
|
||||
|
|
|
|||
46
src/routes/toolbox/models/GithubFluid.svelte
Normal file
46
src/routes/toolbox/models/GithubFluid.svelte
Normal file
|
|
@ -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]} -->
|
||||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
Binary file not shown.
BIN
static/models/github-fluid-transformed.glb
Normal file
BIN
static/models/github-fluid-transformed.glb
Normal file
Binary file not shown.
BIN
static/models/github-fluid.glb
Normal file
BIN
static/models/github-fluid.glb
Normal file
Binary file not shown.
Binary file not shown.
Loading…
Reference in a new issue