Clean up examples and imports

maptiler · Nov 27, 2024 · a9aa45e · a9aa45e
1 parent 31ad298
commit a9aa45e
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 69 deletions.
diff --git a/demos/mountains.html b/demos/mountains.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>MapTiler 3D Models</title>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+    <script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
+    <script>
+      window.addEventListener("load", () => {
+        const stats = new Stats();
+        stats.dom.style.left = "unset";
+        stats.dom.style.right = 0;
+        document.body.appendChild(stats.dom);
+        requestAnimationFrame(function loop(){
+          stats.update();
+          requestAnimationFrame(loop)
+        });
+      });
+    </script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+
+      #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+      }
+
+      .lil-gui.autoPlace {
+        right: inherit;
+        left: 15px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="map"></div>
+    <script type="module" src="../../src/demos/mountains.ts"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,51 +1,31 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>MapTiler 3D Models</title>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
     />
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-    <script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
-    <script>
-      window.addEventListener("load", () => {
-        const stats = new Stats();
-        stats.dom.style.left = "unset";
-        stats.dom.style.right = 0;
-        document.body.appendChild(stats.dom);
-        requestAnimationFrame(function loop(){
-          stats.update();
-          requestAnimationFrame(loop)
-        });
-      });
-    </script>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-        font-family: sans-serif;
-      }
-
-      #map {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 100%;
-        /* width: 800px;
-        height: 600px; */
-      }
-
-      .lil-gui.autoPlace {
-        right: inherit;
-        left: 15px;
-      }
-    </style>
   </head>
-
+  
   <body>
-    <div id="map"></div>
-    <script type="module" src="src/example.ts"></script>
+    <h1>MapTiler 3D Examples</h1>
+    <ul>
+      <li>
+        <a href="demos/mountains.html">Mountains</a>
+      </li>
+      <li><a href="demos/multi.html">Multi</a></li>
+      <li><a href="demos/plane.html">Terrain</a></li>
+      <li>
+        <a href="demos/point_cad_model01.html">Point Cloud - CAD-like view</a>
+      </li>
+      <li>
+        <a href="demos/point_cloud_dundee.html">Point Cloud - Dundee</a>
+      </li>
+      <li><a href="demos/point_cloud_NMH.html">Point Cloud - NMH</a></li>
+      <li><a href="demos/point_cloud_shore.html">Point Cloud - Shore</a></li>
+    </ul>
   </body>
 </html>
diff --git a/src/Layer3D.ts b/src/Layer3D.ts
@@ -1,12 +1,5 @@
-import * as maptilersdk from "@maptiler/sdk";
-
-const { LngLat } = maptilersdk;
-type LngLat = maptilersdk.LngLat;
-type LngLatLike = maptilersdk.LngLatLike;
-type CustomLayerInterface = maptilersdk.CustomLayerInterface;
-type CustomRenderMethodInput = maptilersdk.CustomRenderMethodInput;
-const { Map: MapSDK } = maptilersdk;
-type MapSDK = maptilersdk.Map;
+import { getVersion, LngLat } from "@maptiler/sdk";
+import type { LngLatLike, CustomLayerInterface, CustomRenderMethodInput, Map as MapSDK } from "@maptiler/sdk";
 
 import {
   Camera,
@@ -28,7 +21,7 @@ import {
 } from "three";
 
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
-import { isGlobeTransform, isPointLight } from "./utils";
+import { isPointLight } from "./utils";
 
 /**
  * The altitude of a mesh can be relative to the ground surface, or to the mean sea level
@@ -242,7 +235,7 @@ export class Layer3D implements CustomLayerInterface {
   private readonly items3D = new Map<string, Item3D>();
 
   constructor(id: string, options: Layer3DOptions = {}) {
-    console.log("[maptiler-3d-js]", "Using MapTiler SDK JS version:", maptilersdk.getVersion());
+    console.log("[maptiler-3d-js]", "Using MapTiler SDK JS version:", getVersion());
 
     this.type = "custom";
     this.id = id;
@@ -295,8 +288,7 @@ export class Layer3D implements CustomLayerInterface {
   /**
    * Automaticaly called by the rendering engine. (should not be called manually)
    */
-  // render(_gl: WebGLRenderingContext | WebGL2RenderingContext, matrix: Mat4, _options: CustomRenderMethodInput) {
-  render(gl: WebGLRenderingContext | WebGL2RenderingContext, options: CustomRenderMethodInput) {
+  render(_gl: WebGLRenderingContext | WebGL2RenderingContext, options: CustomRenderMethodInput) {
     if (this.isInZoomRange() === false) {
       return;
     }
@@ -340,7 +332,7 @@ export class Layer3D implements CustomLayerInterface {
 
     let defaultProjectionData = options.defaultProjectionData;
 
-    if (isGlobeTransform(this.map.transform) === true) {
+    if ("_mercatorTransform" in this.map.transform === true) {
       defaultProjectionData =
         options.defaultProjectionData.projectionTransition === 1
           ? options.defaultProjectionData

diff --git a/src/example.ts → src/demos/mountains.ts b/src/example.ts → src/demos/mountains.ts
@@ -1,5 +1,5 @@
 import * as maptilersdk from "@maptiler/sdk";
-import * as maptiler3d from "./maptiler-3d";
+import * as maptiler3d from "../maptiler-3d";
 
 import "@maptiler/sdk/dist/maptiler-sdk.css";
 

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,16 +1,7 @@
-import type { GlobeTransform } from "maplibre-gl/src/geo/projection/globe_transform";
 import type { Object3D, PointLight } from "three";
 
-const isGlobeTransform = (transform: object): transform is GlobeTransform => {
-  if ("isGlobeRendering" in transform) {
-    return true;
-  }
-
-  return false;
-};
-
 const isPointLight = (object3D: Object3D): object3D is PointLight => {
   return "isPointLight" in object3D && object3D.isPointLight === true;
 };
 
-export { isGlobeTransform, isPointLight };
+export { isPointLight };