📍 👵🏿 🕗 हम 3D में रेंडर करते हैं, या दोस्तों को डी 3 और थ्रीज कैसे बनाते हैं 👣 🙅🏼 🗳️

यदि आप पहले से ही डी 3 और थ्रीज के बारे में सुन चुके हैं, तो यह लेख आपको रोचक लग सकता है। यह इन पुस्तकालयों को गतिशील तीन आयामी दृश्यों को बनाने के लिए एक साथ काम करने के तरीके के बारे में बात करेगा, इस सरल हिस्टोग्राम का एक उदाहरण के रूप में उपयोग करते हुए:

पैर कहाँ से बढ़ते हैं?

कुछ समय पहले, हम कोडऑर्केस्ट्रा में एक एएस 3 / डीएसएल कोडनाम "डी 6" (डी 3 + 3 डी से) पर एक डी 3 पोर्ट के साथ प्रयोग किया था। हमारे पोर्ट ने केवल सबसे बुनियादी डी 3 फ़ंक्शन को कवर किया, लेकिन एएस 3 "बॉक्स से बाहर" पर लोकप्रिय 3 डी इंजन के साथ काम करने में सक्षम था। और यद्यपि हम D6 को प्रकाश में नहीं लाए हैं, 3 डी के लिए डी 3 का उपयोग करने के विचार ने हमारे दिमाग को कभी नहीं छोड़ा है। वास्तव में, यदि आप डी 3 गैलरी में देखते हैं, तो आपको वहां एक भी त्रि-आयामी उदाहरण नहीं मिलेगा। कारण यह है कि डी 3 को ब्राउज़र डोम के साथ काम करने के लिए अत्यधिक ट्यून किया गया है, और ऐसा लगता है कि यह मनमानी वस्तुओं को लाने का समर्थन नहीं करता है। हालांकि, पर्याप्त प्रेरणा के साथ, हम इसे मजबूर कर सकते हैं।

तो चलिए शुरू करते हैं

आइए डी 3 का उपयोग करके द्वि-आयामी हिस्टोग्राम के सबसे सरल उदाहरण से शुरू करें (इसके बाद कोड को डी 3 [ 1 ] और [ 2 ] के आधिकारिक पाठ से अनुकूलित किया गया है, और पठनीयता के लिए छोटा किया गया है):

d3.select(".chart") .selectAll() .data(data) .enter().append("div") .style("width", function(d) { return d * 10 + "px"; });

यह उदाहरण दिखाता है कि मुख्य डी 3 तरीके मैजिक डोम-डिपेंडेंट स्ट्रिंग्स (जैसे .chart चयनकर्ता या div टैग नाम) को तर्क के रूप में स्वीकार करते हैं, जो हमारे उद्देश्यों के लिए अत्यंत असुविधाजनक है। सौभाग्य से, इन विधियों में वैकल्पिक हस्ताक्षर हैं। ये हस्ताक्षर नमूनों के पुन: उपयोग जैसी उबाऊ चीजों के लिए मौजूद हैं। हम उनका उपयोग अपने उदाहरण को फिर से लिखने के लिए करेंगे:

 function newDiv() { return document.createElement("div"); } var chart = { appendChild: function (child) { //      append()  newDiv() return document.getElementById("chartId") .appendChild(child); }, querySelectorAll: function () { //      selectAll() return []; } } d3.select( chart ) .selectAll() .data(data) .enter().append( newDiv ) .style("width", function(d) { return d * 10 + "px"; });

जैसा कि आप देख सकते हैं, हमने 1) डी 3 को निर्देश दिया कि div स्पष्ट रूप से कैसे बनाया जाए, और 2) डी 3 को आश्वस्त किया कि हमारा चार्ट ऑब्जेक्ट एक बतख है । हालाँकि, हमारे कोड का परिणाम बिल्कुल नहीं बदला है।

तो 3 डी का क्या?

जावास्क्रिप्ट में 3 डी ग्राफिक्स के लिए वास्तविक मानक आज तीन.js है। यदि हम डी 3 डी में 3 डी करना चाहते हैं, तो हमें डी 3 को तीन-आयामी तीन.जेएस वस्तुओं से चयन के साथ उसी तरह से काम करने की आवश्यकता है। ऐसा करने के लिए, हम Object3D प्रोटोटाइप में निम्नलिखित तरीके जोड़ेंगे:

 //     D3- .append()  .selectAll() THREE.Object3D.prototype.appendChild = function (c) { this.add(c); return c; }; THREE.Object3D.prototype.querySelectorAll = function () { return []; }; //   -  D3- .attr() THREE.Object3D.prototype.setAttribute = function (name, value) { var chain = name.split('.'); var object = this; for (var i = 0; i < chain.length - 1; i++) { object = object[chain[i]]; } object[chain[chain.length - 1]] = value; }

यह सबसे सरल त्रि-आयामी हिस्टोग्राम बनाने के लिए पर्याप्त है:

 function newBar () { return new THREE.Mesh( geometry, material ); } chart3d = new THREE.Object3D(); //  D3   3D  d3.select( chart3d ) .selectAll() .data(data) .enter().append( newBar ) .attr("position.x", function(d, i) { return 30 * (i - 3); }) .attr("position.y", function(d, i) { return d; }) .attr("scale.y", function(d, i) { return d / 10; })

क्या वह सब है?

बिलकुल नहीं। डी 3 की मुख्य विशेषता का उपयोग करने के लिए - डेटा परिवर्तन प्रसंस्करण - हमें अपनी चाल की समीक्षा करने की आवश्यकता है। सबसे पहले, ताकि डी 3 "विशेषता" मानों को प्रक्षेपित कर सके, हमें get3 को बांटने की विधि को ऑब्जेक्ट 3 प्रोटेक्शन में जोड़ना होगा:

 THREE.Object3D.prototype.getAttribute = function (name) { var chain = name.split('.'); var object = this; for (var i = 0; i < chain.length - 1; i++) { object = object[chain[i]]; } return object[chain[chain.length - 1]]; }

दूसरे, selectAll () को वास्तव में अद्यतन वस्तुओं के चयन के लिए काम करना चाहिए। उदाहरण के लिए, हम एक निश्चित प्रकार के Object3D के वंशजों के चयन को लागू कर सकते हैं:

 THREE.Object3D.prototype.querySelectorAll = function (selector) { var matches = []; var type = eval(selector); for (var i = 0; i < this.children.length; i++) { var child = this.children[i]; if (child instanceof type) { matches.push(child); } } return matches; }

हमारे स्तंभों को नृत्य करने के लिए , अब केवल समय-समय पर डेटा बदलना पर्याप्त है:

 var N = 9, v = 30, data = d3.range(9).map(next); function next () { return (v = ~~Math.max(10, Math.min(90, v + 20 * (Math.random() - .5)))); } setInterval(function () { data.shift(); data.push(next()); update(); }, 1500); function update () { //  D3     3D  var bars = d3.select( chart3d ) .selectAll("THREE.Mesh") .data(data); bars.enter().append( newBar ) .attr("position.x", function(d, i) { return 30 * (i - N/2); }); bars.transition() .duration(1000) .attr("position.y", function(d, i) { return d; }) .attr("scale.y", function(d, i) { return d / 10; }); }

तो, तीन के साथ डी 3 बाँधने का सामान्य सिद्धांत। जेएस आपको स्पष्ट होना चाहिए - हम धीरे-धीरे डी 3 कार्यात्मक के लिए पर्याप्त तरीके जोड़ रहे हैं जो हमें ऑब्जेक्ट 3 डी प्रोटोटाइप में रुचि रखते हैं। लेकिन फिक्सिंग के लिए, हम हिस्टोग्राम के अंतिम संस्करण पर विचार करेंगे, जिसमें हम कुंजी द्वारा डेटा बाइंडिंग का उपयोग करते हैं और हटाए गए ऑब्जेक्ट के चयन के साथ काम करते हैं। Remove3hild विधि Object3D प्रोटोटाइप में जोड़ें:

 THREE.Object3D.prototype.removeChild = function (c) { this.remove(c); }

यदि आपने हटाए जाने वाले ऑब्जेक्ट को चुनने के लिए हटाने () विधि का उपयोग करने की कोशिश की है, तो आप पाएंगे कि कुछ भी नहीं हो रहा है। क्यों? डी 3 स्रोतों में देखने के लिए इसका उत्तर आसान है - हटाने () विधि चयन के पैरेंटोड का उपयोग नहीं करता है, लेकिन अपने तत्काल माता-पिता से वस्तु को हटाने की कोशिश करता है। इसे संभव बनाने के लिए, हमें appendChild के अपने कार्यान्वयन को समायोजित करने की आवश्यकता है ():

 THREE.Object3D.prototype.appendChild = function (c) { this.add(c); //   parentNode c.parentNode = this; return c; }

परिणाम

और अंत में, हमें ऐसी सुंदरता मिली:

 var N = 9, t = 123, v = 30, data = d3.range(9).map(next); function next () { return { time: ++t, value: v = ~~Math.max(10, Math.min(90, v + 20 * (Math.random() - .5))) }; } function update () { //  D3  ,    3D  var bars = d3.select( chart3d ) .selectAll("THREE.Mesh") .data(data, function(d) { return d.time; }); bars.transition() .duration(1000) .attr("position.x", function(d, i) { return 30 * (i - N / 2); }) bars.enter().append( newBar ) .attr("position.x", function(d, i) { return 30 * (i - N / 2 + 1); }) .attr("position.y", 0) .attr("scale.y", 1e-3) .transition() .duration(1000) .attr("position.x", function(d, i) { return 30 * (i - N / 2); }) .attr("position.y", function(d, i) { return d.value; }) .attr("scale.y", function(d, i) { return d.value / 10; }) bars.exit().transition() .duration(1000) .attr("position.x", function(d, i) { return 30 * (i - N / 2 - 1); }) .attr("position.y", 0) .attr("scale.y", 1e-3) .remove() }

जैसा कि आप देख सकते हैं, डी 3 डी के साथ एक बढ़िया काम करता है, अगर आप इसे थोड़ी मदद करते हैं, और थ्री.जेएस इसमें कोई समस्या पैदा नहीं करते हैं। दोनों पुस्तकालयों में अपनी ताकत है, और मुझे आशा है कि इस लेख ने आपके भविष्य के काम में उन्हें सामंजस्यपूर्ण रूप से संयोजित करने का मार्ग खोल दिया है।

हम 3D में रेंडर करते हैं, या दोस्तों को डी 3 और थ्रीज कैसे बनाते हैं

पैर कहाँ से बढ़ते हैं?

तो चलिए शुरू करते हैं

तो 3 डी का क्या?

क्या वह सब है?

परिणाम

More articles: