Implement rotation in Three.js that mirrors the functionality of Blender

Is there a way to permanently change the default rotation of a mesh in three.js after it has been loaded? For example, if I load a mesh with a rotation of 0,0,0, can I then rotate it 90 degrees on the X axis and set this new rotation as 0,0,0?

It's important to note that I am not just looking to rotate the object using the Object3D.rotation method.

In programs like Blender, you would rotate an object and then 'apply' that rotation to reset the object's rotation to 0,0,0 while keeping the changes in place. Is there a similar function in three.js?

Any help or guidance on achieving this in three.js would be appreciated.

javascriptthree.js

Answer №1

SOLUTION 1

To ensure the child object has the default rotation, you can create a wrapper object like this:

const ChildObject = load(/*...*/);
ChildObject.rotation.set(90, 0, 0); // default rotation specified
const MainObject = new THREE.Object3D();
MainObject.add(ChildObject);

Now you have MainObject with rotation set to (0,0,0).

The same principle applies to other settings such as position, rotation order, and scale.

SOLUTION 2

If you want to apply transforms (position, rotation, scale) to your object's geometry, follow these steps:

object.rotation.set(90,0,0); // specify default rotation
object.position.set(/*...*/); 
object.scale.set(/*...*/);
object.updateMatrix();
object.geometry.applyMatrix(object.matrix);

object.position.set(0, 0, 0);
object.rotation.set(0, 0, 0);
object.scale.set(1, 1, 1);
object.updateMatrix();

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 way to verify a string before adding it to a MySQL database?

Recently, I encountered an issue with my database while storing input strings from users. It seems that someone tried to insert a WhatsApp smiley which resulted in an error. Although I do not recall the specific error message, it was clear that the value ...

javascriptmysqldatabasenode.jsvalidation

Having difficulty validating the field accurately with Angular.js

In order to validate the input field in accordance with the user's needs using AngularJS, I have shared my code below: <div ng-class="{ 'myError': billdata.longitude.$touched && billdata.longitude.$invalid }"> <input type ...

javascriptangularjs

Having Trouble Accessing Custom Screen in React Navigation?

The navigation from the Order screen to the Home Screen is not working as expected. Every screen in the route works, except for the Home screen, which just navigates back to the Map screen. I have clearly instructed to navigate to Home. Here is the curren ...

javascriptreactjsreact-nativereact-reduxreact-navigation

Is React State with JSON Object Losing Updates?

Encountering a strange issue here. At the start of my program, I load various values into a JSON object stored as a User State Object in a Postgres table. Although the object is quite large, I'll provide an example below. const [person, setPerson] = u ...

javascriptreactjsnext.js

Cross-Origin Resource Sharing problem: "Preflight request response does not meet access control criteria"

I'm currently tackling a Vue.js/Nuxt.js project that involves sending API requests to 'https://app.arianlist.com'. However, I've encountered some CORS challenges and came across this error message: "Access to XMLHttpRequest at &ap ...

javascriptvue.jsnuxt.js

AngularJS - Ensuring the <script> tag is included only after all directives have been rendered

Forgive me if this question has been asked before. I've spent quite some time looking for a solution to no avail. I'm in the process of converting an existing application, which relies heavily on jQuery, to utilize AngularJS. However, I've ...

javascriptangularjs

What is the best method to extract the values of objects in an array that share

var data= [{tharea: "Rare Disease", value: 3405220}, {tharea: "Rare Disease", value: 1108620}, {tharea: "Rare Disease", value: 9964980}, {tharea: "Rare Disease", value: 3881360}, ...

javascripttypescript

Having difficulty understanding why the Javascript regex is not functioning as expected

Can you help me validate user input to ensure it is a positive currency value in the correct format? Examples of valid formats include: 0.5, 0.55, 5 (please note this one), 5.5, 5.55, 55, etc. This is the code I am currently using: if ($("#gross").val() ...

javascriptregex

eliminating various arrays within a two-dimensional array

I need help with a web application that is designed to handle large 2D arrays. Sometimes the arrays look like this: var multiArray = [["","","",""],[1,2,3],["hello","dog","cat"],["","","",""]]; I am looking to create a function that will remove any array ...

javascriptjquerymultidimensional-array

Searching for matching strings in jQuery and eliminating the parent div element

Here's an HTML snippet: <div id="keywords"> <div id="container0"> <span id="term010"> this</span> <span id="term111"> is</span> <span id="term212"> a</span> <span ...

javascriptjqueryhtml

Convert an array of objects into an object where the keys are determined by the value of a specific

I'm working with an array that looks like this: const inventory = [ { fruit: 'apple', quality: 'good', quantity: 10 }, { fruit: 'banana', quality: 'average', quantity: 5 }, { fruit: 'orange', qua ...

javascriptecmascript-6lodash

New functionality introduced in JavaScript ES6: Sets

I am currently using a Set data structure to store unique primitive values, but I am facing an issue when trying to add unique objects based on their property values. Below is an example of my code: "use strict" var set = new Set(); var student1 = { ...

javascriptnode.js

React Switch not displaying various pages correctly

After creating a new component to switch between pages on my React app, I encountered an issue where the HomePage renders correctly when entering the site, but clicking on navlinks does not work. Additionally, when trying to access the url /contacto, ins ...

javascriptreactjs

Access denied for generating login hint on target domain in javascript web application for Google sign-in

Utilizing the Google signin Javascript API with the gapi-signin-button on a webapp. The app is being served by a gulp server, binding to 0.0.0.0. Everything works fine during local development, but encountering issues when accessing the page through a publ ...

javascriptauthenticationgoogle-signin

Is there a way to retrieve the id of every post on my page?

Is it possible to send multiple post ids in JavaScript? I have successfully sent the first post id, but now I need to figure out how to send each individual post id. When inspecting the elements, I see something like this: <div data-id="post_1">< ...

javascriptphpajax

class-validator: ensures the correct number of digits are present in numeric values

Seeking assistance on validating the number of digits for numeric values using class-validator. Specifically, I want my entity to only accept numbers with 6 digits for a certain property. For example: const user1 = new User(); user1.code = 123456 // should ...

javascripttypescriptclass-validator

Customizing valueAxis dynamically in Amcharts

I am currently utilizing Amcharts to display my data. Within my chart, I have 4 graphs with valueAxes ranging from 0 to 100. Is there a method for me to dynamically change the valueAxes to a range of 0-250 after the chart has been loaded in the view? I ...

javascriptamcharts

The inner radius remains constant in the Chart.js Doughnut Chart

I've been trying to create a half doughnut chart using Chart.js, similar to the image linked below. However, I'm having trouble adjusting the thickness of the pie chart. Despite using the innerRadius property, it's not producing the desired ...

javascriptangularjsionic2chart.js

JSON objects not loading properly in Bootstrap table

I am facing an issue where my ajax script successfully sends JSON objects to the browser, but the table fails to load the JSON object. Here is my Ajax script: $.ajax({ type : "POST", url : "getLabels.jsp", data : "mail ...

javascriptajaxjsontwitter-bootstrapjsp

"Exploring the possibilities of integrating Typescript into Material-UI themes: A step-by

I'm experiencing some issues with Typescript pointing out missing properties in the palette section. Although adding //@ts-ignore resolves the problem temporarily, I would prefer to find a cleaner solution. As a newbie to Typescript, here is my attemp ...

javascriptreactjstypescriptmaterial-ui