Model Entity¶

モデルエンティティは 3D モデルを表示するためのエンティティです。

モデルの位置や向き、スケールなどを制御することができます。

モデルの表示¶

現在、 ModelEntity は Mapray Cloud にアップロードされた3Dデータセットのみ表示できます。ローカルファイル（glTF, obj 形式など）を直接読み込んで表示することはサポートされていません。

3Dデータセットの詳細は Mapray Cloud datasets - 3D dataset のサンプルを参照してください。

主なメソッド¶

メソッド	動作
setOrientation	モデルの向きを指定します
setPosition	モデル位置を指定します
setScale	モデルのスケールを指定します
setVisibility	可視性フラグを指定します
setPickable	pick による選択対象とするかを指定します

Note

Orientation は、角度 \((heading, tilt, roll)\) を度で指定します。
Scale は、3次元のスケール \((x, y, z)\) の配列で指定します。

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

サンプルコード¶

ModelEntity を使い、地表に 3D モデルを表示する例を示します。このサンプルコードでは、トラックの 3D モデルを天保山大橋の上に表示します。

Mapray Cloud にアップロードしたモデルを読み込み後、位置（ ModelEntity.setPosition ）と向き（ ModelEntity.setOrientation ）を設定しています。また、このモデルはスケールが実際より大きく設定されているため ModelEntity.setScale で小さく表示しています。

<!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 apikey, which can be created in Mapray Cloud.
        const apikey = "<YOUR_MAPRAY_API_KEY>";
        const uiviewer = new maprayui.StandardUIViewer( "mapray-container", apikey);

        const maprayApi = new mapray.cloud.CloudApiV2({
            tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
            token: apikey
        });

        // Load the truck 3D model.
        const datasetId = "6264189102325760";
        const resource = maprayApi.get3DDatasetAsResource( datasetId );
        const loader = new mapray.SceneLoader( uiviewer.viewer.scene, resource );
        await loader.load();

        // Set the transform.
        const modelEntity = uiviewer.viewer.scene.getEntity( 0 );
        modelEntity.altitude_mode = mapray.AltitudeMode.RELATIVE;
        modelEntity.setPosition( new mapray.GeoPoint( 135.434129, 34.658192, 0.65 ) );
        modelEntity.setOrientation( new mapray.Orientation( 316, 0.0, 0.0, ) );
        modelEntity.setScale( [ 0.018, 0.018, 0.018 ] );

        uiviewer.setCameraPosition({
            longitude: 135.43410,
            latitude: 34.65799,
            height: 20
        });

        uiviewer.setLookAtPosition({
            longitude: 135.434129,
            latitude: 34.658192,
            height: 5
        });
    }

    main();
</script>

Info

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

Info

datasetIdは、あなたがアップロードしたデータセットのIDに置き換えて下さい。

Warning

SceneLoader.load は非同期で処理されるため、 await や then で追加処理完了を待ってから Entity に対する処理を行う必要があります。