2024-03-20 01:40:42 +01:00
|
|
|
<script context="module">
|
|
|
|
const color = new Color(0x202020);
|
|
|
|
color.convertLinearToSRGB();
|
|
|
|
|
|
|
|
const color2 = color.clone();
|
|
|
|
color2.convertSRGBToLinear();
|
|
|
|
|
|
|
|
const circleMaterial = new MeshBasicMaterial({
|
|
|
|
color,
|
|
|
|
toneMapped: false,
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
2024-03-06 14:01:07 +01:00
|
|
|
<script lang="ts">
|
2024-03-20 01:40:42 +01:00
|
|
|
import { T } from "@threlte/core";
|
2024-03-06 14:01:07 +01:00
|
|
|
import { MeshLineGeometry, MeshLineMaterial } from "@threlte/extras";
|
2024-03-20 01:40:42 +01:00
|
|
|
import { MeshBasicMaterial, type Mesh, LineBasicMaterial } from "three";
|
|
|
|
import { Color } from "three/src/math/Color.js";
|
2024-03-19 16:41:15 +01:00
|
|
|
import { CubicBezierCurve } from "three/src/extras/curves/CubicBezierCurve.js";
|
|
|
|
import { Vector3 } from "three/src/math/Vector3.js";
|
|
|
|
import { Vector2 } from "three/src/math/Vector2.js";
|
2024-03-20 01:40:42 +01:00
|
|
|
import { LineMaterial } from "three/examples/jsm/Addons.js";
|
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
|
|
|
|
2024-03-19 16:41:15 +01:00
|
|
|
const samples = Math.max(
|
|
|
|
5,
|
|
|
|
Math.floor(
|
|
|
|
Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)) / 2,
|
|
|
|
),
|
|
|
|
);
|
|
|
|
|
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-19 16:41:15 +01:00
|
|
|
const color = new Color(32 / 255, 32 / 255, 32 / 255);
|
2024-03-14 16:28:38 +01:00
|
|
|
|
2024-03-13 14:30:30 +01:00
|
|
|
export const update = function (force = false) {
|
2024-03-06 14:01:07 +01:00
|
|
|
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),
|
|
|
|
// );
|
|
|
|
//
|
|
|
|
|
|
|
|
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-13 14:30:30 +01:00
|
|
|
};
|
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}
|
2024-03-20 01:40:42 +01:00
|
|
|
material={circleMaterial}
|
2024-03-06 19:44:37 +01:00
|
|
|
>
|
2024-03-14 16:28:38 +01:00
|
|
|
<T.CircleGeometry args={[0.3, 16]} />
|
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}
|
2024-03-20 01:40:42 +01:00
|
|
|
material={circleMaterial}
|
2024-03-06 19:44:37 +01:00
|
|
|
>
|
2024-03-14 16:28:38 +01:00
|
|
|
<T.CircleGeometry args={[0.3, 16]} />
|
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-20 01:40:42 +01:00
|
|
|
<MeshLineMaterial
|
|
|
|
width={4}
|
|
|
|
attenuate={false}
|
|
|
|
color={color2}
|
|
|
|
toneMapped={false}
|
|
|
|
/>
|
2024-03-06 14:01:07 +01:00
|
|
|
</T.Mesh>
|