# Class 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.

#### Type Parameters

- Point extends Html2CanvasPoint = Html2CanvasPoint

#### Implements

- HtmlPointParent<Html2CanvasPoint>

##### Index

### Properties

id
onBackgroundColorChangeObservable
onHtmlChangeObservable
onPointTrackableScreen
rotationAroundNormal

### Accessors

containerDiv
maxTextureSize
mesh
minScale
originalHtml
parent
position
scaling
style

### Methods

centerPoint
dispose
renderContainerDivToPlane
setBackgroundColorAndUpdateTexture
setHtml
setHtmlAndUpdate
updateTexture
worldMatrix
create

## Properties

### `Readonly` id

id: string

### `Readonly` onBackgroundColorChangeObservable

onBackgroundColorChangeObservable: Observable<Color4> = ...

### `Readonly` onHtmlChangeObservable

onHtmlChangeObservable: Observable<string> = ...

### `Readonly` onPointTrackableScreen

onPointTrackableScreen: Observable<TrackCoordinate2D<Point>>

### rotationAroundNormal

rotationAroundNormal: number

## Accessors

### containerDiv

- get containerDiv(): HTMLDivElement

  #### Returns HTMLDivElement

### maxTextureSize

- get maxTextureSize(): number

  Gets the max texture size (width * height).

  #### Returns number

- set maxTextureSize(size: number): void

  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

### mesh

- get mesh(): Mesh

  #### Returns Mesh

  the babylonjs mesh

### minScale

- get minScale(): number

  Get the current minScale of the plane.

  #### Returns number

- set minScale(scale: number): void

  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

### originalHtml

- get originalHtml(): string

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

  #### Returns string

### parent

- get parent(): Nullable<TransformNode>

  Gets the parent TransformNode.

  #### Returns Nullable<TransformNode>

- set parent(node: Nullable<TransformNode>): void

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

  #### Parameters

  - node: Nullable<TransformNode>

    new parent for the Html2CanvasPlane.

  #### Returns void

### position

- get position(): Vector3

  Gets the position of the plane in world space.

  #### Returns Vector3

### scaling

- get scaling(): Vector3

  Gets the scaling of the plane.

  #### Returns Vector3

### style

- 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

### centerPoint

- centerPoint(): Html2CanvasPoint

  #### Returns Html2CanvasPoint

  Implementation of HtmlPointParent.centerPoint

### dispose

- dispose(): void

  Disposes the Html2CanvasPlane.

  #### Returns void

### renderContainerDivToPlane

- 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>

### setHtml

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

  #### Parameters

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

  #### Returns Promise<void>

### setHtmlAndUpdate

- 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>

### updateTexture

- 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.

  Implementation of HtmlPointParent.worldMatrix

### `Static` create

- create<Point extends Html2CanvasPoint = Html2CanvasPoint>(
  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

  - Point extends Html2CanvasPoint = Html2CanvasPoint

  #### 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.