To create a captivating animation with quaternion data, the following code snippet is utilized:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 0.3, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xf4b942 } );
var obj = new THREE.Mesh( geometry, material );
scene.add( obj );
var geometry = new THREE.BoxBufferGeometry(1, 0.3, 2 );
var edges = new THREE.EdgesGeometry(geometry);
var lines = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x000000 }));
scene.add( lines );
camera.position.z = 5;
renderer.render(scene,camera);
var xpos_o = obj.rotation.x;
var ypos_o = obj.rotation.y;
var zpos_o = obj.rotation.z;
var xpos_lo = lines.rotation.x;
var ypos_lo = lines.rotation.y;
var zpos_lo = lines.rotation.z;
let i = 0; let m = 0;
var animate = function (quat_data) {
requestAnimationFrame( animate );
if (m % 5 == 0 || m == 0) {
if (m !== 0) {i++;}
if (i >= quat_data.length){
obj.rotation.x = xpos_o;
obj.rotation.y = ypos_o;
obj.rotation.z = zpos_o;
lines.rotation.x = xpos_lo;
lines.rotation.y = ypos_lo;
lines.rotation.z = zpos_lo;
i=0;
}
let quat = quat_data[i];
var quaternion = new THREE.Quaternion(quat[0],quat[1],quat[2],quat[3]);
obj.applyQuaternion(quaternion);
lines.applyQuaternion(quaternion);
renderer.render( scene, camera );
}
m++;
}
var animate1 = function() {
var quat_data1 = [ [0.681492531,-0.014533572,0.711492547,-0.170668778 ],
[-0.81103207,0.125979118,0.555748976,-0.132257921 ],
[-0.459080697,-0.267181198,-0.846533742,0.035103342 ],
[0.874097952,-0.166578614,-0.244525976,0.385231457 ],
...
animate(quat_data1);
}
var animate2 = function() {
var quat_data2 = [[-0.395306087,-0.567475272,-0.168275478,-0.702416024 ],
[0.591221013,-0.226393713,-0.208636898,0.745435603 ],
[-0.279990579,0.754847831,0.56444738,-0.182233852 ],
[-0.419803039,-0.623439075,-0.538698243,-0.380648559 ],
[0.878036311,0.088829796,-0.024437397,0.469642749 ],
...
animate(quat_data2);
}
var animate3 = function() {
var quat_data3 = [ [-0.17958507,0.232682609,-0.217296778,-0.930800793 ],
[-0.178598829,0.228014038,-0.2182292,-0.931927075 ],
[-0.177601473,0.223351625,-0.219152185,-0.933029522 ],
[-0.176574343,0.218685883,-0.220066047,-0.934113976 ],
[-0.175533915,0.214015872,-0.22097227,-0.935177153 ],
[-0.174483815,0.209350901,-0.221866773,-0.936217247 ],
[-0.173407996,0.204681945,-0.222753878,-0.937238325 ],
...
animate(quat_data3);
}
To save space, some quaternion data values have been replaced with ellipses. The initial section sets up the scene geometry while the animate function processes an array of quaternions for animation. With each iteration, m increments by 1, triggering the animation code every 5th frame to achieve a frame rate of 12 fps instead of the default 60 fps of requestAnimationFrame. The animation adjusts the object's rotation based on the quaternion data. If the index i surpasses the array's length, it resets to the beginning for continuous animation.
Additional functions like animate1, animate2, and animate3 each utilize distinct sets of quaternion data for the main animate function. However, an error is encountered when triggering the animate1 function from an HTML button, specifically at the line:
var quaternion = new THREE.Quaternion(quat[0],quat[1],quat[2],quat[3]);