I found several different supposedly working ways to rotate an object around the world axis but all of them kept rotating the object around it's own axis instead of rotating it around the world's. So, what's the proper way to rotate an object around the world's axis?
If I wasn't clear about the problem here's a drawing that represents my problem
Edit: Sorry I should have specificated in the question as well that I'm using Three.js
Edit2:
//camera is the object I want to rotate
//I also found a method that uses Euler but the result was far from the expected
/**Method 1**/
//Found this somewhere here in so
var rotateAroundWorldAxis = function(object, axis, radians) {
var rotWorldMatrix;
rotWorldMatrix = new THREE.Matrix4();
rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
rotWorldMatrix.multiply(object.matrix);
object.matrix = rotWorldMatrix;
object.rotation.setFromRotationMatrix(object.matrix);
}
//this is how I call the method
rotateAroundWorldAxis(camera, new THREE.Vector3(0,1,0), movementX*-0.001);
rotateAroundWorldAxis(camera, new THREE.Vector3(1,0,0), movementY*-0.001);
/**Method 1**/
/**Method 2**/
//I've also tried this method
var q = new THREE.Quaternion();
q.setFromAxisAngle( new THREE.Vector3(0,1,0), movementX*-0.001 ); // axis must be normalized, angle in radians
camera.quaternion.multiplyQuaternions( q, camera.quaternion );
/**Method 2**/
//movementX and movementY are values provided by the mouse movement using the pointerlock.
//These values works as I've tried them using rotateOnAxis
Use quaternions.
var rotateAroundWorldAxis = function(object, axis, radians) {
var rotation = new THREE.Quaternion();
rotation.setFromAxisAngle ( axis, radians );
object.quaternion.multiply(rotation);
}
rotateAroundWorldAxis(myObject, THREE.Vector3(0,1,0), movementX*-0.001);
I believe your problem before with the quaternion method is multiplying the quaternions in the wrong order so you rotate around global the Y axis, then perform the local rotation, which ultimately rotates in the local Y axis.
I ended up using the FirstPersonControls class. I had to make a few changes to the class though
Related
I have a mesh which is a child of an Object3D, which is a child of the scene.
The Object3D is rotated, let's say 90 degrees along X axis.
The child has no rotation applied,and keeps Y -up and Z forward orientation in its local space.
Being a noob to THREE.js API, my question is: What is the most efficient way (in terms of caclulation) to keep the child's rotation aligned with the world's Y?
That is, if its parent has been rotated 90 degs along X axis,then the local rotation of its child should be updated so that its up vector still points towards global Y axis?
Can I get world's quaternion of the object to get the difference between local and global rotation and then adjust locally?
Well,the easiest trick I found is to inverse parent's quaternion and apply it to the child,so that its local rotation stays the same in the world space:
var inv = mesh.parent.quaternion.clone();
inv.conjugate();
mesh.quaternion.copy(inv);
You want your child mesh to remain right-side-up and aligned with the coordinate axes -- even if the mesh's parent is rotated.
There are several ways to do that. What is best, depends on your use case, or personal preference.
Your proposed solution can be implemented without cloning like so:
mesh.quaternion.copy( mesh.parent.quaternion ).conjugate();
Another approach is to define an onBeforeRender() method that modifies the world matrix of the mesh:
var func = function() {
var v = new THREE.Vector3();
return function func() {
v.setFromMatrixPosition( this.matrixWorld );
this.matrixWorld.makeTranslation( v.x, v.y, v.z );
// or you could do this, instead
//this.quaternion.copy( this.parent.quaternion ).conjugate();
//this.updateMatrixWorld();
};
}();
mesh.onBeforeRender = func;
three.js r.94
Quick abstract: I don't know how to give to an object, attached to the camera, a local rotation so that it is rotated as if it is attached to the scene.
Background: I am the creator of this website which offers to players of the related game the ability to build levels on a 3D Builder, in a web browser. Everything work fine with it but some parts are not well optimized, specially the toolbar (or dashboard), where objects can be selected to be added to the main scene.
Those toolbar objects need to be sticked at the bottom of the screen and always above all layers but their rotation has to be relative to the main axis of the scene. That's where I face some weird behaviors on browsers other than Firefox and Chrome.
If first thought this other thread was saving my life on this matter by implementing the Object3D.onBeforeRender function, but I faced other issues.
Currently those objects are attached to the scene and their position is updated relatively to the camera with the onBeforeRender function of each object. On such way I noticed some flickering results with Edge and iPhone browser, despite everything ends up fine in the rendering. Not nice on the scene rotation...
So I tried something else by attaching each object to the camera and giving them their supposed world rotation. Now when testing on Edge there is no flickering and the results is much better but I can't get how to give them the same rotation than when they are attached to the scene.
Here is a visual:
and an animated gif (you can see a little how the red background and cube at the right part are moving/flickering, but it is awfull if done quicklier):
For the #1 (at the right) there's a good rendering but a bad experience on some browsers and for the #2 (at the left) the rotation, based on the camera, is not good but the experience is fine.
Here are some code abstracts I've implemented:
For #1:
rightCube.relPos = new THREE.Vector3(500, 0, 0); // a new property to be used
rightCube.onBeforeRender = function( renderer, scene, camera, geometry, material, group ) {
camReference.position.copy(this.relPos);
var pos = camReference.getWorldPosition();
this.position.set( pos.x, pos.y, pos.z );
};
scene.add(rightCube);
And camReference is a simple Object3D representing the camera origin
For the #2:
leftCube.onBeforeRender = function( renderer, scene, camera, geometry, material, group ) {
this.rotation.copy(camera.getWorldRotation());
};
camera.add(leftCube);
I admit on this last part, that getting the camera world rotation is not sufficient but that's where I'm stuck and need some help: I don't know how to give to an object, attached to the camera, a local rotation so that it is rotated as if it is attached to the scene.
This post is pretty long but I hope my problem can be well understood... and that someone will give me the key to make it work.
Three.js r82
I've found out how to deal with that problem. I had to go into some calculus and I am surprised that it is not yet implemented in Three.js. If I have missed something #WestLangley please let me know!
Basically my request is to have a rotateToWorld functionnality from the camera coordinate. Getting the rotation of the camera is not enought because of the orbit control position offset which could be different than the Scene Axis. From the camera coordinate, rotating to the World can be seen as a rotation around x then y (Euler rotations), z being directed to the viewer. Here is a figure I tried to draw as a better explanation:
Here is the function I have coded to do that:
var rotateToWorld = function (camera, controls) {
var p = camera.position.clone();
var o = controls.target.clone();
// position relative to the control
p.sub(o);
var Dxyz = Math.sqrt(p.x*p.x + p.y*p.y + p.z*p.z);
var Dxz = Math.sqrt(p.x*p.x + p.z*p.z);
return {
x: Math.acos(Dxz/Dxyz) * (p.y>0?1:-1), // Angle Rotation on x axis camera
y: Math.acos(p.z/Dxz) * (p.x>0?-1:1), // Angle Rotation on y axis camera
z: 0 // No rotation around z axis
};
};
Then from a cube object attached to the camera (not to the scene) it can be rendered like that:
cube.onBeforeRender = function( renderer, scene, camera, geometry, material, group ) {
var R = rotateToWorld(camera, controls); // controls defined elsewhere in the code
this.rotation.set(R.x, R.y, 0);
};
As a result this is what I got with a perspective camera:
And now it works with Microsoft Edge, Safari and other browsers despite when attaching to the scene and updating the position of the object (to keep it in front of the camera) it was only workable with Firefox and Chrome (as for today).
I wonder now if this is a functionnality that could be added to Three.js...
EDIT:
#WestLangley pointed out in comments that the clone() function of Vector3 instantiate a new object each time it is called, so better is to use a closure function to initialize once p and o as Vector3 objects then update them with the copy() function.
So here is a better version:
var rotateToWorld = function() {
var p = new THREE.Vector3();
var o = new THREE.Vector3();
return function rotateToWorld(camera, controls) {
p.copy(camera.position);
o.copy(controls.target);
// position relative to the control
p.sub(o);
var Dxyz = Math.sqrt(p.x*p.x + p.y*p.y + p.z*p.z);
var Dxz = Math.sqrt(p.x*p.x + p.z*p.z);
return {
x: Math.acos(Dxz/Dxyz) * (p.y>0?1:-1), // Angle Rotation on X axis camera
y: Math.acos(p.z/Dxz) * (p.x>0?-1:1), // Angle Rotation on Y axis camera
z: 0 // No rotation around z axis
};
}
}();
Again, thanks #WestLangley! :)
I'm having difficulty rotating an object. I am currently using THREE.Shape to configure a custom shape, after creating the shape, I configure it as a Mesh and set the position of it to:
buildingMesh.position.set( -70, -300, levelY );
Now because of the position of the mesh as well as the camera it appears as if its standing up.
Heres what that looks like:
Now I recently added a Orbital camera that rotates around the world axis, once the camera moves, this is how it looks:
Now this makes sense because the y axis was never configured when using the Three.Shape. What I am trying to figure out now is how can I turn that object so it appears to be standing up, as shown in the first image. I have tried using rotation on the x,y,z axis's but it always seems to only rotate within the objects axis.
Any suggestions?
Heres something I tried that I found on another question:
rotateAroundWorldAxis: function(object, axis, radians) {
this.rotWorldMatrix = new THREE.Matrix4();
this.rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
this.rotWorldMatrix.multiply(object.matrix); // pre-multiply
object.matrix = this.rotWorldMatrix;
object.rotation.setFromRotationMatrix(object.matrix);
}
Try:
mesh.rotate.x = Math.PI // will rotate over x axis 180 degree
where 'mesh' is object you have created (you can rotate 'y' and 'z' too)
So the primary problem here was that the mesh was built by multiple layers. All these layers actually had to be grouped together into an Object3D Which in turn allowed me to simply do: group.rotateOnAxis(axis,Math.pow(Math.PI, 2) / 2);
Hope this helps anyone in the future.
I'm having an issue in my three.js code.
I am trying to align two objects by selecting two faces and have the second face (and object) rotate to match the normal vector of the first object's selected face.
So far I have:
var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld );
var worldNormal = face.normal.clone().applyMatrix3( normalMatrix ).normalize();
var normalMatrixRef = new THREE.Matrix3().getNormalMatrix( objectRef.matrixWorld );
var worldNormalRef = faceRef.normal.clone().applyMatrix3( normalMatrixRef).normalize();
where: object is my object that will be rotated, face is the selected face of that object, objectRef is the stationary object reference and faceRef is the normal of the object I want to match.
Prior to doing
object.lookAt(worldNormalRef);
, I am trying either
object.up = new THREE.Vector3(0,0,1);
object.up = worldNormal;
object.up = face.normal;
and neither work.
Either object.up cases are not working as they should. When I do the action, the target object (the one to be rotated) does rotate, but does not align the faces correctly. It is arbitrary but somehow is linked to objects current rotation (ie: sometimes it rotates along (0,1,0) or simliar, othertimes if I pre-rotate the object it just rotates a slight bit.
In theory lookAt uses a world vector which my faceRef is, and as long as I set the 'up' correctly, it should work but it dosen't.
Any ideas?
I found the issue in my code, I hope it can help somebody in the future.
The
object.lookAt(worldNormalRef);
needs instead to be modified to add the new face normals to the current object's postition for the lookAt to function correctly:
//create a point to lookAt
var newPoint = new THREE.Vector3(
object.position.x + worldNormalRef.x,
object.position.y + worldNormalRef.y,
object.position.z + worldNormalRef.z
);
object.up = face.normal;//Z axis up
object.lookAt(newPoint );
Also note that the object.up should be set as above to the face.normal (the face I want to align to the reference object's face), and not to the worldNormal set above (I will delete this part of my code).
I wanted to rotate a sphere around the world x and y axes. I successfully accomplished that with this code:
// Update ball rotation.
var tempMat = new THREE.Matrix4();
tempMat.makeRotationAxis(new THREE.Vector3(0,1,0), stepX/ballRadius);
tempMat.multiplySelf(ballMesh.matrix);
ballMesh.matrix = tempMat;
tempMat = new THREE.Matrix4();
tempMat.makeRotationAxis(new THREE.Vector3(1,0,0), -stepY/ballRadius);
tempMat.multiplySelf(ballMesh.matrix);
ballMesh.matrix = tempMat;
ballMesh.rotation.getRotationFromMatrix(ballMesh.matrix);
When I scale the ballMesh in any way away from (1,1,1), however, the rotations go awry in a way that is difficult to describe. I've put up a jsfiddle example here:
http://jsfiddle.net/pxTTv/26/ (use the arrow keys to rotate)
If you change the scale (indicated in the jsfiddle code) back to (1,1,1), it works as I expect it to.
What is causing this, and how can I fix it?
You left the scale argument out of the call to vector.getRotationFromMatrix( matrix, scale ).
Also, it's best not to mess with the object matrix -- unless you really know what you are doing. Instead just set the object's rotation, position, and scale, and let the library update the matrix.
In your case you were overwriting the object's matrix, but by luck, it was being recomputed in the render call.
Here is a corrected fiddle: http://jsfiddle.net/pxTTv/27/