## Axis change the rotation axis three js

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?