Unexpected results with Euler angles in Three JS when applied to a basic box mesh

My dilemma involves a box located in the global axis system XYZ. I am trying to rotate this box to align with a new axes system X'Y'Z'

The vectors for the new axes are:

X' = (0,1,0)
Y' = (1,0,0)
Z' = (0,0,-1)

This information gives me the rotation matrix:

0,1,0
1,0,0
0,0,-1

To achieve the desired orientation of the box mesh like so: https://i.sstatic.net/tQTAJ.jpg

I initially attempted to apply Euler angles for rotation but encountered issues where no rotation was apparent when using the following code:

let box = new Three.BoxGeometry(w, h, thickness);
const material = new Three.MeshBasicMaterial({...});
const mesh_box = new Three.Mesh(box, material);
mesh_box.rotation.x = -Math.PI/2;
mesh_box.rotation.y = 0;
mesh_box.rotation.z = Math.PI;

I made use of the asin and atan2 formulas outlined in chapter 2.1 on page 4 of this document: to calculate Euler angles.

Upon further investigation, I realized that the rotation is simply around the X/Y/Z axis and requires correct order placement.

In determining the ideal angle placements for each axis X/Y/Z based on the known rotation matrix, I used the calculations:

alfa = -1.57
beta = 0
gamma = 3.14

How can I determine which angle corresponds to each axis X/Y/Z?

Answer №1

I discovered the solution to my own question below, which may not be very helpful, but I am adding it here to close the post.

The error I made was unrelated to three.js. During testing, I mistakenly used hardcoded angle values from Excel. It turns out that BOOGTAN2 (equivalent to ATAN2) in Excel switches the x and y parameters compared to JavaScript. This caused the rotations to behave differently than intended. Thankfully, the issue is now resolved for me.

In JavaScript:
Math.atan2(90, 15); // 1.4056476493802699
Math.atan2(15, 90); // 0.16514867741462683

In Excel:
ATAN2(90, 15) = 0.16514867741462683
ATAN2(15, 90) = 1.4056476493802699

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 there a way to switch up the dropdown chevron using only CSS after a click?

Is there a way to change the appearance of dropdown arrows using only CSS and animations when clicked on? I attempted the following method: body { background: #000; } #sec_opt select { /* Reset */ -webkit-appearance: none; -moz-appearance: n ...

Ways to resolve the npm installation issue "npm ERR! code 1"

Upon attempting to install this project, I encountered an issue after running npm install: npm ERR! code 1 npm ERR! path C:\xampp\htdocs\sss\node_modules\deasync npm ERR! command failed npm ERR! command C:\Windows&bs ...

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

Babel had trouble transpiling due to an unexpected token while working with Bootstrap 4 and Codekit

Currently attempting to minify and transpile Bootstrap 4 using CodeKit3. However, encountering the following error: Babel: Failed to Transpile: SyntaxError: /bootstrap/carousel.js: Unexpected token (219:8) 217 | _getConfig(config) { 218 | ...

Is there a way to prevent the repositioning of bootstraps (reactstrap) drop-down menu when the screen sizes are altered?

When in portrait mode, there is ample space for the drop-down menu to display below the button you click to reveal it: https://i.sstatic.net/WEgYl.png However, when the screen size shrinks (such as in landscape mode on certain mobile devices), the menu&a ...

Button in Bootstrap input group moves down when jQuery validation is activated

Check out my bootstrap styled form: <div class="form-group"> <label for="formEmail">User Email</label> <div class="input-group"> <select class="form-control" data-rule-emailRequired="true" ...

Count, copy, and validate a group of spans using Protractor with AngularJS

As a beginner in automated testing, Protractor, and angularJS, I am looking for guidance on counting and verifying text in a list. The list contains items like Attractions, Capacity, and Content, which inform the user of their privileges. Here is the rele ...

Forecasting the Asynchronous Behavior of Promises

I encountered a piece of code that left me puzzled about the flow of execution. var x = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve([1, 2, 3]); }, 0); }); }; x().then((val) => { console.log ...

Trouble with text box focus functionality

Can someone help me focus a text box using code? Here is the code snippet: <input></input> <div id="click">Click</div> $(document).ready(function(){ $("#click").live("click", function() { var inputBox = $(this).prev(); $( ...

The functionality of Angular.js ajax and apply is experiencing technical difficulties

As I venture into the world of angular.js, I am facing a challenge with displaying the correct content on my website. The pages' content is fetched via AJAX (currently from static data, but eventually from a database). When I place a block with the ng ...

Controlling the behavior of React components in response to updates

I'm currently learning ReactJs and utilizing the ExtReact framework for my project. I have successfully implemented a grid with pagination, which is functioning well. I customized the spinner that appears during data loading and it works as expected ...

Splitting an array into multiple arrays with distinct names: A step-by-step guide

I have a data set that looks like this: [A,1,0,1,0,1,B,1,0,0,1,A,1]. I want to divide this array into smaller arrays. Each division will occur at the positions where "A" or "B" is found in the original array. The new arrays should be named with the prefix ...

What are the implications of dynamically setting or changing event handlers in web development?

Looking to streamline the process of replacing standard confirm() boxes with Bootstrap modals for saving and deleting on a page. Each operation has its own button (referred to as the action button) which triggers the corresponding modal. Upon clicking the ...

Implementing an input field using JavaScript

I have multiple search forms, each containing an input field with the class "search_input". My goal is to add the following code on button click: <input type="submit" class="searchbtn" value="Search" /> next to each input <input type="text" cl ...

Is there a JavaScript library available for converting PDFs with bookmarks in a React application?

Is there a javascript package for converting HTML to PDF with bookmarks in React? I have been searching for a solution but haven't found any suitable packages yet. Any suggestions? ...

Error: Attempting to assign a value to the non-existent property 'user' <br>    at [file path] on sqlite3

I encounter an unspecified error when I try to establish a session for the user after validating their credentials during login. I'm utilizing express-session to create the session, but it's not directly imported into the file as instructed by my ...

Push down on the scroll wheel and then let go

I am looking to create a script that will automatically scroll the window to a specific point if a certain condition is met. Once the scrolling is complete, I want to update the condition so that the window can freely scroll again. Can someone offer guidan ...

Knockout.js Introduction - Identifying the Reason for Data Binding Failure

Trying out the most basic example of Knockout.js as showcased on their documentation page: I've followed the documentation instructions to set everything up correctly, and there are no errors showing on the page. However, the span that should display ...

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

updating the name of an HTML element with jQuery

Encountering a problem with setting the class for each li in a group of li tags: function pathContents(fileList) { var $list = $('<ul/>'); $.each(fileList, function (_, file) { $('<li/>').prop('class', &apos ...