Sun¶

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

また、大気表現と組み合わせることで青空や夕焼けのなどの空の色合いを再現できます。

主なメソッド¶

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

メソッド	動作
setSunDirection	太陽の方向ベクトルを指定します

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

メソッド	動作	パラメータ詳細
setRadius	太陽の半径係数を指定します	1.0 を基本とし、必要に応じて、 0.1 ~ 5.0 程度の倍率で調整します
setIntensity	太陽の輝度係数を指定します	1.0 を基本とし、必要に応じて、 0.5 ~ 2.0 程度の倍率で調整します
setRayleigh	レイリー散乱の係数を指定します	通常は 0.0025 を設定。 0.0025 ~ 0.0150 程度の値で調整し、数値が大きいほど青空が鮮やかになります
setMie	ミー散乱の係数を指定します	通常は 0.001 を設定。 0.0001 ~ 0.01 程度の値で調整し、数値が大きいほど大気の濁りが強くなります
setScaleDepth	大気のスケール係数を指定します	通常は 0.25 を設定。 0.08 ~ 0.25 程度の範囲で、大気の厚さや遠近感を調整します
setSunRate	大気の太陽の影響の係数を指定します	通常は 20.0 を設定。 10.0 ~ 25.0 程度の範囲で、高い値で色合いが強調されます
setVisibility	可視性フラグを指定します	true / false

Note

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

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

サンプルコード¶

Sun と SunVisualizer を使い、太陽を表示する例を示します。

<!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, {
            sun_visualizer: new mapray.SunVisualizer(),
        });

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

        const theta = - Math.PI / 180.0 * 140.0;
        uiviewer.viewer.sun.setSunDirection( [ Math.cos( theta ), Math.sin( theta ), 0 ] );
        uiviewer.viewer.sunVisualizer.setRadius( 2.0 );
        uiviewer.viewer.sunVisualizer.setIntensity( 1.0 );

        uiviewer.setCameraPosition({
            longitude: 80.50687,
            latitude: 20.37715,
            height: 3500000
        });

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

    main();
</script>

Info

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

Note

地表で地平線付近にあるとき、太陽は赤みを帯びた描画になります。

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

Sun¶

関連クラス¶

主なメソッド¶

サンプルコード¶