84 lines
2.0 KiB
Svelte
84 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import localStore from '$lib/helpers/localStore';
|
|
import { T, useTask } from '@threlte/core';
|
|
import { OrbitControls } from '@threlte/extras';
|
|
import { onMount } from 'svelte';
|
|
import { Vector3 } from 'three';
|
|
import type { PerspectiveCamera, Vector3Tuple } from 'three';
|
|
import type { OrbitControls as OrbitControlsType } from 'three/examples/jsm/controls/OrbitControls.js';
|
|
|
|
let camera = $state<PerspectiveCamera>();
|
|
let controls = $state<OrbitControlsType>();
|
|
|
|
type Props = {
|
|
center: Vector3;
|
|
centerCamera: boolean;
|
|
};
|
|
|
|
const { center, centerCamera }: Props = $props();
|
|
|
|
const cameraTransform = localStore<{
|
|
camera: Vector3Tuple;
|
|
target: Vector3Tuple;
|
|
}>('nodes.camera.transform', {
|
|
camera: [10, 10, 10],
|
|
target: [0, 0, 0]
|
|
});
|
|
|
|
function saveCameraState() {
|
|
if (!camera || !controls) return;
|
|
let cPos = camera.position.toArray();
|
|
let tPos = controls.target.toArray();
|
|
// check if tPos is NaN or tPos is NaN
|
|
if (tPos.some((v) => isNaN(v)) || cPos.some((v) => isNaN(v))) return;
|
|
$cameraTransform = {
|
|
camera: cPos,
|
|
target: tPos
|
|
};
|
|
}
|
|
|
|
let isRunning = false;
|
|
const task = useTask(() => {
|
|
if (!controls) return;
|
|
let length = center.clone().sub(controls.target).length();
|
|
if (length < 0.01 || !centerCamera) {
|
|
isRunning = false;
|
|
task.stop();
|
|
return;
|
|
}
|
|
|
|
controls.target.lerp(center, 0.02);
|
|
controls.update();
|
|
});
|
|
task.stop();
|
|
|
|
$effect(() => {
|
|
if (
|
|
center
|
|
&& controls
|
|
&& centerCamera
|
|
&& (center.x !== controls.target.x
|
|
|| center.y !== controls.target.y
|
|
|| center.z !== controls.target.z)
|
|
&& !isRunning
|
|
) {
|
|
isRunning = true;
|
|
task.start();
|
|
}
|
|
});
|
|
|
|
onMount(() => {
|
|
controls?.target.fromArray($cameraTransform.target);
|
|
controls?.update();
|
|
});
|
|
</script>
|
|
|
|
<T.PerspectiveCamera
|
|
bind:ref={camera}
|
|
position={$cameraTransform.camera}
|
|
makeDefault
|
|
fov={50}
|
|
>
|
|
<OrbitControls bind:ref={controls} on:change={saveCameraState} />
|
|
</T.PerspectiveCamera>
|