Axis change the rotation axis three js

Question

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

Answer 1

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.

Answer 2

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;
                                })

Answer 3

Object.children[0].geometry.center() - this is the key line.