animationthree.jsfbx

Mirror FBX animation in Three.js


Is there any way to mirror FBX animation in Three.js? I already have boxer animations and now I need to made a mirrored clone of each to realize both sides stands. I know that I can do it in Blender or another program but I wanna reduce my app size.


Solution

  • Oh, I forgot to post an answer :) So the answer to my question is to apply scale matrix.

    For example, if you want to mirror model by X-axis, you need to multiply its position by scale matrix with coefficients (-1, 1, 1). Also you need to multiply position along X-axis and rotation around Y-axis by negative one to prevent side transformation.

    Here's some THREE.js code:

    this.model.position.x *= -1.0;
    this.model.rotation.y *= -1.0;
    this.model.applyMatrix4(new Matrix4().makeScale(-1.0, 1.0, 1.0));