Javascript Three.js-渲染问题-动画抖动

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

下面是一个例子

和渲染功能：

 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

和

计算机旋转

功能：

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)

  }

如果有人能看出问题所在，这会很好

谢谢你的帮助

更新：

我试图在下面插入的解决方案；我没有制作动画，没有显示任何内容：下面是我对JSFIDLE的尝试：

我也尝试了performance.now（），但动画仍在颤抖；你可以查一下这个

---

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

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

---

谢谢，但是我没有把上面的代码片段包含在我的脚本中。以下是我尝试将其插入此链接上的代码的步骤：。如果你能看一下我的脚本，我认为固定旋转看起来是正确的。你是说当你试图用鼠标操纵球体时？球体没有显示以下版本：，你能推荐你在JSFIDLE上的固定版本吗？我也尝试过性能。现在（）但是动画仍然在抖动，结果是：谢谢，工作解决方案几乎达到了，我已将您的代码片段包含在我的代码片段中，不幸的是，未显示sphere，您可以在上看到结果：。你能看看怎么了吗？很抱歉，如果你能注意到一个基本的错误，但我不是Javascript专家，你说的抖动是什么意思？你是否尝试过使用游戏循环，不断更新时间和动画插值？@MichałMiszczyszyn在旋转过程中，球体正在混合，就像动画的刷新不是连续的或是不稳定的。。。你的意思是你不能用我的JSFIDLE链接在你的计算机上重现这个问题吗？试试这个：。您不应要求

轨迹球控件
控制摄像头，然后尝试自己控制摄像头。保持简单。实际上，我会切换到
轨道控制。它有一个
自动旋转
属性。