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

public class | source

Bitmap

Extends:

Component → Bitmap

A plane-shaped 3D object containing a bitmap image.

Creates a 3D quad containing our bitmap, located and oriented using pos, normal and up vectors.
Registered by Bitmap#id in Scene#bitmaps.
BCFViewpointsPlugin will save and load Bitmaps in BCF viewpoints.

Usage

In the example below, we'll load the Schependomlaan model, then use an Bitmap to show a storey plan next to the model.

[Run this example]

import {Viewer, Bitmap, XKTLoaderPlugin} from "xeokit-sdk.es.js";

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

viewer.camera.eye = [-24.65, 21.69, 8.16];
viewer.camera.look = [-14.62, 2.16, -1.38];
viewer.camera.up = [0.59, 0.57, -0.56];

const xktLoader = new XKTLoaderPlugin(viewer);

xktLoader.load({
     id: "myModel",
     src: "./models/xkt/Schependomlaan.xkt",
     edges: true
 });

new Bitmap(viewer.scene, {
     src: "./images/schependomlaanPlanView.png",
     visible: true,                             // Show the Bitmap
     height: 24.0,                              // Height of Bitmap
     pos: [-15, 0, -10],                        // World-space position of Bitmap's center
     normal: [0, -1, 0],                        // Vector perpendicular to Bitmap
     up: [0, 0, 1],                             // Direction of Bitmap "up"
     collidable: false,                         // Bitmap does not contribute to Scene boundary
     clippable: true,                           // Bitmap can be clipped by SectionPlanes
     pickable: true                             // Allow the ground plane to be picked
});

Constructor Summary

Public Constructor
public	constructor(owner: Component, cfg: *) Creates a new Bitmap.

Member Summary

Public Members
public set	clippable: Boolean Sets if this `Bitmap` is clippable.
public get	clippable: Boolean Gets if this `Bitmap` is clippable.
public set	collidable: Boolean Sets if this `Bitmap` is included in boundary calculations.
public get	collidable: Boolean Gets if this `Bitmap` is included in boundary calculations.
public set	height(height: Number) Sets the World-space height of the `Bitmap`.
public get	height: * Gets the World-space height of the `Bitmap`.
public set	image: HTMLImageElement Sets an `HTMLImageElement` to source the image from.
public get	image: HTMLImageElement Gets the `HTMLImageElement` the `Bitmap`'s image is sourced from, if set. Returns null if not set.
public set	imageData: String Sets an image file path that the `Bitmap`'s image is sourced from. Accepted file types are PNG and JPEG. Sets Texture#image null. You may also need to set Bitmap#type, if you want to read the image data with Bitmap#imageData.
public get	imageData: String Gets the image file path that the `Bitmap`'s image is sourced from, if set. Returns null if not set.
public get	normal: Number[]: * Gets the direction of the normal vector that is perpendicular to this `Bitmap`.
public set	opacity: Number Sets the opacity factor for this `Bitmap`.
public get	opacity: Number Gets this `Bitmap`'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 `Bitmap` is pickable.
public get	pickable: Boolean Gets if this `Bitmap` is pickable.
public get	pos: Number[]: * Gets the World-space position of this `Bitmap`.
public set	src: String Sets an image file path that the `Bitmap`'s image is sourced from. If the file extension is a recognized MIME type, also sets Bitmap#type to that MIME type. Accepted file types are PNG and JPEG.
public get	src: String Gets the image file path that the `Bitmap`'s image is sourced from, if set. Returns null if not set.
public set	type: String Sets the MIME type of this Bitmap.
public get	type: String Gets the MIME type of this Bitmap.
public get	up: Number[]: * Gets the "up" direction of this `Bitmap`.
public set	visible(visible: Boolean) Sets if this `Bitmap` is visible or not.
public get	visible: Boolean: * Gets if this `Bitmap` is visible or not.

Method Summary

Public Methods
public	destroy() Destroys this `Bitmap`.

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.

Public Constructors

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

Creates a new Bitmap.

Registers the Bitmap in Scene#bitmaps; causes Scene to fire a "bitmapCreated" event.

Override:

Component#constructor

Params:

Name	Type	Attribute	Description
owner	Component	optional	Owner component. When destroyed, the owner will destroy this `Bitmap` as well.
cfg	*	optional	`Bitmap` configuration
cfg.id	String	optional	Optional ID, unique among all components in the parent Scene, generated automatically when omitted.
cfg.visible	Boolean	optional default: true	Indicates whether or not this `Bitmap` is visible.
cfg.pos	Number[]	optional default: [0,0,0]	World-space position of the `Bitmap`.
cfg.normal	Number[]	optional default: [0,0,1]	Normal vector indicating the direction the `Bitmap` faces.
cfg.up	Number[]	optional default: [0,1,0]	Direction of "up" for the `Bitmap`.
cfg.height	Number[]	optional default: 1	World-space height of the `Bitmap`.
cfg.matrix	Number[]	optional default: [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]	Modelling transform matrix for the `Bitmap`. Overrides the `position`, height```,rotation`and`normal parameters.
cfg.collidable	Boolean	optional default: true	Indicates if the `Bitmap` is initially included in boundary calculations.
cfg.clippable	Boolean	optional default: true	Indicates if the `Bitmap` is initially clippable.
cfg.pickable	Boolean	optional default: true	Indicates if the `Bitmap` is initially pickable.
cfg.opacity	Number	optional default: 1.0	`Bitmap`'s initial opacity factor, multiplies by the rendered fragment alpha.
cfg.src	String	optional	URL of image. Accepted file types are PNG and JPEG.
cfg.image	HTMLImageElement	optional	An `HTMLImageElement` to source the image from. Overrides `src`.
cfg.imageData	String	optional	Image data as a base64 encoded string.
cfg.type	String	optional default: "jpg"	Image MIME type. Accepted values are "jpg" and "png". Default is "jpg". Normally only needed with `image` or `imageData`. Automatically inferred from file extension of `src`, if the file has a recognized extension.

Public Members

public set clippable: Boolean source

Sets if this Bitmap is clippable.

Clipping is done by the SectionPlanes in Scene#sectionPlanes.

Default is true.

public get clippable: Boolean source

Gets if this Bitmap is clippable.

Clipping is done by the SectionPlanes in Scene#sectionPlanes.

Default is true.

public set collidable: Boolean source

Sets if this Bitmap is included in boundary calculations.

Default is true.

public get collidable: Boolean source

Gets if this Bitmap is included in boundary calculations.

Default is true.

public set height(height: Number) source

Sets the World-space height of the Bitmap.

Default value is 1.0.

public get height: * source

Gets the World-space height of the Bitmap.

Returns {Number} World-space height of the Bitmap.

public set image: HTMLImageElement source

Sets an HTMLImageElement to source the image from.

Sets Texture#src null.

You may also need to set Bitmap#type, if you want to read the image data with Bitmap#imageData.

public get image: HTMLImageElement source

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

Returns null if not set.

public set imageData: String source

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

Accepted file types are PNG and JPEG.

Sets Texture#image null.

You may also need to set Bitmap#type, if you want to read the image data with Bitmap#imageData.

public get imageData: String source

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

Returns null if not set.

public get normal: Number[]: * source

Gets the direction of the normal vector that is perpendicular to this Bitmap.

Return:

Number[]

value Current normal direction.

public set opacity: Number source

Sets the opacity factor for this Bitmap.

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

public get opacity: Number source

Gets this Bitmap'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 Bitmap is pickable.

Default is true.

public get pickable: Boolean source

Gets if this Bitmap is pickable.

Default is true.

public get pos: Number[]: * source

Gets the World-space position of this Bitmap.

Default value is [0, 0, 0].

Return:

Number[]

Current position.

public set src: String source

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

If the file extension is a recognized MIME type, also sets Bitmap#type to that MIME type.

Accepted file types are PNG and JPEG.

public get src: String source

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

Returns null if not set.

public set type: String source

Sets the MIME type of this Bitmap.

This is used by Bitmap when getting image data with Bitmap#imageData.

Supported values are "jpg" and "png",

Default is "jpg".

public get type: String source

Gets the MIME type of this Bitmap.

public get up: Number[]: * source

Gets the "up" direction of this Bitmap.

Return:

Number[]

value Current "up" direction.

public set visible(visible: Boolean) source

Sets if this Bitmap is visible or not.

Default value is true.

public get visible: Boolean: * source

Gets if this Bitmap is visible or not.

Default value is true.

Return:

Boolean

Returns true if visible.

Public Methods

public destroy() source

Destroys this Bitmap.

Removes the Bitmap` from Scene#bitmaps; causes Scene to fire a "bitmapDestroyed" event.

Override:

Component#destroy