The rotation and scaling in Three.js are not happening precisely around the central axes of the object

I am facing an issue with a series of Object3Ds in my scene that I crafted myself using vertices and faces. The vertices of these objects can be positioned very far from the world origin, with X and Y values reaching up to around 600,000. When attempting to rotate or scale these objects, they seem to rotate around a different axis rather than their local center.

Interestingly, object3D.translateX (or Y Z) works as expected, as does simply adjusting the position:

object.position.x = 10

This updates the x position by 10 units away from the local origin at 0,0,0.

I am unsure which axis the object is rotating around. Even when I moved the geometry to 0,0,0 using object.position, it did not rotate around its center either.

If it helps, I have code to determine the center of the object using:

THREE.Box3().setFromObject(object).center

(although there may be better methods available))

I came across this post which showed me how to rotate (XYZ) around the central point, but I am struggling to find a way to rotate around individual X, Y, Z axes separately.

Are there any solutions for this common problem of scaling and rotating objects around their central axes?

Edit: I have found conflicting information indicating that rotation should occur around a local axis, but this doesn't seem to apply to my geometries! Some sources suggest rotation occurs around the object axis

Similarly pointing out similar issues, suggesting it might vary based on how the object is 'built' (unclear what that means)

Answer №1

The elements are orbiting around the coordinate point 0,0,0 of the object itself, rather than the global 0,0,0 coordinates. Additionally, the element's origin may not necessarily be at its center.

To check if the objects align, position your element at 0,0,0 and create a cube at the same location to compare their positions.

I had to adjust the vertices of the object so that they were truly centered around 0,0,0 before I could rotate them accurately.

Alternatively, place your object at 0,0,0 and run your code to determine the actual center of the object, which may not coincide with the expected 0,0,0.

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

Separate the array optimally using a series of functions

I need help finding an algorithm or library that can efficiently split an array between functions. My priority is getting the best possible split, so I don't mind the complexity as it's for a small dataset. Recursive checking should be sufficient ...

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

What is the process for integrating a JSX component into a canvas using react-three-fiber?

Is it possible to integrate a JSX component into a React-three-fiber canvas? I have modified an official example that demonstrates infinite scrolling with images from @react-three/drei. Instead of images, what if I have an array of components? How can I p ...

Experiencing difficulties setting up AWS S3 as my file upload provider in Strapi

I'm currently working through the guidelines provided on the Strapi website at Below is my plugin.js file located in the ./config/plugins.js directory: module.exports = ({ env }) => ({ upload: { provider: 'aws-s3', provid ...

Utilizing JQuery to Transform Cell Content

I am utilizing jQuery and the CSVtoTable plugin to convert large CSV files into tables for manipulation. Each row needs to be associated with relevant links. One challenge I am facing is converting text in a row to include a link to a PDF. The issue lies ...

Obtain the session identifier for a django webpage using javascript

Is there a way to retrieve the django session ID stored in the cookie using javascript? I require this ID for my project since authentication is done through a REST API. The developers working on the mobile app, which is built with Ionic, need to fetch th ...

Trigger the JavaScript procedure from a Python server utilizing Autobahn and Wamp

Recently, I've started using autobahn for my projects. After running some examples, I decided to create my own server and client based on the tutorials. For the server side, I'll be using autobahn for Python, and for the client side, I'll b ...

Display a dropdown menu in Angular when the "@" symbol is typed into an input field

I am trying to achieve the functionality where a dropdown menu is displayed when @ is typed in the input field. The Custom Component myControl: FormControl = new FormControl(); options = [ 'One', 'Two', 'Three&ap ...

Access to "this" within an object literal is currently unattainable

I'm struggling to grasp how I can access a this that is located within one of the methods in an object literal that I have defined. Let's take a look at an example: var app = { click: function(e) { e.preventDefault(); console.log(&apo ...

This basic Javascript script is not functioning properly at the moment

I have encountered an issue with a basic javascript code that I wrote. Although it is a simple code, I am unable to identify any errors. Please review and let me know if you spot any mistakes. <div> <p onclick="closePopup()" id="adve">Someth ...

Crop box overlaying video background

Utilizing jCrop to establish a crop region for a video element. My goal is to make the video section within the crop area fill a container with identical proportions, but I'm encountering challenges with the mathematical calculations. The sizes of th ...

Utilizing async parallel for executing multiple queries

Hey there, I'm new to Javascript and I've been trying to work with the async.parallel function. I have a specific task where I am fetching data from my database and storing it in an array called "reviewArr." Then, I want to return this array of ...

The angular2-highcharts package encountered an error while trying to statically resolve symbol values

I'm facing an issue with the plugin while trying to use it in different ways. Whenever I mention "ChartModule.forRoot (require ('highcharts'))," it results in this exception import { ChartModule } from 'angular2-highcharts'; impo ...

The issue with the vue-carousel arises from an uncaught TypeError in which it is unable to read properties of undefined while trying to access '_c'. This problem occurs within the vue-carousel.min.js file

I encountered an error when using the Carousel component from the plugin. The error message is as follows: vue-carousel.min.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js: ...

Obtain the unique identifier of the chosen option using material-ui's autocomplete feature

I am currently implementing the autocomplete feature using material-ui. The data in the "customerList" displayed in the search field works fine. However, I am facing an issue with retrieving the "ID" number of the selected data. My goal is to obtain the ID ...

Utilizing Angular's dynamic property names within a nested ng-repeat loop

Is there a way to dynamically add generated names in nested ng-repeat loops? For example: <div ng-repeat="x in JSONfile"> <div ng-repeat="i in x.name"> <span><a ng-href="{{i.link}}">{{i.name}}</a></span& ...

What are the steps to reset a JavaScript game?

I'm currently working on a JavaScript game project. Once the game is finished, I'd like to give players the option to go back to the main menu by clicking a button, then start a new game by clicking play again. However, I've run into an issu ...

Ensure Owl Carousel 2 is set up to disable drag functionality on desktop devices while enabling click through functionality

I am currently working with Owl Carousel 2 and I want to create a unique interaction for desktop while keeping the default touch swipe interaction for mobile devices. I have managed to disable mouseDrag using the JS code below, but now I am looking to add ...

Looking to customize session data for my online game within the same interface

I have successfully coded a game called Ninja Gold using PHP with CodeIgniter. The game works by setting session variables (Gold and Activities) when the index page loads if they are not set already. Each location clicked adds a certain amount of gold to t ...

Is there a way to open a link in an external browser rather than within the app?

Seeking a way to redirect an URL opened within the Instagram app to an external browser (Safari, Chrome) rather than staying in the built-in Instagram browser. This page demonstrates exactly what I am looking for by prompting users to leave the Instagram ...