Resizing the Three.js canvas without impacting the renderer size or content scaling: A guide

I am currently in the process of creating a website using a Three.js canvas that covers the entire viewport. My goal is to keep the visuals consistent even when resizing the window, without any scaling.

Here is my current approach:

  • renderer.setSize(window.screen.width, window.screen.height)
  • Then, on initialization and window resize: 
    • camera.fov = window.innerHeight / window.screen.height;
    • camera.aspect = window.innerWidth / window.innerHeight;
    • renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);


While this method works effectively, I have some concerns about its efficiency. Since the renderer size remains constant regardless of the browser window's size, I wonder if there might be unnecessary calculations taking place. Does setViewport efficiently reduce the computational workload for each frame, or are all calculations still performed before cropping?

javascriptcanvasthree.jsresize

Answer №1

Looking for a solution? Check out the official documentation where you can find the answer tucked away in the FAQs section:

To calculate the visible height, use the formula: visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;

For a modified version suitable for resize events (remember to store window dimensions and use them in a throttled function):

renderer.setSize(window.innerWidth, window.innerHeight);
camera.fov = Math.atan(window.innerHeight / 2 / camera.position.z) * 2 * THREE.Math.RAD2DEG;
camera.aspect = window.innerWidth / window.innerHeight;

Don't forget to include camera.updateProjectionMatrix();!

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

Vue-router vulnerability allowing for DOM-based open redirects

I am currently working on a Vue application that was created using Vue-cli. Vue version: 2.6.11 vue-router version: 3.2.0 Link for Reproduction https://github.com/keyhangholami/dom-based-open-redirect Instructions to replicate To reproduce the i ...

javascriptvue.jsvue-router

Having trouble converting Buffered Byte Array into Image in Browser

Hello there! I am currently facing an issue while attempting to generate an image from a buffered byte array. The reason behind this is that I need to transfer the image from the server to the client using JSON. Below is the code snippet in question: The ...

javascriptarraysimagebyteblob

Vue js parent-child communication using event bus fails to function

Is there any way to successfully communicate between non parent child components in vue js document? I followed the instructions in the vue document, but unfortunately, my code did not work as expected. Below is a snippet of my code: The structure of the ...

javascriptvue.js

Generate a dynamic HTML table using an array of objects

I have a dataset that I need to transform into an HTML table like the one shown in this image: https://i.sstatic.net/gRxJz.png Despite my attempts to write the code below, it seems that the rows are being appended in different positions. Is there another ...

javascriptjqueryarraysjson

Techniques for transferring child properties and values to parent components upon the screen being initialized

Is there a way to pass property values from a child component to a parent component when the react app is first loaded? In my scenario, I have a parent component named app.js that renders a home component containing a JSON component. Initially, upon loadi ...

javascriptreactjs

Error: AppModule requires an array of arguments in order to function properly

Upon successfully compiling my Angular application and running ng serve, I encountered the following error in the browser console. AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: Arguments array must have arguments. at injectArgs (core.js:1412) at c ...

javascriptnode.jsangulartypescriptnpm

What is the best method to make the first input field the focus in BootStrap?

Is there a way to prioritize the focus on the initial input element in an HTML form without specifying an ID? How to set the focus to the first input element in an HTML form independent from the id? I'm working with BootStrap and ASP.NET MVC4. De ...

javascripthtmltwitter-bootstrap

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures

My current code successfully updates part of an src URL for regular images. let svgz = document.querySelectorAll(".svg"); for (let i = 0; i < svgz.length; i++) { svgz[i].src = svgz[i].src.replace("light", "dark"); } Now, ...

javascriptcss

React.js is having trouble locating an image that contains a variable in its file path

Although I am new to React, I have a simple project with TailwindCSS. My question may sound silly, but I want to check if an image exists and set a class pointing to that image. However, I keep encountering an error in React. App.js: import './App.cs ...

javascriptreactjsweb

Tips on shifting a Point along a Circle using Javafx canvas:

I'm looking to create a dynamic interaction by moving a black point around the edge of a circle within a canvas. Currently, I am struggling with using PathTransition() as it only accepts a Shape parameter. Is there a way to utilize the circle in the ...

javacanvasjavafxkotlin

What is the best way to switch from using the three.js JSONLoader to the ObjectLoader?

I successfully loaded multiple files using the code below for three.js JSONLoader: <!DOCTYPE html> <html> <head> <title>Rotating Sphere</title> <meta charset="utf-8"> <!-- https://cdnjs.com/libra ...

javascript3dthree.js

Using PHP and JQuery to disable a button after the letter "U" is typed

I am looking for a way to disable the button when the term "U" (defined as Unable) appears. How can I achieve this? Below is the button in question: <input type="submit" class="form-control btn-warning" name="search" value="Search Data"></input& ...

javascriptphpjqueryhtmlforms

Using javascript to color in cells of a grid of "pixels"

I have a project similar to an Etch-a-Sketch in progress. The main challenge I am currently facing is how to gradually darken each cell of the grid with every pass of the mouse cursor, based on the opacity of the cell being hovered over. When the grid cell ...

javascripthtmlcss

Combine arrays using underscore or lodash

Hello, I need some assistance. I have a couple of arrays containing grades with associated classes attributes like the examples below: var arr1 = [{ "id": 53, "name": "Grade 1 AppMonkeyzTest", "classes": [{ "id": 5 ...

javascriptarraysunderscore.js

Is there a way to modify certain parameters of a plugin without the need to directly edit the

Is there a way to modify certain parameters of a plugin without directly editing it? You can find the link to the plugin here: . Can we include an additional script to override specific parameters of the above script, such as setting displayTime to 1000 ...

javascriptjquerypluginsjquery-plugins

Can you choose and generate identical values using react-select?

I am working on implementing a multi Creatable feature where users can select a preset value or create a new value during the same interaction. To illustrate, here is my current render: import CreatableSelect from 'react-select/creatable'; functi ...

javascriptreactjsreact-select

Use npm to include a new dependency from the current dependency structure

I am currently working on a Vue application that utilizes both vuetable-2 and vue-axios. In my app.js file, I have the following imports: import Vue from 'vue' import VueMaterial from 'vue-material' import axios from 'axios' ...

javascriptnode.jsnpmnpm-install

Angular filtering arrays of data

$scope.currentEvent = Object { item_id: "10535", name: "johnny", user_type: "1",category_id: "5"}, Object { item_id: "10534", name: "smith", user_type: "1",category_id: "6"}, Object { item_id: "10536", name: "Greg", user_type: "1",category_id: "7"}; $sco ...

javascriptangularjs

Implementing login functionality in an Angular application with the help of Kinvey.Social and utilizing the Promise API

I have been utilizing the Kinvey HTML5 library in an attempt to create a client-side application that integrates Google identities for Login. While the Oauth transaction appears to be functioning properly, I am encountering an issue with toggling the visib ...

javascripthtmlangularjskinvey

What is the reason for needing to refresh when submitting form data in a Node application with an HTTP POST

Code Snippet - Angular .state('studentInfo.newStudent', { url : '/new/student', templateUrl: 'students/new-student.html', controller : function($state, $http){ this.saveStudent = func ...

javascriptangularjsnode.jsmongodbmean-stack