85 lines
2.0 KiB
Svelte
Raw Normal View History

2024-03-06 14:01:07 +01:00
<script lang="ts">
2024-03-11 19:37:58 +01:00
import { T, extend } from "@threlte/core";
2024-03-06 14:01:07 +01:00
import { MeshLineGeometry, MeshLineMaterial } from "@threlte/extras";
2024-03-11 19:37:58 +01:00
import { CubicBezierCurve, Mesh, Vector2, Vector3 } from "three";
2024-03-06 14:01:07 +01:00
2024-03-11 19:37:58 +01:00
extend({ MeshLineGeometry, MeshLineMaterial });
2024-03-06 14:01:07 +01:00
2024-03-11 19:37:58 +01:00
export let from: { x: number; y: number };
export let to: { x: number; y: number };
2024-03-06 14:01:07 +01:00
const curve = new CubicBezierCurve(
2024-03-11 19:37:58 +01:00
new Vector2(from.x, from.y),
new Vector2(from.x + 2, from.y),
new Vector2(to.x - 2, to.y),
new Vector2(to.x, to.y),
2024-03-06 14:01:07 +01:00
);
let points: Vector3[] = [];
let last_from_x = 0;
let last_from_y = 0;
2024-03-11 19:37:58 +01:00
let mesh: Mesh;
2024-03-06 14:01:07 +01:00
function update(force = false) {
if (!force) {
2024-03-11 19:37:58 +01:00
const new_x = from.x + to.x;
const new_y = from.y + to.y;
2024-03-06 14:01:07 +01:00
if (last_from_x === new_x && last_from_y === new_y) {
return;
}
last_from_x = new_x;
last_from_y = new_y;
}
2024-03-11 19:37:58 +01:00
const mid = new Vector2((from.x + to.x) / 2, (from.y + to.y) / 2);
// const length = Math.sqrt(
// Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2),
// );
//
// let samples = Math.max(5, Math.floor(length));
// console.log(samples);
const samples = 12;
curve.v0.set(from.x, from.y);
curve.v1.set(mid.x, from.y);
curve.v2.set(mid.x, to.y);
curve.v3.set(to.x, to.y);
2024-03-06 14:01:07 +01:00
points = curve.getPoints(samples).map((p) => new Vector3(p.x, 0, p.y));
2024-03-11 19:37:58 +01:00
// mesh.setGeometry(points);
// mesh.needsUpdate = true;
2024-03-06 14:01:07 +01:00
}
update();
2024-03-11 19:37:58 +01:00
$: if (from || to) {
2024-03-06 14:01:07 +01:00
update();
}
</script>
2024-03-06 19:44:37 +01:00
<T.Mesh
2024-03-11 19:37:58 +01:00
position.x={from.x}
position.z={from.y}
2024-03-06 19:44:37 +01:00
position.y={0.8}
rotation.x={-Math.PI / 2}
>
<T.CircleGeometry args={[0.1, 32]} />
2024-03-06 20:03:12 +01:00
<T.MeshBasicMaterial color={0x555555} />
2024-03-06 19:44:37 +01:00
</T.Mesh>
<T.Mesh
2024-03-11 19:37:58 +01:00
position.x={to.x}
position.z={to.y}
2024-03-06 19:44:37 +01:00
position.y={0.8}
rotation.x={-Math.PI / 2}
>
<T.CircleGeometry args={[0.1, 32]} />
2024-03-06 20:03:12 +01:00
<T.MeshBasicMaterial color={0x555555} />
2024-03-06 19:44:37 +01:00
</T.Mesh>
2024-03-11 19:37:58 +01:00
<T.Mesh position.y={0.5} bind:ref={mesh}>
2024-03-06 14:01:07 +01:00
<MeshLineGeometry {points} />
2024-03-11 19:37:58 +01:00
<MeshLineMaterial width={2} attenuate={false} color={0x555555} />
2024-03-06 14:01:07 +01:00
</T.Mesh>