three.js
एनीमेशन के लिए रेंडर लूप्स: गतिशील रूप से वस्तुओं को अपडेट करना

यह दस्तावेज़ आपके तीन.जे के दृश्यों में सीधे एनीमेशन जोड़ने के कुछ सामान्य तरीकों का वर्णन करता है। हालांकि, लाइब्रेरी और फ्रेमवर्क हैं जो आपके दृश्य (ट्वेंस, भौतिकी, आदि) में गतिशील आंदोलन जोड़ सकते हैं, यह समझने में मददगार है कि आप कोड की कुछ पंक्तियों के साथ खुद को कैसे कर सकते हैं।

एनीमेशन की मुख्य अवधारणा किसी वस्तु के गुणों (रोटेशन और अनुवाद, आमतौर पर) को छोटी अवधि में अद्यतन कर रही है। उदाहरण के लिए, यदि आप किसी वस्तु का अनुवाद X पोजीशन को सेकंड के 0.1 वें दसवें भाग से बढ़ाकर करते हैं, तो यह 1 सेकंड में X एक्सिस पर 1 यूनिट होगा, लेकिन दर्शक इसे आसानी से उस स्थिति में ले जाने का अनुभव करेंगे समय सीधे नई स्थिति में कूदने के बजाय।

हमारी सहायता के लिए, हम स्क्रिप्ट में एक रेंडर लूप बनाते हैं।

var render = function () {
    requestAnimationFrame( render );
    //update some properties here
    renderer.render(scene, camera);
}

ऊपर कताई क्यूब उदाहरण में, हम इस विचार का उपयोग करते हैं - छोटे वृद्धिशील अपडेट - क्यूब के रोटेशन को बदलने के लिए हर बार एनीमेशन के एक नए फ्रेम का अनुरोध किया जाता है। हर फ्रेम पर cube ऑब्जेक्ट के rotation.x . rotation.x और rotation.y गुणों को बढ़ाकर, क्यूब उन दो अक्षों पर स्पिन करता दिखाई देता है।

एक अन्य उदाहरण के रूप में, अपने आवश्यक अद्यतन को अन्य कार्यों में अलग करना असामान्य नहीं है, जहाँ आप अतिरिक्त लूप और चेक जमा कर सकते हैं, जबकि रेंडर लूप को अप्रयुक्त रखा जा सकता है। उदाहरण के लिए, नीचे दिए गए लूप चार अलग-अलग अपडेट फ़ंक्शन को कॉल करते हैं, प्रत्येक का उद्देश्य दृश्य में updatePoints() के मामले में एक अलग ऑब्जेक्ट (या ऑब्जेक्ट की एक सरणी) को अपडेट करने का है।

//render loop
function render() {
    requestAnimationFrame( render );
    updateGrid();
    updateCube();
    updateCamera();
    updatePoints(pList);
    renderer.render( scene, camera);
}
render();

आप ऑनलाइन उदाहरणों में देख सकते हैं कि कैमरा नियंत्रण भी रेंडर लूप का हिस्सा है।

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

var render = function () {
    requestAnimationFrame( render );
    controls.update();
    renderer.render(scene, camera);
};

ऐसा इसलिए है क्योंकि कैमरे को नियंत्रित करने के लिए स्क्रिप्ट वही काम कर रही है; समय के साथ इसे अद्यतन करना। परिवर्तन उपयोगकर्ता इनपुट के कारण हो सकते हैं जैसे कि माउस पोजीशन, या कुछ प्रोग्रामिक जैसे पथ का अनुसरण करना। किसी भी मामले में, हम केवल कैमरे को ही एनिमेट कर रहे हैं।

var scene = new THREE.Scene();  
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

//Create an render loop to allow animation
var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();