Skip to main content

Icon

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

  • new Icon(id: string, iconId: number, styleId: number, size: number, position: Vector3, color: Color4, visible?: boolean, isPickable?: boolean): Icon

  • Creates a icon to use in 3D. The icon need to be attached to a IconHandler to be renderd.

    @example
    // A Icon needs to be attatched to a IconHandler to be renderd in the 3D-scene.
    const iconHandler = new IconHandler(api);
    // Add a icon atlas to use for all icons. Provide the babylonTextre, the total icon count (16), the amount of icons in a group (4) and if the texture use the alpha channel (true).
    iconHandler.setIconAtlas(await getTexture('./icon.png'), 16, 4, true);
    // Add a array of icons to be renderd.
    iconHandler.attach([
    new Icon(
       "someId_1",
       0, // Use the first icon form the 4X4 icon atlas (first row in icon atlas).
       2, // Use the third style index, in this case there is 4 icons in a group in the texture atlas.
       1, // size
       new Vector3(0, 0, 0), // Add a position for the icon. (at origin in this case).
       new Color4(Math.random(), Math.random(), Math.random(), 1), // Add a random color to the icon, and the max size to the icon. (1).
       true // This makes the icon pickable.
    ),
    new Icon(
       "someId_2",
       1, // Use the second icon row form the 4X4 icon atlas.
       0, // Use the first style of the second icon.
       1, // size
       new Vector3(0, 0, 0), // Add a position for the icon. (at origin in this case).
       new Color4(Math.random(), Math.random(), Math.random(), 1), // Add a random color to the icon, and the max size to the icon. (1).
       true // This makes the icon pickable.
    )
    ]);
    @example
      // A common use for icons is to enable a user to click on them and then perform some functionality.
      // Here is an example of how to implement this with the onPointerObservable.
      // For this to work the icons property isPickable needs to be set to true.
      api.onPointerObservable.add((eventData) => {
          const pointerButtonInfo = eventData.twinfinity.button(PredefinedPointerButtonId.Main);
          // Only continue on main click button release.
          if (pointerButtonInfo.event !== 'up') {
              return;
          }
          // Run a pick metod to check what the cursor is abowe.
          const pick: PickResult = eventData.twinfinity.pick(true);
          // If a Icon is picked.
          if (pick.type === PickResultType.Icon) {
              const pickedIcon = pick.object;
              console.log(pickedIcon);
          }
      });

    Parameters

    • id: string

      Your own string id.

    • iconId: number

      The icon index in the icon texture atlas. Fist icon has iconId 0.

    • styleId: number

      The styleId selects a icon style. First style has styleId 0.

    • size: number

      Set the scale size of the icon 0-N. If the size is 0.0 the icon is invisible. If it is 1, iconMaxSize of setIconAtlas is unscaled.

    • position: Vector3

      Contains the 3D-coordinate where the icon is rendered.

    • color: Color4

      Custom color RGB, the A channel is used for icon size. If size is 0, the icon is not visible. If RGB is 1.0 only the color from icon texture pixels will be used for coloring. Other values are mixed in.

    • visible: boolean = true

      Defaults to true

    • isPickable: boolean = false

      Whether Icon can be found in a pick operation or not. Defaults to true.

    Returns Icon

Properties

publiciconId

iconId: number

The icon index in the icon texture atlas. Fist icon has iconId 0.

publicreadonlyid

id: string

Your own string id.

publicisPickable

isPickable: boolean = false

Whether Icon can be found in a pick operation or not. Defaults to true.

publicsize

size: number

Set the scale size of the icon 0-N. If the size is 0.0 the icon is invisible. If it is 1, iconMaxSize of setIconAtlas is unscaled.

publicstyleId

styleId: number

The styleId selects a icon style. First style has styleId 0.

publicvisible

visible: boolean = true

Defaults to true

Accessors

publiccolor

  • get color(): Color4

  • Color of icon. If alpha is zero the icon will not be rendered.

    Returns Color4

publicisOccluded

  • get isOccluded(): boolean

  • true if occluded, otherwise false. Only valid if parent.occlusionCullingInterval >= 0. Otherwise it will always be false.

    Returns boolean

publicparent

publicposition

  • get position(): Vector3

  • Position of icon in world space.

    Returns Vector3

Methods

publicdetach

  • detach(): boolean

  • Detach icon from its IconHandler if it is attached.

    Returns boolean

    true if icon was detached. Otherwise false. Happens when icon has no IconHandler.

publicintersect

  • Perform intersection test against icon using a ray.

    Parameters

    Returns Intersection[]

    Intersection or empty array if no intersection