Trackball's controls are not responding correctly

Recently, I have been using trackball controls and I've come across a strange bug. When I pan and then zoom out from my new position, the controls start to behave erratically, pulling towards the origin (the further I pan, the worse the issue becomes).

To demonstrate this issue, I have created a fiddle. Simply pan away from the ball (right click + mouse move) and then zoom out.

While I'm not completely certain that the fault lies with the code, this example seems quite straightforward and foolproof.

These are the settings that I have enabled:

var controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);
var radius = 14; // scalar value used to determine relative zoom distances
controls.rotateSpeed = 1;
controls.zoomSpeed = 1.2;
controls.panSpeed = 1;

controls.noZoom = false;
controls.noPan = false;

controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;

controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 25;

controls.keys = [65, 83, 68]; // [rotateKey, zoomKey, panKey]

Answer №1

  1. One interesting feature of the examples in three.js is the trackball controls, which allows for easy manipulation and customization.

  2. It seems that when zooming out after panning in three.js, everything works smoothly until reaching the maximum distance, at which point the camera starts to move unpredictably.

  3. To better understand this issue, check out this updated fiddle showcasing both inner and outer spheres: http://jsfiddle.net/z52dP/1/

  4. If you have any insights on how to enhance the code, feel free to share your suggestions on the three.js GitHub page.

Using three.js r.54 version

.

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

The results of an AJAX file upload operation

Currently, I am utilizing an AJAX File Uploader from the following link: The code I am using is as follows: function ajaxFileUpload() { $('input[type=file]').each(function () { if ($(this).val() == "") { return true; ...

jQuery enigma - struggling to get slideUp/slideDown to function

My goal is to utilize jQuery and CSS to display the initial paragraph out of a set of four, and insert a link or button at the conclusion of the first paragraph. Upon clicking on the link or button, my aim is to reveal the remaining three paragraphs in a s ...

Utilizing Firebase authentication and next-auth in Next.js - Authentication currently returns null

I'm creating a website with nextjs 13 (app router) and incorporating firebase. I've come across suggestions to combine next-auth and firebase auth for using firebase auth effectively. Accordingly, I have configured my firebase Here is the fireba ...

Error: Attempting to access the 'firstChild' property of a null object when trying to display a street view panorama with Vue.js

Looking to integrate a street view panorama using the Google Maps API in my VueJS project. I followed the documentation provided by Google maps here, and here is the basic template: <div id="map"></div> <div id="pano"></div> Her ...

Continuously update scrolling functionality

Could you please provide more information about the solution mentioned in the following question? I am facing a similar issue. jQuery’s css() lags when applied on scroll event Regarding solution #3 ->> To ensure continuous updates, it is suggeste ...

Fetching data from Page 1 and passing it to Page 2 using Javascript

I'm currently experiencing an issue with my AJAX function where it needs to transfer a value from page 1 to page 2 for storage. Let's start with the AJAX function on page one: top.location.href = 'http://www.something.com/redirect.php?emai ...

Assign the two values to variables in the CSS script

My challenge lies in passing two values to the CSS within the <style> tags. The values are: (background-color: --placeholder; color: --placeholdtext;). I am able to pass either one of the values successfully, but not both at the same time. When I cop ...

Adjusting the filter location in React-admin

This is the common method of implementing filters in react-admin https://i.stack.imgur.com/M8yq7.png However, in my particular scenario, I require the filters to be inside each column heading. For example: https://i.stack.imgur.com/GU2Pz.png The filter ...

Safari causing issues with textures in Three.js CanvasRenderer

I am currently working on a Three.js based sample project that will serve as the foundation for a larger project. The project involves a plane with a texture which orbits a center point. The plane is attached to the center point and then the center point i ...

Displaying a loading indicator as content loads within the iframe

How to Display a Loading Indicator During Content Loading Within an iFrame: 1) When a postback or submit event occurs within a form inside the iFrame ...

Error alert: The function is declared but appears as undefined

Below is the javascript function I created: <script type="text/javascript"> function rate_prof(opcode, prof_id) { $.ajax({ alert('Got an error dude'); type: "POST", url: "/caller/", data: { ...

Ways to incorporate the point count divided by a specified value onto a map

I am working with Mapbox GL JS and I have a specific requirement to display the number of markers in a cluster divided by 10 on the map. To achieve this, I am utilizing the point_count and point_count_abbreviated attributes in the code snippet below: map ...

Customize and Enhance Code for Website Integration

My code is fetching a script from an external website. var url = "//example.com/script-url.js"; $.ajax({ url: url, dataType: 'jsonp' }); Although it functions properly, the script retrieved is created by a different website. I need to make ...

Directional light helper in Three.js when the light is connected to the camera

When attempting to utilize the DirectionalLightHelper with a directional light attached to the camera, I encountered some unexpected results. The purpose of attaching the light to the camera was to mimic the rotation of the scene when using TrackballContro ...

Best practices for executing an asynchronous forEachOf function within a waterfall function

I've been working with the async library in express js and I'm encountering an issue when using two of the methods alongside callbacks. The variable result3 prints perfectly at the end of the waterfall within its scope. However, when attempting t ...

Restarting an Angular app is necessary once its HTML has been updated

I've encountered an interesting challenge with an application that combines MVC and Angular2 in a not-so-great way. Basically, on the Index page, there's a partial view loading the Angular app while also including all the necessary JavaScript li ...

Load media upon the click of an image

I'm currently in the process of designing a team page for our website. Each team member's photo is displayed in a grid layout, with two boxes positioned below containing various content. Box 1: This box consists of basic text information. Box 2: ...

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

Is there a condensed way to do this using Lodash? (or perhaps Vanilla JS/TypeScript) var val = _.get(obj, 'value', ''); Please note that var val = obj.value || ''; is not suitable as it considers 0 and false as valid but fal ...

Adjusting font size in dynamic containers relatively

Imagine we have a slider named .outer, which adjusts its height based on the width of the viewport. Inside this slider, there is an example slide called .inner that contains some text. However, when we shrink the window width, the content in slide .inner s ...

Choose a shade from Three.js' color selector

Currently working on a project using A-FRAME, I am in the process of creating a menu for hololens. However, I am facing some challenges with a color picker. I have developed a color picker (link: Color picker) and my goal is to select a color and have it d ...