I am facing a unique issue with the rotation animation of a sphere: it appears shaky and I'm unable to pinpoint the root cause of this problem.
Feel free to take a look at the example on this link
Below is the render function code snippet:
function render() {
controls.update();
requestAnimationFrame(render);
// Using a parametric parameter for camera rotation
timer = Date.now()*0.0001;
// Setting camera coordinates
coordCamera.set(radiusCamera*Math.cos(timer), radiusCamera*Math.sin(timer), 0);
// Call rotateCamera function
rotateCamera();
// Render the scene
renderer.render(scene, camera);
}
This includes functions like rotateCamera and computeRotation:
function computeRotation (objectRotation, coordObject) {
// Applying rotation matrix
var rotationAll = new THREE.Matrix4();
var rotationX = new THREE.Matrix4().makeRotationX(objectRotation.rotation.x);
var rotationY = new THREE.Matrix4().makeRotationY(objectRotation.rotation.y);
var rotationZ = new THREE.Matrix4().makeRotationZ(objectRotation.rotation.z);
rotationAll.multiplyMatrices(rotationX, rotationY);
rotationAll.multiply(rotationZ);
// Compute world coordinates
coordObject.applyMatrix4(rotationAll);
}
function rotateCamera() {
// Compute camera coordinates
computeRotation(torus, coordCamera);
// Set camera position for motion
camera.position.set(coordCamera.x, coordCamera.y, coordCamera.z)
}
If you can offer insights or solutions to address this issue, your assistance would be greatly appreciated.
Thank you for your help.
UPDATE :
I attempted integrating the solution below, yet unfortunately, the animation did not work as expected; nothing appeared on screen. You can view my efforts on jsfiddle:
https://jsfiddle.net/ysis81/uau3nw2q/5/
I also experimented with performance.now() but the animation continues to exhibit shaking. You can test this out on https://jsfiddle.net/ysis81/2Lok5agy/3/
To resolve this issue, I have initiated a bounty for potential solutions.