support for v5.0

dvt3d · Jan 10, 2025 · 9420212 · 9420212
2 parents 6b5376e + 5a201aa
commit 9420212
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 279 deletions.
diff --git a/.npmrc b/.npmrc
@@ -1 +1 @@
-registry=https://registry.npmmirror.com
+
diff --git a/README.md b/README.md
@@ -1,75 +1,31 @@
 # maplibre-three-plugin
+
 `maplibre-three-plugin` is a bridge plugin that cleverly connects [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) with [Three.js](https://threejs.org/), enabling developers to implement 3D rendering and animation on maps.
 
-## Install 
+## Install
 
 ```shell
-npm install @dvgis/maplibre-three-plugin 
+npm install @dvgis/maplibre-three-plugin
 ----------------------------------------
-yarn add @dvgis/maplibre-three-plugin`
+yarn add @dvgis/maplibre-three-plugin
 ```
 
-## Start
- 
+## Quickly Start
+
 `maplibre-three-plugin` depends on three, please make sure three is installed before using it.
 
 ```javascript
- import maplibregl from 'maplibre-gl';
- import 'maplibre-gl/dist/maplibre-gl.css';
- import {MapScene} from '@dvgis/maplibre-three-plugin'
-
- const map = new maplibregl.Map({
-   container: 'map', // container id
-   style: 'https://demotiles.maplibre.org/style.json', // style URL
-   center: [0, 0], // starting position [lng, lat]
-   zoom: 1 // starting zoom
- });
- const mapScene = new MapScene(map)
-```
-
-## MapScene
-
-### constructor(map,[options])
-
--   params
-    - `{maplibregl.Map} map ` : map instance
-    - `{Object} options ` : config
-
-```js
-{
-    scene: null, 
-    camera:null, 
-    renderer: null, 
-    preserveDrawingBuffer: false, 
-    renderLoop: (ins) =>{} 
-} 
-
+import maplibregl from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css'
+import { MapScene } from '@dvgis/maplibre-three-plugin'
+
+const map = new maplibregl.Map({
+  container: 'map', // container id
+  style: 'https://demotiles.maplibre.org/style.json', // style URL
+  center: [0, 0], // starting position [lng, lat]
+  zoom: 1, // starting zoom
+})
+const mapScene = new MapScene(map)
 ```
 
-### properties
-
--   `{maplibregl.Map} map` 
--   `{HttmElement} canvas` 
--   `{THREE.Scene} scene`
--   `{THREE.Camera} camera`
--   `{THREE.WebGLRenderer} renderer`
--   `{THREE.Group} world`
-
-### methods
-
--   projectedUnitsPerMeter(lat)
-
--   lngLatToVector3(lng,lat,alt)
-
--   vector3ToLngLat(v3)
-
-
-
-
-
-
-
-
-
-
-
+## Examples
diff --git a/examples/box.html b/examples/box.html
diff --git a/examples/data/GroundVehicle.glb b/examples/data/GroundVehicle.glb
diff --git a/examples/fbx.html b/examples/fbx.html
diff --git a/examples/glb.html b/examples/glb.html
diff --git a/examples/index.html b/examples/index.html
@@ -1,70 +1,71 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport"
-        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title></title>
-  <link href="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.css" rel="stylesheet" />
-  <style>
-
-     *{
-         padding: 0 ;
-         margin: 0;
-     }
-     html,body{
-         width: 100%;
-         height: 100%;
-         overflow: hidden;
-     }
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title></title>
+    <link
+      href="https://unpkg.com/maplibre-gl@5.0.0/dist/maplibre-gl.css"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
 
-     .map-container{
-         width: 100%;
-         height: 100%;
-         overflow: hidden;
-     }
-  </style>
+      .map-container {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
   </head>
-<body>
-  <div id="map-container" class="map-container"></div>
-  <script type="importmap">
-    {
-      "imports": {
-        "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@5.0.0/+esm",
-        "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.min.js",
-        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/",
-        "mtp": "./libs/index.js"
+  <body>
+    <div id="map-container" class="map-container"></div>
+    <script type="importmap">
+      {
+        "imports": {
+          "maplibre-gl": "https://cdn.jsdelivr.net/npm/maplibre-gl@5.0.0/+esm",
+          "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.min.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/",
+          "mtp": "./libs/index.js"
+        }
       }
-    }
-  </script>
-
-  <script type="module">
-    import maplibregl from 'maplibre-gl';
-    import  * as THREE from 'three'
-    import { MapScene }  from 'mtp'
-    const map = new maplibregl.Map({
-      container: 'map-container', // container id
-      style:{
-        version: 8,
-        sources: {},
-        layers: [],
-      },
-      center: [120,31], // starting position [lng, lat]
-      zoom: 17,
-      pitch: 60,
-      maxPitch:85,
-    });
+    </script>
 
+    <script type="module">
+      import maplibregl from 'maplibre-gl'
+      import * as THREE from 'three'
+      import { MapScene, SceneTransform } from 'mtp'
+      const map = new maplibregl.Map({
+        container: 'map-container', // container id
+        style: 'https://api.maptiler.com/maps/basic-v2/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL', // style URL
+        center: [120, 31], // starting position [lng, lat]
+        zoom: 17,
+        pitch: 60,
+        maxPitch: 85,
+      })
+      const mapScene = new MapScene(map)
 
-    const mapScene = new MapScene(map)
-    map.setStyle("https://api.maptiler.com/maps/basic-v2/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL",{diff:false})
-    let position = mapScene.lngLatToVector3(120,31,0)
-    const geometry = new THREE.BoxGeometry( 1, 1, 1);
-    const material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
-    const cube = new THREE.Mesh( geometry, material );
-    cube.position.copy(position)
-    mapScene.world.add( cube );
-  </script>
-</body>
-</html>
+      map.on('style.load', (e) => {
+        let position = SceneTransform.lngLatToVector3(120, 31, 0)
+        const geometry = new THREE.BoxGeometry(10, 10, 10)
+        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
+        const cube = new THREE.Mesh(geometry, material)
+        cube.position.copy(position)
+        mapScene.world.add(cube)
+      })
+    </script>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,8 @@
-import { MapScene } from './modules'
+import { MapScene, SceneTransform } from './modules'
 
 if (window.THREE) {
   window.MapScene = MapScene
+  window.SceneTransform = SceneTransform
 }
 
-export { MapScene }
+export { MapScene, SceneTransform }
diff --git a/src/modules/index.js b/src/modules/index.js
@@ -1 +1,2 @@
 export { default as MapScene } from './scene/MapScene'
+export { default as SceneTransform } from './transform/SceneTransform'
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as MapScene } from './scene/MapScene'
		export { default as SceneTransform } from './transform/SceneTransform'