Expanding Three.js Canvas Size

Question

Expanding Three.js Canvas Size

I've been immersed in a 3D project where we showcase 3D objects in a web browser using the Three.js Library.

One major issue has cropped up:

Initially, the model appears small within a dom element or when the browser window is resized to a smaller size.
Upon resizing the window (or the dom element), the model starts to appear pixelated and loses its crispness.

Here are some snapshots showcasing this problem:

Before resizing:

After resizing:

How it ideally should look after resizing:

The following code snippet determines the dimensions (height and width) of the model, and is executed upon triggering the resize event:

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: emit an event to make it accessible for site developers

// updating various values related to width, height, and position here
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);

Could anyone provide any insights? I've been at it for a few days now with no breakthrough so far.

javascript three.js

Answer 1

Answer №1

Just like any other element, the canvas element can also be resized. To ensure that your canvas content adjusts to the new size, you need to update both the render and camera.

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

function resizeCanvas(){

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

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

}

Answer 2

Just like any other element, the canvas element can also be resized. To ensure that your canvas content adjusts to the new size, you need to update both the render and camera.

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

function resizeCanvas(){

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

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

}

Answer 3

Answer №2

The problem was finally resolved after discovering that it originated from the application's use of the THREE.EffectComposer object. In the class constructor, a composer object was created like this:

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

It was realized that, just like the renderer, the composer needed its size to be updated after an event handler function, as shown below:

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

This simple adjustment successfully resolved the issue :)

Answer 4

The problem was finally resolved after discovering that it originated from the application's use of the THREE.EffectComposer object. In the class constructor, a composer object was created like this:

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

It was realized that, just like the renderer, the composer needed its size to be updated after an event handler function, as shown below:

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

This simple adjustment successfully resolved the issue :)

Answer 5

Answer №3

I implemented Shawn Whinnery's solution in my React JS project:

Start listening for changes when component mounts:

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

Stop listening for changes when component unmounts (to help with garbage collection):

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

Set up the handler function:

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

We use fat arrow syntax to avoid binding issues with this. If you prefer using regular function syntax like handleResize() { ... }, make sure to bind it in your constructor:

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

Note: Make sure that this.camera refers to your camera object and this.renderer refers to your renderer instance. With those checks in place, you should be able to integrate this code seamlessly.

Answer 6

I implemented Shawn Whinnery's solution in my React JS project:

Start listening for changes when component mounts:

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

Stop listening for changes when component unmounts (to help with garbage collection):

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

Set up the handler function:

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

We use fat arrow syntax to avoid binding issues with this. If you prefer using regular function syntax like handleResize() { ... }, make sure to bind it in your constructor:

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

Note: Make sure that this.camera refers to your camera object and this.renderer refers to your renderer instance. With those checks in place, you should be able to integrate this code seamlessly.

Answer 7

Answer №4

If you're in search of a quick solution to resizing, look no further than this handy utility that takes care of it for you. Take a peek at this repository on GitHub: https://github.com/jeromeetienne/threex.windowresize

All you need to do is install it using bower and then initialize it like so:

new THREEx.WindowResize(renderer, camera)

Answer 8

If you're in search of a quick solution to resizing, look no further than this handy utility that takes care of it for you. Take a peek at this repository on GitHub: https://github.com/jeromeetienne/threex.windowresize

All you need to do is install it using bower and then initialize it like so:

new THREEx.WindowResize(renderer, camera)

Answer 9

Answer №5

Consider using the antialias property to reduce pixelation issues by 50-70%.

For example:

var engine = new THREE.WebGLRenderer({antialias:true});

Answer 10

Consider using the antialias property to reduce pixelation issues by 50-70%.

For example:

var engine = new THREE.WebGLRenderer({antialias:true});

Expanding Three.js Canvas Size

Before resizing:

After resizing:

How it ideally should look after resizing:

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the purpose of employing useMemo in the Material-UI autocomplete documentation?

Setting the height of content using jQuery can be a useful solution when dealing with small window sizes to prevent it from

When incorporating Typescript into HTML, the text does not appear in bold as expected

Is there anyone out there who has successfully imported a model from the three.js editor?

Handling exceptions in Express.js with EJS templating using Node.js

How can I assign a distinct background color to individual sections in Chart.js?

Tips for sending values as parameters to a function within an onclick event in Angular2 without using ngClick

Sending a `refresh` to a Context

`Express.js Controllers: The Key to Context Binding`

Is there a way to prompt the user to enable their Bluetooth functionality using JavaScript?

Transferring data seamlessly between AJAX and PHP

"Exploring the dynamic manipulation of CSS display property through the use of an active class

I need to convert a Json date to a date object, but the server's timezone is causing the time to change. I need to ensure the date and time zone remain consistent

Removing/modifying selected choices in an element

Can you identify the target of the term "this" in the upcoming JavaScript code?

Is there a method to retrieve all Class elements without using a for-loop?

Fetching JSON Data from Web Service using Ajax URL Field - A Simple Guide

What is the best way to forward a client to a different page using an Express post route?

Resizing Bootstrap Modal using React with a Personalized Dimension

onpageshow event behaves as expected exclusively on webkit browsers (triggers function solely when visible on the screen)