Guide on how to find the center of a model in Three.js post-rotation

Recently, I delved into learning threejs and attempted to create a function based on the threejs.org/editor platform. The goal was to develop a function that could accurately center a selected model within the scene. However, I encountered a significant problem:

The calculation of the center of the model was incorrect when the model had been rotated, resulting in an inability to place it correctly.

Below is the code for my alignCenter function:

editor.selected.geometry.center();
var box = new THREE.Box3().setFromObject(editor.selected);    
var newPosition = new THREE.Vector3(0, box.size().y/2, 0);    
editor.execute(new SetPositionCommand(editor.selected, newPosition));

You can see the function in action here - - (tab Alignment - AlignCenter)

However, when the model is rotated as shown here - (with random angles, box.size().y = 105.89974660644481, position.y = 52.95), due to the inaccuracies in center positioning, it does not work correctly.

What steps can be taken to resolve this issue?

PS: Apologies for any language mistakes as English is not my native language ;(

Answer №1

To assign individual rotation parameters for each axis, you can use the following code: cube.rotate.x += 0.1; cube.rotate.y += 0.1; This will rotate the cube along the X and Y axes. In this context, "cube" refers to the geometry or mesh of the object, but you may also consider computing the bounding box and rotating around its center point.

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

Step-by-step guide for importing a octet-stream 3d model into Three.js

I uploaded a model in .glb format to S3 services and obtained the URL https://test-image-prevaa-123.s3.amazonaws.com/test/1626336255367.octet-stream. How can I load this model into three.js? When I tried loading it from my code, the model failed to display ...

Steps to cancel an AJAX call in C# .NET:

In the ajax.cs class, I am calling methods from the javascript side. To register this on the default.aspx page load, I did the following: Ajax.Utility.RegisterTypeForAjax(typeof(ajax)); Occasionally, some methods take a long time to execute. In such case ...

Sending a message to a specific client using socket.io

Currently delving into socket.io + node.js, I have mastered sending messages locally and broadcasting using the socket.broadcast.emit() function - where all connected clients receive the message. My next challenge is figuring out how to send a private mes ...

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

I'm in the process of developing a Next.js application and I am faced with the challenge of transmitting customized error messages from the server to the client side while utilizing Next JS new server-side actions. Although my server-side code is func ...

Does the notion of "Execution context and the stack" only pertain to web browsers?

Does the concept of "Execution context and the stack" only apply to browsers, or is it also utilized in other environments such as NodeJS? I've crafted 2 statements but unsure if they are accurate: 1- "The environment for JavaScript is not solely the ...

Discover various ways to encapsulate Vue.js components

I am currently in the process of developing a website that utilizes classic multiple pages powered by blade templates. However, I am looking to incorporate vuejs2 components for more dynamic functionalities. Although things are running smoothly, I am faci ...

Transform an array of integers into a mapping of values and corresponding IDs for selected values

I've been able to successfully load values from my API into react-select for single select, but I'm encountering some issues with multi-select. const fetch_companies = () => { API.get("/companies") ... data = data.map(({ id: ...

The intricacy of the jQuery each function and its interaction with $(this

EXPLANATION: I am working with two elements, each containing a set of options. The first element has options with db-ids as values, acting as parent categories. The second element is filled with options where the parent db-ids are their values and their o ...

Organizing and managing one-on-one table tennis matches using a customized data structure. Leveraging the power of Vue, JavaScript, and

Seeking advice on the best approach for storing table tennis match data in a web application. I currently have a method in place that works, but I'm open to suggestions for improvement. Here is my current idea: matches: [ { id: 1 datePlayed ...

Error message: Suitescript encountered an unexpected issue - TypeError: The function this.handleChange is not defined

For the past year, I have been immersed in Suitescript development. In my current project, I have a client script that triggers on Save for a Journal Entry. However, upon trying to save, I encounter an error message that reads "TypeError this.handleChang ...

"Customizing the gaps between cluster bars on AmCharts JS for a clean and professional

Previously, I utilized the AmCharts flash version where creating clustered column/bar charts like the image below was a breeze. In that setup, the clustered bars were tightly packed with no spacing in between. However, transitioning to the JS version of Am ...

Form with several file selection points

I am working on an application that features a dynamic form capable of uploading files to different individuals simultaneously. Each person is assigned a unique input file and has the option to add up to 2 additional dynamic inputs. <div id="InputsWra ...

Encountering repeated requests (duplicating calls) for each API request while using AngularJS with a JWT authentication token

I'm experiencing a problem with AngularJS(2/4) while attempting to make API calls. The issue arises when each API request contains a JWT Auth Token header, resulting in duplicate API calls. The first request returns no response (despite receiving a 20 ...

Discovering complimentary number sequences amidst intersecting number sequences

I have a specific number of arrays, each containing a set amount of elements. Each element consists of two attributes represented by numbers. { start: x end: y } These start and end numbers define a range, where the start value is always smaller tha ...

Setting the rotation position in JQuery prior to initiating the animation

Perhaps I could phrase my query differently as How can I rotate an image in JQuery from a starting position other than 0 degrees. I am attempting to animate the rotation of an image from -50deg to 0deg. However, regardless of what I do, JQuery seems to al ...

Removing the initialization of a script from a JavaScript file: a step-by-step guide

Currently, I am working on incorporating this grid into my project. However, I prefer not to utilize the Masonry plugin as suggested in the article. The instructions state that I need to eliminate the initialization process, but I am unsure how to proceed. ...

Even with CORS enabled, the dreaded cross-origin error persists

I've been attempting to access a node route in Angular using the $http method and the cors module. I've tried implementing a basic app.use(cors()); but the error persists. I also followed guidelines from the cors documentation by creating a whi ...

What could be hindering the activation of my button click event?

Below is the js file I am currently working with: var ButtonMaximizer = { setup: function () { $(this).click(function(){ console.log("The maximize button was clicked!"); }); } }; $(docum ...

Issue with Vuex. While this.$store.dispatch(...) is functional, ...mapAction is not working as expected

I am encountering an issue with dispatching Actions from vuex. It's puzzling to me that ...mapActions is not initiating a request to Jsonplaceholder. However, using this.$store.dispatch successfully retrieves all 10 users without any issues. Below are ...

Remove all spaces from input fields in angular Typescript, excluding the enter key

I've encountered an issue where the code below removes all spaces, but it's also removing the enter key. Is there a way to remove only spaces and not affect the enter key? static stripDoubleSpaces(str: string): string { if (!!str) { ...