Center rotation with THREE.TrackballControls

I'm facing an issue with rotating an object on the scene using THREE.TrackballControls. The rotation is not relative to the object's axis when it's not in the center of the screen - instead, it rotates based on the center of the screen. I attempted changing the camera position before creating controls but without success.

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    camera.position.z = 3;
    camera.position.y = 10;

    controls = new THREE.TrackballControls(camera);

Is there a way to set the center for camera rotation in TrackballControls? This would allow the object to rotate independently of the center of the scene.

Thanks, Zhenya

Answer №1

TrackballControls allows you to rotate the camera, not the object itself.

To adjust the rotation of the camera, use the following code snippet:

controls.target.set( x, y, z );

This applies to three.js version r.58

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

A step-by-step guide on recursively removing all empty array children [] from a nested JSON structure

When I receive a JSON response, I utilize nested JSON data from my GeoRegionCountries APIController and a custom class TreeView to structure the data for a plugin. The specific plugin I am using is a combo multi-select Treeview, accessible through this lin ...

What is the best method for ensuring that cheese rises to the top?

Is there a way to increase the value of the variable cheese? I suspect it has something to do with how the variable cheese is defined each time the JavaScript is activated, but I'm not sure how to go about it. Can you offer some guidance on this? & ...

How can I use jQuery to target and modify multiple elements simultaneously

I've been struggling for the past couple of hours trying to use prop to change the values of two items in a button. One item updates successfully, but the other one doesn't and I can't figure out why. Here is the HTML: <input type=&apos ...

What could be the reason for the counter not being incremented when the button is clicked

While attempting to increase the counter in my test, I encountered an issue where pressing the button did not change the value. I tried using both fireEvent from React testing library and React test utils, but the value remained at 10. My project is using ...

The Proper Method of Displaying Data from a JSON File Using AngularJS

I'm having trouble getting the data from a JSON file (click on the "Json File" link to view the structure). I'm not sure what to put after "$Scope.listOfRecipe=". I tried using response.data.recipes, but it's not working and causing errors. ...

Activate the Masterpage menu to emphasize its current state

I am currently utilizing the AdminLTE template on my website. One issue I have encountered is with the menu and its child menus. When redirecting to different pages using image buttons, the menu collapses back to its original state. While navigating throu ...

Warning: The NextUI ThemeProvider may trigger a notice for additional attributes from the server, such as class and style

I recently integrated NextUI into my NextJS 14 application The issue seems to be originating from the ThemeProvider in my main providers.tsx file: 'use client'; import { NextUIProvider } from '@nextui-org/react'; import { ThemeProvide ...

Is it possible to asynchronously access a JSON object that has been retrieved from a local file on a global scale using the XMLHttpRequest method and

Having some trouble manipulating data from a local JSON file using this technique (no jQuery) as I can't seem to access the object on a global scale: var actual_JSON; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.o ...

Tips for dynamically passing a string into a Javascript function

Here is a JavaScript function that I have: function doIt(link) { alert(link); } I am using this function in the following JavaScript code snippet. Here, I am dynamically creating an anchor tag and appending it to my HTML page: jQuery.each(data, func ...

Exploring the flow of resolve promises in UI-router from the main root state to its sub-states

Currently, I am in the process of developing an Angular application with ui-router. The first step I took was to create a root state that serves as an abstract one intended for resolving asynchronous dependencies. This means that any subsequent sub-states ...

Navigating Bootstrap: Refreshing a full-screen modal with a swipe gesture on mobile devices

I'm currently utilizing Bootstrap 5's full screen modal and I'm exploring how to implement a feature that enables refreshing on mobile devices by swiping down, similar to how you would usually refresh a page. <script src="https://cdn.j ...

Overflow is causing interference with the scrollY value

I've been attempting to retrieve the scrollY value in my React app, but it seems to be affected by overflow-related issues. Below is the code snippet I used to access the scrollY value: import React from "react"; import { useEffect, use ...

Difficulty with obtaining .responsetext in AJAX and PHP

On my real estate website, I have a form for users to 'Add a Property'. Although I will implement form validation later on, here is the current html/js code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR ...

Retrieve the encrypted URL

I'm facing an issue with extracting parameters from an encrypted URL. When using the queryparams function, it only retrieves a portion of the URL after being decrypted. For instance, consider this example URL: http://localhost:4200/househouse? MGRjYjQ ...

Refreshing the form fields and storing the information using AngularJS

I have successfully implemented a basic form using AngularJS. The issue I am facing is that even after the user enters their details and submits the form, the values remain in the input fields. My goal is to store the details of multiple fields in the con ...

What is preventing the table from extending to the full 100% width?

Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...

Issue with firestore IN query when encountering NULL value

Is there a way to create a query that retrieves all documents without a value, whether it be null or ''? Within my table are three documents, each containing a field called a. https://i.sstatic.net/FGV0Z.png During an IN query, the document wit ...

Fetching information from WebMethod with Jquery Ajax in c#

I have a jQuery variable that contains the following values: var data = [['Vikas', 75], ['Sumit', 55], ['Rakesh', 96], ['Shivam', 123], ['Kapil', 34], ['Rana', 104]]; Now, according to my requir ...

`the issue of $scope object not being passed correctly to ng-if and ng-class ternary conditions

**app.js:** $scope.servers = [ {name:'SQL Server', status:"up"}, {name:'Web Server', status:"down"}, {name:'Index Server', status:"down"} ]; **index.html:** <table> ...

Error: Service Liferay encountered an unexpected identifier causing a syntax error

Upon clicking on the button labeled "delete save" in the Chrome console, an error is encountered: "Uncaught SyntaxError: Unexpected identifier". Additionally, when this action is performed, an object is printed to the console revealing its data ({company ...