I am rotating a face (which is mesh) with this function.
function fold_bone_by_axis(face, folding, target_angle, axis) {
const container = new THREE.Object3D();
let x = face.position.x + folding.x1;
let y = face.position.y + folding.y1;
let z = face.position.z;
container.position.set(x,y,z);
container.add(face);
window.group.add(container);
if(folding.rotate_axis == 'x') { container.rotation.x = THREE.MathUtils.degToRad(target_angle); }
if(folding.rotate_axis == 'y') { container.rotation.y = THREE.MathUtils.degToRad(target_angle);}
if(folding.rotate_axis == 'z') { container.rotation.z = THREE.MathUtils.degToRad(target_angle); }
var z_offset;
if(folding.folding_depth != null) {
z_offset = folding.folding_depth * window.multiplier;
} else {
z_offset = folding.fold_inside ? 0 : face.geometry.parameters.options.depth;
}
container.position.set(x, y, z + z_offset);
container.translateX(-x);
container.translateY(-y);
container.translateZ(-z - z_offset);
}
I call this function like this
fold_bone_by_axis(face, folding, 45, new window.THREE.Vector3(1, 0, 0))
When I rotate the face 45 degrees on the x axis is works. But after that I want to move it
on the x axis to 120.
I move it with this code
face.position.x = 120
(setting position in x only, I can see the object moves on x and y axis 45 degrees.)
But, the face moved on x and x coordinates 45 degrees as I suspect the initial rotate is affecting this.
How can I move the rotated face without the interference of the rotation made earlier?