立体の星座

import { constellationIn3D } from "@johnmorrisdotca/hoshi-stars/constellation-3d";

// Orion in space: every star of the figure with the range its parallax error allows. A star with no parallax has no distance and no place; it is never given a guess.
const orion = constellationIn3D("Ori");
for (const { star, lightYears, range, quality } of orion.stars) {
  const far = range === undefined ? "" : Number.isFinite(range[1]) ? `, between ${Math.round(range[0])} and ${Math.round(range[1])}` : `, at least ${Math.round(range[0])}`;
  console.log(`${star.name} (${quality}): ${lightYears === undefined ? "distance unknown" : `${Math.round(lightYears)} ly${far}`}`);
}
console.log(orion.counts);

Betelgeuse (fair): 548 ly, between 480 and 640
Bellatrix (rough): 117 ly, between 76 and 253
Alnitak (rough): 136 ly, between 84 and 366
Mintaka (rough): 336 ly, between 196 and 1165
Alnilam (none): distance unknown
Saiph (rough): 247 ly, at least 116
Rigel (rough): 847 ly, between 593 and 1483
Hatysa (rough): 143 ly, between 83 and 502
{ good: 0, fair: 1, rough: 6, none: 1 }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>The Great Bear from the side</title>
  </head>
  <body>
    <div id="space"></div>
    <script type="module">
      import { starColour } from "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/hoshi-stars/dist/index.js";
      import { constellationIn3D } from "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/hoshi-stars/dist/constellation-3d.js";

      // The Earth on the left, distance to the right (light-years), the sky sideways. A bar is the range the parallax error allows.
      const figure = constellationIn3D("UMa");
      const { centre, up } = figure.frame;
      const side = [centre[1] * up[2] - centre[2] * up[1], centre[2] * up[0] - centre[0] * up[2], centre[0] * up[1] - centre[1] * up[0]];
      const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
      const placed = figure.stars.filter((star) => star.position);
      const reach = Math.max(...placed.map((star) => dot(star.farPosition ?? star.position, centre)));
      const k = 360 / reach;
      const x = (p) => 20 + dot(p, centre) * k;
      const y = (p) => 100 - dot(p, side) * k;

      let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200" role="img" aria-label="The Great Bear from the side"><rect width="400" height="200" fill="#0b1020"/>`;
      for (const [a, b] of figure.segments) {
        const from = figure.stars[a].position;
        const to = figure.stars[b].position;
        if (from && to) svg += `<line x1="${x(from)}" y1="${y(from)}" x2="${x(to)}" y2="${y(to)}" stroke="#6f93e0"/>`;
      }
      for (const star of placed) {
        if (star.nearPosition && star.farPosition) svg += `<line x1="${x(star.nearPosition)}" y1="${y(star.nearPosition)}" x2="${x(star.farPosition)}" y2="${y(star.farPosition)}" stroke="${starColour(star.star)}" stroke-opacity=".6"/>`;
        svg += `<circle cx="${x(star.position)}" cy="${y(star.position)}" r="${Math.max(1.5, 4.5 - star.star.magnitude)}" fill="${starColour(star.star)}"/>`;
      }
      document.querySelector("#space").innerHTML = svg + "</svg>";
    </script>
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hoshi Stars in 3D in an iframe</title>
  </head>
  <body>
    <iframe
      src="https://johnmorrisdotca.github.io/hoshi-stars/embed-3d.html?c=UMa&yaw=-90"
      title="The Great Bear in 3D, turned to the side"
      width="480"
      height="360"
      loading="lazy"
      style="border: 0"
    ></iframe>
  </body>
</html>