v1.4.1 (#34)

tariqksoliman · web-flow · commit 90bbf33b0d5f · 2022-05-03T09:56:12.000-07:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,18 @@
 
 [Official Releases](https://github.com/NASA-AMMOS/LithoSphere/releases)
 
+## v1.4.1
+
+_May 2, 2022_
+
+#### Added
+
+-   New `initialCamera` constructor option
+
 ## v1.4.0
 
+---
+
 _Mar 29, 2022_
 
 #### Added
diff --git a/dist/lithosphere.js b/dist/lithosphere.js
diff --git a/dist/src/lithosphere.d.ts b/dist/src/lithosphere.d.ts
@@ -11,7 +11,6 @@ interface Private {
     rendererWrapper: any;
     renderer: any;
     cameras: any;
-    cameraPositionTarget: number[];
     tiledWorld: TiledWorld;
     events: Events;
     maxZoom: number;
@@ -82,6 +81,8 @@ export default class LithoSphere {
         firstPerson: any;
         orbit: any;
     };
+    _setInitialCameraPositionTarget: () => void;
+    setCameraPositionTarget: (position?: XYZ, target?: XYZ) => void;
     getContainer: () => HTMLElement;
     invalidateSize: () => void;
 }
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/pages/Constructor/constructor.markdown b/docs/pages/Constructor/constructor.markdown
@@ -30,7 +30,8 @@ new LithoSphere(containerId, options)
 
 |        Parameter         |    Type    |                                      Default                                       |                                   Description                                    |
 | :----------------------: | :--------: | :--------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: |
-|     **initialView**      |  _object_  |     See [initialView]({{ site.baseurl }}/constructor#optionsinitialview) below     |                  Sets the initial coordinate view of the scene                   |
+|     **initialView**      |  _object_  |     See [initialView]({{ site.baseurl }}/constructor#optionsinitialview) below     |     Sets the initial longitude, latitude, zoom coordinate view of the scene      |
+|    **initialCamera**     |  _object_  |   See [initialCamera]({{ site.baseurl }}/constructor#optionsinitialcamera) below   |           Sets the initial world-space camera coordinates and look-at            |
 |     **majorRadius**      | _integer_  |                                      6371000                                       |                         Major planetary radius in meters                         |
 |     **minorRadius**      | _integer_  |                                    majorRadius                                     |                         Minor planetary radius in meters                         |
 |    **loadingScreen**     | _boolean_  |                                        true                                        |    If true, shows a loading screen until all lithosphere content first loads     |
@@ -74,6 +75,34 @@ The latitude, longitude, and zoom LithoSphere first starts at.
 }
 ```
 
+### options.initialCamera
+
+Sets the orbit camera's initial position and target. Useful in deeplinks and when a non-top-down camera angle is desired. Note that the camera's look-at target is always along the y-axis.
+
+|         Parameter          | Type  | Default |           Description            |
+| :------------------------: | :---: | :-----: | :------------------------------: |
+| **initialCamera.position** | _XYZ_ |  null   | Sets the initial camera position |
+|  **initialCamera.target**  | _XYZ_ |  null   |  Sets the initial camera target  |
+
+#### Example
+
+```javascript
+{
+    initialCamera: {
+        position: {
+            x: 1570.8134791640523,
+            y: 3125.497317531146,
+            z: 123.76226561404211,
+        },
+        target: {
+            x: 0,
+            y: 4412.141683964059,
+            z: 0,
+        },
+    },
+}
+```
+
 ### options.demFallback
 
 If a tile layer has a `demPath` set and one of its tile dem request fails for whatever reason (such as a 404) or does not have a `demPath` set, it will try to get the corresponding DEM tile specified in `demFallback`.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "lithosphere",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "LithoSphere is a GIS JavaScript library for building 3D tile-based globes in the web browser.",
     "author": "Tariq Soliman",
     "license": "Apache-2.0",
diff --git a/public/dist/lithosphere.js b/public/dist/lithosphere.js
diff --git a/public/examples/example.html b/public/examples/example.html
@@ -35,11 +35,30 @@
         <!--<div id="myCustomCoordDiv"></div>-->
         <script>
             const Litho = new LithoSphere.default('container', {
+                /*
                 initialView: {
                     lng: 137.358048, // default 0
                     lat: -4.673226,
                     zoom: 16,
                 },
+                */
+                initialView: {
+                    lng: 137.3650974531451,
+                    lat: -4.71480304282526,
+                    zoom: 16,
+                },
+                initialCamera: {
+                    position: {
+                        x: 274.50893509606396,
+                        y: 4258.156814585879,
+                        z: -1108.3356496526244,
+                    },
+                    target: {
+                        x: 0,
+                        y: 4293.083639767021,
+                        z: 0,
+                    },
+                },
                 majorRadius: 3396190,
                 loadingScreen: true, // default true
                 customParsers: {
diff --git a/src/generalTypes.d.ts b/src/generalTypes.d.ts
@@ -31,6 +31,19 @@ export interface LatLngZ {
     zoom?: number
 }
 
+export interface InitialCamera {
+    position: {
+        x: number
+        y: number
+        z: number
+    }
+    target: {
+        x: number
+        y: number
+        z: number
+    }
+}
+
 export interface XY {
     x: number
     y: number
@@ -74,6 +87,7 @@ export interface ControlType {
 
 export interface Options {
     initialView?: LatLngZ
+    initialCamera?: InitialCamera
     // Whether or not to show the loading screen
     loadingScreen?: boolean
     majorRadius?: number
diff --git a/src/lithosphere.ts b/src/lithosphere.ts
@@ -37,7 +37,6 @@ interface Private {
     rendererWrapper: any
     renderer: any
     cameras: any
-    cameraPositionTarget: number[]
     tiledWorld: TiledWorld
     events: Events
     maxZoom: number
@@ -112,7 +111,6 @@ export default class LithoSphere {
             rendererWrapper: null,
             renderer: null,
             cameras: null,
-            cameraPositionTarget: null,
             tiledWorld: null,
             events: null,
             maxZoom: 0,
@@ -322,6 +320,7 @@ export default class LithoSphere {
 
         //Set default view
         this.setCenter(this.options.initialView)
+        this._setInitialCameraPositionTarget()
 
         // Action!
         this._animate()
@@ -399,40 +398,16 @@ export default class LithoSphere {
             this.controls._onOrbitalUpdate()
         }
 
-        /*
         //Globe_.updateTileShaderVars();
-        THREE.VRController.update()
-
-        //set default camera from url if there is one
-        if (L_.FUTURES.globeCamera != null) {
-            var c = L_.FUTURES.globeCamera
-            Cameras.orbit.camera.position.set(c[0], c[1], c[2])
-            Cameras.orbit.controls.target.x = c[3]
-            Cameras.orbit.controls.target.y = c[4]
-            Cameras.orbit.controls.target.z = c[5]
-            Cameras.orbit.controls.update()
-            L_.FUTURES.globeCamera = null
-        }
-*/
+        //THREE.VRController.update()
+
         if (this._.firstUpdate) {
             //Set default view
             if (this._.firstViewOverride != null)
                 this.setCenter(this._.firstViewOverride)
             else this.setCenter(this.options.initialView, true)
 
-            const o = this._.cameras.orbit
-            const cam = o.camera
-            const con = o.controls
-            const pos = cam.position
-            const tar = con.target
-            this._.cameraPositionTarget = [
-                pos.x,
-                pos.y,
-                pos.z,
-                tar.x,
-                tar.y,
-                tar.z,
-            ]
+            this._setInitialCameraPositionTarget()
 
             this._.firstUpdate = false
         }
@@ -452,6 +427,7 @@ export default class LithoSphere {
         setTimeout(() => {
             // Repositions center
             this.setCenter(this.options.initialView, false, true)
+            this._setInitialCameraPositionTarget()
             this._.events._onZoom()
             this._.loadingScreen.end()
         }, 100)
@@ -670,6 +646,50 @@ export default class LithoSphere {
         }
     }
 
+    _setInitialCameraPositionTarget = () => {
+        const o = this._.cameras.orbit
+        const cam = o.camera
+        const con = o.controls
+        const pos = cam.position
+        const tar = con.target
+
+        let position = { x: pos.x, y: pos.y, z: pos.z }
+        let target = { x: tar.x, y: tar.y, z: tar.z }
+        if (this.options.initialCamera) {
+            const iC = this.options.initialCamera
+            if (iC.position) {
+                position = {
+                    x: iC.position.x || position.x,
+                    y: iC.position.y || position.y,
+                    z: iC.position.z || position.z,
+                }
+            }
+            if (iC.target) {
+                target = {
+                    x: iC.target.x || target.x,
+                    y: iC.target.y || target.y,
+                    z: iC.target.z || target.z,
+                }
+            }
+            this.setCameraPositionTarget(position, target)
+        }
+    }
+    setCameraPositionTarget = (position?: XYZ, target?: XYZ) => {
+        if (position) {
+            this._.cameras.orbit.camera.position.set(
+                position.x || 9,
+                position.y || 0,
+                position.z || 0
+            )
+        }
+        if (target) {
+            this._.cameras.orbit.controls.target.x = target.x || 0
+            this._.cameras.orbit.controls.target.y = target.y || 0
+            this._.cameras.orbit.controls.target.z = target.z || 0
+        }
+        this._.cameras.orbit.controls.update()
+    }
+
     // Getter for container
     getContainer = () => {
         return this._.container

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "lithosphere",`
`3`		`- "version": "1.4.0",`
	`3`	`+ "version": "1.4.1",`
`4`	`4`	`"description": "LithoSphere is a GIS JavaScript library for building 3D tile-based globes in the web browser.",`
`5`	`5`	`"author": "Tariq Soliman",`
`6`	`6`	`"license": "Apache-2.0",`