Tips for refreshing Trackball controls in three.js

In my three.js project, I am faced with the challenge of updating the trackball controls upon window resize. I have found that updating the entire controls by calling the function with new input variables is necessary. Unfortunately, recreating the controls leads to a crash, and I want to avoid deleting the controls and creating new ones due to potential memory leaks. I came across a similar inquiry on How to update createControls's function input variables in JavaScript?, but I believe my question is more comprehensive.

javascriptthree.jscontrolstrackball

Answer №1

To ensure that TrackballControls is updated when the window is resized, follow this method:

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

function onWindowResize() {

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

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

    controls.handleResize(); // for TrackballControls

    render();

}

Adapt this approach to fit the sizing of your canvas.

Visit for more information.

Version: three.js r.70

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

what is the process for configuring a Universal link using javascript?

I have taken all the necessary steps to utilize a universal link. I created an AASA file, verified it using aasa-validator, and configured it in XCODE as required. Now, I am facing the challenge of setting up a hyperlink on my webpage that can redirect us ...

javascriptiosdeep-linkingios-universal-links

In Angular 2, you can include a routerLink in a child component that directs to the root

Currently, I am developing a web application using Angular 2 Beta 8 and encountering an issue with nested routes while utilizing the routerLink directive. The structure of the router is as follows: AppCmp |-> NewItemFormCmp |-> UserDashboardCmp ...

javascriptroutesangularrouterangular2-routing

What is the specific function of $('id').on('click', this.method.bind(this)) in this scenario?

Check out the app I'm talking about here: I am delving into the bind method in JavaScript to grasp its essence. Upon experimenting with it in the console, my interpretation is that bind produces a duplicate of the function, wherein "this" is tethere ...

javascriptjquerythis

Tips for including HTML tags within a string using node.js, express, and ejs

Currently, I am utilizing Node.js with Express and EJS for my project. My goal is to pass HTML tags within a string to the browser in the following manner: listRequests.forEach(function(key) { messages.push("You have a message from <b>" + key.us ...

javascriptnode.jsexpressejs

Attempting to load an image through an AJAX Request may prove to be unsuccessful

I am facing an issue with using an AJAX request to load a gif image from the following source: Despite my attempts, using the response on the image source like this: $('#cat-thumb-1').attr('src', 'data:image/gif;base64,' + d ...

javascriptjqueryajaximage

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Is there a way to check a condition before subscribing within the operator chain? Here's what I have: // parentElem:boolean = false; // the parent elem show/hide; let parentElem = false; // inside the ngAfterViewInit(); this.myForm.get('grandPa ...

javascriptangulartypescriptrxjs

How can a method inside an object property of the same class be invoked in JavaScript?

I'm faced with a bit of confusion here. I have a class property called hotspot of type object, declared as follows: Cannon.prototype.hotspot = {stuff: this.blah(...) }; The method blah() is actually a prototype of the same 'class': Canno ...

javascripthtmlprototypejs

What could be the reason for the <div> style on the webpage not changing?

I'm currently working on a Django project where I've encountered a challenge. I have div containers with dynamic IDs, where the ID is fetched from the database and automatically injected into the HTML. Here's an example of how the dynamic I ...

javascripthtmldjango

Is it possible to send an entire HTML table to the server and then update the database table with it?

Recently, I encountered an issue that has me stumped. Suppose I have a database table A with multiple columns and the server (PHP script) renders this data into an HTML table for the web client. Now, the challenge lies in allowing users to add/delete rows ...

javascriptjqueryajaxhtml-table

JavaScript 3D Arrays

Is there a way to create a 3D array similar to runes['red'][0]['test']? If so, how can I accomplish this? var runes = {} runes['red'] = [ 'test': ['loh'] ] runes['blue'] = {} runes[&apo ...

javascriptmultidimensional-array

Choosing a single radio button value within a nested ng-repeat loop in AngularJS

Help needed with selecting only one radio button value in nested ng-repeat. Please review the source code and suggest any potential mistakes. <form ng-submit="save()"> <div ng-repeat="x in surveyLst"> <div class="row"> < ...

javascriptjqueryhtmlangularjsforms

IE 11 encountering issues with Date.parse returning NaN

Whenever I attempt to parse a date in Internet Explorer 11, it throws NaN at me. However, in Chrome and Firefox, I get the timestamp 1494559800000. Date.parse("5/12/2017 09:00 AM") The condition below is where things go wrong for me in IE 11. Is there an ...

javascriptinternet-explorer-11

How to apply styles to a child component using CSS modules in a parent component

For the styling of a Material UI component (Paper) within a Menu component, I am referencing this documentation. To style my components using CSS modules with Webpack as the bundler, here's an example: // menu.js import React from 'react'; ...

javascriptcssreactjsmaterial-uistyling

Timezones not synchronizing properly with Moment.js

Hello everyone, I am currently exploring the world of moment.js along with the timezone add-on. I'm encountering some issues with a world clock project that involves using moment.js and moment-timezone.js together on a page where highcharts are also p ...

javascriptjquerymomentjsmoment-timezone

How to retrieve a DOM element using Aurelia framework

When it comes to accessing a DOM element in Aurelia, what are the best practices to follow for different use cases? Currently, I have two scenarios in my Aurelia project: Firstly, within the template, there is a form that I need to access from the view-mo ...

javascripthtmldomaurelia

What is the best way to access a video stored in a local file on the initial page and then watch it on the subsequent

I recently encountered a scenario where I needed to select a video on one page and have it automatically play on another page without any redirection. The initial page displays a list of videos for selection, like this: FirstPage Once a video is chosen on ...

javascriptphphtmlvideo

What sets apart window.app=new Vue({}) versus const app = new Vue({}) when included in app.js within a Vue.js environment?

What exactly is the difference between using window.app and const app in main.js within Vue? import question from './components/Questions.vue'; Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken; window.App = new Vue({ ...

javascriptlaravelvue.js

Incorporating an HTTP-based IFRAME into an HTTPS web address

My situation involves a PHP application running in HTTPS mode, within which there is an iframe containing an HTTP file. Both the parent and the iframe exist within the same domain. Strangely, I am unable to access the iframe source using HTTP. Is there a ...

phpjavascriptiframe

Is it dangerous to assign innerHTML to a div using ReactJS?

I want to display a status message based on the response received from an axios POST request. Here is my code: import React from 'react'; import axios from 'axios'; const handleSubmit = (email, pass) => { const data = { ...

javascriptreactjsnode.jsexpress

Working with the Enter Key in Vue.js

I am faced with a challenge involving a text field and a button setup. By default, the button is set to submit a form when the Enter key is pressed on the keyboard. My goal is to capture each key press while someone is typing in the text field, particularl ...

javascriptvue.js