Adding Rotation to a group in Three.js using a pivot point

Question

Adding Rotation to a group in Three.js using a pivot point

I'm currently in the process of constructing a Rubik's Cube using Three.js. My method involves grouping all the small cubes that need to be rotated together and then performing the rotation on the group as a whole. To determine the pivot point for the rotation, I came across this useful function:

//Turn Group Around Center function
        THREE.Object3D.prototype.rotateAroundWorldAxis = function () {
            // rotate object around axis in world space (the axis passes through point)
            // axis is assumed to be normalized
            // assumes 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;
            }
        }();

While the function works perfectly for a single rotation, it seems to fail when applied multiple times:

myGroup.rotateAroundWorldAxis(rotationPoint, zAxis, Math.PI / 2);
myGroup.rotateAroundWorldAxis(rotationPoint, zAxis, Math.PI / 2);

No additional change occurs during the second rotation.

This issue may be due to the fact that the function only applies a new rotation instead of adding to the existing one. (rotation = 90 rather than rotation += 90)

So, my question is: How can I modify the function to retain previous rotations?

javascript three.js rotation

Answer 1

Answer №1

It seems you're facing an issue that could benefit from using quaternions for simplifying rotations.

To illustrate this concept, I've created a tutorial in three.js where I built a small solar system model. In this model, various planets orbit around a sun on different paths. You can view the demo here, and access the code on my GitHub repository. The key function used for planet rotation can be found in main.html:

function animatePlanets() {
            requestAnimationFrame(animatePlanets);
            var quaternion, rotationSpeed, rotationSpeedMoon, pivotPoint, pivotPointMoon, rotationAxeMoon, subgroup, planetPosition, planet

                for ( var i = 0; i < views.length; ++ i ) {

                    var view = views[ i ];
                    var camera = view.camera;

                    for (let i=1;i<group.children.length;i++){

                        // Rotate the planet around the sun
                        pivotPoint = group.children[i]
                        planetPosition = pivotPoint.children[0].position

                        // Defining the rotation axis and speed
                        rotationAxis = (new THREE.Vector3(-planetPosition.y,planetPosition.x,0)).normalize()
                        rotationSpeed = pivotPoint.speed

                        // Applying the rotation to the planet
                        quaternion = new THREE.Quaternion().setFromAxisAngle(rotationAxis,rotationSpeed)
                        pivotPoint.applyQuaternion(quaternion)

                        // Applying local rotation to the planet if not satellites
                        if (pivotPoint.children[0].children.length == 0){
                            planet = pivotPoint.children[0]
                            quaternion =  new THREE.Quaternion().setFromAxisAngle(rotationAxis,rotationSpeed*10)
                            planet.applyQuaternion(quaternion)
                        }
                // Render the scene, using the camera specifications
                renderer.render(scene, view.camera);
                }
            }

I hope this example clarifies the concept for you. Essentially, I establish a rotation point and apply a rotation at a specific speed to each planet within the group around this point.
Feel free to reach out with any further questions!

Answer 2

It seems you're facing an issue that could benefit from using quaternions for simplifying rotations.

To illustrate this concept, I've created a tutorial in three.js where I built a small solar system model. In this model, various planets orbit around a sun on different paths. You can view the demo here, and access the code on my GitHub repository. The key function used for planet rotation can be found in main.html:

function animatePlanets() {
            requestAnimationFrame(animatePlanets);
            var quaternion, rotationSpeed, rotationSpeedMoon, pivotPoint, pivotPointMoon, rotationAxeMoon, subgroup, planetPosition, planet

                for ( var i = 0; i < views.length; ++ i ) {

                    var view = views[ i ];
                    var camera = view.camera;

                    for (let i=1;i<group.children.length;i++){

                        // Rotate the planet around the sun
                        pivotPoint = group.children[i]
                        planetPosition = pivotPoint.children[0].position

                        // Defining the rotation axis and speed
                        rotationAxis = (new THREE.Vector3(-planetPosition.y,planetPosition.x,0)).normalize()
                        rotationSpeed = pivotPoint.speed

                        // Applying the rotation to the planet
                        quaternion = new THREE.Quaternion().setFromAxisAngle(rotationAxis,rotationSpeed)
                        pivotPoint.applyQuaternion(quaternion)

                        // Applying local rotation to the planet if not satellites
                        if (pivotPoint.children[0].children.length == 0){
                            planet = pivotPoint.children[0]
                            quaternion =  new THREE.Quaternion().setFromAxisAngle(rotationAxis,rotationSpeed*10)
                            planet.applyQuaternion(quaternion)
                        }
                // Render the scene, using the camera specifications
                renderer.render(scene, view.camera);
                }
            }

I hope this example clarifies the concept for you. Essentially, I establish a rotation point and apply a rotation at a specific speed to each planet within the group around this point.
Feel free to reach out with any further questions!

Adding Rotation to a group in Three.js using a pivot point

Answer №1

Similar questions

Adaptable design tailored for smartphones

Differences between async/await and then methods in React, demonstration shows that only async/await is functional. Why is

What is the correlation between statistics and posts that are generated dynamically?

three.js: Panorama viewer shows distorted image

Discover the magic of Material UI's Multiple Select feature for working with arrays

Issues with Skrollr JS on mobile device causing scrolling problem

Unable to stop the default action in IE for certain code

Track your status with jQuery technology

Looping through an array of items in a for loop with a chain of

Patience is key when waiting for Ajax response data in Vue.js

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Turn off Babel's strict mode when transpiling JavaScript files

Please indicate the maximum number of digits allowed after the decimal point in the input

How can I implement a jQuery modal dialog that loads a form page with pre-existing jQuery code for Autocomplete functionality?

jQuery drag and drop for more than one object

Conceal the scroll bar while still allowing for scrolling functionality

Utilizing Prototype in Node.js Modules

Creating a loop to iterate through JSON data being received

Tips for ensuring synchronous state changes in React

Utilizing Facebook's JavaScript SDK to transmit variables to PHP using ajax