Problem with object positioning in Three.js when applying rotation matrix

I am attempting to rotate an object named "moon" (which is represented as a sphere) using a matrix instead of the moon.rotation.y property. Here is the code I am using:

moon.applyMatrix(new THREE.Matrix4().makeRotationY(Math.PI/100));

The rotation of the object is working correctly, however, I have noticed that the object's initial position has changed unexpectedly:

moon.position.set(30,1,30);

The position now appears to be (0,0,0) instead of the expected (30,1,30).

Could you please explain why executing the rotation line causes the object to be at (0,0,0) instead of its original position?

Thank you.

Best regards,

Jose.

javascriptthree.js

Answer №1

When you use applyMatrix(), it directly modifies the matrix. If you set the position, the matrix is only updated in the render loop or when updateMatrix() is called. Therefore, depending on the order of operations, calling applyMatrix() could potentially overwrite your position setting.

If you need more information on Matrix transformations in three.js, check out their documentation page: .

I've also created a series of test cases to explore different ways of applying rotations and transformations to meshes and geometries. You might find it helpful:

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

Using JavaScript to set the value of an input text field in HTML is not functioning as expected

I am a beginner in the programming world and I am facing a minor issue My challenge lies with a form called "fr" that has an input text box labeled "in" and a variable "n" holding the value of "my text". Below is the code snippet: <html> <head&g ...

javascripthtmlinputassign

Guide on Retrieving the Current URL in NodeJS

Currently, I am utilizing express in conjunction with node.js. In my setup, the following code is present: app.get('/callback', async function (req, res) { Whenever a user reaches the callback section of my website, I expect to receive the req ...

javascriptnode.jsexpressurlnodejs-server

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

I have incorporated the JQuery TextNTags plugin into my web application. Here is the original code snippet: $.browser = { webkit: true }; $(function () { $('textarea.tagged_text').textntags({ triggers: {'!': { ...

javascriptjqueryhtmlcssjquery-plugins

Trouble with second function invocation in JavaScript

After creating two sets of arrays and passing them into different functions, I noticed some strange behavior. The first time I called the functions for scores1, everything worked perfectly. Likewise, the second time I called the first function (for Scores2 ...

javascriptarraysfunction

Unexpected Behavior Arises from Axios Get API Request

Below is a functional example in my CodePen showing what should be happening. Everything is working as intended with hard coded data. CodePen: https://codepen.io/anon/pen/XxNORW?editors=0001 Hard coded data: info:[ { "id": 1, "title": "Title one ...

javascriptvue.jsvuejs2axios

The content within Contentful is presented in a JSON object format, but accessing specific values is proving to be

I have successfully added two records in the contentful database and now I am attempting to fetch the content from Contentful into my React-hooks website. However, I am facing difficulties retrieving the values for title, description, image, and shortDescr ...

javascriptjsonreact-hooks

How can I retrieve data from a script tag in an ASP.NET MVC application?

I'm struggling to figure out how to properly access parameters in a jQuery call. Here is what I currently have: // Controller code public ActionResult Offer() { ... ViewData["max"] = max; ViewData["min"] = min; ... return View(paginatedOffers ...

javascriptasp.net-mvc

Tips on converting deeply nested JSON into an excel file using Node.js

I am attempting to convert the JSON data below into an Excel file using XLSX. Although it successfully converts my JSON to Excel, I encountered an issue where the nested array of dailyPointsArray appears blank after conversion. Code Attempted const XLSX ...

javascriptnode.jsexcelexpressxlsx

Initially, my PDF file does not get selected, except in the Internet Explorer browser

I am currently facing an issue with selecting PDF files in Internet Explorer. The process works smoothly in Google Chrome, but I encounter a problem when trying to select PDFs in IE. Specifically, when I attempt to select a PDF for the first time in Inter ...

javascriptjqueryhtmlinternet-explorer

Concealing two div elements based on string content

I am working on a unique Wordpress blog post layout that showcases personnel profile cards, displaying 12 individuals at a time. Depending on whether or not a person has a Twitter handle entered in the backend, certain elements should either be shown or hi ...

javascripthtml

Issue with Electron Remote process failing to take user-defined width and height inputs

I'm currently facing an issue with utilizing remote windows in electron. I am attempting to process user input and use that input to generate a new window with specific width and height. However, when I hit submit, nothing happens. I can't figur ...

javascripthtmlnode.jselectron

Combining the elements within an array of integers

Can anyone provide insight on how to sum the contents of an integer array using a for loop? I seem to be stuck with my current logic. Below is the code I've been working on: <p id='para'></p> var someArray = [1,2,3,4,5]; funct ...

javascripthtmlfor-loop

Tips on choosing and retrieving the value of filled text area fields using jQuery

I am struggling with selecting non-empty textareas and retrieving their values using jQuery. Here is a snippet of my code: <div class="item"> <textarea class="col-sm-10 comment">TextArea1</textarea> </div> <d ...

javascriptjqueryhtml

Gaining entry to information while an HTML form is being submitted

After a 15-year break, I am diving back into web development and currently learning Node.js and ExpressJS. I have set up a registration form on index.html and now want to transfer the entered data to response.html. However, when I hit Submit, the form is p ...

javascriptformsexpresspost

The Three.js camera imported from Collada is unable to properly focus on an object within the scene

Having some trouble grasping the concept of Collada Animation in Three.js! I have an animation with a moving camera in 3Dsmax, and exported the scene into Collada. loader.load( ColladaName, function ( collada ) { model = collada.scene; model.upda ...

javascriptthree.jscollada

Strange shadow distortions appear in Three.JS when using a spotlight on Android devices

Currently, I am using Three.js v0.113.2 to create a scene featuring a mug on a plane illuminated by two spotlights (one behind and one in front), along with ambient light. The front spotlight is set to cast shadows, the mug is set to cast shadows but not r ...

androidthree.jsshadow

Each time I invoke the setInterval function, my counter speeds up - using vuejs

In my development process, I am creating a countdown that is triggered by a function. The main objective is to reset the countdown each time a user answers a question in the game and a new question appears. However, I have encountered a challenge where i ...

javascriptvue.jsvuejs2setintervalcountdown

Creating a dynamic table in VuetifyJS by populating it with data in real-time

Dealing with a dynamically changing table columns can be tricky. This means that hardcoding the template for the table like this example won't work: <template> <v-data-table :headers="headers" :items="items" hide-actions cl ...

javascriptvue.jsvuetify.js

Saving a Coordinated Universal Time and showcasing it in the corresponding local timezone

In my upcoming MVC4 application that will have a global audience, one of the features involves recording the date and time when a transaction is added or modified. Since I am storing the transaction datetime in UTC format, what would be the most effective ...

javascriptasp.net-mvcdatetimeasp.net-mvc-4client-side

Is it viable to create an onClick event for the text content within a text area?

I'm working on a project that involves displaying XML data in a textarea and creating an onClick event for the content within the textarea. For example: <textarea>Hello Web, This is a simple HTML page.</textarea> My goal here is to cre ...

javascriptjqueryhtml