四次元多胞体の三次元投影ビューアは、多胞体の表示内容をいろいろと変更表示できるビューアで、Three.js を用いて作成しています。
Three.jsは、ウェブブラウザ上で3Dコンテンツをリアルタイムにレンダリングできる、Edge，Chrome，Firefox，Safari等のクロスプラットフォームブラウザに対応したJavaScriptライブラリで、プラグイン等のインストールなしで使用できます。
ビューアは、四次元の視方向ベクトルをＵ軸(0,0,0,1)に一致させる回転を行い、三次元に平行投影／中心投影（透視投影）を行った場合の結果を表示します。
三次元での回転の他、四次元の座標を随時反映させた、「四次元モード」の回転ができることが特徴です。
ビューアを作成するにあたり、４次元多胞体のページ，Three.jsのページを参考にさせていただきました。
|
(1) ビューアの起動画面
四次元多胞体のリンクをクリックすると、図－01のような画面が起動します。
中央に三次元投影された多胞体が座標軸とともに表示され、右側には、多胞体の表示内容を変更表示するための「コントロールパネル」が配置されています。
(2) コントロールパネル各項目（フォルダー）の開閉
コントロールパネルの各項目は、フォルダー構造となっており、マウスで項目名をクリックすることにより項目（フォルダー）を開閉することができます。
ビューア起動時には、図－02の３列目（[3] ビューア起動時の開閉の状態）のような状態となり、座標軸（Axes）とライト（LIGHT）が閉じた状態、その他の項目が開いた状態となります。
図－02の４列目は、すべての項目（フォルダー）が開いた状態を示します。コントロールパネルが長すぎて、操作しにくい時などは、項目（フォルダー）を閉じてパネルを短くすることができます。
図－02の２列目は、Controls以外のフォルダーをすべて閉じた状態、１列目はControlsを閉じた状態で、最もコンパクトな状態となります。
|
|
図－01（クリックすると拡大した画像を表示します）
|
(3) パネル要素
コントロールパネルには、図－02に引き出し線で示した、データを変更するためのいくつかの型（パネル要素）があり、このパネル要素を使用してパラメータを変更します。
パネル要素には、以下のものがあります（具体的な説明は、(4)参照）。
◆ドロップダウンリスト：この欄をマウスで左クリックするとリストが表示され項目を選択することができます。
◆スライダー（数値入力）：水色の縦棒にマウスを合わせると、マウスカーソルが両矢印「←→」に変わるので、縦棒をスライドすると値が変更され、右側の欄には変更された値が表示されます。また、この欄を直接左クリックして値を変更することもできます
◆カラーピッカー（色入力）：この欄を左クリックするとカラーピッカーが起動しますので、好きな色を選択／入力することにより色変更を行えます。また右側の欄に値を直接入力することでも変更できます。
◆チェックボックス：マウスを左クリックすることにより、チェックのON/OFFができます。
◆クリックボタン：このボタンを左クリックすると設定が反映されます。
|
|
図－02（クリックすると拡大した画像を表示します）
|
(4) コントロールパネル各項目の説明
<1> Controls領域（図－03，04，05）
この領域のパネル項目は、図－03に示すように、以下の４項目があります。
★mode（回転モード）：ドロップダウンリストをマウスで左クリックすると、図－04のように、「4D」と「3D」が選択できる状態になりますので、目的のモードを選択します。3Dモードでは図形の形状は変化せず、オブジェクトが単に回転するだけですが、4Dモードでは回転中に形状（頂点座標）が変化します。回転中は、図－06の視方向ベクトル"Perspective Vector"の値が随時変化します。
★projection（投影方法）：図－05に示すように、ドロップダウンリストをマウスで左クリックすることにより、「paralell（平行投影）」／「perspective（中心投影）」を選択します。
★view positionU（U軸上の視点位置）：「perspective（中心投影）」では、視点の座標をＵ軸上 (0,0,0,-u0) とし、投影空間をu=0のXYZ空間に設定しています。このu0の値をスライダーを使って（あるいは直接入力で）設定します。設定値は、「projection（投影方法）」が「perspective（中心投影）」のときに反映されます。
★scale at origin（円柱と球の原点での半径スケール）：稜オブジェクトの円柱と頂点オブジェクトの球の半径は、多胞体の中心（原点）に近い程、相対的に小さくなるように設定されています。この原点での半径スケールをスライダーを使って（あるいは直接入力で）設定します。スケールが1のときは、すべての位置で半径は同じになります。0のときは、原点では半径が0になります。
<2> Perspective Vector（視方向ベクトル）（図－06）
任意の視方向ベクトルを設定して、見たい方向から図形を表示することが可能です。パネル項目は、図－06に示すように、以下の５項目があります。設定は、4Dモード時のみ有効となります。
★VectorX（X成分ベクトル）：X成分ベクトルの値をスライダーを使って（あるいは直接入力して）設定します。値は、-1～+1の間で設定できます。設定値は、「vector_normalize（単位ベクトル化）」ボタンをクリックした時点で反映されます。
★VectorY（Y成分ベクトル）：同、Y成分ベクトルの設定。
★VectorZ（Z成分ベクトル）：同、Z成分ベクトルの設定。
★VectorU（U成分ベクトル）：同、U成分ベクトルの設定。
★vector_normalize（単位ベクトル化）：このボタンをマウスで左クリックすることにより、VectorX～Uで設定した視方向ベクトルの値を単位ベクトル化し、設定を反映させます。単位ベクトル化すると、VectorX～Uの各成分の値も更新されます。
|
|
図－03
図－04
図－05
図－06
|
<3> FACET and FACE Objects（胞と面オブジェクト）（図－07，08）
このオブジェクトには、胞表示と面表示の２種類があり、これらを切替えて使用します。パネル項目は、図－07に示すように、以下の６項目があります。胞表示では、各胞を違う色で表示しています。各胞の中心座標（内接球半径を1に規格化）を基準として、胞の大きさにスケールを掛けてオフセットを表現しています。そのため、各胞の位置関係を確認するのにとても便利です。一方、面表示では各胞の区別は行わず、面色は一種類の色で表示されます。
★type（オブジェクトタイプ）：図－08に示すように、"Facet"（胞表示）／"Face"（面表示）を選択します。
★opacity（不透明度）：胞の不透明度をスライダーを使って（あるいは直接入力で）設定します。この値が0のときは完全に透明、１のときは完全に不透明になります。不透明度は、transparent（透過）がチェックされているときに反映されます。
★transparent（透過）：チェックボックスをチェックすることで、「透過する／しない」を切替えます。チェックをはずすと、完全に不透明になります。
★Facet scale（胞のスケール）：胞のスケールをスライダーを使って（あるいは直接入力で）設定します。この値が1のときは、各胞は面で接した状態（"Face"（面表示）と同じ）になりますが、1未満の値では、スケール値だけ大きさが小さくなりオフセットが表現されます。1より大きい値では各胞がオーバーラップします。
★color (Face only)（面色）：現在の面色の部分をクリックすると、カラーピッカーが立ち上がるので、好きな色を選択／入力することにより色変更を行えます。設定した色は、"Face"（面表示）時に反映されます。
★visible（表示／非表示）：チェックボックスをチェックすることで、胞と面オブジェクトの表示／非表示を切替えます。
|
|
図－07
図－08
|
<4> EDGE Object（稜オブジェクト）（図－09，10）
稜オブジェクトには、円柱表示とLine表示の２種類があり、これらを切替えて使用します。円柱は水色で、Lineは青色で表示されます。Line表示は、円柱表示より簡易な表示となり、より複雑な多胞体を表示する場合に適しています。パネル項目は、図－09に示すように、以下の４項目があります。
★Edge type（オブジェクトタイプ）：図－10に示すように、"Cylinder"（円柱表示）／"Line"（Line表示）を選択します。
★cylinder R scale（円柱の半径スケール）：円柱の半径をスライダーを使って（あるいは直接入力で）、半径スケールとして設定します。ビューア起動時に設定されている円柱の半径に対して、相対的なスケールとして半径を設定します。
★line width（線幅）：線幅をスライダーを使って（あるいは直接入力で）設定します。線幅はピクセル単位で設定します。
★Edge visible（表示／非表示）：チェックボックスをチェックすることで、稜オブジェクトの表示／非表示を切替えます。
|
|
図－09
図－10
|
<5> VERTEX Object（頂点オブジェクト）（図－11）
頂点オブジェクトは、緑色の球として表示されます。パネル項目は、図－11に示すように、以下の２項目があります。
★scale（半径スケール）：球の大きさをスライダーを使って（あるいは直接入力で）、半径スケールとして設定します。ビューア起動時に設定されている球の半径に対して、相対的なスケールとして半径を設定します。
★Vertex visible（表示／非表示）：チェックボックスをチェックすることで、頂点オブジェクトの表示／非表示を切替えます。
|
|
図－11
|
<6> AXES（座標軸）（図－12）
座標軸（X軸：赤色，Y軸：緑色，Z軸：青色）を表示するかどうかを設定します。
★Axes visible（表示／非表示）：チェックボックスをチェックすることで、座標軸の表示／非表示を切替えます。
|
|
図－12
|
<7> LIGHT（ライト）（図－13）
ライトを使用するかどうかを選択します。ライトは、ヘッドライトのように常に視方向からオブジェクトを照らします。ライトがオフのときは、環境光（ambient light）のみとなり、オブジェクトの陰影は反映されません。パネル項目は、図－13に示すように、以下の２項目があります。
★ON（オン／オフ）：チェックボックスをチェックすることで、ライトのON／OFFを切替えます。
★intensity（ライトの強度）：ライトの強度をスライダーを使って（あるいは直接入力で）設定します。設定はライトがONのときに反映されます。
|
|
図－13
|
(5) 多胞体の回転、拡大／縮小，移動操作
ビューアを起動すると、初期状態として中央にZ軸の正の方向から見た多胞体（直投影）が表示されます。図形の回転，拡大／縮小は以下のマウス操作でできます。
図形の回転： マウスの左ドラッグ（左クリックしたまま移動する）
図形の拡大／縮小： マウスのホイールを回転、あるいはホイールボタンをドラッグ
図形の移動： 原点を多胞体の中心とするため、移動はできないように設定されています。
|
