Text of embedded webpage inside CSS3DRenderer turns blurry at certain zoom level

Hi there,

I am experiencing a weird issue here when trying to mix WebGLRenderer with CSS3DRenderer.

I am looking to embed webpages using iframe inside scene using iframe. Everything works fine but the only problem is at some zoom level text in webpage gets unreadable.

I experience same thing while using img tag to load the image. So as solution I created the image 10 times bigger then scale it down by 0.1 to make it look correct. But in case of webpage it does not work.

As you can see it looks fine from this angle and zoom level

And at this angle the text in web page is completely unreadable

I am using the following code to load iframe in threejs scene.

const obj = new THREE.Object3D();

  const div = document.createElement('div');
	div.style.width = '1000px';
	div.style.height = '1000px';
	//div.style.backgroundColor = '#000';

  const iframe = document.createElement('iframe');
  iframe.width = 1000;
  iframe.height = 1000;
  iframe.frameBorder =0;  
  iframe.style.width = '1000px';
  iframe.style.height = '1000px';
  iframe.style.border = "none";  
  iframe.src = webUrl;
  var css3dObject = new CSS3DObject(div);
  css3dObject.type = "WP";
  obj.css3dObject = css3dObject;

  var material = new THREE.MeshBasicMaterial({
    opacity: 0.001,
    color: new THREE.Color(0x000000),
    blending: THREE.NoBlending,
    side: THREE.DoubleSide
  var geometry = new THREE.PlaneGeometry(1000, 1000);
  var mesh = new THREE.Mesh(geometry, material);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  obj.lightShadowMesh = mesh;

Please suggest me the way to get rid of the issue.

increase the canvas size

Does this happen in a specific browser? Can you please test with Chrome, Firefox and if possible Edge and Safari?

A live example that demonstrates the issue would be helpful.

Does the canvas size really matter?

I have checked it in Chrome, Edge And Firefox.

And I have found Chrome, Edge behaves in same way as both are Chromium based browser. Following is the result of that.

But in Firefox result is different like the following. Although both are in almost same angle and same zoom level as well.

How can I get rid of this issue in Chromium based browser?

Sorry, I don’t that. Consider to report this issue to the Chromium bug tracker. That could be an issue in Chromium based browsers.


If you do so, you definitely should attach a live example for reproduction.