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="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>
    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>
// Set up your access token, which can be created in Mapray Cloud.
const apikey = "<YOUR_MAPRAY_API_KEY>";

// The StandardUIView in the ui package includes mouse-based camera manipulation.
const uiviewer = new maprayui.StandardUIViewer("mapray-container", apikey);

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 cloudApi = new mapray.cloud.CloudApiV2({
    tokenType: mapray.cloud.CloudApi.TokenType.API_KEY,
    token: apikey,
});

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, {
    transform: (url, type) => {
        return {
          url: url,
          credentials: mapray.CredentialMode.SAME_ORIGIN,
          headers: {}
        };
    },
    callback: (loader, isSuccess) => {
      console.log("load scene");
    }
  });

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

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

</script>

Info

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