import {SpriteMarker} from '@xeokit/xeokit-sdk/src/viewer/scene/marker/SpriteMarker.js'

public class | source

SpriteMarker

Extends:

Component → Marker → 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 "./https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.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	clippable: Boolean Sets if this `SpriteMarker` is clippable.
public get	clippable: Boolean Gets if this `SpriteMarker` is clippable.
public set	collidable: Boolean Sets if this `SpriteMarker` is included in boundary calculations.
public get	collidable: Boolean 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	opacity: Number Sets the opacity factor for this `SpriteMarker`.
public get	opacity: Number 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 Sets if this `SpriteMarker` is pickable.
public get	pickable: Boolean 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	src: String 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 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	visible: Boolean: * Gets if this `SpriteMarker` is visible or not.

Inherited Summary

From class Component
public get	owner: Component The Component that owns the lifecycle of this Component, if any.
public	destroyed: Boolean True as soon as this Component has been destroyed
public	id: String \| Number ID of this Component, unique within the Scene.
public	meta: * Arbitrary, user-defined metadata on this component.
public	scene: Scene The parent Scene that contains this Component.
public	viewer: Viewer The viewer that contains this Scene.
public	clear() Destroys all Components that are owned by this.
public	destroy() 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	hasSubs(event: String): Boolean 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	scheduleTask(task: *) Schedule a task to perform on the next browser interval
public	warn(message: String) Logs a warning for this component to the JavaScript console.

From class Marker
public get	canvasPos: Number[] Canvas-space 2D coordinates of this Marker.
public get	entity: Entity Gets the Entity this Marker is associated with.
public set	entity: Entity Sets the Entity this Marker is associated with.
public get	occludable: Boolean Gets whether occlusion testing is performed for this Marker.
public set	occludable: Boolean Sets whether occlusion testing is performed for this Marker.
public get	origin: Number[] Gets the RTC center of this Marker.
public get	rtcPos: Number[] Gets the RTC position of this Marker.
public get	viewPos: Number[] View-space 3D coordinates of this Marker.
public get	visible: Boolean Indicates if this Marker is currently visible.
public get	worldPos: Number[] Gets the World-space 3D position of this Marker.
public set	worldPos: Number[] Sets the World-space 3D position of this Marker.
public	destroy() Destroys this Marker.

Public Constructors

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

Override:

Marker#constructor

Params:

Name	Type	Attribute	Description
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.