Axis change the rotation axis three js

three js rotate on axis
three js geometry
three.js group
three.js tutorial
three js orbitcontrols
three js mesh
three js sphere
three js axis

Hello I actually work with three.js and I want to rotate my 3d model by the x axis but when i try the code: object.rotation.x += 0.01; It doesn't work like I want. The picture below illustrate how it work for now on the left drawing and what I want on the right drawing. PS: the duke-like shape is my 3d model


What's happening here is that the origin of your mesh is not at its center, as your duck pictures (well done!) clearly illustrate.

A solution is to translate the mesh's vertices in the Y-direction, so that the origin goes to the middle (also see this answer):

geometry.translate( distX, distY, distZ );

There is also an automatic way of resetting the origin of your mesh by using a bounding box to define its center (that is, you don't have to calculate how far along the Y-axis you should translate the vertices):

// Create a bounding box:
var box = new THREE.Box3().setFromObject( mesh );
// Reset mesh position:
box.center(mesh.position);
mesh.position.multiplyScalar(-1);

Then add the mesh to a pivot object:

var pivot = new THREE.Group();
scene.add(pivot);
pivot.add(mesh);

(See also this answer). You should now be able to rotate your duck around the x-axis as desired.

Object3D Axis Rotation - Questions, Object3D Axis Rotation · Questions · object3d · AmitTank addEventListener('​change', function() { // var center = boundingBox.getCenter();  The key is to rotate new rotation_matrix by new rotation step, then use rotation_matrix.multiplySelf(mesh.matrix) and set mesh.rotation.setRotationFromMatrix(rotation_matrix). This rotates mesh against the world's axis.


I tried the two way to solve this problem and it didn't work, here's my code: andy is my object

// Create a bounding box:
                                var box = new THREE.Box3().setFromObject( andy );
                                // Reset mesh position:
                                box.getCenter(andy.position);
                                andy.position.multiplyScalar(-1);
                                var pivot = new THREE.Group();
                                scene.add(pivot);
                                pivot.add(andy);


                                //var xAxis = new THREE.Vector3(0,-1,0);

                                //rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);

                                markerRoot.add(andy);

                                /********* génère la vitesse de rotation de l'objet *************/
                                onRenderFcts.push(function(){ //loop function
                                    //andy.children[0].material.opacity -= 0.01;
                                    //andy.position.x -= 0.01;
                                    pivot.rotation.x -= 0.01;
                                    //andy.rotation.x += 0.01;
                                    //andy.rotation.y += 0.01;
                                    //andy.rotation.z += 0.01;
                                })

EDIT: I solve the problem here's the code:

// Create a bounding box:
                                var box = new THREE.Box3().setFromObject( andy );
                                // Reset mesh position:
                                box.getCenter(andy.position);
                                andy.position.multiplyScalar(-1);
                                var pivot = new THREE.Group();
                                scene.add(pivot);
                                pivot.add(andy);


                                //var xAxis = new THREE.Vector3(0,-1,0);

                                //rotateAroundObjectAxis(andy, xAxis, Math.PI / 180);
                                andy.children[0].geometry.center();
                                markerRoot.add(andy);

                                /********* génère la vitesse de rotation de l'objet *************/
                                onRenderFcts.push(function(){
                                    //andy.children[0].material.opacity -= 0.01;
                                    //andy.position.x -= 0.01;

                                    andy.rotation.x += 0.01;
                                    //andy.rotation.y += 0.01;
                                    //andy.rotation.z += 0.01;
                                })

Object3D#rotation – three.js docs, When this is set, it calculates the matrix of position, (rotation or quaternion) and DefaultMatrixAutoUpdate will change the values of up and matrixAutoUpdate for Returns a vector of the scaling factors applied to the object for each axis in  Hello I actually work with three.js and I want to rotate my 3d model by the x axis but when i try the code: object.rotation.x += 0.01; It doesn't work like I want. The picture below illustrate how it work for now on the left drawing and what I want on the right drawing. PS: the duke-like shape is my 3d model


Object.children[0].geometry.center() - this is the key line. After this line everything should be okay.

Object.rotation's axis of rotation · Issue #910 · mrdoob/three.js · GitHub, Does changing the value of an object's rotation property rotate the object about the world axes or the object's axes? For eg object.rotation.x +=  The "axis" argument is a vector of length 1, specifying the axis. for example x axis: new THREE.Vector3(1, 0, 0); The bigger problem is, current versions of ThreeJS don't have "setEulerFromRotationMatrix" anymore.


Threejs rotations - Blog, The red line is the x-axis, the green line the y-axis and the blue line the If you rotate a 3D object in Threejs you only change its rotation in  The different parts would rotate around axis fixed to their parent object. I understand how to attach the objects together using parent child, but what I don't understand is how to offset the axis of rotation of the objects to when i say object.rotation.x or y or z it will rotate along a new axis.


Rotating an object around its own axis, For example, you can change its position, scale, or material. Often, you'll also need to change the rotation of THREE.Mesh . In this first recipe on rotation, we'll  object.rotation uses model axis you say. Do you need to update the model axis somehow every time the model changes rotation? What i need is to rotate the object around its first axis. E.g if the object rotates at z the x axis changes. What i want to set when the axis will change otherwise will stay the same..


8. Transformations, setRotationFromAxisAngle(axis:Vector3, angle:Float) (set an orientation independently of the Conversely, applying a transformation on Object3D doesn​'t change the Initially, the shape is centered around (0,0,0) (from Three.js convention). I mean the "sun" object may change and I want to be able to simply switch to a different axis of rotation. I imagine with the dummy object approach this would lead to a repositioning issue (of the earth relative to its new pivot), no?