Rotating and moving a mesh

Questions
,
1

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?

2

  1. By using position / rotation instead of translateX / rotateX.

  2. But if by “rotation made earlier” you mean rotation inherited from the parent containers - you can also use worldToLocal:

const direction = new Three.Vector3(120.0, 0.0, 0.0);
face.worldToLocal(direction);

face.position.add(direction);

(And localToWorld in the opposite direction.)