Vector indicating the direction of a rotation in Three.js

I am in the process of rotating an arrow on the surface of a planet to align with the direction of its travel. I have the direction vector and the up vector from the surface normal. How can I convert this into a quaternion for the rotation of my arrow? I am using three.js, so any recommended methods they offer that I can implement would be greatly appreciated. Thank you.

https://i.sstatic.net/bkB8P.png

Here is the information I currently have.

var upVector = new THREE.Vector3();
upVector.subVectors( new THREE.Vector3(0,0,0), lastVec );

var dirVector = new THREE.Vector3();
upVector.subVectors( lastVec, destVec );

var sideVector = new THREE.Vector3();
sideVector.crossVectors( dirVector, upVector );

var newUp = new THREE.Vector3();
newUp.crossVectors( dirVector, sideVector );

Answer №1

Experiment using myDirectionVector:

let matrix = new THREE.Matrix4().lookAt(myDirectionVector, new THREE.Vector3(0,0,0), new THREE.Vector3(0,1,0));
let quaternion = new THREE.Quaternion().setFromRotationMatrix(matrix);

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

Error occurred while executing 'npm start' command in ReactJS due to the module 'babel-code-frame' being unable to be located

Every time I attempt to run 'npm start' in the frontend of my application, the terminal spits out a massive error. My package.json file doesn't show any script errors, and I've deleted the 'node_modules' folder and reinstalle ...

Issues with sending an AJAX POST request to a PHP script

Hello, I am trying to send a variable from an AJAX JavaScript file to a PHP file. Here is what I have done so far: var request = createRequest(); var deletenode = node.id; window.alert("nodeid=" + deletenode); var vars = "deletenode ...

React - optimize performance by preventing unnecessary re-renders of an object property

In my current project, I am working with an auction object that has two properties: remainingTime and amount. To enhance user experience, I integrated a countdown timer using the react-countdown-now library to display the remainingTime. Additionally, there ...

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Would someone be able to explain the fundamental syntax for reading and writing text files, also known as file handling in TypeScript? If there is a corresponding link that anyone could provide, it would be greatly appreciated. ...

An issue has arisen: It seems that properties of null cannot be accessed, particularly the 'toISOString' property

After upgrading the dependencies in my package.json to their latest versions, I encountered an error while accessing a page that calls this data. Given that the dependencies were outdated by at least 2 years or more, I suspect the issue lies with the updat ...

Retrieve every video on React.js channel from YouTube

Currently, I am working on integrating react-youtube into my React App with the goal of accessing all videos from a specific YouTube channel. The challenge I am facing is that I need to display these videos as thumbnails, exactly how they are listed in the ...

Guide to inspecting file contents with Node.js

I am working on viewing the content of a file that is posted from the client using the fs module. However, with the code below, the contents are coming up as undefined. Can anyone help me identify what is missing in the code? To ensure I am receiving the ...

WARNING: No matches found in the MySQL database for the searched word

Exploring the realm of coding 1) Gathering data from MySQL via PHP 2) Transferring data from PHP to D3 based on input using a PHP URL. Want to trigger an alert when the text in the input field does not match any records in the MySQL database. Upon testi ...

Using JavaScript to set attribute values in Python Selenium, these values are cleared after each update

Assuming : for i in list('{}'.format(value)): self.browser.execute_script( "arguments[0].setAttribute('value', '{}');".format(i.replace('&b ...

Exploring Interactive Designs with Vue.js

In order to dynamically construct a series of CSS style classes based on the toolName property in the JSON data using Vue 2, I tried to use a computed property to bind them to the existing span with a class of panel-icon. However, when attempting to save t ...

"Ajax validation is causing the duplication of the HTML page content within an HTML

My PHP username validation with Ajax code seems to be duplicating my HTML page inside an HTML div element, which is used for displaying Ajax errors. Despite trying various solutions and searching on Google, I have not been able to find a resolution yet. Th ...

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

Guide to deactivating scrolling on a specific element using jQuery

Can anyone provide a solution for disabling scroll on the window but still allowing scrolling within a text area? I attempted to use the following code, but it ended up disabling everything entirely: $('html, body').css({ overflow: 'hid ...

What is the correct way to assign a $scope variable after a successful ajax call?

Currently, I am working with Symfony and AngularJs 1.6.8 along with Symfony 3.4. Below is the configuration setup that I have: base.html.twig <html lang="en" data-ng-app="CeocApp" ng-controller="CeocController"> //css for the app <link id="ng ...

Experience a different div content by simply hovering over it

Is there a way to implement a hover effect that displays an image over the entire display-div? For example, when hovering over item1, the image should cover the display-div, and when hovering over another item, the image within the display-div should chang ...

Adaptable images - Adjusting image size for various screen dimensions

Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...

Conceal Navigation Panel while Scrolling Down, Reveal when Scrolling Up, Compatible with Chrome, Incompatible with Safari (on smartphones

I have implemented a code to hide my navbar when scrolling down and show it when scrolling up. This code works perfectly on desktop and in all browsers, including Chrome on mobile (iPhone). However, in Safari, the navbar sometimes shows, hides, and shows a ...

Conceal div elements containing identical information by utilizing jQuery

I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery. The duplicate ...

Preserving intricate nesting in a Mongoose schema

I've encountered a problem when trying to save nested subdocuments - I'm not certain if it's because they're not in an array or some other reason. The docs suggest that nested objects should be auto-saved, but that doesn't seem to ...

directive in Angular ordering

After exploring this link, my understanding deepened: http://plnkr.co/edit/k5fHMU?p=preview Upon analyzing the code snippet provided in the link above, I noticed that the Angular app consists of both a controller and a directive. However, there seems to ...