Three.js - vấn đề với hiển thị - hoạt ảnh đang lắc

Question

Tôi gặp vấn đề lạ với việc hiển thị hình cầu xoay: hoạt ảnh dường như rung và tôi không biết vấn đề này xuất phát từ đâu.

Dưới đây là ví dụ về this link

và chức năng render:

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

    } 

với rotateCamera và computeRotation chức năng:

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) 

    } 

Nếu ai đó có thể thấy có gì sai, điều này sẽ được tốt đẹp,

Nhờ sự giúp đỡ của bạn

UPDATE:

tôi đã cố gắng để chèn các giải pháp dưới đây của; Tôi đã không nhận được để làm cho công việc hoạt hình, không có gì được hiển thị: đây nỗ lực của tôi trên jsfiddle:

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

Tôi cũng đã cố gắng với performance.now() nhưng hình ảnh động vẫn còn run rẩy; bạn có thể kiểm tra điều này trên https://jsfiddle.net/ysis81/2Lok5agy/3/

Tôi đã bắt đầu một tiền thưởng để giải quyết vấn đề này.

Answer 1

requestAnimationFrame sẽ thực thi hàm trả về gọi lại của bạn với thông số dấu thời gian. Sử dụng tham số đó để tính số lượng mili giây đã trôi qua kể từ khung cuối cùng. Sau đó, sử dụng khác biệt như một số tỷ lệ phần trăm của luân chuyển.

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