What is the procedure for obtaining the inverse of a Matrix3 within the context of three.js?

The documentation for three.js mentions that there is a function called Matrix3 which has a method called .getInverse.

However, it requires a Matrix4 as the first parameter.

I attempted to use this function in a simple way in version r71:

var m = new THREE.Matrix3();
console.log('Initial:', m.elements);
m.set(10,8,3,15,7,2,10,6,1);
console.log('Set    :', m.elements);
console.log('Inverse:', m.getInverse(m).elements);

You can test it out here: http://jsfiddle.net/as8g61nb/5/ (valid only in Chrome)

Unfortunately, the result I got was unexpected:

Initial: [1, 0, 0, 0, 1, 0, 0, 0, 1]                   // Correct
Set    : [10, 15, 10, 8, 7, 6, 3, 2, 1]                // Random values
Inverse: [NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN] // Not the desired output

Interestingly, Wolfram Alpha produces a valid 3x3 Matrix when given the same input.

Input:

Inverse[{{10, 15, 10}, {8, 7, 6}, {3, 2, 1}}]

Output:

{{-1/10, 1/10, 2/5}, {1/5, -2/5, 2/5}, {-1/10, 1/2, -1}}

I delved into the source code of three.js to understand how .getInverse works, but this only added to my confusion.

It appears that the function expects a Matrix4 as its first argument, leading to the accessing of elements[10] and elements[11], which cannot be done with a Matrix3. This could explain why the output contains NaN elements.

So, should I convert my Matrix3 to a Matrix4, invert it, and then revert it back to obtain the inverse Matrix3? Or am I overlooking something obvious?

Answer №1

When working with three.js, it is important to note that the library is based on Matrix4, which means there isn't a direct method for inverting a Matrix3.

One workaround is to incorporate Matrix4 throughout your code.

Another approach is to convert your Matrix3 into a Matrix4 and then use the getInverse() method.

var m3 = new THREE.Matrix3();

m3.set( 10,8,3, 15,7,2, 10,6,1 ); // column1, column2, column3

console.log( 'Set    :', m3.elements );

var m4 = new THREE.Matrix4();

m4.set( 10,8,3,0, 15,7,2,0, 10,6,1,0, 0,0,0,1 );

console.log( 'Inverse:', m3.getInverse(m4).elements );

This code example is specific to three.js version r.71

Answer №2

If you come across this question, it's important to note that Matrix3.invert() can now be utilized directly.

For instance:

import * as THREE from 'three';

let eye = new THREE.Matrix3().identity();
let inv = eye.invert();

This information is outlined in the official documentation for three.js.

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 similar alternative to {useLocation} provided by 'react-router-dom' that can be used in Next.js?

import { useLocation } from 'react-router-dom'; Currently utilizing Nextjs, I'm seeking assistance in finding an alternative for useLocation ` import Link from 'next/link'; import { FC } from 'react'; import {useRout ...

Instructions for transforming rows into columns in JSON format

Looking to convert an array of JSON objects into a format where rows become columns and the values at the side become column values, similar to the crosstab function in PostgreSQL. The JSON data looks something like this: {"marketcode":"01","size":"8,5", ...

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

Controlling the position of a <div> element using JavaScript

Is there a way to adjust the position and size of a <div>? I have already set it to float with this CSS code: div.grid_tooltip { position: absolute; left: 0px; top: 0px; } ...

Height of the Accordion List

I have a code snippet below for an accordion list that I put together. I initially set the height for all the heading boxes to be uniform, but it seems like box A is displaying larger than the others. Can you help me figure out what went wrong? Any suggest ...

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

All strings located between the specified phrases

I am attempting to extract strings that are located between two specific strings, but the output I am getting from using str.match is not what I anticipated: var text = "first second1 third\nfirst second2 third\nfirst second3 third"; var middles ...

Replace specific text with a span element around it?

I am working with the following HTML code: <p class="get">This is some content.</p>. My goal is to modify it so that it looks like this: <p class="get">This is <span>some</span> content.</p>. To achieve this, I have ...

Looking to retrieve a cookie within Vue Router in Vue 3? Utilize the following approach within your router's `index.js

Scenario: Developing a Vue3 app with express as the API backend. Express utilizes express-sessions to create a server-side session that is transmitted to the browser and received in subsequent requests. I am in the process of implementing a route guard to ...

Issue with React not properly closing the dialog box

While using materialUI, I encountered an issue where clicking a menu item to open a dialog box (child component) doesn't update the data for noticeModal and the dialog box won't close. There are no errors thrown, but it seems related to using use ...

Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Looking for a scrolling effect in an HTML Dialog with Google Apps Script. I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog. < ...

Issue encountered while validating password using regex pattern?

There seems to be an issue with password validation when requiring 1 upper case, 1 lower case, 1 number, and 1 special character. methods: { validateBeforeSubmit() { this.$validator.localize('en', dict) this.$validator.validate ...

Experiencing difficulties with NPM installation

Screenshot of my terminal in VSCode Despite attempting to uninstall and reinstall node and clearing the cache, I am still unable to resolve this issue. Any suggestions? If it's relevant, I am using Windows 10. ...

The loop feature in Swiper.js seems to be malfunctioning and not functioning as

I'm currently in the process of setting up a carousel using swiper.js and here is my setup: { slidesPerView: 1, slidesPerColumn: 1, initialSlide: this.initialSlide, loop: true } As expected, I'm encountering an issue where dupl ...

Animating an image inside a bordered div

I'm attempting to create an animated effect where an image moves randomly within the boundaries of a div container. While I've come across solutions for animating within borders, none have specifically addressed keeping the image inside the div. ...

Change not accepted

I am a beginner in Angular and still grappling with the fundamentals. On my menu, I have a cart icon with an initial value of 0 upon first load. In my product list, each product has an 'AddToCart' button. What I aim to achieve is- I want to dy ...

What is the best way to access the id attribute of a <td> element within a <tr> using jQuery?

Can someone assist me with this issue? Is there a way to get the ID of the first or second td element instead of using a loop? Here is an example: "<tr class='test_point' id="+fileName+"><td><img src='"+ROOT_PATH+"/assets/d ...

The modification of HTML styles

How can I change the style (width, color etc) of all 8 functions like this? function my(){document.getElementById("question1").innerHTML="THIS QUESTION"+ "<br>" +"<button onclick=answer1() id=ques1 >first answer</button>" +"<button ...

Storing personalized HTML content in a database for individual users: A step-by-step guide

I have a JavaScript code snippet similar to this fiddle: http://jsfiddle.net/nj4N4/7/ On my webpage, it displays like this: image. When you click on the "add a year" button, a table resembling year2 appears above the previous year. Now, I'm looking ...

Images that are automatically generated cannot be interacted with by clicking on them

I currently have 4 images loaded onto my website. Whenever I click on one of the images, it becomes highlighted as desired using the following code: JavaScript Function 1 : var ImageSelector = function() { var imgs = null; var selImg = null; retu ...