Controlling camera rotation with threeJS Trackball

After working with threejs for quite some time on a 3D image-based modeling application at vmtklab.orobix.com, I have encountered an issue. I am currently using TrackballControls.js for camera rotation, translation, and zooming.

controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.dynamicDampingFactor = 0.5;
controls.target.set( pos.x, pos.y, pos.z );

Having previous experience with camera movement in vtk (such as Paraview), I am struggling to replicate the behavior in threejs.

Take a look at: http://jsfiddle.net/ugxbktLt/5/

The issue arises when clicking on a point off the canvas center, causing the camera to rotate in two directions instead of following the mouse movement along a single axis.

I anticipated the camera would rotate based solely on the vector between the starting point (mousedown) and end point from mouse movement, not considering the initial position. It feels like it is rotating around a sphere instead.

Any suggestions or recommendations would be greatly appreciated. Warm regards, Simone

Answer №1

Enhanced: Utilizing SymmetricTrackballControls.js enables us to freely rotate the camera regardless of the mouse's position on the canvas, focusing solely on the movement of the mouse. https://github.com/mrdoob/three.js/pull/6096

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

How can you switch the display between two different class names using JavaScript?

I currently have a total of four filter buttons on my website, and I only want two of them to be visible at any given time. To achieve this, I labeled the first set of buttons as .switch1 and the second set as .switch2. Now, I've added a 'switch ...

How can you prevent the browser from prompting to save your email and password when filling out a sign-up form?

I'm currently developing a PHP sign up form, but whenever I click on the sign up button, the browser prompts me to save the email and password. Is there a way to prevent this from happening? ...

Using d3 to showcase pictures sourced from a csv file

Having recently embarked on a journey to learn javascript, d3, and the polymer project, I am facing a challenge that I hope to get some guidance on. After successfully parsing a csv file containing image information and creating an array specifically for ...

Steps for Building and Exporting a Next.js Project Without Minification and Optimization

Is there a way to build and export a Next.js project without minifying and optimizing the output files? ...

Ways to reset a JQuery/JavaScript filter

I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size. However, when I apply filters using buttons, items that are already displayed do n ...

Conceal content upon initial page load, then unveil after a set period of time

Is there a way to hide a paragraph on page load and reveal it after a certain amount of time has passed? I assume JavaScript will be needed, but I'm not sure where to begin. Any suggestions? ...

Is there a way to transfer the getJSON output into an input field?

I am attempting to fill out a form with the data from the most recent entry in my database using $.getJSON. Although the GET request successfully returns the JSON, I am struggling to populate the fields with the data. I am relatively new to this and seekin ...

Assigning index values to child rows in AngularJS: a step by step guide

One of my requirements involves assigning index values to child rows. The structure includes group rows with child rows underneath. Currently, I am using ng-repeat along with $index for the children as shown below: HTML code: <table ng-repeat="nod ...

Simple steps to access a feature on an AngularJS application

I have my angular application stored in a variable (initialized with:) var app = angular.module('app', [...]); Now, I need to access the $timeout service. How can I retrieve this service from it? I am looking for something like: var timeout ...

Guide to setting up a nested vuetify navigation drawer

I am facing a scenario where I have one fixed navigation drawer with icons and another dynamic navigation drawer that should open and close adjacent to the fixed one without overlapping. The current implementation is causing the dynamic drawer to overlap t ...

After updating to version 0.10.10, Visual Studio Code no longer recognizes JavaScript syntax highlighting

Can anyone help me with this issue? I have attached a screenshot for reference. Any assistance would be greatly appreciated. https://i.sstatic.net/3cjKc.png ...

What is the best way to create multiline scripts within npm scripts?

Here is how my package.json is structured: { "name": "project", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "lint": "./node_modules/eslint/bin/eslint.js --format \"./node_modules/eslint-friendly-formatter/in ...

Enter a keyword in the search bar to find what you're looking

I am working on a form where users can select their occupation from a list that is stored in a separate .js file. The list includes various occupations like 'AA Patrolman' and 'Abattoir Inspector'. var occupationSelect = "<select id ...

Display numerous divisions depending on the choices made in several Select2 fields

I need assistance in creating a website without using check-boxes, and I believe jQuery Select2 is the solution. However, I am facing an issue where I cannot display multiple divs based on multiple Select2 selections. For instance, if "OnBase" is selected ...

Error on node: The type of error encountered is TypeError. It appears to be related to req.query.acct_stmt_id not being

I encountered a puzzling issue where a particular route works flawlessly with an input array of size 10, but throws the error TypeError: req.query.acct_stmt_id.map is not a function when the input array size increases to 100. To run node, I am utilizing - ...

Retrieve the chosen data from the database and store it directly into an array

Hello, I'm currently working on developing a rest API using Express and MySQL. My goal is to retrieve values from the database and present them in an array format like this: [1, 4, 5, 6, 22, etc..] However, when I fetch rows from the table and send t ...

What is the most effective way to reset the v-model in the child component using the parent component?

Could you please assist me? I have been trying for 10 hours straight and it doesn't seem to work. What I am aiming for is that when I click on @click="cleanDataForm" in the Parent Component, the v-model text in the Child component will be emptied. I h ...

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

Change the way a button interacts with a different element

Currently, I am utilizing SlickSlider from http://kenwheeler.github.io/slick/ and attempting to integrate the Next and Prev buttons with other elements (specifically spans within another container). I have attempted the following: $('button.next&apo ...

Import data from a distant file into a node Buffer within the web browser

Currently, I am utilizing browserify to utilize this particular package within the browser. Specifically, I have developed a phonegap application that retrieves .fsc files from the server. The code snippet looks like this: var reader = new FileReader( ...