Add a gltf model¶

Add a model with Entity API

add_model_entity.html

<!DOCTYPE html>
<!--   
    Model Information:
    * title: Car Scene
    * source: https://sketchfab.com/3d-models/car-scene-b7b32eaca80d460c9338197e2c9d1408
    * author: toivo (https://sketchfab.com/toivo)

    Model License:
    * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
    * requirements: Author must be credited. Commercial use is allowed.

    If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
    This work is based on "Car Scene" (https://sketchfab.com/3d-models/car-scene-b7b32eaca80d460c9338197e2c9d1408) by toivo (https://sketchfab.com/toivo) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
-->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Add a gltf model</title>
        <meta property="og:description" content="Add a model with Entity API" />
        <meta name="mapray-version" content="experimental-feature">
        <meta name="mapray-api-status" content="experimental">
        <meta name="mapray-api-package" content="model-pbr">
        <script src="./model-pbr/mapray.min.js"></script>
        <script src="./model-pbr/maprayui.min.js"></script>
        <link rel="stylesheet" href="./model-pbr/mapray.css">
        <style>
            body {margin: 0; padding: 0;}
            html, body, div#mapray-container { height: 100%; }
            .map-overlay { 
                font: 12px/20px "Robot", sans-serif;
                position: absolute;
                width: 200px;
                top: 0;
                left: 0;
                padding: 10px;
            }
            .map-overlay .map-overlay-inner {
                background-color: #fff;
                color: #000;
                box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                border-radius: 3px;
                padding: 10px;
                margin-bottom: 10px;
            }
            .map-overlay-inner .select-fieldset {
                display: block;
            }
            .map-overlay-inner fieldset {
                display: flex;
                justify-content: space-between;
                border: none;
            }
            .map-overlay-inner .select-fieldset label {
                display: block;
                margin-bottom: 5px;
            }
            .map-overlay-inner label {
                font-weight: 700;
                margin-right: 10px;
            }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
        <div class="map-overlay top">
            <div class="map-overlay-inner">
            <fieldset class="slider-fieldset">
                <table>
                    <tr><td><label for="Azimuth">Sun Azimuth</label></td></tr>
                    <tr><td><input type="range" min="0" max="360" value="180" class="slider" id="Azimuth"></td></tr>
                    <tr><td><label for="Altitude">Sun Altitude</label></td></tr>
                    <tr><td><input type="range" min="-20" max="90" value="45" class="slider" id="Altitude"></td></tr>
                </table>
            </fieldset>
            </div>
        </div>
    </body>
</html>

<script>
const cloudApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
    token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
});

// The StandardUIView in the ui package includes mouse-based camera manipulation.
const uiviewer = new maprayui.StandardUIViewer( "mapray-container", {
    dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() ),
    atmosphere: new mapray.Atmosphere()
} );

uiviewer.setCameraPosition({
    longitude: 139.766365,
    latitude: 35.657281,
    height: 500
});

const lookatPosition = new mapray.GeoPoint(139.745340, 35.658694, 0.0);

uiviewer.setLookAtPosition({
    longitude: lookatPosition.longitude,
    latitude: lookatPosition.latitude,
    height: lookatPosition.height
});



const resource = cloudApi.get3DDatasetAsResource(  [ 5132805646319616 ] );
const loader = new mapray.SceneLoader( uiviewer.viewer.scene, resource, {
    onEntity: ( loader, entity, prop ) => {
        uiviewer.addEntity(entity);
    }
} );

loader.load();


function updateSun( azimuth, altitude ) {
    const omega = Math.PI / 180.0 * azimuth;
    const x = Math.cos(omega);
    const y = Math.sin(omega);

    const theta = Math.PI / 180.0 * altitude;
    const z = Math.sin(theta);
    uiviewer.viewer.sun.setSunDirection( mapray.GeoMath.transformDirection_A( lookatPosition.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix()), [x,y,z], mapray.GeoMath.createVector3()) );
}

const azimuth_slider = document.getElementById("Azimuth");
const altitude_slider = document.getElementById("Altitude");
updateSun(azimuth_slider.value, altitude_slider.value);

azimuth_slider.addEventListener("input", function () {
    updateSun(this.value, altitude_slider.value);
});
altitude_slider.addEventListener("input", function () {
    updateSun(azimuth_slider.value, this.value);
});
</script>

Info

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