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

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.


    Parameters

    • scale: number

      New minimum scale to apply to the scaling axes.

    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.