थ्री.जेएस - प्रतिपादन के साथ समस्या - एनीमेशन

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 कार्य::

यहाँ this link

पर उदाहरण और प्रस्तुत करना समारोह है

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

अनुरोधएनीमेशन फ़्रेम आपके कॉलबैक रेंडर फ़ंक्शन को टाइमस्टैम्प पैरामीटर के साथ निष्पादित करेगा। अंतिम फ्रेम के बाद से कितने मिलीसेकंड पास हुए हैं, इसकी गणना करने के लिए उस पैरामीटर का उपयोग करें। फिर घूर्णन के कुछ प्रतिशत के रूप में उस 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();