diff --git a/images/maptiler-3d-logo.png b/images/maptiler-3d-logo.png new file mode 100644 index 0000000..a1bc82a Binary files /dev/null and b/images/maptiler-3d-logo.png differ diff --git a/images/maptiler-3d-logo.svg b/images/maptiler-3d-logo.svg new file mode 100644 index 0000000..9f16ac4 --- /dev/null +++ b/images/maptiler-3d-logo.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 3D + + + + + + + + JS + + + + + diff --git a/readme.md b/readme.md index 3beafc4..b8d7dbe 100644 --- a/readme.md +++ b/readme.md @@ -1,56 +1,55 @@

-official page →
- +official page →
+

- Add 3D models and lighting to your MapTiler SDK JS maps + Add 3D objects and lighting to your MapTiler SDK JS maps

- +

-## 3D models on MapTiler Maps -With this MapTiler SDK plugin, you can add 3D models (glTF/glb) to your basmap, with plenty of customizations! -![](images/ducks-and-posts.png) -[Duck and lamp post meshes from the glTF sample asset repository](https://github.com/KhronosGroup/glTF-Sample-Assets) +## 3D objects on MapTiler maps +With this MapTiler SDK plugin, you can add 3D objects (glTF/glb files) to your basemap, with plenty of customizations! +![](images/mansion.png) +[Sellers Mansion, captured by Katie Wolfe, License CC Attribution](https://sketchfab.com/3d-models/sellers-mansion-4aad9d86ec5e484c949e931b67a4243f) ![](images/flatiron.png) [Flatiron building, mesh created by Mohamed Hussien, License CC Attribution](https://sketchfab.com/3d-models/flatiron-building-116132645224458da6e4d9dd45c294b4) - ![](images/plane.png) [Plane a380, mesh created by Mamont Nikita, License CC Attribution](https://sketchfab.com/3d-models/plane-a340-d3ad0996a8564a94a24ee4b3528b554b) -![](images/mansion.png) -[Sellers Mansion, captured by Katie Wolfe, License CC Attribution](https://sketchfab.com/3d-models/sellers-mansion-4aad9d86ec5e484c949e931b67a4243f) +![](images/ducks-and-posts.png) +[Duck and lamp post meshes from the glTF sample asset repository](https://github.com/KhronosGroup/glTF-Sample-Assets) ### Installation From NPM and using the ES module, in a terminal, in your project: ```shell -npm install @maptiler/3d-models +npm install @maptiler/3d ``` Then to import: ```ts -import { SceneLayer } from "@maptiler/3d-models"; +import { SceneLayer } from "@maptiler/3d"; // or -import * as maptiler3dmodels from "@maptiler/3d-models"; +import * as maptiler3d from "@maptiler/3d"; ``` From CDN and using the UMD bundle, in the `` section of your HTML file: ```html - + ``` -With the UMD bundle (on CDN), the namespace for this project is `maptiler3dmodels`. So the `SceneLayer` class is available at `maptiler3dmodels.SceneLayer`. +With the UMD bundle (on CDN), the namespace for this project is `maptiler3d`. So the `layer3D` class is available at `maptiler3d.Layer3D`. ### Basic usage -An instance of `SceneLayer` is a custom type of layer that contain a 3D scene, where multiple 3D meshes and lights can be added. Like any other layer in MapTiler SDK/Maplibre GL JS, it must have an ID and then be added to a `Map` instance: +An instance of `Layer3D` is a custom type of layer that contain a 3D scene, where multiple 3D meshes and lights can be added. Like any other layer in MapTiler SDK/Maplibre GL JS, it must have an ID and then be added to a `Map` instance: ```js // Create a map; @@ -63,7 +62,7 @@ const map = new Map({ map.on("ready", () => { // Create a SceneLayer and add it - const layer3D = new maptiler3dmodels.SceneLayer("custom-3D-layer"); + const layer3D = new maptiler3d.Layer3D("custom-3D-layer"); map.addLayer(layer3D); }) ``` @@ -87,7 +86,7 @@ await layer3D.addMeshFromURL( scale: 39.5, visible: true, altitude: 74.38, - altitudeReference: maptiler3dmodels.AltitudeReference.GROUND, + altitudeReference: maptiler3d.AltitudeReference.GROUND, } ); ``` @@ -292,12 +291,12 @@ Removes all the meshes and point lights from the scene and frees the GPU memory ## License -MapTiler 3D Models JS Module +MapTiler 3D JS Module Copyright © 2023 MapTiler AG. All rights reserved. The software and files (collectively “Software”) in this repository are licensed for use only with MapTiler service(s). -For the license terms, please reference [MapTiler General Terms and Conditions](https://www.maptiler.com/terms/) which incorporate MapTiler 3D Models JS Module Product [Terms (collectively “Terms”) and Privacy Policy at Privacy policy](https://www.maptiler.com/privacy-policy). +For the license terms, please reference [MapTiler General Terms and Conditions](https://www.maptiler.com/terms/) which incorporate MapTiler 3D JS Module Product [Terms (collectively “Terms”) and Privacy Policy at Privacy policy](https://www.maptiler.com/privacy-policy). This license allows users with an active MapTiler account to modify and integrate authorized portions of the Software for use with the relevant MapTiler service(s) in accordance with the MapTiler Terms. This license terminates automatically if a user no longer maintains a MapTiler account or their usage breaches MapTiler Terms. \ No newline at end of file diff --git a/src/Layer3D.ts b/src/Layer3D.ts index bd20d01..aa3dc30 100644 --- a/src/Layer3D.ts +++ b/src/Layer3D.ts @@ -648,7 +648,6 @@ export class Layer3D implements CustomLayerInterface { this.map.triggerRepaint(); } - /** * Traverse a Mesh/Group/Object3D to modify the opacities of the all the materials it finds */ @@ -664,11 +663,9 @@ export class Layer3D implements CustomLayerInterface { } }); - if (forceRepaint) - this.map.triggerRepaint(); + if (forceRepaint) this.map.triggerRepaint(); } - /** * Adding a point light. The default options are mimicking the sun: * lngLat: `[0, 0]` (null island)