Can you explain the functionality of the Matrix4.multiply() method in three.js?

I am currently delving into the world of three.js and finding myself faced with a challenge. My goal is to multiply two translation matrices together in order to create a consolidated matrix that encapsulates both translations:

| 1 0 0 -2 |   | 1 0 0 3 |
| 0 1 0  7 | * | 0 1 0 4 |
| 0 0 1  6 |   | 0 0 1 6 |
| 0 0 0  1 |   | 0 0 0 1 |

The matrix I was anticipating should look like this:

| 1 0 0  1 |   
| 0 1 0 11 | 
| 0 0 1 12 |   
| 0 0 0  1 |

However, what I'm actually getting is:

| 1  0  0  0 |   
| 0  1  0  0 | 
| 0  0  1  0 |   
| 1  11 12 1 |

To perform this multiplication, I am utilizing the Matrix4.multiply() method provided by three.js:

var result = matrix1.multiply(matrix2);

If you'd like to witness this phenomenon firsthand, please take a moment to explore this jsfiddle demonstration.

Furthermore, if you are curious about the expected outcome, feel free to examine this WolframAlpha reference.

It appears I have not grasped the true essence of three.js's Matrix4.multiply() method. Can someone shed light on its functionality and guide me towards achieving the desired output?

javascriptmatrixthree.jslinear-algebramatrix-multiplication

Answer №1

The issue lies in how you are looping through the matrix elements for printing. The .elements property presents the elements in column-major order (despite the constructor and .set() methods parameters being in row-major order!). To correct this, follow these steps:

function displayMatrix(matrix) {
    var e = matrix.elements;
    var $output = $('#output');
    $output.html(e[0] + ' ' + e[4] + ' ' + e[8] + ' ' + e[12] + '\n');
    $output.append(e[1] + ' ' + e[5] + ' ' + e[9] + ' ' + e[13] + '\n');
    $output.append(e[2] + ' ' + e[6] + ' ' + e[10] + ' ' + e[14] + '\n');
    $output.append(e[3] + ' ' + e[7] + ' ' + e[11] + ' ' + e[15] + '\n');
}

Additionally, there was an error in your code where e[13] was printed twice...

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

Executing JQuery asynchronous calls sequentially

Recently delving into the world of Jquery, I've encountered a coding challenge: my code loops through an array and retrieves HTML from an ajax request for each iteration. $.each(arr, function (data) { $.get('/Quote/LoadQuoteItemCost', { ...

javascriptjquery

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

javascripthtmlcssreactjs

The API designed to accept JSON data via a POST request is receiving a different data type than expected

I have a task to develop an API that receives JSON data in NODE.JS via the POST method. To simplify request management, I utilize Express and BodyParser library to handle the body of POST requests. The data is structured in a JavaScript object like this: ...

javascriptnode.jsjsonexpressbody-parser

Karma is unable to locate the module within the specified relative path

I'm facing a challenge with Karma not being able to load a specific file. As a novice in Karma, I dedicated the entire day to researching and checking documentation for similar issues with no luck. Upon initiating the karma process, it encounters an ...

javascriptnode.jsunit-testingkarma-runnerbrowserify

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

The error message "Element is not defined (Object.<anonymous>)" is occurring in the context of Intro.js-react, React, Next.js, and Tailwind

Here is a code snippet: import { useState } from 'react'; import { Steps } from 'intro.js-react'; export default function Dashboard() { const [stepEnabled, setStepEnabled] = useState(true); const steps = [ { intro: &apos ...

javascriptreactjstypescriptnext.jsintro.js

When it comes to entering text in a text input or textarea within a large module in Vue.js, taking

While filling out my large form, I noticed a delay in rendering whenever I typed quickly into the input boxes. <b-form-input v-model="paymentItems.tierStepUPYear" type="text"></b-form-input> ...

javascriptvue.js

Delay in changing the z-index of FloatingActionButton on hover

In my current issue, I am facing a problem where a div that is meant to always stay below a FloatingActionButton (FAB) ends up temporarily appearing above it when z-index values are changed. The scenario is such that upon clicking the FAB, an invisible ove ...

javascriptreactjsz-indexmaterial-ui

Error: Collection2 validation did not pass: The field 'name' must be filled in, the field 'email' cannot be empty, and the field 'message' is mandatory

I need to set up a way for visitors to send messages through my website const mongoose = require("mongoose"); mongoose.connect("MongoDb-Connection-Uri") .then(() => { console.log("mongodb connected"); }) .catch(() => { console.log("fail ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to find the product of each object in an array by the corresponding values in another array?

Searching for a solution to an issue I encountered while working on an assignment. The problem can be illustrated as follows: var arrOfObj = [{a:10 },{a:20},{a:30}, ......] var arrToMultiply = [2,4,6, .....] The expected result const result = [{a:10,resul ...

javascriptnode.jsarraysobject

Tips on identifying HTML email input validation using JavaScript?

Just like when you can determine whether an input element with a required attribute was successfully validated, try using the following code: if($('input[type="email"]').val() && $('input[type="email"]').val().includes('@') & ...

javascripthtml

What are the built-in modules in node.js that handle System calls?

Can you list the built-in modules in Node.js that handle system calls, such as child_process? I'm interested in learning about all the methods within these modules. Thank you! ...

javascriptnode.jsnpmsystem-callsnode-modules

SQL stores Array Input as a static identifier 'Array'

Previously, I was able to save an object in the database. However, now I need to save each individual data in an array within a row. I attempted to use array_column to store a specific set of data in a column, but it ended up saving as the word 'Array ...

javascriptphpvue.js

What is the best way to substitute unpredictable dynamic variables on-the-fly?

I am working with a .js file that contains a config structure similar to this: genGetLocations:{ data_url:'restaurants/{var1}/tables/{var2}, } This is just one example. Some configurations may have data_url with more than two dynamic variables. I ...

javascriptvue.jsvuejs2

The function window.location.reload(true) is failing to properly refresh the page

Currently, I have a PHP page that retrieves data from a MYSQL database and creates HTML content based on the returned rows. I recently implemented a feature where clicking a button adds a new row to the database using AJAX, jQuery, and PHP. However, after ...

javascriptphpmysqlajax

Encountering an issue with Angular 1.6 and webpack: controller registration problem

Currently developing a small application with Angular for the frontend, and my frontend module is structured as follows: https://i.stack.imgur.com/tjfPB.png In the app.js file, the main Angular module 'weatherApp' is defined: angular.module(&a ...

javascriptangularjswebpack

Please input the number backwards into the designated text field

In my react-native application, I have a TextInput where I need to enter numbers in a specific order such as 0.00 => 0.01 => 0.12 => 1.23 => 12.34 => 123.45 and so on with each text change. I tried using CSS Direction "rtl" but it didn' ...

javascriptreactjsangularjstypescriptreact-native

Steps for updating text within an object in Angular

details = [ { event: "02/01/2019 - [Juan] - D - [Leo]", point: 72 }, { event: "02/01/2019 - [Carlo] - N - [Trish]", point: 92 } ]; I am attempting to modify the text within the titles that contain - N - or - D - The desired outcom ...

javascripttypescript

Multiple file formats supported by Uploadify

I am trying to find a solution for having various file types in the jQuery plugin Uploadify. Consider this scenario: You want to open a file with a program of your choice. Starting with a default OS dialog, you can select different file types from a dropd ...

javascriptjquerycustomizationuploadify

Step-by-step guide on integrating node.js and MySQL to store data from an online form in a database

Currently, I am attempting to insert data into a MySQL database using node.js by clicking the submit button. However, an error message has appeared and despite understanding it somewhat, I am unsure of how to proceed. Any assistance would be greatly apprec ...

javascripthtmlmysqlnode.js