Reputation: 993
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
Upvotes: 9
Views: 5309
Reputation: 21
Object.children[0].geometry.center() - this is the key line.
Upvotes: 0
Reputation: 993
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;
})
Upvotes: 1
Reputation: 4774
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.
Upvotes: 6