The issue with Three.js responsive canvas is that it fails to properly adjust the size of the

I'm currently working on a threejs basic scene and attempting to create a responsive canvas for a full-screen experience. However, the mesh inside the scene is not resizing correctly as expected. Instead of remaining a cube, it distorts into a rectangle when resized.

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

//responsive canvas
const canvas = document.querySelector('.webgl');

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
});

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3
scene.add(camera)


const renderer = new THREE.WebGLRenderer({
    canvas: canvas
});

renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas class="webgl"></canvas>

This is what I expect:

https://i.sstatic.net/HzCLv.png

However, upon resizing the window, the cube appears distorted like this:

https://i.sstatic.net/uqyEr.png

javascriptcsscanvasthree.jsresize

Answer №1

To ensure proper rendering in your scene without an animation loop, remember to manually call renderer.render on resize:

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

//responsive canvas
const canvas = document.querySelector('.webgl');

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    
    renderer.render(scene, camera); // Ensure to include this line
});

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3
scene.add(camera)


const renderer = new THREE.WebGLRenderer({
    canvas: canvas
});

renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas class="webgl"></canvas>

As shown below, here's an example with an animation loop that eliminates the need for manual rendering calls:

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

//responsive canvas
const canvas = document.querySelector('.webgl');

window.addEventListener('resize', () => {
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    
    // renderer.render(scene, camera); // No longer needed as it is invoked within animate()
});

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3
scene.add(camera)


const renderer = new THREE.WebGLRenderer({
    canvas: canvas
});

renderer.setSize(sizes.width, sizes.height);

function animate(time) {
  time *= 0.001; 

  mesh.rotation.x = time * 0.5;
  mesh.rotation.y = time * 1;

  renderer.render(scene, camera); // Continuously rendered here
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas class="webgl"></canvas>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hide the HTML DIV without altering the position of the current div

My goal is to conceal elements 1, 3 and 2 & 4 without changing their position. div{ width: 10%; float: left; } <div style="background-color: blue"><p>1</p></div> <div style="background-color: yellow"><p>2</ ...

javascripthtmljquerycssbootstrap-5

Add items to a separate array only if the material UI checkbox is selected

Exploring the world of React, I decided to create a simple todo app using React JS and Material UI. With separate components for user input (TodoInput.js) and rendering individual todos with checkboxes (TodoCards.js), I aim to display the total number of c ...

javascriptreactjsmaterial-ui

Here's a helpful guide on verifying the presence of a value within an array in Quasar

const myproducts = ref([]) const items = ref([ { id: 1, item: 'Vaporub 50Gm' , barcode: '123456'}, { id: 2, item: 'Herbal Cool Oil (300+100)Ml', barcode: '123456' }, { id: 3, item: 'live Oil Bp 70M ...

javascriptvue.jsvuejs3quasar

Is there a way to make Express JS always serve files from the current directory no matter the route?

Currently, I am developing an Express app utilizing the Handlebars template engine. The HTML files it serves have images that direct to specific locations in my root directory. Everything works seamlessly for basic routes like "http://localhost:5000/image" ...

javascriptnode.jsexpresshandlebars.jsexpress-handlebars

Retrieve all default and user-defined fields associated with contacts in the CRM 2011 system

In CRM 2011, the contact entities come with a variety of default fields, and I have also included some custom fields. My goal is to retrieve all field names in a JavaScript list. When creating an email template in CRM, you can select fields from a dialog. ...

javascriptjsondynamics-crm-2011

utilizing a pair of API requests within a personalized Alexa skill

I posted a question about integrating Alexa with the Steam custom skill API here, but I realize it might be too detailed for some to read through. In essence, my main question is: Can you make two separate API calls within the same block of JS code while ...

javascriptnode.jsapialexa-skills-kit

What's the most effective method for transferring data to different components?

How can I efficiently pass a user info object to all low-level components, even if they are grandchildren? Would using @input work or is there another method to achieve this? Here is the code for my root component: constructor(private _state: GlobalSta ...

javascriptangulartypescript

Upgrading from Vuetify 2 to 3 involves replacing the deprecated styles like .v-application, rounded, and flat with

I need help with upgrading from Vuetify/Vue 2 to Vue 3. I don't have much experience in front-end development, but I am responsible for updating some old code to keep things running smoothly. The migration guide is not very clear and assumes a certain ...

cssvue.jsvuejs3vuetify.jsvuetifyjs3

Headers cannot be set once they have already been sent in NodeJS

Here is the code where I authenticate users in a group, push accounts into an array, and save them using a POST request on /addaccount. groupRouter.post('/addaccount', Verify.verifyOrdinaryUser, function(req, res, next) { Groups.findById(req.bod ...

javascriptnode.jsexpressmongoose

Is it not possible to include Infinity as a number in JSON?

Recently, I encountered a frustrating issue that took an incredibly long time to troubleshoot. Through the REPL (NodeJS), I managed to replicate this problem: > o = {}; {} > JSON.stringify(o) '{}' > o.n = 10 10 > JSON.stringify(o) ...

javascriptjsonnode.jsinfinity

Loading a Vuetify component dynamically within a Vue 3 environment

In my Vue 3 project, I am attempting to dynamically load Vuetify components using the code below: <template> <v-chip>try</v-chip> <component :is="object.tag">{{ object.content }}</component> </template> & ...

javascriptvue.jsvue-componentvuetify.jsvuejs3

The post page remains out of reach for Ajax

I've been struggling for hours to identify the issue with this code. I realized that I am unable to access the updateuser.php file even though it is in the same directory and the filenames are correct. Can someone please review the code below and let ...

javascriptphpjqueryhtmlajax

Node API is failing to insert user data into MongoDB

I'm currently developing a Restful API using Node.js and storing data in Mongodb, focusing on the user registration API. app.js apiRoutes.post('/signup', function(req, res) { if (!req.body.name || !req.body.password) { res.json({suc ...

javascriptangularjsnode.jsmongodb

Developing a Customized Modal with Backbone.js

As a newcomer to Backbone, I have been trying to create a Modal in my application by setting up a base Modal class and then extending it for different templates. However, despite conducting some research, I haven't been able to find a solution that fi ...

javascriptjquerynode.jsbackbone.jsexpress

spontaneous angular rotations in a constantly shifting CSS environment

Is it possible to apply a random CSS rotation to an image just once, rather than having it continuously spin when hovering over a leaflet map? http://jsfiddle.net/J03rgPf/mzwwfav4/3/ I want the random CSS rotation to be set only one time. How can I achie ...

cssangularjsrotationleafletangular-leaflet-directive

Is there a way for me to confirm that I am receiving the 401 error when fetching data?

When using an async function to fetch data, how can one determine if a 401 error occurred during the data retrieval process? The code example is as follows: async function getBilling(url, id, date) { let header = { method: 'GE ...

javascriptrestasync-awaitfetch-apihttp-status-code-401

NodeJS and ExpressJS fail to redirect to the main landing page

I am currently developing a shopping cart application using nodejs/expressjs. I have encountered an issue with redirecting back to the homepage ('/') after the user submits their credentials during sign up. Despite my search for relevant articles ...

javascriptnode.jsexpressredirectexpress-handlebars

in javascript, how can you access the value of a parent object within a nested object?

Within the material ui framework, I am utilizing the createMuiTheme function to create a theme. How can I access the values of the parent object within a nested object? (I am aware that I can declare global variables above the function); To better unders ...

javascriptreactjsmaterial-ui

The WHATWG URL API allows creation of a new URL using the new URL

I've been experimenting with node and attempting to create an instance of the URL class to utilize its useful properties. Here's what I tried: const { URL } = require('url'); (...) http.createServer((request,response) => { let u ...

javascriptnode.jsserver

multiple event listeners combined into a single function

I'm looking to streamline my button handling in JavaScript by creating just one function that can handle all the buttons on my page. Each button will trigger a different action, so I need a way to differentiate between them. I thought of using one eve ...

javascripttypescriptdom