Load scene file¶

Load scene with SceneLoader API

load_scene.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Load scene file</title>
  <meta property="og:description" content="Load scene with SceneLoader API" />
  <script src="./v0.10.1/mapray.min.js"></script>
  <script src="./v0.10.1/maprayui.min.js"></script>
  <link rel="stylesheet" href="./v0.10.1/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: calc(100% - 34px); }
    div#SelectModelBox {
        display: inline-block;
        background-color: #E0E0E0;
        border: solid 1px #000000;
        padding: 7px;
    }

  </style>
</head>

<body>
<div id="mapray-container"></div>
<div id="SelectModelBox">
    <label for="SelectModelPullDown">Select Model</label>
    <select name="SelectModelPullDown" id="SelectModelPullDown">
        <option value="truck">Truck</option>
        <option value="capsule">Capsule</option>
        <option value="helicopter">Helicopter</option>
    </select>
</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() )
} );

uiviewer.setCameraPosition({
  longitude: 139.77403,
  latitude: 35.667,
  height: 1200
});

uiviewer.setLookAtPosition({
  longitude: 139.74945,
  latitude: 35.67064,
  height: 100
});

const resourceIds = {
  "truck": "5169879804018688",
  "capsule": "5076232337096704",
  "helicopter": "5145140070973440",
};



const selectModelBox = document.getElementById("SelectModelBox");

selectModelBox.addEventListener("change", (event) => {
  const modelName = event.target.value;
  loadModel(modelName);
});

function loadModel(modelName) {
  uiviewer.viewer.scene.clearEntities();

  const resource = cloudApi.getSceneAsResource( resourceIds[modelName] );

  // Create scene loader
  const loader = new mapray.SceneLoader(uiviewer.viewer.scene, resource, {
    callback: (loader, isSuccess) => {
      console.log("load scene");
    }
  });

  // Load scene file
  loader.load();
}

selectModelBox.value = "truck";
loadModel("truck");

</script>

Info

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