I am trying to use rotateOnWorldAxis to rotate my mesh object. Before I apply the rotations, the mesh has its rotation data as Euler object with rotation value for each axis.
in mesh.rotation:
// Euler (_x: 1.5707963267948961 _y: 1.3439035240356314 _z: 3.141592653589793)
I have some angles that I would like my mesh to rotate on each axis, so I am doing the following:
// define axis vectors and angles
const xAngle = some angle in Radians
const xAxis = new THREE.Vector3(1, 0, 0);
...same for Y and Z axis
// apply rotateOnWorldAxis
mesh.rotateOnWorldAxis(xAxis, xAngle);
...same for Y and Z axis
After using rotateOnWorldAxis method on my mesh object, I can visually see that my mesh has rotated correctly. However, when I inspect the object after applying the rotations, the mesh.rotation property does not change and still contains values from before the rotations.
In fact, all of its properties regarding transformation (e.g., matrix, matrixWorld, position, quaternion) remain unchanged, while the rendered mesh does rotate visually.
How do I trigger my mesh object to update all of its transformation data after applying rotateOnWorldAxis?
Related
I tried to rotate an object arount the Worlds-Y-Axis, with
myObject.rotateOnWorldAxis(new THREE.Vector3(0,1,0),THREE.Math.degToRad(1));
but the result was, that the object is only rotated in object space.
To be sure that I used the correct method I looked into the documentation and found that there are three methods to rotate an object:
.RotateY(rad) // rotate in Local Space
.rotateOnAxis(axis,rad) // rotation in Object Space
.rotateOnWorldAxis(axis,rad) // rotation in World Space
It seems that I used the correct method.
Is this a bug or an understanding problem on my side?
Here is a JSFiddle which illustrates my problem (the blue cube should rotate around the world axis).
Here is a second Fiddle where thy cyan cube is a child of another object.
It looks to me like your real question isn't regarding world space or object space rotations, cause those are working as expected in your examples.
You probably meant, how to change the point of rotation of an object. If that is the case, you have two options, you can either translate all your geometry vertices in respect to a pivot point of rotation. That way, your pivot will be centered at (0,0,0) and your vertices will rotate in respect to that.
mesh.geometry.translate( x, y, z );
Or you can make your object a child of a different Object3D (pivot), position your original mesh similarly to what was described above and rotate your pivot mesh.
var cube = new THREE.Mesh( geometry, material );
var pivot = new THREE.Object3D();
cube.position.set( 0, 12, 30 ); // offset from center
pivot.add( cube );
scene.add( pivot );
//...
pivot.rotation.y += Math.PI/2;
JSFiddle
I have rotated a group called pivot following this example:
https://jsfiddle.net/of1vfhzz/1/
And applying the function rotateAroundObjectAxis(object, axis, radians) from this thread:
Rotation around an axis three.js
the function is showed belove
function rotateAroundObjectAxis(object, axis, radians) {
rotObjectMatrix = new THREE.Matrix4();
rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);
object.matrix.multiply(rotObjectMatrix);
object.rotation.setFromRotationMatrix(object.matrix);
}`
The meshes inside pivot, rotate in the right way but also the axis orientation change and since I want move these object along the z axis, how can I do? There is a way to set up, after a rotation ,the z axis as before, without changing the rotation of this group of objects?
Is there a way to rotate a generated linestring geometry around one of its points? I've built a length string that is pointing north (only adding length to the one co-oordinate) but I now need to rotate it to a given compass heading.
Geometry objects don't seem to have the ability to be rotated around a point (OL2 did?)
What can I do to rotate this geometry?
I eventually went with generating the geometry dynamically and solving pythagoras.
Given the length of the current linestring geometry segment and the angle in radians, I worked out how to offset the coordinates when extending the LineGeometry to correctly angle the segments.
calculateCoordinateOffset = function(length, angle) {
var _a = angle,
_l = length,
_x,
_y;
_x = _l * Math.sin(_a);
_y = _l * Math.cos(_a);
return [_x, _y];
};
The I add X and Y to the geometry coordinates of the last segment and add those coordinates onto the linestring geometry (addCoordinates()).
Any feedback would be good. My maths is traditionally VERY bad.
I am rotating a cube through a series of 90 degree rotations using quaternions and I want to be able to get relative positions of the quaternions after a rotation compared with its original position that I have stored.
IE I'd like to know which axis is now equivalent to the original x axis (and if it is inverted), and so on...
I'm using threejs, but I'm sure that's not necessary for answering.
Use this pattern to determine the direction the x-axis is pointing after applying a series of rotations.
var dir = new THREE.Vector3( 1, 0, 0 );
dir.applyQuaternion( q1 );
dir.applyQuaternion( q2 ); // etc...
To see it visually, you can add axes as a child of your cube mesh. The axes will be rotated automatically.
var axes = new THREE.AxisHelper( 100 );
mesh.add( axes );
three.js r.71
After applying a matrix to mesh I print its rotation parameters.
After resetting mesh rotation, scale and position and re-applying the same matrix - rotation parameters aren't equal to previous ones.
var ctm1 = new THREE.Matrix4();
var ctm2 = new THREE.Matrix4();
ctm1.set(...............);
ctm2.set(...............);
function reset(mesh)
{
mesh.position.set(0,0,0);
mesh.scale.set(5,5,5);
mesh.rotation.set(0,0,0);
}
reset(myMesh);
myMesh.applyMatrix(ctm1);
console.log(myMesh.rotation.x);
reset(myMesh);
myMesh.applyMatrix(ctm2);
reset(myMesh);
myMesh.applyMatrix(ctm1);
console.log(myMesh.rotation.x); //Isn't equal to previous output !!!
Three.js r.58
The three.js renderer handles updating the object matrix, so that the matrix is consistent with the object's position, rotation, and scale.
Since you do not make a render() call, you need to add mesh.updateMatrix() as the last line of your reset() function.
three.js r.58