62 lines
1.7 KiB
Svelte
62 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { theme } from "$lib/stores/theme_store";
|
|
import { T, useTask, useThrelte } from "@threlte/core";
|
|
import { onMount } from "svelte";
|
|
import { tweened } from "svelte/motion";
|
|
import * as THREE from "three";
|
|
import Earth from "./earth.svelte";
|
|
|
|
let rotation = 0;
|
|
useTask((delta) => {
|
|
rotation += delta / 4;
|
|
});
|
|
|
|
const { toneMapping } = useThrelte();
|
|
toneMapping.set(THREE.NoToneMapping);
|
|
|
|
const ambientIntensitiy = tweened($theme == "light" ? 3 : 0, {
|
|
duration: 500,
|
|
});
|
|
|
|
$: ambientColor = $theme == "light" ? "#ffffff" : "#4c7fe6";
|
|
$: ambientIntensitiy.set($theme == "light" ? 3 : 0.1);
|
|
|
|
let starsGeometry!: THREE.BufferGeometry;
|
|
let starsMaterial!: THREE.PointsMaterial;
|
|
onMount(() => {
|
|
const stars = new Array(0);
|
|
for (var i = 0; i < 500; i++) {
|
|
let x = THREE.MathUtils.randFloatSpread(500);
|
|
let y = THREE.MathUtils.randFloatSpread(500);
|
|
let z = THREE.MathUtils.randFloatSpread(500);
|
|
stars.push(x, y, z);
|
|
}
|
|
starsGeometry = new THREE.BufferGeometry();
|
|
starsGeometry.setAttribute(
|
|
"position",
|
|
new THREE.Float32BufferAttribute(stars, 3),
|
|
);
|
|
starsMaterial = new THREE.PointsMaterial({ color: 0xffffff });
|
|
});
|
|
</script>
|
|
|
|
<T.PerspectiveCamera
|
|
makeDefault
|
|
position={[5, 2, 0]}
|
|
on:create={({ ref }) => {
|
|
ref.lookAt(0, 0, -0.5);
|
|
}}
|
|
/>
|
|
|
|
{#if starsGeometry && starsMaterial}
|
|
<T.Points geometry={starsGeometry} material={starsMaterial}></T.Points>
|
|
{/if}
|
|
|
|
<Earth {rotation}></Earth>
|
|
|
|
<T.HemisphereLight
|
|
skyColor={ambientColor}
|
|
groundColor="#242734"
|
|
intensity={$ambientIntensitiy}
|
|
/>
|