Spin an object along a designated axis in Three.js, even if it extends beyond the mesh boundaries

Trying to rotate an object around any axis.

Imagine rotating a door hinge (on the edge of an object) or a planet orbiting around the sun (outside of the object).

The challenge lies in determining the axis. Using the unit vector below results in the axis staying fixed at the object's origin (center), making it the same as a standard rotation:

object2.rotateOnAxis(new THREE.Vector3(1,0,0), 0.01);
// equivalent to
object1.rotation.x += 0.01;

Check out the code example here: JSFiddle

EDIT: Seeking a method to rotate around a pivot without using nested children. While rotating a child's parent can adjust the pivot point easily, changing the pivot point is not feasible.

For instance, if you aim to rotate the cube in a figure 8 motion, modifying the parent would suffice with careful alignment. However, creating seamless transitions between parents for complex and non-repeating motions becomes intricate. In summary, I wish to rotate an object along a specific axis without resorting to object nesting within the scene, even beyond the mesh of the object.

View the updated code sample here: JSFiddle with pivots

Answer №1

If you need to perform a rotation of an object around a custom line in global space, there is a helpful method that can be utilized. This specific line consists of a 3D point and a directional vector (axis).

THREE.Object3D.prototype.rotateAroundWorldAxis = function() {

    // Rotates the object around the specified axis in world space (the axis passes through the point)
    // The axis is assumed to be normalized
    // This function assumes that the object does not have a rotated parent

    var q = new THREE.Quaternion();

    return function rotateAroundWorldAxis( point, axis, angle ) {

        q.setFromAxisAngle( axis, angle );

        this.applyQuaternion( q );

        this.position.sub( point );
        this.position.applyQuaternion( q );
        this.position.add( point );

        return this;

    }

}();

Version: three.js r.85

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

What are the best ways to incorporate mistakes into my JavaScript mortgage calculator?

I am struggling to set up my calculator so that it triggers an error message if the APR goes over 25% or falls below 0. Also, the Loan Term should be greater than 0 and less than or equal to 40, otherwise display an error message. I have attempted differen ...

Loop through the tabs array and display varying views based on conditionals

I am currently working on building tabs and tab panels iteratively to display information, but I am facing issues in getting the desired output. For each name in a list, I need to create a tab and a corresponding tab panel underneath it. For example, the ...

Is it possible to consolidate all CSS and JS links into a single PHP file for easier management?

Having spent years working with spaghetti code in my PHP projects, I've decided to make the switch to Code Igniter to gain experience with an MVC Framework (even though I know it's not as popular now, Laravel/Composer blew my mind). I have an ol ...

Change the appearance of the page when it is being displayed within an iframe using CSS

How can I display a webpage differently using CSS if it is within an iframe? I would like to use jQuery or JavaScript to switch to a different stylesheet specifically when the site is being displayed within an iframe. Any suggestions on how to achieve th ...

I am having an issue with jQuery's remove() function where it does not remove an element on the first attempt, even though the element

I am encountering an issue with an ajax call where the content is loaded into a specific div with async set to false. Within this content, there is a button with the id 'cancelbtn'. The problem arises when I try to remove this button using $(&apo ...

Having trouble displaying THREE.Line with WebGLDeferredRenderer in three.js?

Lately, I made the switch to using a WebGLDeferredRenderer in my scene to simplify implementing SSAO. However, after switching to the deferred renderer, rendering THREE.Line objects has become impossible. An error message keeps popping up: THREE.Material: ...

Storing information using ajax and json technologies

I've inherited a project where I need to work on saving data to the database using an input. The function responsible for this (SaveData) is not functioning properly. Since I'm not very familiar with ajax and json, can someone please help me iden ...

The command npm start seems to be unresponsive when trying to run a project created

I've scoured the depths of the internet in search of a solution to my problem, but to no avail. Below are the commands I have executed: C:\Users\Angengos>create-react-app learn-react Creating a new React app in C:\Users\Angeng ...

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

Transforming an array of flat data into a hierarchical tree structure

I'm facing a challenge with my script. I have an Array of FlatObj and some rules, and I need to create a converter function that transforms them into TreeObj. The Rules are: If an object has a higher depth, it should be a child of an object with a l ...

interactive vuetify navigation trail elements

Currently working on a vuetify project and I'm facing an issue with implementing breadcrumbs. The problem arises when clicking on a breadcrumb, as it deletes the ones that come after it in the list. I've tried some code snippets but could only ma ...

Learning how to replace the alert function with Bootbox

I am currently working on a form that posts to a MySQL database. I want to replace the alert function triggered by the Malsup jQuery Form Plugin with the one created by the Bootbox plugin. Even though both plugins are functional, I struggle to integrate th ...

Determine the Total of a Column in jqgrid

Hey there, I'm looking for a way to calculate the total sum of the "montant" column in my jqgrid and then display it below the grid as "Total: *total amount*". Here is the code for my grid: <sjg:grid id="gridtable" caption="Quittance Payé ...

Have you ever encountered the orientationchange event in JavaScript before?

When does the orientationchange event trigger in relation to window rotation completion? Is there a way to fire an event before the operating system initiates the integrated window rotation? Edit: For example, can elements be faded out before the rotation ...

The function does not get activated when mouseover event is triggered with AddEventListener

I am attempting to create a series of radio buttons, each with its own AddEventListener function. However, I am encountering issues while using the code below within a while loop that retrieves data from a MySQLI table: echo ' <script> do ...

Numerous points of interaction within ion-item

Within my ion-list, each ion-item contains a link to navigate to the next page. When tapping on an ion-item, it successfully navigates to the detail page. The problem arises when there is a button inside each ion-item that triggers an action. Tapping on t ...

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

Instantiating a Google Cloud Function with a Real-Time Database Trigger Path

Looking for advice on Google Cloud functions triggered by RTDB - specifically, how to access the trigger path of an existing function. I'm encountering an issue when copying functions for different environments (dev vs. production) as the trigger path ...

The infinite scrolling feature encounters issues when scrolling downwards

My infinite scroll code is causing a problem - it only works when scrolling up, not down. Can someone help me fix this issue? <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(){ var lastID = $(&apos ...

Guide: Utilizing JSON API data to generate marker labels on a leaflet map

Users are presented with points to click on. When a point is clicked, a menu displays text information. I have successfully placed the points, but when attempting to retrieve specific data from the database upon clicking a point, it does not show the marke ...