本文へ移動

Wakusei Planets惑星

太陽・惑星・衛星を、線画、陰影つきの絵、表面の地図で描きます。実際の大きさ・傾き・自転つきで、任意の日時の衛星の位置も分かります。

「惑星」(わくせい) は、太陽のまわりを回る大きな星のことです。 名前について（英語）

目次

はじめに

はじめに

ページに惑星を1つ置いて、傾けたり回したりできるようにします。5分ほどです。

このガイドでは、土星をページに置いて、読む人が回す・傾ける・拡大できるようにします。必要なのはテキストエディターとブラウザーだけです。インストールは要りません。ページがCDNからパッケージを読み込みます。

ドキュメントサイト：検索欄、エントリーポイント、分類されたガイド、例つきのすべてのエクスポート。

1. 惑星のあるページ

saturn.html という名前で保存して開いてください。<wakusei-body> が天体で、その上のスクリプトがこのタグを動かします。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Wakusei Planets from jsDelivr</title>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets/element/+esm"></script>
  </head>
  <body>
    <wakusei-body body="saturn" look="line" size="320"></wakusei-body>
  </body>
</html>

body は天体の名前です (sun、mercury、venus、earth、mars、jupiter、saturn、uranus、neptune、pluto、準惑星の ceres、orcus、haumea、quaoar、makemake、gonggong、eris、sedna、moon、そして各惑星の衛星)。look="line" は輪郭だけの線画で、SVGなので、ほかには何も要りません。円盤は土星の自転軸の傾き (26.73度) のとおりに傾き、輪は北極の上から見たように開いています。size は幅 (ピクセル) です。

2. 読む人が回せるようにする

タグは、そのままで回したり拡大したりできます。ドラッグで回り、ピンチや Ctrl とホイールで拡大します (ふつうのホイールは、ページをスクロールします)。フォーカスすると、矢印と +、- も使えます。範囲と、その理由は ズームと移動 にあります。ボタン、スライダー、アドレスに残す機能がほしいときは、共通の kazoku-ui の操作部品をタグの横に足して、for でタグを指定し、その知らせを天体に渡すリスナーを1つ書きます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Wakusei Planets with the shared controls</title>
    <script type="module">
      import "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/kazoku-ui/view-controls/define/+esm";
      import "https://cdn.jsdelivr.net/npm/@johnmorrisdotca/wakusei-planets/element/+esm";

      const body = document.querySelector("wakusei-body");
      document.querySelector("kazoku-view-controls").addEventListener("kazoku-viewchange", (event) => {
        body.setView(event.detail);
      });
    </script>
  </head>
  <body>
    <wakusei-body id="planet" body="saturn" look="line" size="420" tabindex="0"></wakusei-body>
    <kazoku-view-controls for="planet" address controls="advanced" speed="0"></kazoku-view-controls>
  </body>
</html>

setView(view) は操作部品のカメラを受け取ります。yaw は天体を自分の極のまわりに回し、tilt は極を手前や奥に傾け、roll は絵を視線のまわりに時計回りに回し、zoom は拡大・縮小し、panX と panY は絵を中央から CSS ピクセルの分だけ動かします。線画はすぐに描き直され、陰影つきの絵は共通のレンダラーが、動いている間だけ、1秒に30回までで描き直します。バーがあるあいだは、バーがタグの手を引き継ぎ、タグのズームの範囲 (zoom-min と zoom-max) を読みます。ポインターの下の表面はポインターについてくるので、ドラッグすると手の向きに地面が動きます。触れた点をポインターの下に留めるには、円盤の半径 (ピクセル) をバーに渡します: controls.setAttribute("grab-radius", String(Math.round(body.discRadius))) (discRadius は画面上の天体の円盤の半径で、要素の大きさや scale-to で変わります)。バーがないときは、タグが自分でやります。

3. 次に

ソースを見るGitHub で編集@johnmorrisdotca/wakusei-planets 0.24.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。