3D Models

This tutorial will show you the basics of creating, positioning, and animating 3D models.

Cubes

Cubes

A 3D model is a 'mesh' of 3D points and texture to cover the mesh. The mesh is formed by a set of triangles. The triangles of the mesh each consist of 3 points (vertices). Each vertex also has a set of texture coordinates. The main steps for getting a model into a map layer are:

  • Adding a model layer
  • Specifying the 3D points that are the vertices of your mesh (vertex buffer), or alternatively use one of the pre-made meshes like Mesh.createCubeMesh or Mesh.createCylinderMesh.
  • Specifying which of those points form a triangle (index buffer)
  • Suppying a texture for your mesh to create a model
  • Supply a transform to set the position, orientation, and scale of your model
  • Optionally, animate your model in some way

Cube and Cylinder Example

In this tutorial we'll walk you through how to create 3 cubes that are rotating near Mt. Ranier.

Texture Creation
//Creates a 1x1 pixel texture with the given color values
function createTexture(alphaValue, blueValue, greenValue, redValue){

    //Create a vector of bytes to hold color values
    var abgrData = new AltusUnified.VectorByte();
    abgrData.push_back(alphaValue);
    abgrData.push_back(blueValue);
    abgrData.push_back(greenValue);
    abgrData.push_back(redValue);

    //Create image from color data
    var image = new AltusUnified.Image(1, 1, abgrData);

    //Create texture from image
    var texture = new AltusUnified.Texture(image, false);

    //Clean up
    abgrData.delete();
    image.delete();

    return texture;
}
Model Creation
function createCubeModel(cubeName, red, green, blue){
    var texture = createTexture(red, green, blue, 255);
    var cubeModel = new AltusUnified.Model(cubeName, AltusUnified.Mesh.createCubeMesh(texture));
    texture.delete();
    return cubeModel;
}
Transform Creation
function createTransform(lat, lon, alt, scale){
    var position = new AltusUnified.GeographicPosition(lat, lon, alt);
    var orientation = new AltusUnified.Orientation(0, 0, 0);
    var scale = new AltusUnified.vec3d(scale, scale, scale);
    var transform = new AltusUnified.Transform(position, orientation, scale);

    //Clean up
    scale.delete();
    orientation.delete();
    position.delete();

    return transform;
}
Adding a Model Layer
//Create and add a model layer
function addModelLayer(layerName){
    var modelMap = new AltusUnified.ModelMap(layerName);
    AltusUnified.scene.addMap(modelMap);
    modelMap.delete();
}
Adding a Cube
//Create and add a cube model to the specified layer
function addCube(layerName, cubeName, lat, lon, alt, scale, red, green, blue){

    var modelMap = AltusUnified.scene.findMap(layerName);
    if (modelMap == null){
        return;
    }

    //Create a cube model
    var cubeModel = createCubeModel(cubeName, red, green, blue);

    //Add cube to map layer
    modelMap.addModel(cubeModel);

    //Create a transform to set location and scale of cube
    var trans = createTransform(lat, lon, alt, scale);
    var modelTrans = cubeModel.transform();
    modelTrans.set(trans);

    //Animate the cube (rotate it about it's axis)
    var worldPosition = modelTrans.worldPosition();
    var upVector = modelTrans.up();
    AltusUnified.scene.animationManager().orbitAroundAxis(modelTrans, worldPosition, upVector, 3, 1, 0);

    //Clean up
    upVector.delete();
    worldPosition.delete();
    modelTrans.delete();
    modelMap.delete();
}
Adding a Cylinder
/**
 Adds a cylinder to a model layer.
 */
function addCylinder(layerName, cylinderName, segmentCount, lat, lon, alt, scale, red, green, blue, alpha){

    //Find the map
    var modelMap = AltusUnified.scene.findMap(layerName);
    if (modelMap == null){
        return;
    }

    //Create a cylinder model with a texture based on the colors passed in
    var texture = createTexture(red, green, blue, alpha);
    var cylinderModel = new AltusUnified.Model(cylinderName, AltusUnified.Mesh.createCylinderMesh(segmentCount, texture));

    //Add cube to map layer
    modelMap.addModel(cylinderModel);

    //Create a transform to set location and scale of cube
    var trans = createTransform(lat, lon, alt, scale);
    var modelTrans = cylinderModel.transform();
    modelTrans.set(trans);

    //Clean up
    cylinderModel.delete();
    texture.delete();
    modelTrans.delete();
    modelMap.delete();
}

Putting It All Together

After Altus is initialized you can then create several cubes like this:
 //Add a mode layer and several cubes with different colors near Mt. Ranier
            addModelLayer("models");

            //Add some cubes near Mt. Ranier
            addCube("models", "cube1", 47, -121.7, 10000, 0.0003, 255, 255, 255);
            addCube("models", "cube2", 46.9, -121.7, 10000, 0.0003, 0, 0, 255);
            addCube("models", "cube2", 46.8, -121.7, 10000, 0.0003, 255, 0, 0);

            //Add some translucent cylinders around SEATAC
            addCylinder("models", "cylinder1", 14, 47.4489, -122.309, 0, 0.0003, 255, 0, 255, 100);
            addCylinder("models", "cylinder1", 14, 47.4489, -122.309, 5500, 0.0006, 255, 0, 255, 100);

See Demo


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

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