🐅 🅿️ 👻 Three.js - Do-it-yourself 3D ब्राउज़र या WebGL करीब हो जाता है 👨🏻‍🔬 👨🏾‍🌾 🚃

एक समय में मर्डोबू से तीन . js के बारे में विषय हब पर फिसल गया, लेकिन अभी तक विस्तार से विचार नहीं किया गया है। इस और (संभवतः) बाद के लेखों में, मैं इस चूक को ठीक करने की कोशिश करूंगा। दुर्भाग्य से, तीन.js कोई भी समझदार प्रलेखन प्रदान नहीं करते हैं, इसलिए, इस पर सभी ज्ञान प्रयोगात्मक रूप से प्राप्त किए गए थे और वेबजीएल चश्मा उठाकर, अर्थात। विषय के लेखक के लिए कोई भी परिवर्धन स्वागत योग्य है।

इस लेख में हम एक सरल एप्लिकेशन बनाएंगे जो इस इंजन की बुनियादी क्षमताओं को प्रदर्शित करेगा, कैमरा, प्रकाश और छाया के साथ काम करेगा, और हमारी वस्तुओं को स्थानांतरित करना भी सिखाएगा। लेख के अंत में, डेमो फ़ाइलों और एक स्क्रीनशॉट के लिए एक लिंक। तो बात है!

पहला कदम

हमारा HTML काफी सरल है, सवाल नहीं उठाता है और इस प्रकार दिखता है:

<!DOCTYPE html> <html> <head> <title>Three.js - dice</title> <meta charset="utf-8"> <style> body { margin: 0; padding: 0; overflow: hidden; } </style> <!-- libs --> <script type="text/javascript" src="js/Three.js"></script> <script type="text/javascript" src="js/RequestAnimationFrame.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!-- app --> <script type="text/javascript" src="js/demoapp.js"></script> </head> <body> </body> </html>

इस उदाहरण में, हम jQuery का उपयोग करेंगे, हालांकि, यह बिल्कुल महत्वपूर्ण नहीं है और इसके बिना ऐसा करना पूरी तरह से संभव होगा। RequestAnimationFrame.js, क्रॉस-ब्राउज़र कार्य (थोड़े से पर्याप्त) RequestAnimationFrame (उस पर नीचे) को सुनिश्चित करने के लिए एक छोटी सी हैक है।

अब हम सीधे हमारे Demoapp.js स्क्रिप्ट फ़ाइल पर जाते हैं
हम दस्तावेज़ की तैयार घटना के लिए फ़ाइल के अंदर सभी कोड के प्रसंस्करण को लटकाते हैं

  $(document).ready(function() { /** **/});

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

मुख्य तत्व

मुख्य तत्व जो हमारे उत्पादन में भाग लेंगे (मुख्य ध्यान दें, लेकिन सभी नहीं, तीन ।js में कार्यों का एक समृद्ध चयन है):

1) कैमरा (THREE.Camera)
ये घटनाओं के एक तात्कालिक दृश्य पर हमारी "आँखें" हैं।
पहला पैरामीटर ऑब्जेक्ट से दूरी दिखाता है, दूसरा पहलू अनुपात दिखाता है (एक नियम के रूप में, भागफल का उपयोग खिड़की की चौड़ाई और ऊंचाई से किया जाता है), तीसरा और चौथा शो विमान से संबंधित / दूर के मापदंडों के पास और रेंडरिंग में उपयोग किया जाता है।

 camera = new THREE.Camera(30, window.innerWidth/window.innerHeight,1, 3000);

या आप तुरंत एक कैमरा बना सकते हैं जो बाईं माउस बटन को पकड़ सकता है और दृश्य के चारों ओर घुमा सकता है, दाईं ओर, ऊपर और नीचे, और बीच वाले के साथ, दृश्य को ज़ूम करें। यह निम्नानुसार किया जाता है (कैमरे में प्रेषित पैरामीटर स्पष्ट रूप से नाम से खुद के लिए बोलते हैं और एप्लिकेशन कोड में दिखाए जाते हैं):

 camera = new THREE.TrackballCamera({/**parameters**/});

यह भी ध्यान दिया जाना चाहिए कि कार्टेशियन समन्वय प्रणाली का उपयोग किया जाता है, अर्थात। x अक्ष को स्क्रीन के ऊपरी बाएँ कोने से निचले दाईं ओर, क्रमशः ऊपरी दाएँ से निचले बाएँ और y अक्ष को स्क्रीन के निचले भाग से ऊपरी, क्रमशः के लिए निर्देशित किया जाता है।

2) दृश्य (THREE.Scene)
मुख्य तत्व। यह इस चरण पर है कि हम उन सभी वस्तुओं और विमानों को जोड़ेंगे जो हमने बनाए थे (उपयोग .addObject या addChild)। दृश्य आरंभ इस प्रकार है:

 scene = new THREE.Scene();

3) ~~मोटर!~~ मैश (THREE.Mesh)
यह कैश की सहायता से है जो कि तीन में लगभग सभी वस्तुओं को संकलित करता है। इसके साथ काम करने के लिए, हमें जाल की ज्यामिति और सामग्री को निर्धारित करने की आवश्यकता है।
ज्यामिति वह वस्तु है जो दृश्य बनाती है (क्यूब्स, गोले, सिलिंडर, प्लेन, आदि) यह विषय काफी बड़ा है, इसलिए अब हम इस पर विस्तार से ध्यान नहीं देंगे। सामग्री, हालांकि, कोई कम नहीं है, यह एक बड़ा मुद्दा है, इसलिए शुरुआत के लिए आप केवल दो बिंदुओं को स्पष्ट कर सकते हैं - ज्यामिति में निर्दिष्ट सामग्री का उपयोग करने के लिए, आपको मेशफैसेमेटेरियम का उपयोग करना चाहिए, अधिकांश अन्य मामलों में उपयोग के लिए, मेशबिसिसेटेरियम पर्याप्त हो सकता है।

 mesh = new THREE.Mesh( geometry, material );

तब हम मन की शांति के साथ दृश्य में एक मेष जोड़ सकते हैं

 scene.addObject( mesh );// .addChild

किसी ऑब्जेक्ट को निकालना भी एक स्नैप है जो removeObject का उपयोग करता है

 scene.removeObject(mesh);

4) रेंडरर (THREE.WebGLRenderer / CanvasRenderer)
दो प्रकार के रेंडरर्स हमारे लिए उपलब्ध हैं, - WebGLRenderer और CanvasRenderer। पहले से ही नामों से आप समझ सकते हैं कि क्या है। यह भी ध्यान दिया जाना चाहिए कि, उम्मीद के मुताबिक, WebGLRenderer कमजोर मशीनों पर एफपीएस को काफी कम कर देता है। रेंडरर्स का उपयोग करना भी बेहद सरल है:

 renderer = new THREE.WebGLRenderer( );

या

 renderer = new THREE.CanvasRenderer();

रेंडरर को शुरू करने के बाद आवश्यक कार्यों में से एक इसका आकार निर्धारित करना है - यहां हम अपनी जरूरतों के आधार पर किसी भी आकार को चुनने के लिए स्वतंत्र हैं।

 renderer.setSize( window.innerWidth, window.innerHeight );

और अंत में, हमें पेज पर एक रेंडरर तत्व जोड़ना होगा। यह निम्न प्रकार से और सभी प्रकार के रेंडरर्स के लिए किया जाता है:

 container.appendChild( renderer.domElement );

या jQuery के लिए

 container.append(renderer.domElement);

5) प्रकाश।
हां, दृश्य में प्रकाश को लागू करना (और कभी-कभी आवश्यक है), उदाहरण के लिए, वस्तुओं से छाया प्राप्त करने के लिए (वे, निश्चित रूप से, समानांतर चलती विमानों का उपयोग करके किया जा सकता है, लेकिन यह अपवाद के रूप में अधिक संभावना है)। प्रकाश व्यवस्था तीन प्रकार की होती है:
5.1) THREE.AmbientLight प्रकाश है जो पूरे दृश्य को प्रभावित करता है। इसकी कोई दिशा नहीं है और हर दृश्य वस्तु को समान रूप से प्रभावित करता है, चाहे वस्तु का स्थान कुछ भी हो। तदनुसार, इस प्रकाश की समन्वय अक्ष पर कोई स्थिति नहीं है
5.2) THREE.PointLight - सभी दिशाओं में एक बिंदु से आने वाली प्रकाश व्यवस्था। मुझे लगता है कि एक साधारण प्रकाश बल्ब के साथ तुलना काफी उपयुक्त होगी।
5.3) THREE.DirectionalLight - एक निश्चित दिशा में (किसी दिए गए बिंदु से और मूल तक) प्रकाश की गति। उदाहरण के लिए, सूर्य के प्रकाश को इस प्रकार के प्रकाश के लिए जिम्मेदार ठहराया जा सकता है।
उदाहरण में, हम केवल DirectionalLight का उपयोग विमान के ऊपर रखी गई वस्तु की छाया प्राप्त करने के लिए करेंगे।

ज्ञान लगाओ

अब आप सीधे आवेदन कोड पर जा सकते हैं। इसमें हम उपरोक्त सभी तत्वों का उपयोग करेंगे, साथ ही साथ किए गए कार्यों पर टिप्पणी करेंगे। शुरू करने के लिए, हम इनिशियलाइज़ेशन और एनीमेशन फ़ंक्शंस को कॉल करके अपना एप्लिकेशन शुरू करते हैं, और हमें उन वैश्विक वेरिएबल्स की भी घोषणा करते हैं जिनकी हमें ज़रूरत है।

 //  var container, camera, scene, renderer, floormesh, cubeMesh, phi = 0; init(); animate();

आरंभीकरण समारोह पर विचार करें।

 function init() { //        container = $( 'div' ).attr('id','cardfield'); $('body').append( container ); //  camera = new THREE.TrackballCamera({ fov: 45, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000, rotateSpeed: 1.0, zoomSpeed: 1.2, panSpeed: 0.8, noZoom: false, noPan: false }); //  ,   ,       camera.position.z = 250; camera.position.y = 175; camera.target.position.y = -75; //  scene = new THREE.Scene(); //  "".       600600   5 var floorgeo = new THREE.CubeGeometry(600,600,5); //          floormesh = new THREE.Mesh(floorgeo, new THREE.MeshBasicMaterial({color: 0x248C0F, opacity:0.9})); //    floormesh.position.y = -200; //      ,     . floormesh.rotation.x = 90 * Math.PI / 180; //   scene.addChild(floormesh); //   var materials = [ //     new THREE.MeshBasicMaterial( { color: 0xE01B4C }), //   new THREE.MeshBasicMaterial( { color: 0x34609E }), //   new THREE.MeshBasicMaterial( { color: 0x7CAD18 }), // new THREE.MeshBasicMaterial( { color: 0x00EDB2 }), //  new THREE.MeshBasicMaterial( { color: 0xED7700 }), //   new THREE.MeshBasicMaterial( { color: 0xB5B1AE }) //   ]; //    50    1,      var cube = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materials ); //   ,     //  ,     cubeMesh = new THREE.Mesh( cube, new THREE.MeshFaceMaterial() ); //    y cubeMesh.position.y = -10; //   scene.addChild( cubeMesh ); //   new THREE.ShadowVolume( cubeMesh ); //   light = new THREE.DirectionalLight( 0xffffff ); //,     light.castShadow = true; //     -150,  .   ( 1  y  0  x  z),            //,          light.position.set( 0, 1, 0 ); //  scene.addChild( light ); // renderer = new THREE.WebGLRenderer(); //    renderer.setSize( window.innerWidth, window.innerHeight ); //      container.append( renderer.domElement ); }

एनीमेशन निष्पादन:

 function animate() { requestAnimationFrame( animate ); render(); }

यह सुविधा तीन.js पर अधिकांश अनुप्रयोगों का एक मानक हिस्सा है। आइए एक नज़र डालें। requestAnimationFrame (चेतन) क्रॉस-ब्राउज़र एनीमेशन कार्य (यहां तक कि अधिक विवरण के लिए) सुनिश्चित करने के लिए एक फ़ंक्शन है और रेंडर () फ़ंक्शन के लिए एक पुनरावर्ती कॉल प्रदान करता है, जो वास्तव में, यह हमारी सभी खुशी प्रदान करता है।

प्रतिपादन
यह यहां है कि आपको कैमरे और वस्तुओं के आंदोलन को कॉन्फ़िगर करने की आवश्यकता है (निश्चित रूप से, आपको चर के दायरे को पहले से कॉन्फ़िगर करने की आवश्यकता है ताकि वे इस फ़ंक्शन में दिखाई दें)

 function render() { //      (    ) cubeMesh.rotation.x += 0.5 * Math.PI / 90; cubeMesh.rotation.y += 1.0 * Math.PI / 90; cubeMesh.rotation.z += 1.5 * Math.PI / 90; //   ,       x  y cubeMesh.position.x = Math.sin( phi ) * 50; cubeMesh.position.y = Math.cos( phi ) * 50; //   phi+= 0.05; // renderer.render(scene, camera); }

यह ध्यान दिया जाना चाहिए कि उदाहरण ने जीथब से लिया गया थ्री। जेएस के बिल्ड संस्करण का उपयोग किया था (नियमित संस्करण की तुलना में, आंकड़े की ज्यामिति के लिए कॉल को बदल दिया गया था, इसके बजाय THREE.xxx THREE.xxxGemometry, उदाहरण के लिए THREE.CubeGeometry, तीन.js का पुराना संस्करण काम नहीं करेगा। लेकिन THREE.Cube काम करेगा। इसके अलावा पुराने संस्करण THREE.TrackBallCamera) को नहीं समझता है।

परिणाम:

हमने अपना पहला अनौपचारिक डेमो बनाया, बुनियादी घटकों से परिचित हुआ, जिसके बिना तीन के आधार पर किसी भी एप्लिकेशन को बनाना असंभव है। जेएस, प्रकाश डाला और एनीमेशन लूप को कार्रवाई में देखा। भविष्य में, हम अपने स्वयं के बनावट और वस्तुओं के मॉडल, जटिल दृश्यों के निर्माण, दृश्य वस्तुओं पर क्रियाओं को जोड़ने और बैकबोन.जेएस के लिए इस सभी खुशी को स्थानांतरित करने से निपटेंगे। आवेदन का स्रोत कोड यहां उपलब्ध है ।

Three.js - Do-it-yourself 3D ब्राउज़र या WebGL करीब हो जाता है

पहला कदम

मुख्य तत्व

ज्ञान लगाओ

परिणाम:

More articles: