"Exploring three.js: Transforming a plane's orthogonal vector into a rotation matrix for the plane

I am trying to set the rotation of a plane by using three numbers representing the rotation in radians along the x, y, and z axes.

Although I do not have these numbers, I do have a vector called 'myVec' which should be orthogonal to the plane after it has been rotated.

While this vector brings me closer to my goal, I still need to figure out how to generate a rotation matrix from myVec in order to use the THREE.Vector3 function "setEulerFromRotationMatrix".

Creating a rotation matrix involves determining the initial vector that transforms into another vector. This raises the question: should I use the vector (1,1,1) or (1,0,0) as the starting vector?

Furthermore, how can I actually construct the rotation matrix? I have referred to http://en.wikipedia.org/wiki/Rotation_matrix for information, but I only found instructions on converting rotation matrices to other forms.

I believe there is a way to reverse the matrix multiplication process to achieve the desired result. Can anyone provide some guidance on this?

javascriptthree.js

Answer №1

When using three.js version r50, the default plane is positioned at the origin with its normal pointing in the positive-z direction, represented by the vector ( 0, 0, 1 ). To transform this vector to myVec, there is a simple method you can employ.

The most straightforward approach in three.js is as follows:

var v = myPlane.position.clone();
v.add( myVec );
myPlane.lookAt( v );

By utilizing this technique, you allow three.js to handle the calculations for you. :-)

UPDATE: Revised for three.js version r.66

Answer №2

Every twist in three-dimensional space can be conveyed through a set of three angles. Your approach reminds me of Euler angles, take a look at this resource: http://en.wikipedia.org/wiki/Euler_angles

When attempting to create a rotation matrix for a triple-axis rotation, you must first create three separate matrices. Each matrix will handle rotation around a single axis by a specific angle. These three matrices must then be multiplied in the correct sequence to produce the ultimate rotation matrix.

If you know how to align the vector (1 0 0) with your desired vector, determining the angles of rotation around the corresponding axes is the crucial step. Be mindful of the sequence in which the rotations are executed. You can also begin with a different vector by simply understanding the required angles.

A matrix that facilitates rotation around a specific axis by a particular angle can be accessed via this link: http://en.wikipedia.org/wiki/Rotation_matrix (check "Basic rotations" in the "In three dimensions" section).

Refer to the "General rotations" section for the approach explained earlier (multiplying 3 matrices to obtain a single matrix for the entire rotation).

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

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

javascriptjqueryhtmlinnerhtml

Tips for eliminating null values from a JavaScript object

I am currently facing an issue with a JavaScript object that consists of two arrays. At times, one of the arrays might be empty. I am attempting to iterate through the object using a recursive function, but I want to exclude any empty arrays or strings fro ...

javascriptjqueryarraysrecursionjavascript-objects

Ways to invoke a function within a React Material-UI component

Currently, I am in the process of setting up a chat system that allows users to add emojis. To achieve this feature, I have devised a function that produces a component containing both text and an image. Here is the function I have implemented: test: fu ...

javascriptreactjsmaterial-ui

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

In my project using TypeScript (Angular 5), I encountered the following scenario: let date = new Date(2018, 8, 17, 14, 0); The expected output should be "Fri Aug 17 2018 14:00:00 GMT-0400 (Eastern Daylight Time)", but instead, it is returning: Mon Sep ...

javascriptangulartypescriptdateangular5

String casting for large JavaScript integers may require rounding to function properly

When trying to pass a large integer to a function from an onclick event in HTML, I always encounter issues with rounding. Despite using bigInt libraries, I still struggle to pass the full number accurately and would prefer a simple string casting method. ...

javascripthtmlbigint

Transformation of data in Ext JS

Shop: Ext.define('onlineStore.store.market', { model: 'Market', root: 'products', proxy: { type: 'ajax', url: 'http://localhost/onlineStore/data/market.json', reader: { type: ' ...

javascriptjsonextjsextjs4

creating a personalized dropdown menu with react javascript

Is it possible to create a chip in a single select dropdown in React? In a multi-select dropdown, a chip is created as shown in the example below. Can we achieve the same effect in a single selection dropdown? const DropdownExampleClearableMultiple = () = ...

javascriptreactjssemantic-uisemantic-ui-react

Is there a way to combine multiple array objects by comparing just one distinct element?

Is there a way to combine these two arrays into one? array1 = [ { image: 'image1', title: 'title1' }, { image: 'image2', title: 'title2' }, { image: 'image3', title: 'title3' }, ]; array2 = ...

javascripttypescript

Create a solution that is compatible with both web browsers and Node.js

I am developing a versatile library that can be utilized in both the browser and in node environment. The project involves three json config files, with the latter two extending the tsconfig.json. tsconfig.json (contains build files) tsconfig.browser.js ...

javascriptnode.jstypescriptbrowser

Transform an array of strings into an array of floating point numbers using AngularJS

Hey everyone! I'm having trouble converting an array of strings into floats. When using map(parseFloat), I'm only getting integer numbers. Could the issue be with the commas in 40,78 causing parseFloat to interpret it as 40 instead of 40.78? Her ...

javascripthtmlangularjsarraysfloating-point

The $.get method in AJAX/jQuery is functioning properly, however, there seems to be an issue with

Yesterday, I successfully made my first AJAX call by using this function that was connected to a button click event. function ajaxFunction(){ $.get("ajax/calendar.php", function(data){ $('#ajaxResponse').html(data); }); }; Now, I want t ...

javascriptphpjqueryajax

Is there a way to replicate table cells in the style of Excel using jQuery?

Excel has a convenient feature that allows cells to be copied by dragging and dropping with the mouse. This same functionality is also available in Google Spreadsheets. I am trying to understand how Google has implemented this feature using JavaScript cod ...

javascriptjqueryspreadsheet

Incorporating a .glb file into a React Native Expo application

I'm currently tackling a project that involves displaying 3D avatars in react native. However, I encountered an issue when trying to add my .glb model using GLTFLoader imported from three/examples/jsm/loaders/GLTFLoader, which resulted in a FileReader ...

react-nativethree.jsexporeact-three-fiber

Creating a Dual Y-Axis Chart with Two Sets of Data in chart.js

I utilized the chart.js library to write the following code snippet that generated the output shown below. My primary concern is how to effectively manage the labels on the horizontal axis in this scenario. CODE <!DOCTYPE html> <html lang="en"& ...

javascripthtmlgraphchartschart.js

Display additional tiles within a compact container

I'm attempting to replicate the user interface used by foursquare! Positioning the map slightly off center like they have . I've figured out how to do one part but struggling with the second part. Initially, I loaded the map in a small div (t ...

javascriptcssleaflet

I'm having trouble grasping the concept of this asynchronous behavior

After reviewing the output provided, my initial expectation was for working to be displayed between the lines of begin and end. Here is the rule: Is there a possible solution to achieve this outcome without modifying the app.js file? app.js const se ...

javascriptnode.js

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...

javascriptjquerycssxhtml

Utilizing the map function to display elements from a sub array

I'm struggling to print out the comments using the map function in this code: class Postcomment2 extends React.Component { uploadcomment = () => { return this.props.post.comments.map((comment) => { return <div>{comment["comment"]}< ...

javascripthtmlreactjsdatabasedictionary

Unable to dial phone numbers when clicking 'Click to call' link on Android devices

Within my Cordova android application, I have a link set up like this: <a href = "tel:011123456789">Click to Call</a> While this click-to-call functionality works smoothly in IOS, it seems to be hindered in Android by an issue such as: 11- ...

javascriptandroidhtmlcordova

Exploring the compatibility of Next.js with jest for utilizing third-party ESM npm packages

Caught between the proverbial rock and a hard place. My app was built using: t3-stack: v6.2.1 - T3 stack Next.js: v12.3.1 jest: v29.3.1 Followed Next.js documentation for setting up jest with Rust Compiler at https://nextjs.org/docs/testing#setting-up-j ...

javascripttypescriptnext.jsjestjs