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;
div.appendChild(iframe);
var css3dObject = new CSS3DObject(div);
css3dObject.type = "WP";
obj.css3dObject = css3dObject;
obj.add(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;
obj.add(mesh);
obj.scale.multiplyScalar(0.1);
Please suggest me the way to get rid of the issue.
