I’m working on a project where I would like to render HTML content inside my 3D scene using the HtmlMesh addon, but I’m running into some issues that I can’t seem to understand the root of. Here’s what I’ve implemented so far:
import * as BABYLON from 'babylonjs'
import {
HtmlMeshRenderer, HtmlMesh
} from "@babylonjs/addons/htmlMesh";
// ... other code ...
const htmlMeshRenderer = new HtmlMeshRenderer(scene);
const htmlMeshDiv = new HtmlMesh(scene, "div");
const div = document.createElement('div');
div.innerHTML = `
<h1>Yo yo yo!!!</h1>
<p>This is a sample HTML mesh.</p>
<button>Click me</button>
`
div.style.backgroundColor = "purple";
div.style.width = '100%';
div.style.height = '100%';
div.style.textAlign = 'center';
div.style.fontSize = '100px';
htmlMeshDiv.setContent(div, 4, 4);
htmlMeshDiv.position.x = 0;
htmlMeshDiv.position.y = 2;
My Issues:
The HTML content (purple div) doesn’t seem to be rendering properly in my scene
I’m not seeing any errors in the console, but the HTML content is not visible
I’ve confirmed the rest of my scene is rendering correctly (ground, camera, lights)
Questions:
Is there something obvious I’m missing in my HtmlMesh implementation?
Do I have to add text content to the div for it to be visible?
Are there any specific requirements for the HtmlMeshRenderer that I might have overlooked?
Should I be using a different approach to render HTML content in my Babylon.js scene?
Are there any known issues with HtmlMesh in the current version of Babylon.js?
Environment:
Using Babylon.js with TypeScript
Importing HtmlMesh from “@babylonjs/addons/htmlMesh”
Any help or guidance would be greatly appreciated! I’ve attached the github link to my current implementation above for reference.
So, my first suspect would be the babylon context. You are using the UMD package (babylonjs) with the es6 version of the HtmlMesh. Can you try using the @babylonjs/core package instead of the UMD package?
And let’s take it from there
Thank you for your suggestion! I’ve implemented your recommendation by switching from the UMD package to @babylonjs/core, but I’m still experiencing the same issue with the HTML content not rendering in my scene.
Here’s what I’ve updated in my code:
// Changed from
// import * as BABYLON from 'babylonjs'
// to
import * as BABYLON from '@babylonjs/core'
import {
HtmlMeshRenderer, HtmlMesh
} from "@babylonjs/addons/htmlMesh";
I’ve pushed these changes to my GitHub repository, but the HTML mesh, though it is in the scene does not render any of the test html I defined. I’ve verified that:
The scene itself renders correctly (ground, vertical plane for html, camera, lights)
No errors appear in the console related to the html Mesh
The HtmlMeshRenderer and HtmlMesh are being instantiated without errors
I’m wondering if:
There are specific initialization steps for HtmlMeshRenderer that I’m missing
The HTML content needs special handling to be visible in the scene
There might be a version compatibility issue between @babylonjs/core and @babylonjs/addons
I am at a loss here; any further guidance would be greatly appreciated!
Sometimes browsers cache a previous build. You can try launching your app on a different port, for example, with the command: npm run dev -- --port 5001.
It works indeed! Thank you for the helpfull feedback!
I was opening the app on Chrome and it didn’t render the HTML inside the plane properly. Once I read your message, I tried with Firefox and to my surprise, it worked just like your screenshot.
I wonder what could be causing this incompatibility with Chrome. Any clues?
