@openglobus/og 0.15.4 → 0.16.0

package/src/og/layer/GeoImage.js

@@ -6,6 +6,7 @@
 
 import { nextHighestPowerOfTwo } from "../math.js";
 import { BaseGeoImage } from "./BaseGeoImage.js";
+import { isImageLoaded } from "../utils/shared.js";
 
 /**
  * Used to load and display a single image over specific corner coordinates on the globe, implements og.layer.BaseGeoImage interface.
@@ -48,6 +49,11 @@ class GeoImage extends BaseGeoImage {
         this._planet && this._planet._geoImageCreator.remove(this);
         this._src = src;
         this._sourceReady = false;
+        this._sourceCreated = false;
+        this._image = new Image();
+        this._onLoad_ = this._onLoad.bind(this);
+        this._image.addEventListener("load", this._onLoad_);
+        this._image.src = src;
     }
 
     /**
@@ -57,9 +63,16 @@ class GeoImage extends BaseGeoImage {
      */
     setImage(image) {
         this._planet && this._planet._geoImageCreator.remove(this);
+        this._sourceCreated = false;
+        this._sourceReady = false;
         this._image = image;
         this._src = image.src;
-        this._sourceReady = false;
+        if (isImageLoaded(this._image)) {
+            this._applyImage(this._image);
+        } else {
+            this._onLoad_ = this._onLoad.bind(this);
+            this._image.addEventListener("load", this._onLoad_);
+        }
     }
 
     /**
@@ -76,15 +89,28 @@ class GeoImage extends BaseGeoImage {
 
     /**
      * @private
-     * @param {Image} img
+     * @param {Image} [img]
+     */
+    _onLoad() {
+        this._applyImage(this._image);
+        this._image.removeEventListener("load", this._onLoad_);
+        this._onLoad_ = undefined;
+    }
+
+    /**
+     * @private
+     * @param {Image} [img]
      */
-    _onLoad(img) {
-        this._frameWidth = nextHighestPowerOfTwo(img.width * 2, 4096);
-        this._frameHeight = nextHighestPowerOfTwo(img.height * 3, 4096);
-        this._sourceReady = true;
-        this._planet._geoImageCreator.add(this);
+    _applyImage(img) {
+        if (img) {
+            this._frameWidth = nextHighestPowerOfTwo(img.width * 2, 4096);
+            this._frameHeight = nextHighestPowerOfTwo(img.height * 3, 4096);
+            this._sourceReady = true;
+            this._planet._geoImageCreator.add(this);
+        }
     }
 
+
     /**
      * Loads planet segment material. In this case - GeoImage source image.
      * @virtual
@@ -96,20 +122,16 @@ class GeoImage extends BaseGeoImage {
         this._creationProceeding = true;
         if (!this._sourceReady && this._src) {
             if (this._image) {
-                if (this._image.complete) {
-                    this._onLoad(this._image);
-                } else if (this._image.src) {
-                    let that = this;
-                    this._image.addEventListener("load", function (e) {
-                        that._onLoad(this);
-                    });
+                if (isImageLoaded(this._image)) {
+                    this._applyImage(this._image);
+                } else {
+                    this._onLoad_ = this._onLoad.bind(this);
+                    this._image.addEventListener("load", this._onLoad_);
                 }
             } else {
-                let that = this;
                 this._image = new Image();
-                this._image.addEventListener("load", function (e) {
-                    that._onLoad(this);
-                });
+                this._onLoad_ = this._onLoad.bind(this);
+                this._image.addEventListener("load", this._onLoad_);
                 this._image.src = this._src;
             }
         } else {

package/src/og/layer/Vector.js

@@ -239,7 +239,7 @@ class Vector extends Layer {
      * Adds entity to the layer.
      * @public
      * @param {Entity} entity - Entity.
-     * @param {boolean} [rightNow] - Entity insertion option. False is deafult.
+     * @param {boolean} [rightNow] - Entity insertion option. False is default.
      * @returns {layer.Vector} - Returns this layer.
      */
     add(entity, rightNow) {
@@ -258,7 +258,7 @@ class Vector extends Layer {
      * @public
      * @param {Entity} entity - Entity.
      * @param {Number} index - Index position.
-     * @param {boolean} [rightNow] - Entity insertion option. False is deafult.
+     * @param {boolean} [rightNow] - Entity insertion option. False is default.
      * @returns {layer.Vector} - Returns this layer.
      */
     insert(entity, index, rightNow) {
@@ -336,7 +336,7 @@ class Vector extends Layer {
      * Adds entity array to the layer.
      * @public
      * @param {Array.<Entity>} entities - Entities array.
-     * @param {boolean} [rightNow] - Entity insertion option. False is deafult.
+     * @param {boolean} [rightNow] - Entity insertion option. False is default.
      * @returns {layer.Vector} - Returns this layer.
      */
     addEntities(entities, rightNow) {
@@ -757,12 +757,13 @@ class Vector extends Layer {
                                 if (seg._extent.isInside(ll)) {
                                     let cart = p._path3v[c_j][c_j_h];
                                     seg.getTerrainPoint(cart, ll, res);
-                                    p.setPoint3v(
-                                        res.addA(res.normal().scale((rtg && p.altitude) || 0.0)),
-                                        c_j_h,
-                                        c_j,
-                                        true
-                                    );
+                                    let alt = (rtg && p.altitude) || 0.0;
+                                    if (alt) {
+                                        let n = this._planet.ellipsoid.getSurfaceNormal3v(res);
+                                        p.setPoint3v(res.addA(n.scale(alt)), c_j_h, c_j, true);
+                                    } else {
+                                        p.setPoint3v(res, c_j_h, c_j, true);
+                                    }
                                     break;
                                 }
                             }
@@ -843,7 +844,8 @@ class Vector extends Layer {
 
             // Merc nodes
             this._secondPASS = [];
-            this._entityCollectionsTree.collectRenderCollectionsPASS1(p._visibleNodes, outArr);
+            this._entityCollectionsTree &&
+                this._entityCollectionsTree.collectRenderCollectionsPASS1(p._visibleNodes, outArr);
             var i = this._secondPASS.length;
             while (i--) {
                 this._secondPASS[i].collectRenderCollectionsPASS2(
@@ -855,9 +857,10 @@ class Vector extends Layer {
 
             // North nodes
             this._secondPASS = [];
-            this._entityCollectionsTreeNorth.collectRenderCollectionsPASS1(
-                p._visibleNodesNorth,
-                outArr
+            this._entityCollectionsTreeNorth &&
+                this._entityCollectionsTreeNorth.collectRenderCollectionsPASS1(
+                    p._visibleNodesNorth,
+                    outArr
             );
             i = this._secondPASS.length;
             while (i--) {
@@ -870,10 +873,11 @@ class Vector extends Layer {
 
             // South nodes
             this._secondPASS = [];
-            this._entityCollectionsTreeSouth.collectRenderCollectionsPASS1(
-                p._visibleNodesSouth,
-                outArr
-            );
+            this._entityCollectionsTreeSouth &&
+                this._entityCollectionsTreeSouth.collectRenderCollectionsPASS1(
+                    p._visibleNodesSouth,
+                    outArr
+                );
             i = this._secondPASS.length;
             while (i--) {
                 this._secondPASS[i].collectRenderCollectionsPASS2(

package/src/og/layer/WMS.js

@@ -97,8 +97,8 @@ class WMS extends XYZ {
         extra
 
     ) {
-        return `${url}/wms?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}
-        &SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}&` + extra;
+       return `${url}/?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}&SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}` +
+            (extra ? `&${extra}` : "");
     }
 
     static get_bbox_v1_1_1(extent) {

package/src/og/layer/XYZ.js

@@ -44,7 +44,7 @@ class XYZ extends Layer {
      * @param {string} name - Layer name.
      * @param {*} options
      */
-    constructor(name, options) {
+    constructor(name, options = {}) {
         super(name, options);
 
         this.events.registerNames(EVENT_NAMES);
@@ -316,7 +316,7 @@ class XYZ extends Layer {
     clearMaterial(material) {
         if (material.isReady && material.textureExists) {
             !material.texture.default &&
-                material.segment.handler.gl.deleteTexture(material.texture);
+            material.segment.handler.gl.deleteTexture(material.texture);
             material.texture = null;
 
             if (material.image) {

package/src/og/math.js

@@ -225,7 +225,8 @@ export function step(edge, x) {
  * @returns {number} -
  */
 export function frac(x) {
-    return x - Math.floor(x);
+    const mx = Math.abs(x)
+    return  mx - Math.floor(mx);
 }
 
 /**

package/src/og/quadTree/EPSG4326QuadTreeStrategy.js

@@ -0,0 +1,26 @@
+"use strict";
+import { Extent } from "../Extent.js";
+import { EPSG4326 } from "../proj/EPSG4326.js";
+import { Node } from "../quadTree/Node.js";
+import * as quadTree from "../quadTree/quadTree.js";
+import { SegmentLonLatWgs84 } from "../segment/SegmentLonLatWgs84.js";
+import { QuadTreeStrategy } from "./QuadTreeStrategy.js";
+
+export class EPSG4326QuadTreeStrategy extends QuadTreeStrategy {
+    constructor(options = {}) {
+        super(options);
+        this.name = "EPSG4326";
+        this.projection = EPSG4326;
+    }
+
+    init() {
+        let earthQuadTreeSouth = new Node(SegmentLonLatWgs84, this.planet, quadTree.NW, null, 0, 0,
+            Extent.createFromArray([-180, -90, 0, 90])
+        );
+        let earthQuadTreeWest = new Node(SegmentLonLatWgs84, this.planet, quadTree.NW, null, 0, 0,
+            Extent.createFromArray([0, -90, 180, 90])
+        );
+        this._quadTreeList.push(earthQuadTreeSouth);
+        this._quadTreeList.push(earthQuadTreeWest);
+    }
+}

package/src/og/quadTree/EntityCollectionNode.js

@@ -282,9 +282,15 @@ class EntityCollectionNode {
     }
 
     alignEntityToTheGround(entity, segment) {
-        var res = new Vec3();
+        let res = new Vec3();
         segment.getEntityTerrainPoint(entity, res);
-        entity._setCartesian3vSilent(res.addA(res.normal().scale((Number(this.layer.relativeToGround) && entity._altitude) || 0.0)));
+        let alt = (Number(this.layer.relativeToGround) && entity._altitude) || 0.0;
+        if (alt) {
+            let n = this.layer._planet.ellipsoid.getSurfaceNormal3v(res);
+            entity._setCartesian3vSilent(res.addA(n.scale(alt)));
+        } else {
+            entity._setCartesian3vSilent(res);
+        }
     }
 
     isVisible() {

package/src/og/quadTree/Node.js

@@ -177,26 +177,21 @@ class Node {
         this.neighbors[2] = [];
         this.neighbors[3] = [];
 
-        let seg = this.segment, planet = this.planet;
+        let seg = this.segment,
+            planet = this.planet;
 
         this._cameraInside = false;
 
-        let insideLonLat = null;
-
         // Search a node which the camera is flying over.
         if (!this.parentNode || this.parentNode._cameraInside) {
             let inside;
             if (Math.abs(cam._lonLat.lat) <= MAX_LAT && seg._projection.id === EPSG3857.id) {
                 inside = seg._extent.isInside(cam._lonLatMerc);
-                insideLonLat = cam._lonLatMerc;
             } else if (seg._projection.id === EPSG4326.id) {
                 inside = seg._extent.isInside(cam._lonLat);
-                insideLonLat = cam._lonLat;
             }
 
             if (inside) {
-                cam._insideSegmentPosition.lon = insideLonLat.lon;
-                cam._insideSegmentPosition.lat = insideLonLat.lat;
                 cam._insideSegment = seg;
                 this._cameraInside = true;
             }
@@ -247,7 +242,7 @@ class Node {
                 seg._collectVisibleNodes();
             }
 
-            if (seg.tileZoom < 2 && seg.normalMapReady) {
+            if (seg.tileZoom < 2) {
                 this.traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading);
             } else if (seg.terrainReady && (!maxZoom && cam.projectedSize(seg.bsphere.center, seg._plainRadius) < planet._lodSize || maxZoom && ((seg.tileZoom === maxZoom) || !altVis))) {
 
@@ -285,7 +280,7 @@ class Node {
     }
 
     renderNode(inFrustum, onlyTerrain, terrainReadySegment, stopLoading) {
-        var seg = this.segment;
+        let seg = this.segment;
 
         // Create and load terrain data
         if (!seg.terrainReady) {
@@ -305,7 +300,7 @@ class Node {
         }
 
         // Create normal map texture
-        if (seg.planet.lightEnabled && !seg.normalMapReady /*&& !seg.parentNormalMapReady*/) {
+        if (seg.planet.lightEnabled && !seg.normalMapReady) {
             this.whileNormalMapCreating();
         }
 
@@ -487,36 +482,28 @@ class Node {
     }
 
     whileNormalMapCreating() {
-        var seg = this.segment;
-        var maxZ = this.planet.terrain.maxZoom;
 
-        if (seg.tileZoom <= maxZ && !seg.terrainIsLoading && seg.terrainReady && !seg._inTheQueue) {
+        let seg = this.segment;
+
+        if (/*seg.tileZoom <= seg.planet.terrain.maxNativeZoom && */!seg.terrainIsLoading && seg.terrainExists && !seg._inTheQueue) {
             seg.planet._normalMapCreator.queue(seg);
         }
 
-        var pn = this;
-
+        let pn = this;
         while (pn.parentNode && !pn.segment.normalMapReady) {
             pn = pn.parentNode;
         }
 
-        var dZ2 = 2 << (seg.tileZoom - pn.segment.tileZoom - 1);
+        let dZ2 = 2 << (seg.tileZoom - pn.segment.tileZoom - 1);
 
         seg.normalMapTexture = pn.segment.normalMapTexture;
         seg.normalMapTextureBias[0] = seg.tileX - pn.segment.tileX * dZ2;
         seg.normalMapTextureBias[1] = seg.tileY - pn.segment.tileY * dZ2;
         seg.normalMapTextureBias[2] = 1.0 / dZ2;
-
-        if (seg.tileZoom > maxZ) {
-            if (pn.segment.tileZoom === maxZ) {
-                seg.parentNormalMapReady = true;
-            }
-        }
     }
 
     whileTerrainLoading(terrainReadySegment, stopLoading) {
         const seg = this.segment;
-        const terrain = this.planet.terrain;
 
         let pn = this;
 
@@ -529,18 +516,23 @@ class Node {
         }
 
         if (pn.segment.terrainReady && this.appliedTerrainNodeId !== pn.nodeId) {
-            let dZ2 = 2 << (seg.tileZoom - pn.segment.tileZoom - 1), offsetX = seg.tileX - pn.segment.tileX * dZ2,
+            let dZ2 = 2 << (seg.tileZoom - pn.segment.tileZoom - 1),
+                offsetX = seg.tileX - pn.segment.tileX * dZ2,
                 offsetY = seg.tileY - pn.segment.tileY * dZ2;
 
             let pseg = pn.segment;
 
-            let tempVertices, tempVerticesHigh, tempVerticesLow, noDataVertices;
+            let tempVertices,
+                tempVerticesHigh,
+                tempVerticesLow,
+                noDataVertices;
 
             this.appliedTerrainNodeId = pn.nodeId;
             this.equalizedSideWithNodeId[N] = this.equalizedSideWithNodeId[E] = this.equalizedSideWithNodeId[S] = this.equalizedSideWithNodeId[W] = this.appliedTerrainNodeId;
 
 
-            let gridSize = pn.segment.gridSize / dZ2, gridSizeExt = pn.segment.fileGridSize / dZ2;
+            let gridSize = pn.segment.gridSize / dZ2,
+                gridSizeExt = pn.segment.fileGridSize / dZ2;
 
             BOUNDS.xmin = MAX;
             BOUNDS.xmax = MIN;
@@ -562,7 +554,7 @@ class Node {
                 }
 
                 getMatrixSubArrayBoundsExt(pseg.terrainVertices, pseg.terrainVerticesHigh, pseg.terrainVerticesLow, pseg.noDataVertices, pseg.gridSize, gridSize * offsetY, gridSize * offsetX, gridSize, tempVertices, tempVerticesHigh, tempVerticesLow, BOUNDS, noDataVertices);
-            } else if (gridSizeExt >= 1) {
+            } else if (gridSizeExt >= 1 && pn.segment.terrainExists) {
                 seg.gridSize = gridSizeExt;
 
                 let len = (gridSizeExt + 1) * (gridSizeExt + 1) * 3;
@@ -658,9 +650,9 @@ class Node {
 
             seg.setBoundingVolume(BOUNDS.xmin, BOUNDS.ymin, BOUNDS.zmin, BOUNDS.xmax, BOUNDS.ymax, BOUNDS.zmax);
 
-            if (seg.tileZoom > terrain.maxZoom) {
-                if (pn.segment.tileZoom >= terrain.maxZoom) {
-                    //TODO: find better place for this
+            if (seg.tileZoom > seg.planet.terrain.maxZoom) {
+                if (pn.segment.tileZoom >= seg.planet.terrain.maxZoom) {
+
                     seg._plainRadius = pn.segment._plainRadius / dZ2;
 
                     seg.terrainReady = true;
@@ -670,11 +662,12 @@ class Node {
                     seg.terrainVerticesHigh = tempVerticesHigh;
                     seg.terrainVerticesLow = tempVerticesLow;
 
+                    seg.passReady = true;
+
                     this.appliedTerrainNodeId = this.nodeId;
                     this.equalizedSideWithNodeId[N] = this.equalizedSideWithNodeId[E] = this.equalizedSideWithNodeId[S] = this.equalizedSideWithNodeId[W] = this.appliedTerrainNodeId;
 
                     if (pn.segment.terrainExists) {
-                        seg.terrainExists = true;
                         seg.normalMapVertices = tempVertices;
                         seg.fileGridSize = Math.sqrt(tempVertices.length / 3) - 1;
 
@@ -687,26 +680,27 @@ class Node {
                             seg.normalMapNormals = pseg.normalMapNormals;
                         }
                     }
-                } else {
-                    pn = this;
-                    while (pn.parentNode && pn.segment.tileZoom !== terrain.maxZoom) {
-                        pn = pn.parentNode;
-                    }
-
-                    let pns = pn.segment;
-
-                    if (!pns.initialized) {
-                        pns.initialize();
-                    }
-
-                    if (!pns.plainProcessing) {
-                        pn.segment.createPlainSegmentAsync();
-                    }
-
-                    if (pns.plainReady && !stopLoading) {
-                        pns.loadTerrain(true);
-                    }
                 }
+                // else {
+                //     pn = this;
+                //     while (pn.parentNode && pn.segment.tileZoom !== seg.planet.terrain.maxZoom) {
+                //         pn = pn.parentNode;
+                //     }
+                //
+                //     let pns = pn.segment;
+                //
+                //     if (!pns.initialized) {
+                //         pns.initialize();
+                //     }
+                //
+                //     if (!pns.plainProcessing) {
+                //         pn.segment.createPlainSegmentAsync();
+                //     }
+                //
+                //     if (pns.plainReady && !stopLoading) {
+                //         pns.loadTerrain(true);
+                //     }
+                // }
             }
         }
     }

package/src/og/quadTree/index.js

@@ -1,9 +1,11 @@
 import { EarthQuadTreeStrategy } from "./EarthQuadTreeStrategy.js";
 import { MarsQuadTreeStrategy } from "./MarsQuadTreeStrategy.js";
+import { EPSG4326QuadTreeStrategy } from "./EPSG4326QuadTreeStrategy.js";
 import { QuadTreeStrategy } from "./QuadTreeStrategy.js";
 import { Wgs84QuadTreeStrategy } from "./Wgs84QuadTreeStrategy.js";
 
 const quadTreeStrategyType = {
+    epsg4326: EPSG4326QuadTreeStrategy,
     earth: EarthQuadTreeStrategy,
     mars: MarsQuadTreeStrategy,
     wgs84: Wgs84QuadTreeStrategy

package/src/og/renderer/Renderer.js

@@ -24,6 +24,8 @@ let __depthCallbackCounter__ = 0;
 
 let __distanceCallbackCounter__ = 0;
 
+const MSAA_DEFAULT = 0;
+
 /**
  * Represents high level WebGL context interface that starts WebGL handler working in real time.
  * @class
@@ -177,7 +179,13 @@ class Renderer {
         this.depthFramebuffer = null;
 
         let urlParams = new URLSearchParams(location.search);
-        this._msaa = Number(urlParams.get('og_msaa') || params.msaa || 4);
+        let msaaParam = urlParams.get('og_msaa');
+        if (msaaParam) {
+            this._msaa = Number(urlParams.get('og_msaa'));
+        } else {
+            this._msaa = params.msaa != undefined ? params.msaa : MSAA_DEFAULT;
+        }
+
         this._internalFormat = "RGBA16F";
         this._format = "RGBA";
         this._type = "FLOAT";
@@ -783,6 +791,7 @@ class Renderer {
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
+
         while (k--) {
             this.activeCamera.setCurrentFrustum(k);
             gl.clear(gl.DEPTH_BUFFER_BIT);
@@ -796,6 +805,10 @@ class Renderer {
 
             i = rn.length;
             while (i--) {
+                gl.enable(gl.BLEND);
+                gl.blendEquation(gl.FUNC_ADD);
+                gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
+
                 rn[i].drawNode();
             }
 

package/src/og/scene/Planet.js

@@ -354,7 +354,7 @@ export class Planet extends RenderNode {
          */
         this._useSpecularTexture = isUndef(options.useSpecularTexture) ? true : options.useSpecularTexture;
 
-        this._maxGridSize = Math.log2(options.maxGridSize || 128);
+        this._maxGridSize = Math.log2(options.maxGridSize || 256);
 
         /**
          * Segment multiple textures size.(4 - convinient value for the most devices)
@@ -1142,7 +1142,14 @@ export class Planet extends RenderNode {
         }
 
         if (this.camera.isFirstPass) {
+            this.camera.update();
             this._firstPASS();
+            this.camera.checkTerrainCollision();
+            this.camera.update();
+
+            // Here is the planet node dispatches a draw event before
+            // rendering begins and we have got render nodes.
+            this.events.dispatch(this.events.draw, this);
         }
 
         this.drawEntityCollections(this._frustumEntityCollections);
@@ -1196,10 +1203,6 @@ export class Planet extends RenderNode {
         }
         this._skipPreRender = true;
 
-        // Here is the planet node dispatches a draw event before
-        // rendering begins and we have got render nodes.
-        this.events.dispatch(this.events.draw, this);
-
         this.transformLights();
 
         this._normalMapCreator.frame();
@@ -1228,7 +1231,7 @@ export class Planet extends RenderNode {
 
         gl.enable(gl.BLEND);
         gl.blendEquation(gl.FUNC_ADD);
-        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
         if (this.lightEnabled) {
             h.programs.drawnode_screen_wl.activate();
@@ -1338,7 +1341,7 @@ export class Planet extends RenderNode {
 
         gl.enable(gl.BLEND);
         gl.blendEquation(gl.FUNC_ADD);
-        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
 
         if (this.lightEnabled) {
             h.programs.drawnode_screen_wl.activate();
@@ -1546,7 +1549,8 @@ export class Planet extends RenderNode {
         gl.uniform3fv(shu.frustumPickingColor, cam.frustum._pickingColorU);
 
         // drawing planet nodes
-        var rn = this._renderedNodesInFrustum[cam.getCurrentFrustum()], sl = this._visibleTileLayerSlices;
+        let rn = this._renderedNodesInFrustum[cam.getCurrentFrustum()],
+            sl = this._visibleTileLayerSlices;
 
         let i = rn.length;
         while (i--) {

package/src/og/scene/index.js

@@ -1,5 +1,5 @@
-import { Axes } from "./Axes";
-import { Planet } from "./Planet";
-import { SkyBox } from "./SkyBox";
+import { Axes } from "./Axes.js";
+import { Planet } from "./Planet.js";
+import { SkyBox } from "./SkyBox.js";
 
 export { Planet, Axes, SkyBox };