Update 70 on the TrackballControls.js rotation feature

My query on GitHub can be found at the following link: https://github.com/mrdoob/three.js/issues/6043#issuecomment-73478885 I understand that TrackballControls.js is primarily used for camera control, not model manipulation. However, I am looking to rotate a model using TrackballControls.js. I want to be able to pan, zoom, and rotate the model with the mouse without feeling like I'm rotating the camera itself but rather the model directly. I need a mouse event to achieve this.

Here is a method I tried:

controls.target = model.position; 
or controls.target.copy(model.position)

But it does not work as expected;

javascriptrotationthree.js

Answer №1

When using the lao3d.com Viewer, the task at hand is to rotate an object around both the Y and X axis of the world while disregarding its translation.

To illustrate this concept, I have provided a simple example here.

This method takes into account that the camera may also be rotated. To tackle this issue, it calculates the current Up and Right vectors by utilizing the camera's quaternion to determine the up and view vector before calculating their cross product.

    var view = new THREE.Vector3(0, 0, -1);
    view.applyQuaternion(camera.quaternion);
    var cross = new THREE.Vector3();
    cross.crossVectors(view, camera.up);

Think of the view as -Z pointing towards the screen, +Y indicating the camera's upward direction, regardless of its rotation, and the cross product resulting in a vector pointing right.

By establishing these axes, you can effectively rotate the object around them.

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

Having trouble retrieving data from MongoDB and rendering it on an HTML page

Creating a Model Named Field.js in Mongoose const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/SuperchainV1', { useNewUrlParser: true }); mongoose.set('useNewUrlParser', true); ...

javascriptnode.jsmongodbexpressmongoose

Wait for all asynchronous functions in Node.js to finish before proceeding with the remaining code

I am facing an issue in my code where I have 2 for loops executing the same async function, but I need the code to wait until both loops finish executing before proceeding. Here is a snippet of my code: for(var a = 0; a < videoIds.length; a++){ ...

javascriptnode.jsmongodbasynchronousmongoose

Tips for initiating a browser file download using JavaScript, ensuring that the download is only carried out if the web service responds with

For a project I am working on, I need to create JavaScript code that will be triggered by clicking on an <a> element. This code will then make a GET request to a web service that I am currently in the process of coding. Once the service returns a fil ...

javascriptjqueryajaxweb-servicesget

Discover the Replicated Element in a Set Using the Lodash Library

Trying to determine the existence of a value in a collection using Lodash. If the value exists, return true; otherwise, return false. const d = [{ "country": "India", "_id": ObjectId("5ad47b639048dd2367e95d48"), "cities": [] }, { "c ...

javascriptarraysjsonlodash

In an effort to organize a roster of student roll numbers for the class, I am utilizing a JavaScript function to generate and update an array with the most recent entries

Greetings! I am looking to enhance the functionality of my webpage by allowing users to input the name and roll number of a new student. Once submitted, I want to add this student to an existing list using Javascript functions, for loops, and arrays, and d ...

javascripthtmlarraysfunctionfor-loop

How can I retrieve text adjacent to a checked input checkbox by using JQuery (or JavaScript)?

Here is the HTML block under consideration: <div class"radioGroup"> <input type="radio" value="0"> This option is NOT selected <input type="radio" value="1" checked = "checked" > This option is selected <inpu ...

javascriptjquerydom

Leveraging the const keyword within a for loop

Imagine having the following snippet of code: for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **const** foo = Collection.find({index:i}); } vs for (let i=0; i<1000; i++) { //Retrieve row from MongoDB **let** foo = Collection ...

javascriptnode.jsmemory-leaksgarbage-collection

Is there a way to programmatically scan through all directories and include only files with a .js extension into my Discord collection?

I'm currently working on the following code and I'm looking for a way to adjust it in order to check each sub-directory: const fs = require('fs') module.exports = (client, Discord) =>{ const command_files = fs.readdirSync(' ...

javascriptnode.jsdiscord.js

Tips on when to display the "Email Confirmation" input text box only after updating the old email

Oh no!! Yes, that's exactly what I desire! I've been facing obstacles in trying to understand how to display the "Email Confirm" input text-box ONLY when the old email has been updated. Can someone point out where I might have gone wrong? :( ...

javascriptphpjquerylaravel

Display the value in Vue.js as a price format while maintaining it as an integer

I have created a Vue component called "formatted-number" which takes in an integer value (e.g. 1234) and currently displays it as a string (e.g. "12.34") to represent a price in a textfield, with the appropriate "," or "." based on the country. However, I ...

javascriptfocusvue.js

Differences between hiding table rows with Jquery hide() and fadeOut() function and how to stripe

After using Jquery to hide certain table rows based on a checkbox selection, I encountered an issue with reapplying Bootstrap's table striping. When I use the hide() function, the striping works properly after hiding rows. However, when I try using th ...

javascriptjquerybootstrap-4

The issue arises when RadioBoxes do not submit properly after their `check` status is altered using JQuery

My form contains multiple radio boxes whose "checked" status I modify based on user interaction. Upon initial page load and submission without any changes, the POST request correctly includes the value of the checked radio box. However, when I use JQuery ...

javascriptjqueryhtml

Error message encountered: React hydrate TypeError - the function __webpack_require_.i(...) is not recognized as a

I encountered a webpack TypeError while attempting to use hydrate() in my index.js file. Strangely, the error does not appear when I use ReactDOM.render() instead of hydrate. My intention behind using hydrate was for server-side rendering. src/index.js i ...

javascriptreactjswebpackbabeljspackage.json

"Tempus Dominus now offering a seamless experience without the need for an

The example code provided seems to be malfunctioning: <button id="idbtn"> $('#idbtn').datetimepicker(); ...

javascriptbootstrap-4tempus-dominus-datetimepicker

Next.js ensures that dynamic routes do not result in redirection to a 404 page

I am facing an issue with my Next.js project. I have a file named [pid].js and I also want to add a custom 404 page. However, when I place the 404.js file inside the /pages directory, it causes a problem. If I remove the [pid].js file, the 404 page works f ...

javascriptnext.js

How to enable CORS in Flask while avoiding the "Response to preflight request does not have an HTTP ok status" issue

Seeking assistance with setting up client-side Javascript code to send post requests to my Flask backend. I referenced this helpful answer regarding an issue with flask-cors being blocked by CORS policy, resulting in a preflight request error without passi ...

javascriptpythonflaskcors

Angular - send multiple HTTP requests for the length of an array and combine the responses into one array

Exploring angular for the first time and dabbling with the trello API. I have an array containing some list IDs that I need to make HTTP GET calls for, equal to the length of the array. For instance, if there are two IDs in the array, then the HTTP call sh ...

javascriptjqueryarraysangularfor-loop

Update the HTML weather icon with data from JSON

I have a collection of weather icons stored on my computer. How can I customize the default weather icons with my own set of icons? In the JSON file, there is a variable like this: "icon":"partlycloudy" <html> <head> <script src="http://c ...

javascriptjqueryhtmljson

Issue with Node/Express: Middleware addition to router does not function as expected

Here is the configuration of my router: app.get('/getReport', (req, res) => { res.send("This is the report"); }); Initially, this router functions properly and successfully displays the message This is the report in the browser However, ...

javascriptnode.jsecmascript-6

Begin Leaflet with JQuery UI Slider set to a predefined value

I have integrated the LeafletSlider library into my project to slide through multiple layers with different timestamps in Leaflet. My goal is to initialize the slider at the timestamp closest to the current time. In SliderControl.js, I made the following ...

javascriptjqueryjquery-uileafletjquery-ui-slider