Pre-render HTML Div Element as texture

is there a way to use text buildin HTML as texture?

I think yes. Set othocamera oposite plane with css element. and render it:
and set to texture like this three.js webgl - framebuffer - texture

No, you can’t use DOM elements as WebGL textures. One way to solve the issue is to render the text on a canvas and then use it as a data source for THREE.CanvasTexture.

I will try this with the offscreen and orthocamera.

Since the application runs on a terminal I can render the textures when starting Headless Chrome, and then start the app.

Currently, the textures in Three.js look hard not soft antialising to the backgroud,. Is it on the transparency? What else can I do here? Anti-aliasing?

Default antialising here:
renderer=new THREE.WebGLRenderer({canvas:canvas,antialias:true,alpha:true,transparent:true,premultipliedAlpha:false});

what you can also do is use css3drenderer. this ofc is very limited but can work out well. this example does it for instance: Mixing HTML and WebGL w/ occlusion - CodeSandbox and the html is interactive, you can click, select and scroll it.

1 Like

css3drenderer see
Css3d with threejs

see also GradientsMaterialColor from the Collection of examples from

this example is amazing, one thing which annoy me is that you can’t develop html/css gui for VR application,…