Simplest 3D Polygon

This tutorial will show you the basics of creating and positioning a simple 3D polygon.

Simplest 3D Polygon

Simplest 3D Polygon

Add a Vector Layer and Add a 3D Polygon

As with the previous examples, we will first create a base raster layer for ground level tiles (see the Simplest Line Tutorial). Let's skip ahead and add a vector layer with a 3D polygon.

In the Simplest Polygon example, we saw that we could add a polygon with the following code:

 var addPolygon = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // add a polygon
    var dynamicPolygon = new AltusUnified.DynamicPolygon("poly1");
    var dynamicPolygonPoints = [
        new AltusUnified.GeographicPosition2D(20, -112),
        new AltusUnified.GeographicPosition2D(15, -116),
        new AltusUnified.GeographicPosition2D(15, -122),
        new AltusUnified.GeographicPosition2D(20, -126),
        new AltusUnified.GeographicPosition2D(25, -122),
        new AltusUnified.GeographicPosition2D(25, -116),
        new AltusUnified.GeographicPosition2D(20, -112),
    ];
    pushToVector(dynamicPolygon.points(), dynamicPolygonPoints);
    var colors3 = [new AltusUnified.Color(0, 0, 0), new AltusUnified.Color(0, 255, 0), new AltusUnified.Color(0, 0, 255)];
    var polygonStyle = new AltusUnified.PolygonStyle(colors3[0], colors3[1], 0, colors3[2], 0);

    vectorMap.addDynamicPolygon(dynamicPolygon, polygonStyle);

    // You will see the polygon change from black to red in 3 seconds
    polygonStyle.fillColor().r = 255;
    polygonStyle.fillColor().g = 0;
    polygonStyle.fillColor().b = 0;
    vectorMap.updatePolygonStyle(polygonStyle, 3.0);

    deleteElements(dynamicPolygonPoints);
    deleteElements(colors3);
    dynamicPolygon.delete();
    polygonStyle.delete();
  }

Now we will use 3D polygon classes to achieve a polygon of the same shape, but elevated 1,000,000 meters. In the demo, if you pan the sphere around, and you can see the elevation of our new 3D polygon.

 var add3DPolygon = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // add a 3D polygon
    var dynamicPolygon3D = new AltusUnified.DynamicPolygon3D("poly3D1");
    var dynamicPolygon3DPoints = [
        new AltusUnified.GeographicPosition(20, -112, 1000000),
        new AltusUnified.GeographicPosition(15, -116, 1000000),
        new AltusUnified.GeographicPosition(15, -122, 1000000),
        new AltusUnified.GeographicPosition(20, -126, 1000000),
        new AltusUnified.GeographicPosition(25, -122, 1000000),
        new AltusUnified.GeographicPosition(25, -116, 1000000),
        new AltusUnified.GeographicPosition(20, -112, 1000000),
    ];
    pushToVector(dynamicPolygon3D.points(), dynamicPolygon3DPoints);
    var colors3 = [new AltusUnified.Color(255, 255, 0), new AltusUnified.Color(0, 255, 0), new AltusUnified.Color(0, 0, 255)];
    var polygonStyle = new AltusUnified.PolygonStyle(colors3[0], colors3[1], 0, colors3[2], 0);

    vectorMap.addDynamicPolygon3D(dynamicPolygon3D, polygonStyle);

    deleteElements(dynamicPolygon3DPoints);
    deleteElements(colors3);
    dynamicPolygon3D.delete();
    polygonStyle.delete();
  }

Putting it all together

function createSimplest3DPolygonExample() {

  var addBaseMap = function (mapName, url) {

    // setup tile source
    var internetTileProvider = new AltusUnified.InternetTileProvider(mapName, url);

    // create map description
    var mapDesc = AltusUnified.VirtualMap.defaultRasterMapDesc();
    var newMap = new AltusUnified.VirtualMap(mapName, mapDesc, internetTileProvider);

    // add map to scene
    AltusUnified.scene.addMap(newMap);

    newMap.delete();
    mapDesc.delete();
    internetTileProvider.delete();
  };

  /*C2*/
  var addPolygon = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // add a polygon
    var dynamicPolygon = new AltusUnified.DynamicPolygon("poly1");
    var dynamicPolygonPoints = [
        new AltusUnified.GeographicPosition2D(20, -112),
        new AltusUnified.GeographicPosition2D(15, -116),
        new AltusUnified.GeographicPosition2D(15, -122),
        new AltusUnified.GeographicPosition2D(20, -126),
        new AltusUnified.GeographicPosition2D(25, -122),
        new AltusUnified.GeographicPosition2D(25, -116),
        new AltusUnified.GeographicPosition2D(20, -112),
    ];
    pushToVector(dynamicPolygon.points(), dynamicPolygonPoints);
    var colors3 = [new AltusUnified.Color(0, 0, 0), new AltusUnified.Color(0, 255, 0), new AltusUnified.Color(0, 0, 255)];
    var polygonStyle = new AltusUnified.PolygonStyle(colors3[0], colors3[1], 0, colors3[2], 0);

    vectorMap.addDynamicPolygon(dynamicPolygon, polygonStyle);

    // You will see the polygon change from black to red in 3 seconds
    polygonStyle.fillColor().r = 255;
    polygonStyle.fillColor().g = 0;
    polygonStyle.fillColor().b = 0;
    vectorMap.updatePolygonStyle(polygonStyle, 3.0);

    deleteElements(dynamicPolygonPoints);
    deleteElements(colors3);
    dynamicPolygon.delete();
    polygonStyle.delete();
  }
  /*C2*/

  /*C3*/
  var add3DPolygon = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);

    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);

    // add a 3D polygon
    var dynamicPolygon3D = new AltusUnified.DynamicPolygon3D("poly3D1");
    var dynamicPolygon3DPoints = [
        new AltusUnified.GeographicPosition(20, -112, 1000000),
        new AltusUnified.GeographicPosition(15, -116, 1000000),
        new AltusUnified.GeographicPosition(15, -122, 1000000),
        new AltusUnified.GeographicPosition(20, -126, 1000000),
        new AltusUnified.GeographicPosition(25, -122, 1000000),
        new AltusUnified.GeographicPosition(25, -116, 1000000),
        new AltusUnified.GeographicPosition(20, -112, 1000000),
    ];
    pushToVector(dynamicPolygon3D.points(), dynamicPolygon3DPoints);
    var colors3 = [new AltusUnified.Color(255, 255, 0), new AltusUnified.Color(0, 255, 0), new AltusUnified.Color(0, 0, 255)];
    var polygonStyle = new AltusUnified.PolygonStyle(colors3[0], colors3[1], 0, colors3[2], 0);

    vectorMap.addDynamicPolygon3D(dynamicPolygon3D, polygonStyle);

    deleteElements(dynamicPolygon3DPoints);
    deleteElements(colors3);
    dynamicPolygon3D.delete();
    polygonStyle.delete();
  }
  /*C3*/

  /*C4*/
  var pushToVector = function(vector, array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        vector.push_back(array[i]);
    }
  }
  /*C4*/

  /*C5*/
  var deleteElements = function(array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        array[i].delete();
    }
    array.length = 0;
  }
  /*C5*/

  /*C6*/
  function setPosition(lat, lon, altitude) {
    // create position object
    var pos = new AltusUnified.GeographicPosition(lat, lon, altitude);

    // create orientation object - camera pointed like standard 2D map view
    var orientation = new AltusUnified.Orientation(0, 90, 0);

    // create default scale object
    var scale = new AltusUnified.vec3d(1, 1, 1);

    // set transfrom to scene
    var trans = new AltusUnified.Transform(pos, orientation, scale);
    AltusUnified.scene.camera().transform.set(trans);

    pos.delete();
    orientation.delete();
    scale.delete();
  }
  /*C6*/

  return {
    addBaseMap: addBaseMap,
    add3DPolygon: add3DPolygon,
    setPosition: setPosition
  }
};

function onAltusEngineReady() {
  var Simplest3DPolygonExample = createSimplest3DPolygonExample();

  var tileProviderUrl = "https://a.tiles.mapbox.com/v3/dxjacob.h43n70g0/{z}/{x}/{y}.png";

  Simplest3DPolygonExample.addBaseMap("baseMap", tileProviderUrl);
  Simplest3DPolygonExample.add3DPolygon();

  //Position over US/Canada border - position, orientation, and scale
  Simplest3DPolygonExample.setPosition(47.5, -101.505561, 15000000);
};

See Demo


AltusMappingEngine Web v2.0.ut.2084.g47ffcd3 master

COPYRIGHT (C) 2017, BA3, LLC ALL RIGHTS RESERVED