How to: Animate a part with an existing rotation matrix

HOOPS Communicator
, , ,
1

Language: JavaScript

When animating a model with an existing rotation already applied, this must be taken into account when creating the initial TRS position of the model.

  1. Follow the instructions provided in our docs under “Viewing the Sample Page” in the quick_start menu.
  2. Select the microengine model.
  3. In the web browser console, run the following JavaScript:
const viewer = hwv;
const nodeId = 5;
const startTime = 1.0;
const duration = 2.0;
const translationVector = new Communicator.Point3(-1, 0, 0);
const translationDistance = 100;

const initialMatrix = viewer.model.getNodeMatrix(nodeId); 
const animation = new Communicator.Animation.Animation("example");

const rotationBuffer = new Communicator.Animation.KeyframeBuffer(Communicator.Animation.KeyType.Quat);
const rotationSampler = new Communicator.Animation.Sampler(rotationBuffer, Communicator.Animation.InterpolationType.Linear);
const rotationChannel = animation.createNodeChannel("rotation", nodeId, Communicator.Animation.NodeProperty.Rotation, rotationSampler);

const q = Communicator.Quaternion.createFromMatrix(initialMatrix);
rotationBuffer.insertQuatKeyframe(startTime, q.x, q.y, q.z, q.w);

const translationBuffer = new Communicator.Animation.KeyframeBuffer(Communicator.Animation.KeyType.Vec3);
const translationSampler = new Communicator.Animation.Sampler(translationBuffer, Communicator.Animation.InterpolationType.Linear);
const translationChannel = animation.createNodeChannel("translation", nodeId, Communicator.Animation.NodeProperty.Translation, translationSampler);

const initalPos = new Communicator.Point3(initialMatrix.m[12], initialMatrix.m[13], initialMatrix.m[14]);
translationBuffer.insertVec3Keyframe(startTime, initalPos.x, initalPos.y, initalPos.z);

const targetPos = Communicator.Point3.add(initalPos, Communicator.Point3.scale(translationVector, translationDistance));
translationBuffer.insertVec3Keyframe(startTime + duration, targetPos.x, targetPos.y, targetPos.z);

const player = viewer.animationManager.createPlayer(animation);
player.play();

Short video (with audio) is included:

More information about using the animation API can be found in our docs.