Skip to main content

Html2CanvasPlane <Point>

Renders HTML elements to a plane in 3D space. WARNING: This class does NOT sanitize its contents. Make sure to sanitize your HTML in the htmlConversion parameter or before passing it to this class.

Implements

Index

Properties

Accessors

Methods

Properties

readonlyid

id: string

publicreadonlyonBackgroundColorChangeObservable

onBackgroundColorChangeObservable: Observable<Color4> = ...

publicreadonlyonHtmlChangeObservable

onHtmlChangeObservable: Observable<string> = ...

publicreadonlyonPointTrackableScreen

onPointTrackableScreen: Observable<TrackCoordinate2D<Point>>

publicrotationAroundNormal

rotationAroundNormal: number

Accessors

publiccontainerDiv

  • get containerDiv(): HTMLDivElement

  • Returns HTMLDivElement

publicmaxTextureSize

  • get maxTextureSize(): number
  • set maxTextureSize(size: number): void

  • Gets the max texture size (width * height).

    Returns number

  • Sets the max size of the texture used to render the html. NOTE: Increasing the max texture size will have a negative performance impact

    Parameters

    • size: number

      new max texture size (width * height)

    Returns void

publicmesh

  • get mesh(): Mesh

  • Returns Mesh

    the babylonjs mesh

publicminScale

  • get minScale(): number
  • set minScale(scale: number): void

  • Get the current minScale of the plane.

    Returns number

  • Set the minimum scale of the plane. This value will be applied on all scaling axes.

    @scale

    New minimum scale to apply to the scaling axes.

    Parameters

    • scale: number

    Returns void

publicoriginalHtml

  • get originalHtml(): string

  • Returns the original HTML before it was put through the htmlConversion parameter method.

    Returns string

publicparent

  • get parent(): Nullable<TransformNode>
  • set parent(node: Nullable<TransformNode>): void

  • Gets the parent TransformNode.

    Returns Nullable<TransformNode>

  • Sets the parent of the Html2CanvasPlane without keeping the position in world space.

    Parameters

    • node: Nullable<TransformNode>

      new parent for the Html2CanvasPlane.

    Returns void

publicposition

  • get position(): Vector3

  • Gets the position of the plane in world space.

    Returns Vector3

publicscaling

  • get scaling(): Vector3

  • Gets the scaling of the plane.

    Returns Vector3

publicstyle

  • get style(): CSSStyleDeclaration

  • Gets the style of the HTML element that will be rendered to the plane. NOTE: Do not change background color here as the canvas renderer has its own background color property, use setBackgroundColorAndUpdateTexture instead.

    Returns CSSStyleDeclaration

Methods

publiccenterPoint

publicdispose

  • dispose(): void

  • Disposes the Html2CanvasPlane.

    Returns void

publicrenderContainerDivToPlane

  • renderContainerDivToPlane(): Promise<Texture>

  • Renders the containerdiv to the plane.

    Returns Promise<Texture>

    A promise that will resolve when the texture is rendered.

setBackgroundColorAndUpdateTexture

  • setBackgroundColorAndUpdateTexture(col: Color4): Promise<void>

  • Sets the background color and updates the texture which is rendered on the plane mesh.

    Parameters

    • col: Color4

      New background color.

    Returns Promise<void>

publicsetHtml

  • setHtml(html: string, htmlConversion: (html: string) => string): Promise<void>

  • Parameters

    • html: string
    • htmlConversion: (html: string) => string

    Returns Promise<void>

publicsetHtmlAndUpdate

  • setHtmlAndUpdate(html: string, htmlConversion: (html: string) => string): Promise<void>

  • Sets the HTML and applies it to the texture

    Parameters

    • html: string

      The new HTML to be rendered.

    • htmlConversion: (html: string) => string

      The conversion function for the HTML, note that it is recommended to santize the input first.

    Returns Promise<void>

publicupdateTexture

  • updateTexture(): Promise<Texture>

  • Updates the container div and renders the container div to the plane.

    Returns Promise<Texture>

    A promise which resolves when the texture is updated.

worldMatrix

  • worldMatrix(): Matrix

  • Returns Matrix

    The worldmatrix of the plane mesh.

staticcreate

  • create<Point>(api: BimCoreApi, id: string, html: string, htmlConversion: (html: string) => string, position: Vector3, normal: Vector3, scale: number | Vector3, rotationAroundNormal: number, backgroundColor: Color4, pointFactory: Html2CanvasPointFactoryHandler<Point>, parent: Nullable<TransformNode>): Promise<Html2CanvasPlane<Point>>

  • Creates a new Html2CanvasPlane and adds it to the scene.

    Type parameters

    Parameters

    • api: BimCoreApi

      BimApi instance.

    • id: string

      unique id

    • html: string

      The original HTML

    • htmlConversion: (html: string) => string

      The method for modifying the HTML string. NOTE: This class does not sanitize HTML so this method is a good place to do so.

    • position: Vector3

      The position of the plane.

    • normal: Vector3

      The normal of the plane.

    • scale: number | Vector3

      The scale of the plane. If a number is passed in the scale will automatically adjust for aspect ratio and parent scale. If a Vector3 is passed in it is the absolute scaling of the plane.

    • rotationAroundNormal: number

      How much the plane should be rotated around the normal in radians.

    • backgroundColor: Color4

      Background color for the resulting canvas which is then applied to the plane.

    • pointFactory: Html2CanvasPointFactoryHandler<Point>

      Factory method for the points the user can drag to resize the plane etc.

    • parent: Nullable<TransformNode>

      Babylonjs parent node.

    Returns Promise<Html2CanvasPlane<Point>>

    The new a promise with the Html2CanvasPlane.