Converting Coordinates from a Z-Axis Up System to a Y-Axis Up System in THREEJS

I am attempting to convert a set of Transformation Matrices for animating objects in ThreeJS. These matrices are extracted from Rhino, a Z-Up Modeler, and need to be converted to Y-Up for use in ThreeJS. I came across a similar question on this platform, but the provided solution didn't work for me as my transformations didn't transfer correctly.

Is there anyone who can help me convert the following 4x4 matrix from a Z-Up coordinate system to a Y-Up Coordinate System?

{ a, b, c, d }
{ e, f, g, h }
{ i, j, k, l }
{ m, n, o, p }
javascriptthree.js

Answer №1

Here is a solution that seems to be working for me:

If the geometry is exported without flipping the YZ axis in the Z Up Environment settings, you can import it into THREEjs and fix the YZ Discrepancy using this matrix (link):

        objectid.matrixWorldNeedsUpdate=true;                               
        objectid.matrix.set 
        (
            1,  0,  0,  0,
            0,  0,  1,  0,
            0,  -1, 0,  0,
            0,  0,  0,  1
        );
        objectid.updateMatrixWorld();

Following the instructions in this post, you need to adjust the imported transformation by flipping the second and third rows as well as the second and third columns:

{ a, b, c, d }  
{ e, f, g, h }  
{ i, j, k, l }  
{ m, n, o, p }

to

{ a, c, b, d }  
{ i, k, j, l }  
{ e, g, f, h }  
{ m, o, n, p }

In my case, I initially applied the YZ flip when exporting the OBJ from Rhino, causing the transformation to act on different geometry. The issue was resolved by applying the YZ flip on the javascript side instead.

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

Are the import and export keywords native to webpack or are they specific to JavaScript syntax?

I am pondering whether the import & export aspects are part of the language itself or simply keywords that webpack adds to the language. Thank you. ...

javascriptwebpackimportexport

Data is persisted in the database even when an error occurs

When a user submits their Permanent Account Number (PAN), I check if it already exists in the database. If it does, I receive an error message stating that the PAN number is already registered. However, if I ignore the error and proceed without changing th ...

javascriptphpajax

Is it possible to use TypeScript in a React Native project with a JavaScript file?

Currently, I am learning React Native by working on app clones like Instagram and YouTube. I have recently started an AirBnb clone project, but I'm facing some issues with the initial build. One issue I noticed is that in 'App.js', the temp ...

javascripttypescript

Angular: monitoring changes in HTML content within a Component or Directive

I have a situation where I am retrieving HTML content from a REST endpoint using a directive and inserting it into a div element using [innerHTML]. Once this HTML content is rendered, I would like to manipulate it by calling a global function. My approach ...

javascripthtmlangulartypescript

How to update a deeply nested object within a mongoose document

I've been struggling to update a specific object within a Mongodb document using the findOneAndUpdate() method. Here is a snippet of my collection structure: { _id: new ObjectId("61da0ab855483312e8f4483b"), products: [ { creat ...

javascriptnode.jsmongodbmongooseodm

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

javascriptcssjsfprimefaces

What methods work best for retrieving non-API data in Next.js when deploying on Vercel?

Before rendering my application, I am working on fetching my data. Luckily, Next.js offers a method called getStaticProps() for this purpose. Currently, I am utilizing the fs module to retrieve data from a json file in my local directory. export async fun ...

javascriptnext.jsvercel

Why is the responseText of an AJAX request empty on Chrome?

Why does this simple AJAX request work in IE but not Chrome? Check out the code below: var x = new XMLHttpRequest(); x.open("GET","style.php",true); x.send(); alert(x.responseText); The last line triggers an empty 'alert' window. Here's ...

javascriptphpjqueryajaxgoogle-chrome

JavaScript date input formatting with HTML

When using the input date picker in HTML, the default format displayed is MM-DD-YYYY. <input type="date" id="gdatum" /> Is there any method to change the mask to DD-MM-YYYY? ...

javascripthtmldatedatepicker

Error occurs in Javascript when attempting to execute javascript code using PHP's echo and an unexpected identifier token is encountered

Currently, I am trying to insert a div into the page when a specific condition is met in PHP: if ($var == 0) { echo '<script>console.log("Test."); var res = document.getElementById("response"); res.innerHTML = "<div class='h ...

javascriptphphtml

Sluggish animation performance in threejs when using requestAnimationFrame within a class

Experiencing choppy animation on the JSFiddle? When trying to move your mouse or interact with the content, you may have come across issues with the classing related to requestAnimationFrame(this.animation). Initially, it didn't work as expected, but ...

javascriptclassthree.jsthisrequestanimationframe

Creating unique custom renders in Node.js

I am in the process of creating an API using node.js and express. I am interested in enhancing the standard res.send function from any of the external route files to format the response beforehand and include extra data. Is there a way to achieve this? A ...

javascriptnode.jsapiexpresslocomotivejs

Unveiling Three.js: Exploring the Unique One-Sided Surface

Here is the three.js code: <script type="text/javascript"> init(); animate(); // FUNCTIONS function init() { // SCENE scene = new THREE.Scene(); // CAMERA var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_A ...

javascriptthree.jswebgl

Vue 3 App experiencing issues displaying Bootstrap 5 offcanvas component

I am currently working on integrating the new offcanvas feature of Bootstrap 5 into my Vue app. I have written the code, and after building the app, I am attempting to test it. However, I am facing an issue where the offcanvas menu is not visible. To kee ...

javascriptvue.jsbootstrap-5off-canvas-menu

Issue with Basic jQuery Demonstration (Failure to Conceal Item)

Below is a jQuery example where an element should be hidden, but it's not working as expected: <html> <head> <script src="../lib/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $ ...

javascriptjqueryhide

Dispatching actions in `componentDidMount` is restricted in Redux

Update at the bottom of post I've created a React container component called AppContainer, which checks if the user is authenticated. If the user is authenticated, it renders the app's routes, header, and content. If not, it displays a Login com ...

javascriptreactjsreduxreact-redux

Is there a way to effectively transfer both Vertex and Face normals to a Three.js shader?

It seems that the THREE.Geometry methods, .computeFaceNormals() & .computeVertexNormals(), assign values to a built-in attribute array called "normal." If I want to utilize both vertex- & face-normals in one shader, I need to: Calculate face-normals ...

javascriptthree.jsglslshadernormals

The sticky position is malfunctioning even when there is no parent element with the overflow hidden property

// observer for feature section let featuresSection = document.querySelector('#featuresSection'); let callbackFeature = (items) => { items.forEach((item) => { if (item.isIntersecting) { item.target.classList.add("in ...

javascripthtmlcsssticky

What is the method to extract mimeType from an HTMLImageElement?

After researching the MDN documentation on HTMLImageElement, I found no mention of the mimeType. I did come across some resources explaining how to retrieve the mimeType from a File Object. However, my specific requirement is to extract the mimeType from ...

javascripthtmlimage