Description

Adds support for rendering HTML elements as textures on 3D surfaces using the HTML-in-Canvas API. Works with both WebGL and WebGPU renderers.

• HTMLTexture — A new texture class that renders a live HTML element onto a mesh via the browser's HTML-in-Canvas API. The renderer automatically sets up layoutsubtree on the canvas and appends the element as a child.
• InteractionManager — A new addon that enables native browser pointer interaction with meshes. For HTMLTexture meshes, it computes a CSS matrix3d transform each frame so the browser handles hit-testing, hover, focus, and input natively — no raycasting or synthetic events needed.
• Examples — webgl_materials_texture_html and webgpu_materials_texture_html demonstrate both features with formatted text, images, SVG, an input field, and a button.

https://raw.githack.com/mrdoob/three.js/dev/examples/webgl_materials_texture_html.html

Usage

const element = document.createElement( 'div' );
element.innerHTML = 'Hello <b>world</b>! <input type="text">';

const material = new MeshStandardMaterial();
material.map = new HTMLTexture( element );

const mesh = new Mesh( geometry, material );
scene.add( mesh );

const interactions = new InteractionManager();
interactions.connect( renderer, camera );
interactions.add( mesh );

// in animation loop
interactions.update();

(Requires passing --enable-blink-features=CanvasDrawElement to Chrome Canary versions later than 138.0.7175.0)

Here's a jsfiddle for anyone that wants to experiment with this: https://jsfiddle.net/dgw4y3ck/