I am currently developing a program that will rotate a cube based on quaternion data inputted by the user via a CSV file in an HTML format. The JavaScript code cycles through each quaternion in the dataset, applying them to the cube at regular intervals to create a smooth rotation effect of 60 frames per second. To achieve this, I have utilized the setTimeout function in my code.
Below is the snippet of JavaScript code that I've implemented:
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff70 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
renderer.render(scene, camera);
var animate = function() {
quat_data = [];
var rotate = function(quat) {
cube.applyQuaternion(quat);
}
for (i = 0; i < quat_data.length; i++) {
time = 16.7;
var next_quat = quat_data[i];
setTimeout(rotate(next_quat), time);
}
}
</script>
To trigger the animation process, the user simply clicks a button located at the top of the browser display. Note that the quat_data variable is currently empty. In order to test the functionality of the script, I manually populated it with sample quaternions. However, once I implement the feature to convert and use quaternions from the inputted CSV file, the manual data insertion will be replaced.
The primary issue I'm facing is that although the cube is displayed correctly on running the program, it doesn't rotate as intended despite having appropriate quaternions for rotation. Despite checking console logs for errors, I haven't been able to diagnose the problem. I attempted including 'renderer.render(scene, camera);' at various points within the code, but this didn't address the rotation issue.
If anyone can suggest changes to the animate function to ensure the cube re-renders after each quaternion application or if there's a superior approach using requestAnimationFrame - your guidance would be greatly appreciated.