Three.js - проблема с рендерингом - анимация дрожит

Question

У меня возникает странная проблема с рендерингом сферы во вращении: кажется, что анимация дрожит, и я не знаю, откуда эта проблема.

Вот пример на this link

и функция визуализации:

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) 

    } 

Если кто-то мог видеть то, что случилось, это было бы хорошо,

Спасибо за вашу помощь

UPDATE:

Я попытался вставить решение нижеприведенного; Я не добирался, чтобы сделать работу анимации, ничего не отображается: здесь моя попытка на jsfiddle:

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

Я попытался также с performance.now(), но анимация по-прежнему качалке; вы можете проверить это на https://jsfiddle.net/ysis81/2Lok5agy/3/

Я начал щедрость, чтобы решить, возможно, эту проблему.

Answer 1

requestAnimationFrame выполнит вашу функцию рендеринга обратного вызова с параметром timestamp. Используйте этот параметр, чтобы рассчитать, сколько миллисекунд прошло с момента последнего кадра. Затем используйте этот diff как некоторый процент вращения.

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