three.js: Converting 2 directional vectors into either 3 rotations or a matrix

My coding system consists of 2 unit vectors labeled 'Ox' and 'Oy', 1 insertion point, and nearby is an 'Oz' vector that always appears to be {0 0 1}.

For instance (after 2 rotations):

Ox:{x: 0.956304755963036, y: -0.292371704722735, z: 0}
Oy:{x: -0.250611464938861, y: -0.819713166317425, z: 0.51503807491006}
move:{x: 889.08282028218, y: -845.071708420642, z: -396.787982804802}

The question at hand is: how do I align my_mesh with this system using three.js?

Although I'm unsure of how it projects, thanks to this answer, I have the following solution:

if( 'Ox' in align && 'Oy' in align ){
    var mx = new THREE.Matrix4().lookAt( align.Ox , new THREE.Vector3(0,0,0), new THREE.Vector3(0,1,0) );
    var my = new THREE.Matrix4().lookAt( align.Oy , new THREE.Vector3(0,0,0), new THREE.Vector3(1,0,0) );
    mx.multiply(my);
    var qt = new THREE.Quaternion().setFromRotationMatrix(mx);

    my_mesh.matrix.makeRotationFromQuaternion(qt);
}
// move
mesh.matrix.setPosition( align.move );
mesh.matrixAutoUpdate = false;

It seems like this might lead to the solution?

EDIT

After reading West's answer, I realize that I mislabeled this as a 'coordinates system' since the vectors are not orthogonal.

Below are some records after rotations (where 'z30' denotes a 30° rotation around Oz).. What I previously referred to as Oz is always represented as {x: 0, y: 0, z: 1}

// base
Ox: {x: 1, y: 0, z: 0}
Oy: {x: 0, y: 1, z: 0}
move: {x: 6.42995404746696, y: -500, z: -268.028464077285}

// base x45
Ox: {x: 1, y: 0, z: 0}
Oy: {x: 0, y: -0.707106781186548, z: 0.707106781186547}
move: {x: 6.42995404746696, y: -73.2233047033605, z: -444.805159373921}

// base y60
Ox: {x: 0.500000000000001, y: 0, z: 0.866025403784438}
Oy: {x: 0, y: 1, z: 0}
move: {x: 6.42995404746766, y: -500, z: -268.028464077285}

// base z30
Ox: {x: 0.866025403784439, y: 0.5, z: 0}
Oy: {x: 0.5, y: -0.866025403784439, z: 0}
move: {x: -118.570045952533, y: -33.4936490538881, z: -268.028464077284}

// base z30 x45
Ox: {x: 0.866025403784439, y: 0.353553390593274, z: -0.353553390593273}
Oy: {x: 0.5, y: -0.612372435695795, z: 0.612372435695794}
move: {x: -118.570045952533, y: -96.9068910760492, z: -421.121573001233}

// base z30 x45 y60
Ox: {x: 0.739198919740117, y: 0.353553390593274, z: 0.573223304703363}
Oy: {x: 0.28033008588991, y: 0.612372435695795, z: -0.739198919740117}
move: {x: -63.6525674250102, y: -403.093108923947, z: -83.228734142255}
javascriptthree.jsquaternions

Answer №1

In order to align an object's orientation to a rotated coordinate system defined by three orthogonal unit-length vectors ox, oy, and oz, follow these steps.

If you are unsure about oz, you can calculate it using the following code snippet:

var oz = new THREE.Vector3(); // initialize once and reuse

oz.crossVectors( ox, oy ).normalize();

Next, if your intention is to directly set mesh.matrix, you can achieve this by performing the following actions:

mesh.matrix.makeBasis( ox, oy, oz ).setPosition( new_position );

mesh.matrixAutoUpdate = false; // safeguard matrix from being overwritten

Implementation based on three.js r.87

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

Showcasing an image stored in an HTML file on a Vue.js webpage

I'm currently facing an issue with displaying a local image saved in an HTML file on my Vue.js page. I attempted to store the content of the HTML file into a variable using the code below: computed: { compiledHtml: function() { return this.a ...

javascriptpythonhtmlvue.js

Sending output from javascript back to html

<head> function displayProductName(name) { } </head> <body> <img src="...images/car.jpg" onclick="displayProductName('car')"> </body> How can I modify this javascript function to display the value received from t ...

javascripthtml

Tips for showing form values in pop-up boxes based on their unique identifiers

I am experiencing an issue with displaying posted values in a pop-up box. Specifically, when I click on "Book now", it only shows one set of id values for all entries. For example, if I click on the 1st row's "Book now" button, it displays the values ...

javascriptphpajax

Journeying across the interior of a sphere becomes distorted when reaching the northernmost point

I'm currently working on a unique type of navigation system inspired by a hollow earth concept, where the user moves along the internal surface of a sphere. However, I've encountered an issue with the rotation calculation in my code. When near th ...

maththree.jsrotationgame-developmentquaternions

What is the correct way to utilize the onclick() method while passing specific variables, such as an ID of a Mongoose Object Document, as arguments?

As I dynamically add rows to a front-end table based on data from a custom node.js API, each row represents a student with fields for Name, Class, Roll_No, and a button that changes color based on the student's specific value. The button code looks li ...

javascriptjquerynode.jsmongodb

Tips for retrieving the text from a child element in a list with jQuery

I'm having trouble accessing the text of a child element within a list. I can only access the parent element and not sure how to get to the child element. Here is the HTML code: <ul class="nav nav-list"> <li class="active"> < ...

javascriptjquerychildren

Unable to assign value to a public variable in Angular

I am facing an issue where I am trying to retrieve a value from the localStorage and assign it to a variable. However, when I try to use that variable in functions, it is coming up as undefined. code export class DashboardService { public token: any; ...

javascriptangularionic-framework

Sending an array through an AJAX request to a Java class using Struts2

Issue with Javascript-AJAX Call function assignTask(){ var formdata = "xyz"; var taskList = []; $.each($("input[name='taskname']:checked"), function(){ taskList.push($(this).val()); }); $.ajax({ type: "post", data: {taskList:taskList ...

javascriptjavajqueryajaxstruts2

If I deselect an item, the "check all" option does not become deselected

I recently designed a page that displays all the weekdays and dates from Monday to Sunday. I added a feature where users can check all the weekdays with a single click, and uncheck them with another click. However, I encountered an issue where unchecking a ...

javascriptangulartypescript

There are no leaks displayed in Chrome Dev Tools, however, the Task Manager will show them until Chrome eventually crashes

Do you have a CPU-intensive application that you're working on? Check it out here: https://codepen.io/team/amcharts/pen/47c41af971fe467b8b41f29be7ed1880 It involves a Canvas on which various elements are constantly being drawn. Here's the HTML ...

javascriptmemory-leaks

Exposing the secrets of the Ajax module

Here is the code snippet I am working with: my.data = function () { var getAuth = function (userName, password) { var model = JSON.stringify({ "UserName": userName, "Password": password }); var result; $.ajax({ url: m ...

javascriptjqueryajaxoop

The fetch API is being restricted, however, AJAX and XHR are still operational

I made an API call to a URL shortener and encountered different responses using Fetch, JQuery, and XHR. Why is Fetch returning a 400 error while the other methods work smoothly? Even after trying mode: 'no-cors' and "crossDomain": true in the re ...

javascriptjqueryajaxxmlhttprequestfetch

In JavaScript, find a value in an array and substitute it with the value from the

One of my tasks involves manipulating a string variable in the following manner: domNodes += '<a href="javascript: void(0);" data-role="node_jump" data-node="'+this.tagName.toLowerCase()+'">'+this.tagName + "</a>" + " & ...

javascriptarraysreplacetagname

React-bootstrap-table Axios delete operation causing [object%20Object] to be displayed in the browser console

I am having trouble executing a delete operation using axios on a react-bootstrap-table, and encountering this error in the console DELETE http://localhost:9000/api/terminals/[object%20Object] Uncaught (in promise) Error: Request failed with status cod ...

javascriptreactjstypescript

The alertify.alert function encounters issues when used within the response of a mithril m.request

I'm currently working on a project utilizing mithril.js and also integrating alertify.js. I am encountering an issue when trying to alert some data in the response. Strangely, it doesn't work as expected. However, if I use the same alert function ...

javascriptjqueryajaxmithril.jsalertify

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

javascripthtml

activate a single on.click event to trigger additional actions - utilizing javascript and jQuery

My website features dynamically generated buttons that lead to specific pages. The challenge I'm facing is retrieving the automatically generated data-num value for each button and using it as a jQuery selector to redirect users to the corresponding p ...

javascriptjqueryonclick

Node.js is being utilized to upload data to an FTP server with the help of js

I'm attempting to send a file to an FTP server using Node.js with the help of jsftp module.exports = async function() { const jsftp = require("jsftp"); console.log(__dirname) const ftp = new jsftp({ host: "host.name", ...

javascriptnode.jsnpmftpnpm-scripts

The Google Software Development Kit has encountered a 403 error, indicating that the user has exceeded their

Currently, I am working on integrating the Google Developer SDK into my project to leverage the Google Translate functionality. While everything works smoothly when making a request using my access token obtained from the Google Developer Console, I keep e ...

javascriptnode.jsgoogle-translategoogle-cloud-sdk

Interact with a JSON API using JavaScript by incorporating dynamic user input

Recently, I delved into tutorials on utilizing JSON data and JavaScript. Feeling inspired, I decided to create a simple app using an API. However, I encountered a hurdle and I'm struggling to identify its cause. The problem seems to be related to how ...

javascriptjsonapiaddeventlistener