@openglobus/og 0.19.4 → 0.20.1

package/lib/js/Extent.js

@@ -74,8 +74,8 @@ export class Extent {
      * @returns {Extent} -
      */
     static fromTile(x, y, z, width = mercator.POLE_DOUBLE, height = mercator.POLE_DOUBLE) {
-        const H = Math.pow(2, z);
-        const W = Math.pow(2, z);
+        const H = 1 << z; //Math.pow(2, z);
+        const W = H; //Math.pow(2, z);
         const lnSize = width / W;
         const ltSize = height / H;
         const left = -width * 0.5 + x * lnSize, top = height * 0.5 - y * ltSize, bottom = top - ltSize, right = left + lnSize;

package/lib/js/Globe.d.ts

@@ -9,7 +9,7 @@ import { Sun } from "./control/Sun";
 import { HTMLDivElementExt, Renderer } from "./renderer/Renderer";
 import { RenderNode } from "./scene/RenderNode";
 import { Extent } from "./Extent";
-interface IGlobeParams {
+export interface IGlobeParams {
     attributionContainer?: HTMLElement;
     target?: string | HTMLElement;
     skybox?: RenderNode;

package/lib/js/Object3d.d.ts

@@ -47,7 +47,14 @@ declare class Object3d {
      * @param horizontalAngle
      * @param verticalAngle
      */
-    static getFrustumScaleByCameraParams(length: number, horizontalAngle: number, verticalAngle: number): Vec3;
+    static getFrustumScaleByCameraAngles(length: number, horizontalAngle: number, verticalAngle: number): Vec3;
+    /**
+     * Returns scale parameters for a frustum geoObject created with only Object3d.createFrustum();
+     * @param length
+     * @param horizontalAngle
+     * @param aspectRatio
+     */
+    static getFrustumScaleByCameraAspectRatio(length: number, horizontalAngle: number, aspectRatio: number): Vec3;
     static createFrustum(length?: number, width?: number, height?: number, xOffset?: number, yOffset?: number, zOffset?: number): Object3d;
     static createCylinder(radiusTop?: number, radiusBottom?: number, height?: number, radialSegments?: number, heightSegments?: number, isTop?: boolean, isBottom?: boolean, offsetX?: number, offsetY?: number, offsetZ?: number): Object3d;
     static createCube(length?: number, height?: number, depth?: number, xOffset?: number, yOffset?: number, zOffset?: number): Object3d;

package/lib/js/Object3d.js

@@ -1,6 +1,6 @@
 import { htmlColorToFloat32Array } from './utils/shared';
 import { Vec3 } from './math/Vec3';
-import { MAX, MIN, RADIANS_HALF } from './math';
+import { DEGREES_DOUBLE, MAX, MIN, RADIANS_HALF } from './math';
 import { transformLeftToRightCoordinateSystem, objParser } from "./utils/objParser";
 function getColor(color) {
     if (color instanceof Array) {
@@ -225,9 +225,19 @@ class Object3d {
      * @param horizontalAngle
      * @param verticalAngle
      */
-    static getFrustumScaleByCameraParams(length, horizontalAngle, verticalAngle) {
+    static getFrustumScaleByCameraAngles(length, horizontalAngle, verticalAngle) {
         return new Vec3(2.0 * length * Math.tan(RADIANS_HALF * horizontalAngle), 2.0 * length * Math.tan(RADIANS_HALF * verticalAngle), length);
     }
+    /**
+     * Returns scale parameters for a frustum geoObject created with only Object3d.createFrustum();
+     * @param length
+     * @param horizontalAngle
+     * @param aspectRatio
+     */
+    static getFrustumScaleByCameraAspectRatio(length, horizontalAngle, aspectRatio) {
+        let vAngle = DEGREES_DOUBLE * Math.atan(Math.tan(RADIANS_HALF * horizontalAngle) / aspectRatio);
+        return Object3d.getFrustumScaleByCameraAngles(length, horizontalAngle, vAngle);
+    }
     static createFrustum(length = 1, width = 1, height = 1, xOffset = 0, yOffset = 0, zOffset = 0) {
         width *= 0.5;
         height *= 0.5;

package/lib/js/camera/Frustum.d.ts

@@ -87,7 +87,7 @@ declare class Frustum {
      * Sets up camera projection matrix.
      * @public
      * @param {number} angle - Camera's view angle.
-     * @param {number} aspect - Screen aspect ration.
+     * @param {number} aspect - Screen aspect ratio.
      * @param {number} near - Near camera distance.
      * @param {number} far - Far camera distance.
      */

package/lib/js/camera/Frustum.js

@@ -1,4 +1,5 @@
 import { Mat4 } from "../math/Mat4";
+import { RADIANS_HALF } from "../math";
 function planeNormalize(plane) {
     let t = 1.0 / Math.sqrt(plane[0] * plane[0] + plane[1] * plane[1] + plane[2] * plane[2]);
     plane[0] *= t;
@@ -59,12 +60,12 @@ class Frustum {
      * Sets up camera projection matrix.
      * @public
      * @param {number} angle - Camera's view angle.
-     * @param {number} aspect - Screen aspect ration.
+     * @param {number} aspect - Screen aspect ratio.
      * @param {number} near - Near camera distance.
      * @param {number} far - Far camera distance.
      */
     setProjectionMatrix(angle, aspect, near, far) {
-        this.top = near * Math.tan((angle * Math.PI) / 360);
+        this.top = near * Math.tan(angle * RADIANS_HALF);
         this.bottom = -this.top;
         this.right = this.top * aspect;
         this.left = -this.right;

package/lib/js/control/DebugInfo.js

@@ -96,27 +96,28 @@ export class DebugInfo extends Control {
                 ctx.strokeStyle = 'black';
                 ctx.stroke();
                 let size;
-                if (material.segment.isPole) {
-                    let ext = material.segment.getExtentLonLat();
-                    ctx.fillStyle = 'black';
-                    ctx.font = 'normal ' + 29 + 'px Verdana';
-                    ctx.textAlign = 'center';
-                    ctx.fillText(`${ext.northEast.lon.toFixed(3)} ${ext.northEast.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 + 20);
-                    ctx.fillText(`${ext.southWest.lon.toFixed(3)} ${ext.southWest.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 - 20);
+                // if (material.segment.isPole) {
+                //     let ext = material.segment.getExtentLonLat();
+                //
+                //     ctx.fillStyle = 'black';
+                //     ctx.font = 'normal ' + 29 + 'px Verdana';
+                //
+                //     ctx.textAlign = 'center';
+                //     ctx.fillText(`${ext.northEast.lon.toFixed(3)} ${ext.northEast.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 + 20);
+                //     ctx.fillText(`${ext.southWest.lon.toFixed(3)} ${ext.southWest.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 - 20);
+                // } else {
+                //Draw text
+                if (material.segment.tileZoom > 14) {
+                    size = "26";
                 }
                 else {
-                    //Draw text
-                    if (material.segment.tileZoom > 14) {
-                        size = "26";
-                    }
-                    else {
-                        size = "32";
-                    }
-                    ctx.fillStyle = 'black';
-                    ctx.font = 'normal ' + size + 'px Verdana';
-                    ctx.textAlign = 'center';
-                    ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
+                    size = "32";
                 }
+                ctx.fillStyle = 'black';
+                ctx.font = 'normal ' + size + 'px Verdana';
+                ctx.textAlign = 'center';
+                ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
+                //}
                 //Draw canvas tile
                 applyCanvas(cnv);
             }

package/lib/js/control/Lighting.d.ts

@@ -4,6 +4,7 @@ import { Layer } from "../layer/Layer";
 import { Slider } from "../ui/Slider";
 import { ToggleButton } from "../ui/ToggleButton";
 import { View } from '../ui/View';
+import { Color } from "../ui/Color";
 interface ILightingParams extends IControlParams {
 }
 /**
@@ -16,6 +17,8 @@ export declare class Lighting extends Control {
     protected _panel: View<null>;
     protected _atmosphereMaxOpacity: Slider;
     protected _atmosphereMinOpacity: Slider;
+    protected _simpleSkyBackgroundColorOne: Color;
+    protected _simpleSkyBackgroundColorTwo: Color;
     protected _gamma: Slider;
     protected _exposure: Slider;
     protected _night: Slider;
@@ -38,6 +41,7 @@ export declare class Lighting extends Control {
     $ambient: HTMLElement | null;
     $specular: HTMLElement | null;
     $atmosphereOpacity: HTMLElement | null;
+    $simpleSkyBackground: HTMLElement | null;
     constructor(options?: ILightingParams);
     bindLayer(layer: Layer): void;
     oninit(): void;

package/lib/js/control/Lighting.js

@@ -3,6 +3,7 @@ import { Dialog } from '../ui/Dialog';
 import { Slider } from "../ui/Slider";
 import { ToggleButton } from "../ui/ToggleButton";
 import { View } from '../ui/View';
+import { Color } from "../ui/Color";
 const SUN_STOP_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 70.41" style="enable-background:new 0 0 122.88 70.41" xml:space="preserve"><g><path d="M60.91,19.12c6.95,0,13.24,2.95,17.8,7.72c4.55,4.77,7.37,11.37,7.37,18.64c0,1.94-0.2,3.83-0.58,5.65h31.61 c2.1,0,2.62,1.16,2.62,2.59c0,1.43-0.52,2.59-2.62,2.59H7.09c-2.1,0-2.62-1.16-2.62-2.59c0-1.43,0.52-2.59,2.62-2.59h29.23 c-0.38-1.82-0.58-3.71-0.58-5.65c0-7.28,2.82-13.87,7.37-18.64C47.67,22.08,53.96,19.12,60.91,19.12L60.91,19.12L60.91,19.12z M63.4,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h56.86c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59H63.4 L63.4,70.41z M2.62,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h29.51c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59 H2.62L2.62,70.41z M38.39,9.46c-0.78-1.35-0.32-3.07,1.03-3.85c1.35-0.78,3.07-0.32,3.85,1.03l3.62,6.27 c0.78,1.35,0.32,3.07-1.03,3.85c-1.35,0.78-3.07,0.32-3.85-1.03L38.39,9.46L38.39,9.46L38.39,9.46z M58.67,2.83 c0-1.56,1.27-2.83,2.83-2.83c1.56,0,2.83,1.27,2.83,2.83v7.24c0,1.56-1.27,2.83-2.83,2.83c-1.56,0-2.83-1.26-2.83-2.83V2.83 L58.67,2.83L58.67,2.83z M79.56,7.23c0.77-1.35,2.49-1.81,3.84-1.04c1.35,0.77,1.81,2.49,1.04,3.84l-3.62,6.27 c-0.77,1.35-2.49,1.81-3.84,1.04c-1.35-0.77-1.81-2.49-1.04-3.84L79.56,7.23L79.56,7.23L79.56,7.23z M95.45,21.48 c1.35-0.78,3.07-0.32,3.85,1.03c0.78,1.35,0.32,3.07-1.03,3.85L92,29.98c-1.35,0.78-3.07,0.32-3.85-1.03 c-0.78-1.35-0.32-3.07,1.03-3.85L95.45,21.48L95.45,21.48L95.45,21.48z M102.08,41.76c1.56,0,2.83,1.27,2.83,2.83 c0,1.56-1.27,2.83-2.83,2.83h-7.24c-1.56,0-2.83-1.26-2.83-2.83s1.26-2.83,2.83-2.83H102.08L102.08,41.76L102.08,41.76z M19.74,46.25c-1.56,0-2.83-1.27-2.83-2.83c0-1.56,1.27-2.83,2.83-2.83h7.24c1.56,0,2.83,1.26,2.83,2.83s-1.27,2.83-2.83,2.83 H19.74L19.74,46.25L19.74,46.25z M24.14,25.35c-1.35-0.77-1.81-2.49-1.04-3.84c0.77-1.35,2.49-1.81,3.84-1.04l6.27,3.62 c1.35,0.77,1.81,2.49,1.04,3.84c-0.77,1.35-2.49,1.81-3.84,1.04L24.14,25.35L24.14,25.35L24.14,25.35z"/></g></svg>`;
 const SUN_ACTIVE_SVG_ICON = `<?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
@@ -36,6 +37,9 @@ const TEMPLATE = `<div class="og-lighing">
          <div class="og-option og-atmosphere-opacity">
          </div>
          
+         <div class="og-option og-simpleskybackground">
+         </div>
+         
         <div class="og-lighting-emptyline"></div>
 
          <div class="og-option og-gamma"></div>         
@@ -118,6 +122,7 @@ export class Lighting extends Control {
         this.$ambient = null;
         this.$specular = null;
         this.$atmosphereOpacity = null;
+        this.$simpleSkyBackground = null;
         this._atmosphereMaxOpacity = new Slider({
             label: "Max.opacity",
             max: 5
@@ -126,6 +131,12 @@ export class Lighting extends Control {
             label: "Min.opacity",
             max: 5
         });
+        this._simpleSkyBackgroundColorOne = new Color({
+            label: "Color One"
+        });
+        this._simpleSkyBackgroundColorTwo = new Color({
+            label: "Color Two"
+        });
         this._gamma = new Slider({
             label: "Gamma",
             max: 5
@@ -203,6 +214,7 @@ export class Lighting extends Control {
         this._panel.appendTo(this._dialog.container);
         if (this._panel.el) {
             this.$atmosphereOpacity = this._panel.el.querySelector(".og-atmosphere-opacity");
+            this.$simpleSkyBackground = this._panel.el.querySelector(".og-simpleskybackground");
             this.$gamma = this._panel.el.querySelector(".og-option.og-gamma");
             this.$exposure = this._panel.el.querySelector(".og-option.og-exposure");
             this.$opacity = this._panel.el.querySelector(".og-option.og-opacity");
@@ -266,21 +278,27 @@ export class Lighting extends Control {
         atmosphereEnabledBtn.appendTo($suncontrol);
         if (this.planet.atmosphereEnabled) {
             this.$atmosphereOpacity.style.display = "block";
+            this.$simpleSkyBackground.style.display = "none";
         }
         else {
             this.$atmosphereOpacity.style.display = "none";
+            this.$simpleSkyBackground.style.display = "flex";
         }
         atmosphereEnabledBtn.events.on("change", (isActive) => {
             this.planet.atmosphereEnabled = isActive;
             if (this.planet.atmosphereEnabled) {
                 this.$atmosphereOpacity.style.display = "block";
+                this.$simpleSkyBackground.style.display = "none";
             }
             else {
                 this.$atmosphereOpacity.style.display = "none";
+                this.$simpleSkyBackground.style.display = "flex";
             }
         });
         this._atmosphereMaxOpacity.appendTo(this.$atmosphereOpacity);
         this._atmosphereMinOpacity.appendTo(this.$atmosphereOpacity);
+        this._simpleSkyBackgroundColorOne.appendTo(this.$simpleSkyBackground);
+        this._simpleSkyBackgroundColorTwo.appendTo(this.$simpleSkyBackground);
         this._gamma.appendTo(this.$gamma);
         this._exposure.appendTo(this.$exposure);
         this._night.appendTo(this.$night);
@@ -295,19 +313,23 @@ export class Lighting extends Control {
         this._specular_g.appendTo(this.$specular);
         this._specular_b.appendTo(this.$specular);
         this._shininess.appendTo(this.$specular);
-        this._atmosphereMinOpacity.value = this.planet.atmosphereMinOpacity;
-        this._atmosphereMinOpacity.events.on("change", (val) => {
-            this.planet.atmosphereMinOpacity = val;
-        });
+        //
+        // Screen options
+        //
         this._gamma.value = this.planet.renderer.gamma;
         this._gamma.events.on("change", (val) => {
             this.planet.renderer.gamma = val;
         });
-        this._panel.el.querySelector("#layers").addEventListener("change", (e) => {
-            const l = this.planet.getLayerByName(e.target.value);
-            if (l) {
-                this.bindLayer(l);
-            }
+        this._exposure.value = this.planet.renderer.exposure;
+        this._exposure.events.on("change", (val) => {
+            this.planet.renderer.exposure = val;
+        });
+        //
+        // Atmosphere parameters
+        //
+        this._atmosphereMinOpacity.value = this.planet.atmosphereMinOpacity;
+        this._atmosphereMinOpacity.events.on("change", (val) => {
+            this.planet.atmosphereMinOpacity = val;
         });
         this._atmosphereMaxOpacity.value = this.planet.atmosphereMaxOpacity;
         this._atmosphereMaxOpacity.events.on("change", (val) => {
@@ -315,9 +337,26 @@ export class Lighting extends Control {
             let atmos = this.planet.renderer.controls.Atmosphere;
             atmos.opacity = val;
         });
-        this._exposure.value = this.planet.renderer.exposure;
-        this._exposure.events.on("change", (val) => {
-            this.planet.renderer.exposure = val;
+        //
+        // Simple Sky Background parameters
+        //
+        let simpleSkyBackgroundControl = this.planet.renderer.controls.SimpleSkyBackground;
+        this._simpleSkyBackgroundColorOne.value = simpleSkyBackgroundControl.colorOne;
+        this._simpleSkyBackgroundColorOne.events.on("input", (val) => {
+            simpleSkyBackgroundControl.colorOne = val;
+        });
+        this._simpleSkyBackgroundColorTwo.value = simpleSkyBackgroundControl.colorTwo;
+        this._simpleSkyBackgroundColorTwo.events.on("input", (val) => {
+            simpleSkyBackgroundControl.colorTwo = val;
+        });
+        //
+        // Planet options
+        //
+        this._panel.el.querySelector("#layers").addEventListener("change", (e) => {
+            const l = this.planet.getLayerByName(e.target.value);
+            if (l) {
+                this.bindLayer(l);
+            }
         });
         this._night.events.on("change", (val) => {
             if (this._selectedLayer) {

package/lib/js/control/SimpleSkyBackground.d.ts

@@ -5,6 +5,8 @@ export declare class SimpleSkyBackground extends Control {
     protected _colorOne: Float32Array;
     protected _colorTwo: Float32Array;
     constructor(options?: ISimpleSkyBackgroundParams);
+    get colorOne(): string;
+    get colorTwo(): string;
     set colorOne(htmlColor: string);
     set colorTwo(htmlColor: string);
     oninit(): void;

package/lib/js/control/SimpleSkyBackground.js

@@ -1,5 +1,5 @@
 import { Control } from "./Control";
-import { htmlColorToRgb } from "../utils/shared";
+import { htmlColorToRgb, rgbToStringHTML } from "../utils/shared";
 import { Program } from '../webgl/Program';
 export class SimpleSkyBackground extends Control {
     constructor(options = {}) {
@@ -7,8 +7,18 @@ export class SimpleSkyBackground extends Control {
             name: "SimpleSkyBackground",
             ...options
         });
-        this._colorOne = new Float32Array([1.0, 1.0, 1.0]);
-        this._colorTwo = new Float32Array([0.0, 153.0 / 255.0, 221.0 / 255.0]);
+        this._colorOne = new Float32Array([128 / 255, 223 / 255, 255 / 255]);
+        this._colorTwo = new Float32Array([10 / 255, 15 / 255, 56 / 255]);
+    }
+    get colorOne() {
+        let c = this._colorOne;
+        let arr = [Math.round(c[0] * 255), Math.round(c[1] * 255), Math.round(c[2] * 255)];
+        return rgbToStringHTML(arr);
+    }
+    get colorTwo() {
+        let c = this._colorTwo;
+        let arr = [Math.round(c[0] * 255), Math.round(c[1] * 255), Math.round(c[2] * 255)];
+        return rgbToStringHTML(arr);
     }
     set colorOne(htmlColor) {
         let rgb = htmlColorToRgb(htmlColor);

package/lib/js/control/drawing/PolygonDrawingScene.js

@@ -39,7 +39,7 @@ class PolygonDrawingScene extends RenderNode {
         super(options.name);
         this._cornerDblClick = false;
         this._onChange = (e) => {
-            if (e.geometryType === "Polygon") {
+            if (e.geometryType === "POLYGON") {
                 let coords = this.getCoordinates();
                 let entity = new Entity({
                     'geometry': {
@@ -179,7 +179,7 @@ class PolygonDrawingScene extends RenderNode {
         this._insertCornerIndex = -1;
     }
     get geometryType() {
-        return "Polygon";
+        return "POLYGON";
     }
     getCoordinates() {
         let corners = this._cornerLayer.getEntities();

package/lib/js/control/visibleExtent/drawnode.js

@@ -54,7 +54,7 @@ export function drawnode_screen_nl() {
                 mat4 viewMatrixRTE = viewMatrix;
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
-                gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
+                gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff * step(1.0, length(highDiff)) + lowDiff, 1.0);
             }`,
         fragmentShader: `precision highp float;
             uniform vec4 tileOffsetArr[5];

package/lib/js/entity/GeoObject.d.ts

@@ -1,12 +1,13 @@
 import { Entity } from "./Entity";
 import { Quat, Vec3, Vec4 } from "../math/index";
-import { InstanceData } from "./GeoObjectHandler";
+import { GeoObjectHandler, InstanceData } from "./GeoObjectHandler";
 import { NumberArray3 } from "../math/Vec3";
 import { NumberArray4 } from "../math/Vec4";
 import { Object3d } from "../Object3d";
-import { GeoObjectHandler } from "./GeoObjectHandler";
 export interface IGeoObjectParams {
-    object3d: Object3d;
+    object3d?: Object3d;
+    objSrc?: string;
+    textureSrc?: string;
     tag?: string;
     position?: Vec3 | NumberArray3;
     pitch?: number;
@@ -14,6 +15,7 @@ export interface IGeoObjectParams {
     roll?: number;
     scale?: number | Vec3;
     color?: Vec4 | NumberArray4 | string;
+    visibility?: boolean;
 }
 /**
  * @class
@@ -58,6 +60,8 @@ declare class GeoObject {
     protected _object3d: Object3d;
     protected _visibility: boolean;
     protected _qNorthFrame: Quat;
+    private _textureSrc?;
+    _objectSrc?: string;
     constructor(options: IGeoObjectParams);
     get tag(): string;
     getPosition(): Vec3;
@@ -118,12 +122,17 @@ declare class GeoObject {
      */
     setPosition3v(position: Vec3): void;
     setYaw(yaw: number): void;
+    setObject(object: Object3d): void;
+    setObjectSrc(src: string): void;
+    setTextureSrc(src: string): void;
+    setColorHTML(color: string): void;
     /**
      *
      * @param {number} pitch - Pitch in radians
      */
     setPitch(pitch: number): void;
     setRoll(roll: number): void;
+    setPitchYawRoll(pitch: number, yaw: number, roll: number): void;
     setScale(scale: number): void;
     setScale3v(scale: Vec3): void;
     getScale(): Vec3;

package/lib/js/entity/GeoObject.js

@@ -1,5 +1,6 @@
 import * as utils from "../utils/shared";
 import { Quat, Vec3 } from "../math/index";
+import { Object3d } from "../Object3d";
 /**
  * @class
  * @param {Object} options -  Geo object parameters:
@@ -28,8 +29,19 @@ class GeoObject {
         this._handlerIndex = -1;
         this._tagData = null;
         this._tagDataIndex = -1;
-        this._object3d = options.object3d;
-        this._visibility = true;
+        let object3d = options.object3d;
+        if ((!options.object3d || options.object3d?.vertices.length === 0)) {
+            object3d = new Object3d();
+        }
+        if (options.objSrc) {
+            this.setObjectSrc(options.objSrc);
+            this._objectSrc = options.objSrc;
+        }
+        this._object3d = object3d;
+        if (options.textureSrc) {
+            this.setTextureSrc(options.textureSrc);
+        }
+        this._visibility = (options.visibility != undefined ? options.visibility : true);
         this._qNorthFrame = new Quat();
     }
     get tag() {
@@ -151,6 +163,21 @@ class GeoObject {
         this._yaw = yaw;
         this.updateDirection();
     }
+    setObject(object) {
+        this._object3d = object;
+    }
+    setObjectSrc(src) {
+        this._objectSrc = src;
+        this._handler && this._handler.setObjectSrc(src, this.tag);
+    }
+    setTextureSrc(src) {
+        this._textureSrc = src;
+        this._object3d && (this._object3d.src = src);
+        this._handler && this._handler.setTextureTag(src, this.tag);
+    }
+    setColorHTML(color) {
+        this.setColor4v(utils.htmlColorToRgba(color));
+    }
     /**
      *
      * @param {number} pitch - Pitch in radians
@@ -163,6 +190,11 @@ class GeoObject {
         this._roll = roll;
         this._handler && this._handler.setPitchRollArr(this._tagData, this._tagDataIndex, this._pitch, roll);
     }
+    setPitchYawRoll(pitch, yaw, roll) {
+        this.setPitch(pitch);
+        this.setYaw(yaw);
+        this.setRoll(roll);
+    }
     setScale(scale) {
         this._scale.x = this._scale.y = this._scale.z = scale;
         this._handler && this._handler.setScaleArr(this._tagData, this._tagDataIndex, this._scale);

package/lib/js/entity/GeoObjectHandler.d.ts

@@ -5,6 +5,7 @@ import { Planet } from "../scene/Planet";
 import { Vec3 } from "../math/Vec3";
 import { Vec4 } from "../math/Vec4";
 import { WebGLBufferExt, WebGLTextureExt } from "../webgl/Handler";
+import { Object3d } from "../Object3d";
 declare class InstanceData {
     isFree: boolean;
     _geoObjectHandler: GeoObjectHandler;
@@ -12,6 +13,7 @@ declare class InstanceData {
     numInstances: number;
     _texture: WebGLTextureExt | null;
     _textureSrc: string | null;
+    _objectSrc?: string;
     _pitchRollArr: number[] | TypedArray;
     _sizeArr: number[] | TypedArray;
     _vertexArr: number[] | TypedArray;
@@ -74,6 +76,9 @@ declare class GeoObjectHandler {
     constructor(entityCollection: EntityCollection);
     initProgram(): void;
     setRenderNode(renderNode: Planet): void;
+    setTextureTag(src: string, tag: string): void;
+    setObjectSrc(src: string, tag: string): void;
+    _updateInstanceData(object: Object3d, tag: string): void;
     protected _addGeoObjectToArray(geoObject: GeoObject): void;
     _displayPASS(): void;
     drawPicking(): void;

package/lib/js/entity/GeoObjectHandler.js

@@ -1,5 +1,6 @@
 import * as shaders from "../shaders/geoObject";
 import { concatArrays, loadImage, makeArrayTyped, spliceArray } from "../utils/shared";
+import { Object3d } from "../Object3d";
 const VERTEX_BUFFER = 0;
 const POSITION_BUFFER = 1;
 const RGBA_BUFFER = 2;
@@ -267,6 +268,51 @@ class GeoObjectHandler {
         }
         this.update();
     }
+    setTextureTag(src, tag) {
+        const tagData = this._instanceDataMap.get(tag);
+        if (tagData) {
+            tagData._textureSrc = src;
+            this._instanceDataMap.set(tag, tagData);
+            this._loadDataTagTexture(tagData);
+        }
+    }
+    setObjectSrc(src, tag) {
+        const tagData = this._instanceDataMap.get(tag);
+        if (src) {
+            if (tagData && tagData._objectSrc !== src) {
+                tagData._objectSrc = src;
+                Object3d.loadObj(src).then((object3d) => {
+                    this._updateInstanceData(object3d[0], tag);
+                });
+            }
+        }
+    }
+    _updateInstanceData(object, tag) {
+        const tagData = this._instanceDataMap.get(tag);
+        if (tagData) {
+            if (object.vertices.length !== tagData._vertexArr.length) {
+                tagData._vertexArr = object.vertices;
+                tagData._changedBuffers[VERTEX_BUFFER] = true;
+                tagData._changedBuffers[DIRECTION_BUFFER] = true;
+            }
+            if (object.normals.length !== tagData._normalsArr.length) {
+                tagData._normalsArr = object.normals;
+                tagData._changedBuffers[NORMALS_BUFFER] = true;
+            }
+            if (object.indices.length !== tagData._indicesArr.length) {
+                tagData._indicesArr = object.indices;
+                tagData._changedBuffers[INDEX_BUFFER] = true;
+            }
+            if (object.texCoords.length !== tagData._texCoordArr.length) {
+                tagData._texCoordArr = object.texCoords;
+                tagData._changedBuffers[TEXCOORD_BUFFER] = true;
+            }
+            tagData._textureSrc = object.src;
+            this._loadDataTagTexture(tagData);
+            this._updateTag(tagData);
+            this._instanceDataMapValues = Array.from(this._instanceDataMap.values());
+        }
+    }
     _addGeoObjectToArray(geoObject) {
         const tag = geoObject.tag;
         let tagData = this._instanceDataMap.get(tag);
@@ -507,6 +553,7 @@ class GeoObjectHandler {
             geoObject.updateDirection();
             geoObject._tagData.refresh();
             this._updateTag(geoObject._tagData);
+            geoObject.setObjectSrc(geoObject._objectSrc);
         }
     }
     remove(geoObject) {

package/lib/js/entity/Geometry.d.ts

@@ -4,7 +4,13 @@ import { GeometryHandler } from "./GeometryHandler";
 import { NumberArray4, Vec4 } from "../math/Vec4";
 import { NumberArray2 } from "../math/Vec2";
 import { NumberArray3 } from "../math/Vec3";
-declare const GeometryType: Record<string, number>;
+export declare enum GeometryTypeEnum {
+    POINT = 1,
+    LINESTRING = 2,
+    POLYGON = 3,
+    MULTIPOLYGON = 4,
+    MULTILINESTRING = 5
+}
 export type CoordinatesType = NumberArray2 | NumberArray3;
 export type IPointCoordinates = CoordinatesType;
 export type ILineStringCoordinates = CoordinatesType[];
@@ -12,11 +18,18 @@ export type IPolygonCoordinates = CoordinatesType[][];
 export type IMultiLineStringCoordinates = ILineStringCoordinates[];
 export type IMultiPolygonCoordinates = IPolygonCoordinates[];
 export type IGeometryCoordinates = IPointCoordinates | IPolygonCoordinates | IMultiPolygonCoordinates | ILineStringCoordinates | IMultiLineStringCoordinates;
-interface IGeometry {
-    type: string;
-    coordinates: IGeometryCoordinates;
+export type GeometryTypeToCoordinates = {
+    POINT: IPointCoordinates;
+    LINESTRING: ILineStringCoordinates;
+    POLYGON: IPolygonCoordinates;
+    MULTIPOLYGON: IMultiPolygonCoordinates;
+    MULTILINESTRING: IMultiLineStringCoordinates;
+};
+interface IGeometry<T extends keyof typeof GeometryTypeEnum = keyof typeof GeometryTypeEnum> {
+    type: T;
+    coordinates: GeometryTypeToCoordinates[T];
 }
-interface IGeometryStyle {
+export interface IGeometryStyle {
     fillColor?: string | NumberArray4 | Vec4;
     lineColor?: string | NumberArray4 | Vec4;
     strokeColor?: string | NumberArray4 | Vec4;
@@ -30,9 +43,9 @@ interface IGeometryStyleInternal {
     lineWidth: number;
     strokeWidth: number;
 }
-export interface IGeometryParams {
-    type?: string;
-    coordinates?: IGeometryCoordinates;
+export interface IGeometryParams<T extends keyof typeof GeometryTypeEnum = keyof typeof GeometryTypeEnum> {
+    type?: T;
+    coordinates?: GeometryTypeToCoordinates[T];
     style?: IGeometryStyle;
     visibility?: boolean;
 }
@@ -65,7 +78,7 @@ declare class Geometry {
     _lineIndexesHandlerIndex: number;
     _lineThicknessHandlerIndex: number;
     _lineColorsHandlerIndex: number;
-    protected _type: number;
+    protected _type: GeometryTypeEnum;
     _coordinates: IGeometryCoordinates;
     protected _extent: Extent;
     _style: IGeometryStyleInternal;
@@ -74,7 +87,7 @@ declare class Geometry {
     constructor(options?: IGeometryParams);
     get id(): number;
     get type(): number;
-    static getType(typeStr: string): number;
+    static getType(typeStr: keyof typeof GeometryTypeEnum): GeometryTypeEnum;
     /**
      * Returns geometry extent.
      @static
@@ -108,4 +121,4 @@ declare class Geometry {
     getExtent(): Extent;
     getType(): number;
 }
-export { Geometry, GeometryType };
+export { Geometry };