コンテンツにスキップ

Moon

Mapray JS では月の表現ができ、月の位置や輝度などを指定することで見え方をコントロールできます。

関連クラス

以下に示すような月表現のためのクラスを用意しています。

クラス 内容
Moon 月の基本情報を保持し、月の方向ベクトルに関するメソッドを提供します
MoonVisualizer 月を視覚表現を行い、表現方法に関するメソッドを提供します

月マテリアル

NASA の月画像 を Mapray のサイトで配信しています。 MoonVisualizer に月マテリアルを指定することで、月の外観を自由に設定できます。

new mapray.MoonVisualizer( "https://resource.mapray.com/assets/images/moon.jpg" );

Info

NASA's Scientific Visualization Studio

Note

月の満ち欠けは太陽との相対位置に基づいて自動的に計算されるため、マテリアルなどで特別な設定は不要です。

主なメソッド

Moon クラスの主なメソッドは以下の通りです。

メソッド 動作
setMoonDirection 月の方向ベクトルを指定します

MoonVisualizer クラスの主なメソッドは以下の通りです。

メソッド 動作 パラメータ詳細
setRadius 月の半径係数を指定します 1.0 を基本とし、必要に応じて、 0.1 ~ 5.0 程度の倍率で調整します
setIntensity 月の輝度係数を指定します 1.0 を基本とし、必要に応じて、 0.5 ~ 2.0 程度の倍率で調整します
setVisibility 可視性フラグを指定します true / false

Note

setMoonDirection で指定する月ベクトルは、正規化された GOCS の方向ベクトルです。 GOCS については 座標系 を参照してください。

その他メソッドや詳細は リファレンスマニュアル を参照してください。

サンプルコード

Moon と MoonVisualizer を使い、月を表示する例を示します。

このサンプルコードでは、満月を表示するために、太陽の位置を月の反対側に設定しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
        <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
        <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
        <style>
            html, body, div#mapray-container { margin: 0; padding: 0; height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    async function main() {
        // Set up your API Key, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey, {
            moon_visualizer: new mapray.MoonVisualizer( "https://resource.mapray.com/assets/images/moon.jpg" ),
        });

        // Wait for the initialization process to complete.
        await uiviewer.viewer.init_promise;

        // Put the sun opposite the moon.
        const sTheta = - Math.PI / 180.0 * (140.0 + 180.0);
        const mTheta = - Math.PI / 180.0 * 140.0;
        uiviewer.viewer.sun.setSunDirection( [ Math.cos(sTheta), Math.sin(sTheta), 0 ] );
        uiviewer.viewer.moon.setMoonDirection( [ Math.cos(mTheta), Math.sin(mTheta), 0 ] );
        uiviewer.viewer.moonVisualizer.setRadius( 3.0 );
        uiviewer.viewer.moonVisualizer.setIntensity( 2.0 );

        uiviewer.setCameraPosition({
            longitude: 138.50687,
            latitude: 35.37715,
            height: 2500
        });

        uiviewer.setLookAtPosition({
            longitude: 138.724949,
            latitude: 35.363787,
            height: 3000
        });
    }

    main();
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。