Three.js: adjusting the rotation axis orientation

My airplane model is positioned with its tail at (0,0,0) and its nose at coordinates (a,b,c). I need to rotate the plane so that its nose points towards (e,f,g) while keeping its tail stationary. I want to achieve this rotation without any unnecessary extra rotations, just a simple adjustment to reorient the aircraft.

To simplify the calculation process for the rotations, it would be helpful to switch to a different coordinate system. For example, setting coordinates (e,f,g) as (1,0,0) could make the rotational calculations easier and more straightforward.

Though this problem leans towards pure mathematics, I am working on implementing this solution using three.js. I am seeking guidance on the best sequence of calls to accomplish this desired outcome.

javascriptrotationthree.js

Answer №1

Begin by creating the quaternion you desire:

var vectorFrom = new THREE.Vector3( x, y, z ).normalize();
var vectorTo = new THREE.Vector3( u, v, w ).normalize();

var desiredQuaternion = new THREE.Quaternion().setFromUnitVectors( vectorFrom, vectorTo );

It is recommended that your geometry is aligned so the aircraft faces the positive-z axis.

Thus, define ( u, v, w ) as ( 0, 0, 1 ).

Next, apply the quaternion to the mesh's geometry:

geometry.applyMatrix( new THREE.Matrix4().makeRotationFromQuaternion( desiredQuaternion ) );

At this stage, the airplane's nose should be pointing in the direction of vector vectorTo, which would align with the positive-z axis in this case. (Assuming the airplane is level at this point. If not, additional transformations may need to be applied.)

To re-orient the airplane using natural yaw, pitch, and roll angles, specify

mesh.rotation.order = 'YXZ'. // by default, it is set to `XYZ`

You can then adjust the airplane's orientation as follows:

mesh.rotation.set( pitch_in_radians, yaw_in_radians, roll_in_radians );

This process should flow smoothly and logically.

three.js r.69

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

Is it possible to automatically refresh a webpage with the same URL when accessed on the same server?

Is there a way to trigger a URL page refresh using JS code located on the same server? For example, I have a URL page open on multiple devices connected to the same server. How can I ensure that when I click 'Update,' the page refreshes simultan ...

javascriptphpjqueryhtml

Executing a PHP function by passing parameters through an Ajax call within a jQuery DataTable

Is there a way to pass a parameter from jQuery (DataTable) to a php function? See the example below: table = $('#tbl').DataTable({ "oLanguage": { [...] //"ajax" : "users/list", //"data": {"id", ...

javascriptphpjqueryajaxcodeigniter

Experiment with utilizing dynamic imports within the useEffect hook

I've been working on testing a custom hook I developed that involves dynamically importing @vimeo/player. The key snippet from the useVideoPlayer hook is as follows: useEffect(() => { async function setup() { const { default ...

javascriptreactjstestingjestjscode-splitting

I am looking to display data in Angular based on their corresponding ids

I am facing a scenario where I have two APIs with data containing similar ids but different values. The structure of the data is as follows: nights = { yearNo: 2014, monthNo: 7, countryId: 6162, countryNameGe: "რუსეთის ...

javascriptangulartypescriptapirxjs

Guidelines for removing a 2D Primitive in processing

I am facing issues with deleting 2D primitives. I attempted to create a rectangle in front of these primitives to conceal them. However, I need to hide them when clicking somewhere, which leads me to believe that the draw() function is overriding the mouse ...

javascriptprocessing

AngularJS $routeParams is not defined

When trying to access $routeParams, I am receiving an undefined value. Check out my code below: var ngAddressBook = angular.module('ngAddressBook', ['ngRoute']); ngAddressBook.config(['$routeProvider', function($routePro ...

javascriptangularjs

What are some ways to track the loading progress of a JSON file retrieved through an Axios call?

To track progress accurately, I am contemplating implementing the following steps while making an axios call: Retrieve file size during the json file request Determine the percentage of downloaded file size from the network tab Currently, I only have a ...

javascriptaxios

Continual running of a jquery command

Here is a snippet of jQuery code that may need some clarification. In this code, when the element with ID 'box1' is clicked, it triggers an event that directs to a modal dialog where there is a class called 'colors'. The issue here is t ...

javascriptjqueryhtmlcss

Dealing with CORS error when making requests to Firebase Realtime Database API within a Vue project

I am currently working with vue-2 and I need to perform a shallow query on the Firebase real-time database by fetching an API. However, when running on my development server, I encounter a CORS blocked issue. What steps should I take to resolve this? PS: I ...

javascriptapivue.jsfirebase-realtime-databasecors

Modifying button appearance based on state change in AngularJS

I have a button with a grey color and I want to create two different states for it: one that is selected (blue) and another that is in an idle state (grey). Currently, I am working on Angularjs but I am fairly new to this platform. Could you kindly provid ...

javascripthtmlcssangularjs

Ways to update the component's state externally

I'm new to Next.js (and React) and I'm attempting to update the state of a component from outside the component. Essentially, I am conditionally rendering HTML in the component and have a button inside the component that triggers a function to se ...

javascriptreactjstypescriptnext.js

Arranging multiple Label and Input fields in HTML/CSS: How to create a clean and

I'm struggling with HTML and CSS, trying to figure out how to align multiple elements on a page. I've managed to line up all the rows on the page, but for some reason, the labels are appearing above the input fields when I want them to appear be ...

javascriptjqueryhtmlcss

Transferring information from a Java file to AJAX

I have a Java class that prints progress as 1%, 2%, 3% of a process. Now, I am looking to utilize AJAX requests to read this progress and update it continuously on the webpage. Unfortunately, I cannot convert the Java file into a servlet since it is being ...

javascriptjavaajaxjsp

Transmission of JSON to a C# controller via AJAX results in a Count value of zero in .NET 7

Whenever I attempt to send a JSON object to my controller, the parameter isn't being received. This is the JavaScript code snippet: var input = document.getElementById("input"); input.addEventListener('change', function () { const read ...

javascriptc#jsonajaxasp.net-core

Unable to expand the width of the video element

So I have encountered a situation like this The video displayed does not fully expand to the width of its containing element. This is what my HTML structure looks like - <div class="webcam"/> <div class="control-container"> </div> ...

javascriptjqueryhtmlcssvideo

Tips for linking my TypeScript document to the server

Recently diving into the world of Angular 2 and seeking to grasp its intricacies. Currently utilizing Visual Studio Code. How can I have the server monitor changes in the TypeScript file? Do I need a compiler to convert it to JavaScript for this purpose? ...

javascriptangulartypescriptwatch

Encode data in JSON format using Javascript and then decode it using PHP

In my coding journey, I decided to create an object using Javascript to pass it as an argument to a PHP script. var pattern = new Object(); pattern['@id'] = ''; pattern['@num'] = ''; pattern.cprop = new Object(); // ...

javascriptphpajaxjson

Show information from a collection based on the width of the container

I need help with handling an array of text items within a box that has a width of 500px. The array consists of [john, johnbbab, johnabraham], and the goal is to display the complete string or truncate with ellipses if overflow occurs. For example, if the s ...

javascriptstring

Error: Attempting to access an undefined property ('useParams') which cannot be read

Hey there, I'm currently facing some challenges with the new react-router-dom v6. As I am still in the learning phase of this latest version, I could really use some assistance. import React from 'react' function Bookingscrren({match}) { ...

javascriptnode.jsreactjsdomreact-hooks

When hovering over various div elements in HTML

I've been experimenting with some code lately, and I'm trying to change the text color of a menu element when hovering over it. I can alter the background color just fine, but for some reason, the text color remains unchanged. Can anyone offer a ...

javascripthtmlcss