fix planet rotation speed · flo-bit.dev/flo-bit.github.io@125e253

+16 -16

package-lock.json

··· 5 5 "requires": true, 6 6 "packages": { 7 7 "": { 8 - "name": "portfolio", 8 + "name": "flobitportfolio", 9 9 "version": "0.0.1", 10 10 "dependencies": { 11 11 "@melt-ui/pp": "^0.3.0", ··· 1535 1535 } 1536 1536 }, 1537 1537 "node_modules/@threlte/extras": { 1538 - "version": "8.1.1", 1539 - "resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-8.1.1.tgz", 1540 - "integrity": "sha512-F6KbEwSCIl06qxuZtqcWakipIek85bnl3gFImO+dsTpTaXpd2fJorEoreDfO8rjXQERoSbXAJpYE9SwmaLnLhQ==", 1538 + "version": "8.4.0", 1539 + "resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-8.4.0.tgz", 1540 + "integrity": "sha512-JlvJUAdG9UsqPhJpk6aMF1XtSdWwRyPjhpsXsqrX6SVfge58n1KLnllbuw1hEYzrMJJC1CHZUrilbh08zDokYw==", 1541 1541 "dev": true, 1542 1542 "dependencies": { 1543 - "troika-three-text": "^0.47.2" 1543 + "troika-three-text": "^0.49.0" 1544 1544 }, 1545 1545 "peerDependencies": { 1546 1546 "svelte": ">=4", ··· 4652 4652 } 4653 4653 }, 4654 4654 "node_modules/troika-three-text": { 4655 - "version": "0.47.2", 4656 - "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.47.2.tgz", 4657 - "integrity": "sha512-qylT0F+U7xGs+/PEf3ujBdJMYWbn0Qci0kLqI5BJG2kW1wdg4T1XSxneypnF05DxFqJhEzuaOR9S2SjiyknMng==", 4655 + "version": "0.49.0", 4656 + "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.49.0.tgz", 4657 + "integrity": "sha512-sn9BNC6eIX8OO3iAkPwjecJ7Pn21Ve8P1UNFMNeQzXx759rrqS4i4pSZs7FLMYdWyCKVXBFGimBySFwRKLjq/Q==", 4658 4658 "dev": true, 4659 4659 "dependencies": { 4660 4660 "bidi-js": "^1.0.2", 4661 - "troika-three-utils": "^0.47.2", 4662 - "troika-worker-utils": "^0.47.2", 4661 + "troika-three-utils": "^0.49.0", 4662 + "troika-worker-utils": "^0.49.0", 4663 4663 "webgl-sdf-generator": "1.1.1" 4664 4664 }, 4665 4665 "peerDependencies": { ··· 4667 4667 } 4668 4668 }, 4669 4669 "node_modules/troika-three-utils": { 4670 - "version": "0.47.2", 4671 - "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.47.2.tgz", 4672 - "integrity": "sha512-/28plhCxfKtH7MSxEGx8e3b/OXU5A0xlwl+Sbdp0H8FXUHKZDoksduEKmjQayXYtxAyuUiCRunYIv/8Vi7aiyg==", 4670 + "version": "0.49.0", 4671 + "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.49.0.tgz", 4672 + "integrity": "sha512-umitFL4cT+Fm/uONmaQEq4oZlyRHWwVClaS6ZrdcueRvwc2w+cpNQ47LlJKJswpqtMFWbEhOLy0TekmcPZOdYA==", 4673 4673 "dev": true, 4674 4674 "peerDependencies": { 4675 4675 "three": ">=0.125.0" 4676 4676 } 4677 4677 }, 4678 4678 "node_modules/troika-worker-utils": { 4679 - "version": "0.47.2", 4680 - "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.47.2.tgz", 4681 - "integrity": "sha512-mzss4MeyzUkYBppn4x5cdAqrhBHFEuVmMMgLMTyFV23x6GvQMyo+/R5E5Lsbrt7WSt5RfvewjcwD1DChRTA9lA==", 4679 + "version": "0.49.0", 4680 + "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.49.0.tgz", 4681 + "integrity": "sha512-1xZHoJrG0HFfCvT/iyN41DvI/nRykiBtHqFkGaGgJwq5iXfIZFBiPPEHFpPpgyKM3Oo5ITHXP5wM2TNQszYdVg==", 4682 4682 "dev": true 4683 4683 }, 4684 4684 "node_modules/ts-api-utils": {

+1 -92

src/lib/3D/PlanetModel.svelte

··· 2 2 Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf 3 3 Command: npx @threlte/gltf@2.0.1 static/planet.gltf -t -T 4 4 --> 5 - 6 5 <script lang="ts"> 7 6 import * as THREE from 'three'; 8 7 import { Group } from 'three'; 9 8 import { T, type Props, type Events, type Slots, forwardEventHandlers } from '@threlte/core'; 10 - import { useGltf, useTexture } from '@threlte/extras'; 9 + import { useGltf } from '@threlte/extras'; 11 10 12 11 import FakeGlowMaterial from './FakeGlowMaterial/FakeGlowMaterial.svelte'; 13 12 ··· 28 27 const gltf = useGltf<GLTFResult>('/planet-transformed.glb', { useDraco: true }); 29 28 30 29 const component = forwardEventHandlers(); 31 - 32 - var vertexShader = [ 33 - 'varying vec3 vVertexWorldPosition;', 34 - 'varying vec3 vVertexNormal;', 35 - 36 - 'varying vec4 vFragColor;', 37 - 38 - 'void main(){', 39 - ' vVertexNormal = normalize(normalMatrix * normal);', 40 - ' vVertexWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;', 41 - ' // set gl_Position', 42 - ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);', 43 - '}' 44 - ].join('\n'); 45 - var fragmentShader = [ 46 - 'uniform vec3 glowColor;', 47 - 'uniform float coeficient;', 48 - 'uniform float power;', 49 - 50 - 'varying vec3 vVertexNormal;', 51 - 'varying vec3 vVertexWorldPosition;', 52 - 53 - 'varying vec4 vFragColor;', 54 - 55 - 'void main(){', 56 - ' vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;', 57 - ' vec3 viewCameraToVertex = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;', 58 - ' viewCameraToVertex = normalize(viewCameraToVertex);', 59 - ' float intensity = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);', 60 - ' gl_FragColor = vec4(glowColor, intensity * 0.8);', 61 - '}' 62 - ].join('\n'); 63 - 64 - // create custom material from the shader code above 65 - // that is within specially labeled script tags 66 - var material2 = new THREE.ShaderMaterial({ 67 - uniforms: { 68 - coeficient: { 69 - value: 0.45 70 - }, 71 - power: { 72 - value: 6 73 - }, 74 - glowColor: { 75 - value: new THREE.Color(0xa5f3fc) 76 - } 77 - }, 78 - vertexShader: vertexShader, 79 - fragmentShader: fragmentShader, 80 - transparent: true 81 - }); 82 - 83 - const material = new THREE.MeshStandardMaterial(); 84 - material.onBeforeCompile = (shader) => { 85 - shader.vertexShader = `varying vec3 vPos;\n${shader.vertexShader}`; 86 - shader.vertexShader = shader.vertexShader.replace( 87 - `#include <begin_vertex>`, 88 - `#include <begin_vertex>\nvPos = (modelViewMatrix * vec4(transformed, 1.0)).xyz;` 89 - ); 90 - 91 - shader.fragmentShader = `varying vec3 vPos;\n${shader.fragmentShader}`; 92 - 93 - shader.fragmentShader = shader.fragmentShader.replace( 94 - 'vec4 diffuseColor = vec4( diffuse, opacity );', 95 - `vec3 viewDirection = normalize(-vPos); 96 - float angle = pow(0.8 - abs(dot(viewDirection, vNormal)), 3.0); 97 - vec4 diffuseColor = vec4(diffuse, opacity * angle);` 98 - ); 99 - }; 100 - 101 - // let map = useTexture('/night.jpg', { 102 - // transform: (texture) => { 103 - // //texture.encoding = THREE.LinearEncoding; 104 - // return texture; 105 - // } 106 - // }); 107 30 </script> 108 31 109 32 <T is={ref} dispose={false} {...$$restProps} bind:this={$component}> ··· 134 57 135 58 <slot {ref} /> 136 59 </T> 137 - 138 -

+9 -17

src/lib/3D/Scene.svelte

··· 1 1 <script lang="ts"> 2 2 import { T, useTask, useThrelte } from '@threlte/core'; 3 - import { Color } from 'three'; 4 3 import { interactivity, useCursor } from '@threlte/extras'; 5 - interactivity(); 6 - 7 - const { hovering, onPointerEnter, onPointerLeave } = useCursor() 4 + import { Color } from 'three'; 5 + import { onMount } from 'svelte'; 6 + import { spring } from 'svelte/motion'; 8 7 9 8 import Stars from './Stars.svelte'; 10 - import { onMount } from 'svelte'; 11 9 import PlanetModel from './PlanetModel.svelte'; 12 10 import Nebula from './Nebula.svelte'; 13 11 14 - import { spring } from 'svelte/motion'; 12 + const { onPointerEnter, onPointerLeave } = useCursor() 13 + interactivity(); 15 14 16 15 let rotate = spring( 17 16 0, 18 17 { 19 18 stiffness: 0.1, 20 - damping: 0.1 19 + damping: 0.05 21 20 } 22 21 ); 23 22 let size = spring( 24 23 2, 25 24 { 26 25 stiffness: 0.1, 27 - damping: 0.1 26 + damping: 0.5 28 27 } 29 28 ); 30 29 31 - let rotation = 0; 32 30 let distance = 1; 33 31 34 - let rotationSpeed = 0.5; 32 + let rotationSpeed = 0.2; 35 33 useTask((delta) => { 36 34 // rotation += delta * rotationSpeed; 37 35 ··· 52 50 }); 53 51 54 52 export let pos = 0; 55 - 56 - function debounceScale() { 57 - setTimeout(() => { 58 - size.set(2); 59 - }, 100); 60 - } 61 53 </script> 62 54 63 55 <T.PerspectiveCamera ··· 75 67 76 68 <PlanetModel 77 69 on:click={() => { 78 - rotate.set($rotate + 5); 70 + rotate.set($rotate + 2); 79 71 }} 80 72 on:pointerleave={() => { 81 73 size.set(2)

Configure Feed

Configure Feed