Reference Source
public class | source

SpriteMarker

Extends:

ComponentMarker → SpriteMarker

A Marker with a billboarded and textured quad attached to it.

  • Extends Marker
  • Keeps the quad oriented towards the viewpoint
  • Auto-fits the quad to the texture
  • Has a world-space position
  • Can be configured to hide the quad whenever the position is occluded by some other object

Usage

[Run this example]

import {Viewer, SpriteMarker } from "./../dist/xeokit-sdk.es.js";

const viewer = new Viewer({
       canvasId: "myCanvas",
     transparent: true
 });

viewer.scene.camera.eye = [0, 0, 25];
viewer.scene.camera.look = [0, 0, 0];
viewer.scene.camera.up = [0, 1, 0];

new SpriteMarker(viewer.scene, {
     worldPos: [-10, 0, 0],
     src: "../assets/textures/diffuse/uvGrid2_512x1024.jpg",
     size: 5,
     occludable: false
 });

new SpriteMarker(viewer.scene, {
     worldPos: [+10, 0, 0],
     src: "../assets/textures/diffuse/uvGrid2_1024x512.jpg",
     size: 4,
     occludable: false
 });

Constructor Summary

Public Constructor
public

constructor(owner: Component, cfg: *)

Member Summary

Public Members
public set

Sets if this SpriteMarker is clippable.

public get

Gets if this SpriteMarker is clippable.

public set

Sets if this SpriteMarker is included in boundary calculations.

public get

Gets if this SpriteMarker is included in boundary calculations.

public set

image: HTMLImageElement

Sets an HTMLImageElement to source the image from.

public get

image: HTMLImageElement

Gets the HTMLImageElement the SpriteMarker's image is sourced from, if set.

Returns null if not set.

public set

Sets the opacity factor for this SpriteMarker.

public get

Gets this SpriteMarker's opacity factor.

This is a factor in range [0..1] which multiplies by the rendered fragment alphas.

public set

Sets if this SpriteMarker is pickable.

public get

Gets if this SpriteMarker is pickable.

public set

size(size: Number)

Sets the World-space size of the longest edge of the SpriteMarker.

public get

size: *

Gets the World-space size of the longest edge of the SpriteMarker.

public set

Sets an image file path that the SpriteMarker's image is sourced from.

Accepted file types are PNG and JPEG.

Sets Texture#image null.

public get

Gets the image file path that the SpriteMarker's image is sourced from, if set.

Returns null if not set.

public set

visible(visible: Boolean)

Sets if this SpriteMarker is visible or not.

public get

Gets if this SpriteMarker is visible or not.

Inherited Summary

From class Component
public get

The Component that owns the lifecycle of this Component, if any.

public

True as soon as this Component has been destroyed

public

ID of this Component, unique within the Scene.

public

meta: *

Arbitrary, user-defined metadata on this component.

public

The parent Scene that contains this Component.

public

The viewer that contains this Scene.

public

clear()

Destroys all Components that are owned by this.

public

Destroys this component.

public

error(message: String)

Logs an error for this component to the JavaScript console.

public

fire(event: String, value: Object, forget: Boolean)

Fires an event on this component.

public

Returns true if there are any subscribers to the given event on this component.

public

isType(type: *): *: Boolean

Tests if this component is of the given type, or is a subclass of the given type.

public

log(message: String)

Logs a console debugging message for this component.

public

off(subId: String)

Cancels an event subscription that was previously made with Component#on or Component#once.

public

on(event: String, callback: Function, scope: Object): String

Subscribes to an event on this component.

public

once(event: String, callback: Function, scope: Object)

Subscribes to the next occurrence of the given event, then un-subscribes as soon as the event is subIdd.

public

warn(message: String)

Logs a warning for this component to the JavaScript console.

From class Marker
public get

Canvas-space 2D coordinates of this Marker.

public get

Gets the Entity this Marker is associated with.

public set

Sets the Entity this Marker is associated with.

public get

Gets whether occlusion testing is performed for this Marker.

public set

Sets whether occlusion testing is performed for this Marker.

public get

Gets the RTC center of this Marker.

public get

Gets the RTC position of this Marker.

public get

View-space 3D coordinates of this Marker.

public get

Indicates if this Marker is currently visible.

public get

Gets the World-space 3D position of this Marker.

public set

Sets the World-space 3D position of this Marker.

public

Destroys this Marker.

Public Constructors

public constructor(owner: Component, cfg: *) source

Override:

Marker#constructor

Params:

NameTypeAttributeDescription
owner Component

Owner component. When destroyed, the owner will destroy this SpriteMarker as well.

cfg *
  • optional

Configs

cfg.id String
  • optional

Optional ID for this SpriteMarker, unique among all components in the parent scene, generated automatically when omitted.

cfg.entity Entity
  • optional

Entity to associate this Marker with. When the SpriteMarker has an Entity, then Marker#visible will always be false if Entity#visible is false.

cfg.occludable Boolean
  • optional
  • default: false

Indicates whether or not this Marker is hidden (ie. Marker#visible is false whenever occluded by Entitys in the Scene.

cfg.worldPos Number[]
  • optional
  • default: [0,0,0]

World-space 3D Marker position.

cfg.src String
  • optional
  • default: null

Path to image file to load into this SpriteMarker. See the SpriteMarker#src property for more info.

cfg.image HTMLImageElement
  • optional
  • default: null

HTML Image object to load into this SpriteMarker. See the SpriteMarker#image property for more info.

cfg.flipY Boolean
  • optional
  • default: false

Flips this SpriteMarker's texture image along its vertical axis when true.

cfg.encoding String
  • optional
  • default: "linear"

Texture encoding format. See the Texture#encoding property for more info.

Public Members

public set clippable: Boolean source

Sets if this SpriteMarker is clippable.

Clipping is done by the SectionPlanes in Scene#sectionPlanes.

Default is true.

public get clippable: Boolean source

Gets if this SpriteMarker is clippable.

Clipping is done by the SectionPlanes in Scene#sectionPlanes.

Default is true.

public set collidable: Boolean source

Sets if this SpriteMarker is included in boundary calculations.

Default is true.

public get collidable: Boolean source

Gets if this SpriteMarker is included in boundary calculations.

Default is true.

public set image: HTMLImageElement source

Sets an HTMLImageElement to source the image from.

Sets Texture#src null.

public get image: HTMLImageElement source

Gets the HTMLImageElement the SpriteMarker's image is sourced from, if set.

Returns null if not set.

public set opacity: Number source

Sets the opacity factor for this SpriteMarker.

This is a factor in range [0..1] which multiplies by the rendered fragment alphas.

public get opacity: Number source

Gets this SpriteMarker's opacity factor.

This is a factor in range [0..1] which multiplies by the rendered fragment alphas.

public set pickable: Boolean source

Sets if this SpriteMarker is pickable.

Default is true.

public get pickable: Boolean source

Gets if this SpriteMarker is pickable.

Default is true.

public set size(size: Number) source

Sets the World-space size of the longest edge of the SpriteMarker.

Note that SpriteMarker sets its aspect ratio to match its image. If we set a value of 1000, and the image has size 400x300, then the SpriteMarker will then have size 1000 x 750.

Default value is 1.0.

public get size: * source

Gets the World-space size of the longest edge of the SpriteMarker.

Returns {Number} World-space size of the SpriteMarker.

public set src: String source

Sets an image file path that the SpriteMarker's image is sourced from.

Accepted file types are PNG and JPEG.

Sets Texture#image null.

public get src: String source

Gets the image file path that the SpriteMarker's image is sourced from, if set.

Returns null if not set.

public set visible(visible: Boolean) source

Sets if this SpriteMarker is visible or not.

Default value is true.

Override:

Marker#visible

public get visible: Boolean: * source

Gets if this SpriteMarker is visible or not.

Default value is true.

Override:

Marker#visible

Return:

Boolean

Returns true if visible.