Three.js Resizing Canvas

Question

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 expos…

Accepted Answer

Finally the problem were solved the actually problem was coming from because the application is using the `THREE.EffectComposer` object, in the class constructor a composer object were created like following:

```
this.composer = new THREE.EffectComposer(this.renderer3D);
```

So as for the renderer, the composer needed to have the size updated after the event handler function like following:

```
if(instance.renderer3D)
    instance.renderer3D.setSize(instance.dom.clientWidth, instance.dom.clientHeight);
if(instance.composer)
    instance.composer.setSize(instance.dom.clientWidth, instance.dom.clientHeight);
```

And this fixed the issue perfectly :)

Three.js Resizing Canvas

Solution

Problem