Three.js-渲染问题-动画正在动摇

Question

我在渲染旋转中的球体时遇到了一个奇怪的问题：动画似乎在抖动，我不知道这个问题是从哪里来的。

这是这个链接的例子

以及渲染功能：

 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);
  }

具有rotateCamera和computeRotation功能：

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)
  }

如果有人能发现问题所在，那就太好了，

感谢您的帮助

更新：

我试图在下面插入的解决方案；我没有制作动画，什么都没有显示：这里是我在jsfiddle上的尝试：

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

我也尝试过performance.now（），但动画仍然在抖动；你可以检查一下https://jsfiddle.net/ysis81/2Lok5agy/3/

我已经开始悬赏解决这个问题。

Answer 1

requestAnimationFrame将使用时间戳参数执行回调渲染函数。使用该参数可以计算自上一帧以来经过了多少毫秒。然后用这个差值作为旋转的百分比。

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();