Babylonjs HTML Renderer

Rendering HTML inside a Babylonjs WebXR scene.

Usage

Simplest form

Create a simple button with label 'Button 1234' and id 'button1234id'.

const button1 = new HtmlButton('Button', 'id-button', scene);

More Complex Example

import { Button } from '@babylonjs/gui/2D/controls/button';
const baseStyle = "border-radius: 32px; background: #COLOR; width: 100%; height: 100%; color: #000000; font-size: 64px";

const button1 = new HtmlButton('Button 1234', 'test', scene,
            {mainStyle: baseStyle.replace('COLOR', '0000cc'),
             hoverStyle: baseStyle.replace('COLOR', '0033dd'),
             clickStyle: baseStyle.replace('COLOR', '5555ee')
            },
            {html: null, image: {width: 256, height: 256}, height: .04});
button1.transform.position.y = 1;
button1.transform.rotation.y = Math.PI;

This creates a plane that is .04 units high with a 256x256 image texture mapped to the emissive texture of the plane. The plane is rotated 180 degrees around the y-axis and it's position is set to 1 unit above the origin.

you can pass arbitrary css to the style property of the options object. The css will be applied to the button. If you omit hover or click styles they will default to the main style.

###Event more complex (plane with arbitrary html content) const handle = HtmlMeshBuilder.CreatePlaneSync("base-handle-mesh", {html: <div style="width: 100%; height: 100%; border-radius: 32px; background-color: #111122; color: #eeeeee"><center>Handle</center></div> , width: .5, height: .1, image: {width: 256, height: 51}}, scene);

HtmlMeshBuilder.CreatePlaneSync is a sync factor that creates a plane, then decorates the images on after. It also requires that image height and width be specified as it will not be able to propertly size the plane.

HtmlMeshBuilder.CreatePlane is a little more forgiving, but is async. it will do it's best to maintain proper aspect ratios and width and height options are rather optional.