Discovering the bottom side of a cube using Euler Angles (or Quaternions) in three.js

Hey there!

I have a little puzzle that I could use your help with:

Imagine this - I've got a cube that can be rotated around three different axes. I've gathered some data on the cube's rotation, specifically an array of three angles ranging from 0 to 2π.

Now here comes the challenge: how can I figure out which side of the cube is at the bottom just based on these three euler angles?

What I'm envisioning is a nifty function that looks something like this:

function getSideFromAngles(x,y,z) {
   // let the magic begin
   // for instance, getSideFromAngles(Math.PI/2, 0, 0)
   // if x===PI/2 and y===0 and z===0 return "front"
   // indicating that the front side of the cube is pointing downwards.
}

Oh, by the way - I can also get quaternions of the cube using Three.js.

Thank you in advance for assisting me!

Answer №1

To begin with, make sure your faces are equipped with the normals, which provide the essential orientation of the face.

Additionally, ensure that your mesh contains the matrixWorld, which will yield the overall rotation results (comprising all rotations).

By multiplying this matrix by the normals, you can obtain the normals in world space.

Next, create a downward-pointing vector (0, 0, -1) and compute the dot product between this vector and the normals in world space. The face with the highest value signifies the one pointing most "downward."

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 with YouTube API in Internet Explorer 8: Video not found

While using the iframe youtube api to handle video, everything runs smoothly on Chrome and Firefox. However, when trying to implement it on Internet Explorer 8, an error saying 'video' is undefined pops up. Any suggestions on how to resolve this ...

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

I've searched high and low with no success. I'm attempting to detect when the carousel transitions to a new slide, whether it's automatically or by user click. Despite my numerous attempts, I have been unable to make this event trigger. I ha ...

Ways to extract value from all chosen dropdown list elements

<table id="tb_Answers"> <tbody> <tr> <td> <select class="ddl_NextQuestion" name="_ctl0"> <option value="0">End</option> <option val ...

React component failing to update after receiving response from server for a specific room using socket.io-client with Python backend

I've developed a server backend in Python with Flask-SocketIO that includes a room feature for private conversations. When a user joins a room, the server triggers a function to inform the frontend where to direct messages to a specific user: socketio ...

Is there a way to initiate an AJAX post request with the Authorization header for the initial request using Windows Authentication?

I'm working on a web application that has a video page and a Web API for logging purposes. The events are triggered using an ajax post request: function logAction(actionToLog) { $.ajax({ type: 'POST', url: "/api/v/" + cu ...

Exploring the Implementation of Multiple Form Validations in SharePoint using PreSaveAction

My knowledge of Javascript is limited to what I can gather from online resources. Currently, I'm facing a challenge with a SharePoint form where I need to set up specific validations that trigger when a user hits the "Save" button. The validations I& ...

Are there any npm modules available that can efficiently transform unstructured information into a CSV format?

In my Javascript project, I am trying to export data into a CSV file. However, I am facing an issue as the data I have may contain different headers for each row. For example, the data structure could be like this: [ { name: 'John', color: &apo ...

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem ...

Retrieve the selected value from a radio button

I am attempting to display the chosen value in an input field when a radio button is selected. However, the functionality seems to be broken when I include bootstrap.min.js. You can find the code on JSFiddle. $('input:radio').click(function() ...

Although responseText functions properly, responseXML remains constantly null

I've searched through all available answers here and still can't find a solution. I'm confident that I haven't overlooked anything obvious. My issue involves loading map markers based on latitude and longitude coordinates. The problem ...

The Vuetify navigation drawer seems to have a quirk where it only closes after an item

I am brand new to Vue and struggling to figure out why my vue v-navigation-drawer is not working properly. It is located in app-root.vue and was initially closing when clicking on a drawer item, but now requires two clicks to close. After the first click, ...

An AJAX request will only occur if there is an alert triggered on a particular computer

Here's an interesting issue I encountered with my company's CMS newsletter system. It seems that the AJAX call to send an email works flawlessly in all modern browsers and operating systems, except for one client. This particular client is using ...

Are there distinctions between initializing a JavaScript variable with [] as opposed to {}?

Throughout my coding journey, I've always used: var j= {}; j['field'] = value; It turns out the following also works: var j= []; j['field'] = value; Is there any difference between the two? Edit: Apologies for using the wrong ...

Using Selenium to interact with a link's href attribute through JavaScript

New to Java and Selenium, I'm facing difficulties when trying to click on a link with JavaScript in href attribute. Here's the snippet from the page source: href="javascript:navigateToDiffTab('https://site_url/medications','Are y ...

Issue with Guild Member Add functionality in discord.js is not functioning as expected

I'm facing an issue with my code where the bot does not send a welcome message when a user joins, despite having everything set up correctly. Even when a user leaves, there is no farewell message being sent either. Here is the code I am using: bot.on ...

Steer clear of cross-domain solutions

Currently, I am developing a web application that allows customers to integrate it into their websites by linking to a JavaScript file on my server. Despite the application reading all JavaScript files from my server, I encounter an error when attempting t ...

Vue components fail to display properly when transitioning between routes in Vue (version 3) using the Vue Router

Just diving into VueJS version 3 and vue-router. Despite my efforts to troubleshoot by consulting Stack Overflow and Google, the issue remains unresolved. I have defined two routes: /login /admin/index The Problem: While the login route ...

What is the method for determining the size of a WeakMap?

I am working with a WeakMap that looks like the following: let newObj = new WeakMap(); let key1={"a":1}; let key2={"b":2}; let key3={"c":3}; newObj.set(key1,"value1"); newObj.set(key2,"value2"); newObj.set( ...

Is it possible to eliminate any leftover comments from a JSON string using jQuery and Ajax?

Having an issue with a framework that generates invalid JSON String like this: /* { "myobject" : "test"} */ The problem lies in the comments before and after the json string. This is done for security purposes, as it's not recommended to return JSON ...

Keying objects based on the values of an array

Given the array: const arr = ['foo', 'bar', 'bax']; I am looking to create an object using the array entries: const obj = { foo: true, bar: true, bax: false, fax: true, // TypeScript should display an error here becau ...