I have been working on a 3D project where we show 3D object in the web browser using Three.js Library.

The problem is:

• 1st the model is displayed in a small dom element or when the browser window itself is small.


• Then when the window (or the dom element is resized) the model become pixelated

Following are some screenshots:

Before resize:

After resize:

How it should be after resize:

Here is the part of code that is setting the the model dimensions (height and width), and this function gets called when the resize event if fired:

console.log("domChanged fired")



instance.domBoundingBox = instance.dom.getBoundingClientRect();

instance.domCenterPos.x = instance.domBoundingBox.width / 2 + instance.domBoundingBox.left;

instance.domCenterPos.y = instance.domBoundingBox.height / 2 + instance.domBoundingBox.top;



var width = instance.dom.clientWidth, height = instance.dom.clientHeight;

instance.domWidthHalf = width / 2, instance.domHeightHalf = height / 2;



// TODO: fire event to expose it to site developers



// here we should update several values regarding width,height,position

if(instance.cameraReal) {

    instance.cameraReal.aspect = instance.dom.clientWidth / instance.dom.clientHeight;

    instance.cameraReal.updateProjectionMatrix();

}



if(instance.renderer3D)

    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);

Can anybody give me a hint? I've been working on that a couple of days already but no clue so far