Skip to content

BillboardMaterial

BillboardMaterial represents a material for billboard rendering.

Type: number | undefined

Description: Pixels with an RGBA alpha value below this threshold will not be rendered.

Default: undefined

Example:

{
billboard: {
alphaTest: 0.5
}
}

Type: Vec2

Description: Specifies the shift amount from the center. The range is between 0 and 1.

Default: Required

Example:

{
billboard: {
center: { x: 0.5, y: 0.5 }
}
}

Type: boolean

Description: Specifies whether to clamp the billboard to the ground.

Default: Required

Example:

{
billboard: {
clampToGround: true
}
}

Type: Color

Description: Specifies the billboard color as a Color instance.

Default: Required

Example:

import { Color } from "@navaramap/three";
{
billboard: {
color: new Color().setHex(0xffffff)
}
}

Type: boolean | undefined

Description: Participate in screen-space decluttering: when labels/sprites overlap on screen, lower-priority ones are hidden. Enabled by default. Set to false to draw every label unconditionally.

Default: true

Example:

{
billboard: {
declutter: false
}
}

Type: number | undefined

Description: Placement priority for decluttering. Higher wins. Only meaningful when declutter is enabled. Can be overridden per feature via FeatureEvaluator.evaluate().

Default: 0.0

Example:

{
billboard: {
declutter: true,
declutterPriority: 1
}
}

Type: boolean

Description: A variable that determines whether front-facing models occlude back-facing models.

Default: true

Example:

{
billboard: {
depthTest: true
}
}

Type: string[] | undefined

Description: Specifies the IDs of selective effects to apply (e.g., “bloom”, “outline”). Used in conjunction with SelectiveBloomEffectDesc or SelectiveOutlineEffectDesc.

Default: undefined

Example:

{
billboard: {
effectIds: ["bloom", "outline"]
}
}

Type: Color | undefined

Description: Specifies the emissive color as a Color instance.

Default: undefined

Example:

import { Color } from "@navaramap/three";
{
billboard: {
emissiveColor: new Color().setHex(0xff0000)
}
}

Type: number | undefined

Description: Specifies the emissive intensity. The default value is 0.3 when the Bloom effect is enabled.

Default: undefined

Example:

{
billboard: {
emissiveIntensity: 0.5
}
}

Type: ("point" | "line" | "polygon")[] | undefined

Description: Source geometry categories this material consumes. Adding "line" emits one billboard per line-string vertex, and adding "polygon" emits one billboard per polygon-ring vertex (the closing duplicate vertex is skipped). Setting the array replaces the default, so include "point" when point geometry should keep rendering. This option applies when the layer’s geometry is built: set it at layer creation. layer.update() applies a new value only to tiles loaded afterwards, so already-loaded tiles keep their previous geometry until the layer is re-created.

Default: ["point"]

Example:

{
billboard: {
geometryTypes: ["point", "line"]
}
}

Type: number

Description: Specifies the height of the billboard. The unit is meters.

Default: Required

Example:

{
billboard: {
height: 100 // 100 meters
}
}

Type: boolean | undefined

Description: Avoids overlap with the earth’s surface. Use this to prevent the billboard from clipping into the earth’s surface.

Default: undefined

Example:

{
billboard: {
offsetDepth: true
}
}

Type: number | undefined

Description: Specifies the opacity of the billboard. Valid range is 0.0 (fully transparent) to 1.0 (fully opaque).

Default: 1.0

Example:

{
billboard: {
transparent: true,
opacity: 0.5 // 50% opacity
}
}

Type: boolean | undefined

Description: Whether the size is specified in meters. If false, the size is in pixels.

Default: true

Example:

{
billboard: {
sizeInMeters: true
}
}

Type: boolean | undefined

Description: Specifies whether to show the billboard.

Default: undefined

Example:

{
billboard: {
show: true
}
}

Type: number

Description: Specifies the size of the billboard. The unit is meters.

Default: Required

Example:

{
billboard: {
size: 10 // 10 meters
}
}

Type: boolean | undefined

Description: Specifies whether to consider the billboard’s transparency. Note that setting this to true may cause the billboard to not display correctly when effects are enabled.

Default: undefined

Example:

{
billboard: {
transparent: false
}
}

Type: string | undefined

Description: Specifies the URL of the object. Supports image files. This is the default image for every feature in the layer. Individual features can override it by returning image from FeatureEvaluator.evaluate(), and returning image: null reverts an overridden feature to this default.

Default: undefined

Example:

{
billboard: {
url: "https://example.com/icons/marker.png"
}
}