• Public
  • Public/Protected
  • All

Module ria/view/style/Icon3DStyle


Type aliases


An Icon3DStyle describes how a 3D icon is painted in a 2D and a 3D view.

The key parts of an Icon3DStyle are:

  • A 3D mesh, such as a plane, a building, and so on
  • A set of transformation parameters to align the 3D mesh in its own local origin: scale, rotation, and translation
  • Transformation parameters to align the 3D mesh in the world: orientation

You can define a mesh with a mesh JavaScript object, or with a URL to a file that contains mesh data, such as a GLTF file. By default, the following assumptions are made about the 3D mesh in LuciadRIA:

  • The X-axis points forward: the part of the mesh that is considered the front is pointing in the positive X-direction
  • The Y-axis points left: the left side of the mesh is facing the positive Y-direction
  • The Z-axis points up: the top of the mesh is facing the positive Z-direction
  • The mesh is defined in meters
  • The anchor point or center point of the mesh is at the XYZ-location (0,0,0)

If any of the above does not hold true for your mesh, you can use the scale, rotation and translation parameters to make sure that the mesh is aligned to accommodate the list above.

Example: you have a 3D aircraft mesh. The aircraft is defined in millimeters and it points to the halfway point between the X and Y direction.

Aircraft mesh
Aircraft mesh

If you want to align this mesh with our assumptions, you must scale by a factor of 1/1000, and rotate by 45 degrees about the Z-axis:

   var icon3DStyle = {
     meshUrl: "aircraft.gltf",
       z: -45
       x: 1/1000,
       y: 1/1000,
       z: 1/1000

This results in:

Aligned mesh

Once you have your mesh correctly aligned in its own local reference using rotation, scale and translation, you are ready to orient the 3D mesh in the world.

By default, the position of the mesh is parallel to the surface of the ellipsoid. The X-direction points towards the north and the Y-direction points towards the west.

Default orientation
Default orientation

Note: when the mesh is visualized on a cartesian view the Y-axis of the mesh points up and the X-axis points towards the right.

You can change the heading, pitch and roll of the mesh by adjusting the orientation.

Example: you want your aircraft to point to the east. You must make sure that its heading is 90 degrees, measured clockwise from the north.

   var icon3DStyle = {
     meshUrl: "aircraft.gltf",
     orientation: {
       heading: 90 //make aircraft point to the east, or 90 degree azimuth.

This orientation results in:

Heading to the east
Heading to the east

In addition to heading, an orientation object allows you to specify pitch and roll. See below for the effect of those parameters on the aircraft.

Heading and pitch
Heading, pitch and roll
Heading and pitch Heading, pitch and roll

Note that orientation.heading is analogous to IconStyle.heading, but for 3D meshes.




  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method