59

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:

enter image description here

After resize:

enter image description here

How it should be after resize:

enter image description here

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

1
  • AFAIK setSize changes the canvas width/height (render resolution) for you and uses the new size for glViewport. Can you double check instance.dom.clientWidth/Height are actually changing? It looks like the canvas is changing size and not its internal resolution.
    – jozxyqk
    Dec 8, 2013 at 2:39

5 Answers 5

150

So the canvas element can be resized like every other element. What you want to do is tell the render and camera to resize the contents of your canvas as well.

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}
5
  • its alreay done, you can see it in the code snipet I've shared in the code Dec 7, 2013 at 11:51
  • 7
    Just wanted to separate the answer from the question for anybody else that might have this problem. Cool building btw. Dec 16, 2013 at 21:53
  • Okay, thanks for the help :), actually the problem is solved by now, I'll try to find a time to write an answer Dec 16, 2013 at 22:06
  • 17
    Beginners don't get tripped up by use of window here, you may be using your own container for your renderer, substitute that container for window
    – Neil
    Feb 11, 2016 at 13:59
  • super old thread, but this helped me. updateProjectionMatrix is what I was missing. Thanks
    – vch
    Jun 26, 2022 at 18:05
15

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 :)

14

I applied Shawn Whinnery's answer to my needs with React JS:

Start listener onMount:

componentDidMount() {
  window.addEventListener('resize', this.handleResize, false)
}

Remove listener onUnmount (because we like garbage collection):

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize, false)
}

Install handler function:

handleResize = () => {
  this.camera.aspect = window.innerWidth / window.innerHeight
  this.camera.updateProjectionMatrix()
  this.renderer.setSize(window.innerWidth, window.innerHeight)
}

Fat arrow syntax is used to avoid binding this. The code will not work if you have this: handleResize() { ... }, but of course, it would work if you added this to your constructor:

this.handleResize = this.handleResize.bind(this)

Final note: confirm that your camera is this.camera and your renderer is this.renderer. Besides that, you should be able to paste it all in.

4

For those googling, if you want to start off quick with a helper util that does the resizing for you, check out this github: https://github.com/jeromeetienne/threex.windowresize

The only thing you have to do is install it via bower and initialise it:

new THREEx.WindowResize(renderer, camera)
2
  • This method is the easiest. Just include the js file and initialize the resizer. Works perfectly. Aug 9, 2016 at 4:33
  • Reading my own comment after 7 years. Please don't use this anymore 🤭
    – polyclick
    Dec 20, 2022 at 11:44
-5

try antialias property to resolve pixelation problem by 50 - 70%

e.g :var renderer = new THREE.WebGLRenderer({antialias:true});

1
  • 1
    The "pixelation" here is due to subsampling since the renderer was not upscaled to the new window size, not due to aliasing.
    – Ray
    Jun 4, 2021 at 22:56

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.