9

I get a strange problem with the rendering of a sphere in rotation : the animation seems to shake and I don't know where this issue comes from.

Here's the example on this link

and the render function : 

 function render() {

  controls.update();
  requestAnimationFrame(render);

  // For camera rotation : parametric parameter 
  timer = Date.now()*0.0001;

  // Coordinates of camera
  coordCamera.set(radiusCamera*Math.cos(timer), radiusCamera*Math.sin(timer), 0);

  // Rotate camera function
  rotateCamera();

  // Rendering
  renderer.render(scene, camera);

  }

with rotateCamera and computeRotation functions :

function computeRotation (objectRotation, coordObject) {

  // Apply 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 coordinates of camera
  computeRotation(torus, coordCamera);

  // Set camera position for motion
  camera.position.set(coordCamera.x, coordCamera.y, coordCamera.z)

  }

If someone could see what's wrong, this would be nice,

Thanks for your help

UPDATE :

I tried to insert the solution below of ; I didn't get to make work the animation, nothing is displayed : here my attempt on jsfiddle :

https://jsfiddle.net/ysis81/uau3nw2q/5/

I tried also with performance.now() but animation is still shaking; you can check this on https://jsfiddle.net/ysis81/2Lok5agy/3/

I have started a bounty to resolve maybe this issue.

  • What do you mean by shaking? Have you tried using game loop with constant updates time and animations interpolation? – Michał Miszczyszyn Mar 28 '16 at 23:39
  • @ Michał Miszczyszyn During the rotation, the sphere is blenching, like refresh of the animation was not not continuous or was jerky ... do you mean that you can't reproduce the issue on your computer with my jsfiddle links ? –  Mar 29 '16 at 00:06
  • 1
    Try this: https://jsfiddle.net/3urtkpkv/. You should not ask `TrackballControls` to control the camera and then try to control the camera yourself. Keep it simple. Actually, I'd switch to `OrbitControls`. It has an `autoRotate` property. – WestLangley Mar 29 '16 at 03:02

1 Answers1

5

requestAnimationFrame will execute your callback render function with a timestamp parameter. Use that parameter to calculate how many milliseconds have passed since the last frame. Then use that diff as some percentage of rotation.

var mySpecificLogic = function (millesecondsSinceLastFrame) {
  // rotate your camera here
  // if you want it to rotate 20 degrees every second
  var rotPerSecond = 20;
  var rotationPerMS = rotPerSecond / 1000;
  var rotationInDegrees = millesecondsSinceLastFrame * rotationPerMS;
  // call your rotation function
  // note: if you are also trying to move the ball with the mouse
  //    you'll want a hook to disable this basic rotation

  // set the camera to whatever rotation you want

  renderer.render(scene, camera);
};


var startTheWholeThing = function() {
    var lastFrameTime;
    var deltaT;

    function recurse( thisFrameTime ) {
        window.requestAnimationFrame(recurse);
        lastFrameTime = lastFrameTime || thisFrameTime;
        deltaT = thisFrameTime - lastFrameTime;

        mySpecificLogic(deltaT);

        lastFrameTime = thisFrameTime;
    }
  recurse();
};

startTheWholeThing();
Cooper Buckingham
  • 2,503
  • 2
  • 15
  • 23
  • Thanks but I didn't get to include this code snippet above in my script. Here's my attempt to insert it into my code on this link : https://jsfiddle.net/ysis81/uau3nw2q/4/ . If you could take a look at my script, regards –  Mar 28 '16 at 22:04
  • The fixed rotation looks correct to me. Are you talking about when you try to manipulate the sphere with the mouse? – Cooper Buckingham Mar 28 '16 at 22:15
  • The sphere is not displayed with the following version : https://jsfiddle.net/ysis81/uau3nw2q/4/ , could you suggest your fixed version on jsfiddle ? –  Mar 28 '16 at 22:35
  • I have also tried with performance.now() but animation is still shaking , here's the result : https://jsfiddle.net/ysis81/2Lok5agy/3/ –  Mar 28 '16 at 22:41
  • Thanks, the working solution is almost reached, I have included your code snippet into mine and unfortunately, sphere is not displayed, you can see the result on : https://jsfiddle.net/ysis81/uzqwtsqm/7/ . Could you see what's wrong ? Sorry if you can notice a basic mistake but I am not expert with Javascript, regards –  Mar 29 '16 at 01:35
  • Alright, I realize now you are just copying and pasting directly. You weren't even executing the start function, nor calling the threes renderer. I've given you specifics, now you just need to plug in where to rotate your camera. – Cooper Buckingham Mar 29 '16 at 01:54