Resizing THREE.js canvas by clicking on it

I'm currently exploring options to dynamically resize my threejs/webgl canvas using this function:

function resizeCanvas(){
    $('#canvas').css('height', '100%');
    $('#canvas').css('z-index', '1');

    camera.aspect = window.innerWidth / parseInt($('#canvas').css('height'));
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, parseInt($('#canvas').css('height'))); 
}

While the function does the job, I am interested in achieving a smoother transition rather than an abrupt jump to 100%. Any suggestions on how to enhance this would be appreciated.

javascriptthree.js

Answer №2

Despite attempting to resize the canvas using DOM events without success, I decided to take matters into my own hands and incorporate the resizing directly into my animation loop:

if(expand){
    var temp = parseInt($('#canvas').css('height'));
    temp+=11.5;
    renderer.setSize(window.innerWidth, temp );
    $('#canvas').css('height', temp);
    camera.aspect = window.innerWidth / parseInt($('#canvas').css('height'));
    camera.updateProjectionMatrix();
}

Admittedly, this solution may not be the most elegant, but it serves its purpose as I only require a single resize before redirecting the page elsewhere.

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

Contrast between categories and namespaces in TypeScript

Can you clarify the distinction between classes and namespaces in TypeScript? I understand that creating a class with static methods allows for accessing them without instantiating the class, which seems to align with the purpose of namespaces. I am aware ...

javascriptclasstypescriptnamespacesdifference

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

The Array Map method in JavaScript transforms each element within the array

I have a vector of objects in JavaScript (React Native) and I am trying to assign a unique random key to each item in the array. However, when I add the key property to one object, it ends up being the same for every element in the array. It's puzzli ...

javascriptarraysreact-nativedictionary

What are the typical situations in which Node.js is commonly used?

Do you believe that a majority of node.js users primarily utilize npm? What do you think are the most prevalent use cases for node.js apart from npm? ...

javascriptnode.js

Learn how to dynamically import external modules or plugins using the import() functionality of TypeScript 2.4 within the production script generated by Angular CLI

Utilizing the typescript 2.4 [import()][1] feature has proven to be effective for dynamically loading modules. Testing this functionality has shown positive results, especially when importing modules and components located within the same directory. Howev ...

javascriptangulartypescriptimport

An AngularJS-powered dynamic navbar

Apologies if my explanation is unclear, but I am struggling to find a simple way to convey the following information. I have set up a navigation bar that displays different categories of articles. These navigation items are pulled from a database and can ...

javascriptangularjstwitter-bootstrap

The expected behavior is not displayed when using Async.waterfall within a promise queue

In our software implementation, we have utilized a promise queue feature using the q library. The sequence of functions is structured as follows: PQFn1 -(then)- PQFn2 - .... Within PQFn1, an array of values is passed to a callback function implemented wi ...

javascriptnode.jsqasync.js

When you try to click outside of react-select, the dropdown doesn't

I've been working on customizing react-select and encountered some issues. Specifically, after modifying the ValueContainer and SelectContainer components, I noticed that the dropdown doesn't close when clicking outside of it after selecting a va ...

javascriptreactjsreact-select

The variable referencing an unidentified function has not been defined

I've created an anonymous function assigned to a variable in order to reduce the use of global variables. This function contains nested functions for preloading and resizing images, as well as navigation (next and previous). However, when I try to run ...

javascriptglobalanonymous

Creating a log-out script in Parse (JavaScript) can be achieved by following these steps

I'm facing an issue with logging out from my website. Despite browsing through Parse's documentation, I couldn't find a detailed explanation on how to log out the user, especially since I'm not well-versed in JavaScript. Whenever I cli ...

javascripthtmltwitter-bootstrapparse-platform

How can we identify if a React component is stateless/functional?

Two types of components exist in my React project: functional/stateless and those inherited from React.Component: const Component1 = () => (<span>Hello</span>) class Component2 extends React.Component { render() { return (<span> ...

javascriptreactjs

What methods would you use to test a Vanilla JS Ajax call handled by a Promise using Jasmine?

I recently came across a great solution on How to make an AJAX call without jQuery? that I wanted to implement. However, I found it challenging to mock the Promise, the AJAX call, or both in my testing. My initial attempt with jasmine-ajax didn't wor ...

javascriptajaxjasminepromise

What is the best way to get rid of seams in normal maps when using cube-mapped Three.js BoxBufferGeometry?

Having converted a BoxBufferGeometry into a sphere and correctly set the normals, the issue I am facing is noticeable seams at the edges and UV borders of each face. Despite rendering with completely flat normal maps (consisting of all pixels in rgb(128, 1 ...

3dthree.js

The function contacts.map is not defined

Can someone help me understand why I am getting the error message "contacts.map is not a function"? I am working on fetching data from a contacts array list that I have created. My goal is to display buttons inside a panel. When a button is clicked, the sc ...

javascriptreactjs

Having difficulty grasping the concept of toggleClass and jQuery selectors

I am struggling to understand the getLiveSearchUsers function in my JS file. Could someone please help me? I don't quite grasp what selector[0] is and what toggleClass is doing here. $.post("includes/handlers/ajax_search.php", {query:value, userLogge ...

javascriptphpjqueryajaxhtml

Search for elements once they have been dynamically loaded using AJAX with the

I have a function called getItemID which searches for all the IDs under a specific parent ID (#search-output). This function works well when the ID (#test) is already loaded when the page loads. However, I am dynamically generating these IDs (#test) using ...

javascriptjqueryajax

Tips for utilizing data attribute in jQuery programming

How can I modify my jQuery code to select the data attribute "data-price" instead of the value attribute? Sample HTML code: <span id="priceToSwap3"">$238</span> <select id="trapsize"> <option data-price="238">item1</option> ...

javascriptjqueryhtmlselectattributes

Arrange Vuetify elements in a single page stack

How can I stack two UI components on one page using Vuetify? I've attempted to combine elements within a single bracket, but I keep receiving error messages. When I stack components in separate brackets, only the bottom template appears in the fronten ...

javascriptvue.jsfrontendvue-routervuetify.js

Creating a modal with a checkbox option for "remember my preference" in Angular

Currently, I am working on an Angular project (version 16) and my goal is to create a dialog modal that includes a checkbox for "do not show again". Here is the process I envision: When a user visits the web application for the first time, a dialog moda ...

javascriptangulartypescriptmodal-dialoglocal-storage

Issue: unable to establish a connection to [localhost:27017]

Upon executing node app.js, an error message is displayed: Failed to load c++ bson extension, using pure JS version Express server listening on port 3000 events.js:85 throw er; // Unhandled 'error' event ^ Error: failed to conn ...

javascriptnode.jsmonolocalhost