हम 15 मिनट में एक इंटरैक्टिव इलाके की योजना बनाते हैं

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

एसवीजी का विकल्प इस तथ्य के कारण है कि यह विकास और डिबगिंग का सबसे सरल विकल्प है। मैं ऐसे लोगों से मिला, जिन्होंने कैनवास पर यह सब करने की सलाह दी, लेकिन यह समझना बहुत मुश्किल है कि क्या हो रहा है, और घटता पर सभी बिंदुओं के निर्देशांक को किसी भी तरह अग्रिम रूप से गणना करने की आवश्यकता है, लेकिन यहां मैंने डेवलपर के टूल खोले और तुरंत पूरी संरचना, सभी ऑब्जेक्ट्स को देखा। जिसके साथ सहभागिता है, और बाकी सब कुछ एक मानव-अनुकूल इंटरफेस में माउस के साथ क्लिक किया जा सकता है। सामान्य 2 डी कैनवास और एसवीजी के बीच प्रदर्शन शायद ही अलग होगा। WebGL इस संबंध में कुछ बोनस दे सकता है, लेकिन विकास का समय काफी बढ़ जाएगा, आगे समर्थन का उल्लेख नहीं करने के लिए, जो हमेशा बजट में फिट नहीं होता है। मैं यह भी कहूंगा कि "कभी फिट नहीं होता है।"

इस ट्यूटोरियल में, हम एक निश्चित क्षेत्र में निजी घरों को किराए पर लेने के लिए एक काल्पनिक साइट के लिए एक विजेट की तरह कुछ भी करेंगे, लेकिन यह स्पष्ट है कि किसी भी विषय में ऐसी चीजों को बनाने के लिए सिद्धांत लागू होते हैं।

शुरुआत हो रही है

मैं एक उदाहरण के रूप में इंकस्केप के साथ सब कुछ दिखाऊंगा, लेकिन सभी समान कार्यों को किसी अन्य संपादक में समान कार्यों का उपयोग करके किया जा सकता है।

काम करने के लिए, हमें दो मुख्य संवाद बॉक्स चाहिए:

• XML संपादक (Ctrl + Shift + X या कोण कोष्ठक के साथ एक आइकन) - मार्कअप के रूप में दस्तावेज़ की संरचना को देखने और व्यक्तिगत तत्वों को संपादित करने के लिए।
• भरें और स्ट्रोक (Ctrl + Shift + F या फ्रेम में ब्रश के साथ आइकन) - मुख्य रूप से रूपरेखा भरने के लिए।

तुरंत उन्हें लॉन्च करें और दस्तावेज़ के निर्माण के लिए आगे बढ़ें।

यदि आपने गलती से उन्हें एक अलग विंडो में खींच लिया है, तो आप इस विंडो के ऊपरी फ्रेम के नीचे क्लिक कर सकते हैं (जहां कुछ भी नहीं है), और उन्हें मुख्य एक पर वापस खींचें। यह पूरी तरह से सहज नहीं है, बल्कि सुविधाजनक है।

क्षेत्र के दृश्य के साथ एक फोटो खोलें। हम चित्र को बेस 64 स्ट्रिंग या बाहरी लिंक के रूप में सम्मिलित करने का विकल्प चुन सकते हैं। चूंकि यह बड़ा है, लिंक का चयन करें। तब हम अपने हाथों से चित्र के लिए पथ बदल देंगे जब साइट के पृष्ठों में सब कुछ शुरू किया जाएगा। एक एसवीजी दस्तावेज़ बनाया जाता है जिसमें फोटो को छवि टैग के माध्यम से एम्बेड किया जाएगा।

एसवीजी में एम्बेडेड रेखापुंज छवियों के लिए, HTML में एम्बेडेड, आप आलसी लोडिंग का उपयोग कर सकते हैं, साथ ही पृष्ठों पर साधारण छवियों के लिए भी। इस उदाहरण में, हम इस तरह के अनुकूलन पर ध्यान केंद्रित नहीं करेंगे, लेकिन व्यावहारिक कार्यों में उनके बारे में मत भूलना।

वर्तमान स्तर पर, हम अपने सामने कुछ इस तरह से देखते हैं:

अब एक नई लेयर बनाएं (Ctrl + Shift + N या Menu> Layer> Add लेयर)। एक्सएमएल संपादक में, हम देखते हैं कि नियमित जी तत्व दिखाई दिया है। जबकि हम दूर नहीं गए हैं, हम इसे एक कक्षा दे सकते हैं, जिसका उपयोग हम बाद में लिपियों में करेंगे।

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

यदि आप XML संपादक में दस्तावेज़ की संरचना को करीब से देखते हैं, तो आप देखेंगे कि बहुत अधिक फ़ालतू है। किसी भी अधिक या कम जटिल वेक्टर ग्राफिक्स संपादक अपने स्वयं के कुछ दस्तावेजों में जोड़ देगा। अपने हाथों से यह सब हटाने के लिए एक लंबा और धन्यवाद कार्य है, संपादक लगातार कुछ फिर से जोड़ देगा। इसलिए कचरे से एसवीजी की सफाई केवल काम के अंत में की जाती है। और अधिमानतः एक स्वचालित रूप में, चूंकि तैयार किए गए विकल्प हैं, उदाहरण के लिए एक ही svgo ।

ड्रा बेजियर कर्व्स और स्ट्रेट लाइन्स (Shift + F6) नामक टूल खोजें। इसके साथ, हम वस्तुओं के चारों ओर बंद आकृति खींचेंगे। हमारे कार्य में, हमें सभी भवनों की रूपरेखा तैयार करने की आवश्यकता है। उदाहरण के लिए, हम खुद को छह तक सीमित रखते हैं, लेकिन वास्तविक परिस्थितियों में सभी आवश्यक वस्तुओं को सही ढंग से रेखांकित करने के लिए समय पूर्व आवंटित करना सार्थक होगा। हालांकि अक्सर ऐसा होता है कि कई समान इकाइयां हैं, एक इमारत पर समान मंजिल बिल्कुल समान हो सकते हैं। ऐसे मामलों में, आप थोड़ा गति कर सकते हैं और घटता को कॉपी-पेस्ट कर सकते हैं।

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

अब, एक पथ चुना गया - भवन के चारों ओर एक वक्र, आप उन सभी को Ctrl + A या मेनू> संपादित करें> सभी चुनें और उसी समय संपादित कर सकते हैं। आपको उन सभी को फिल और स्ट्रोक विंडो में पेंट करने की आवश्यकता है, और उसी समय वहां अतिरिक्त स्ट्रोक को हटा दें। यदि आप इसे डिजाइन कारणों से चाहते हैं, तो ठीक है, या इसे जोड़ें।

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

हमारे उदाहरण में, हम बेहतर ढंग से देखने के लिए सफेद रंग में थोड़ा हाइलाइट छोड़ते हैं कि हम किन इमारतों के साथ काम करते हैं, सब कुछ सहेजते हैं और आसानी से ब्राउज़र और अधिक परिचित कोड संपादक के पास चले जाते हैं।

मूल उदाहरण

चलिए एक खाली html पेज बनाते हैं, जिसके परिणामस्वरूप SVG को सीधे पेस्ट करते हैं और कुछ CSS जोड़ते हैं ताकि स्क्रीन से कुछ भी न निकले। टिप्पणी करने के लिए कुछ भी नहीं है।

.map { width: 90%; max-width: 1300px; margin: 2rem auto; border: 1rem solid #fff; border-radius: 1rem; box-shadow: 0 0 .5rem rgba(0, 0, 0, .3); } .map > svg { width: 100%; height: auto; border-radius: .5rem; } 

हम याद करते हैं कि हमने कक्षाओं को इमारतों में जोड़ा और उनका उपयोग किया ताकि सीएसएस कम या ज्यादा संरचित हो।

 .building { transition: opacity .3s ease-in-out; } .building:hover { cursor: pointer; opacity: .8 !important; } .building.-available { fill: #0f0 !important; } .building.-reserved { fill: #f00 !important; } .building.-service { fill: #fff !important; } 

चूंकि हमने इनस्केप में इनलाइन शैलियों को परिभाषित किया है, इसलिए हमें उन्हें सीएसएस में बाधित करने की आवश्यकता है। क्या सीएसएस में सब कुछ करना अधिक सुविधाजनक होगा? हाँ और नहीं। यह स्थिति पर निर्भर करता है। कभी-कभी कोई विकल्प नहीं होता है। उदाहरण के लिए, यदि एक डिजाइनर ने रंगीन चीजों का एक बहुत कुछ आकर्षित किया और सीएसएस में सब कुछ लपेट दिया और इसे किसी भी तरह से कम नहीं किया गया। इस उदाहरण में, मैं यह दिखाने के लिए "असुविधाजनक" विकल्प का उपयोग करता हूं कि यह समस्या हल होने के संदर्भ में विशेष रूप से डरावना नहीं है।

मान लीजिए कि हमने घरों पर ताजा डेटा प्राप्त किया, और उनकी वर्तमान स्थिति के आधार पर, विभिन्न वर्गों को उनके साथ जोड़ा:

 const data = { id_0: { status: 'service' }, id_1: { status: 'available' }, id_2: { status: 'reserved' }, id_3: { status: 'available' }, id_4: { status: 'available' }, id_5: { status: 'reserved' }, messages: { 'available': '  ', 'reserved': '', 'service': '  1-2 ' } }; const map = document.getElementById('my-map'); const buildings = map.querySelectorAll('.building'); for (building of buildings) { const id = building.getAttribute('data-building-id'); const status = data[`id_${id}`].status; building.classList.add(`-${status}`); } 

हमें ऐसा कुछ मिलता है:

कुछ वैसा ही जैसा हमें चाहिए होता है। इस स्तर पर, हमने भू-भाग पर वस्तुओं को उजागर किया है जो माउस होवर पर प्रतिक्रिया करते हैं। और मानक addEventListener के माध्यम से माउस क्लिक की प्रतिक्रिया के लिए उन्हें जोड़ना मुश्किल नहीं है।

लीडर लाइन

अक्सर ऐसी लाइनें बनाने का काम होता है जो मानचित्र पर मौजूद वस्तुओं और पृष्ठ पर मौजूद कुछ तत्वों को अतिरिक्त जानकारी के साथ जोड़ेगी, साथ ही इन समान वस्तुओं पर मँडराते समय कम से कम टूलटिप्स भी बनाएगी। इन समस्याओं को हल करने के लिए, लीडर-लाइन मिनी-लाइब्रेरी बहुत अच्छी तरह से अनुकूल है, जो हर स्वाद और रंग के लिए वेक्टर तीर बनाती है।

चलो टूलटिप्स के डेटा में मूल्य जोड़ें और इन पंक्तियों को आकर्षित करें।

 const data = { id_0: { price: '3000', status: 'service' }, id_1: { price: '3000', status: 'available' }, id_2: { price: '2000', status: 'reserved' }, id_3: { price: '5000', status: 'available' }, id_4: { price: '2500', status: 'available' }, id_5: { price: '2500', status: 'reserved' }, messages: { 'available': '  ', 'reserved': '', 'service': '   (1-2 )' } }; const map = document.getElementById('my-map'); const buildings = map.querySelectorAll('.building'); const info = map.querySelector('.info'); const lines = []; for (building of buildings) { const id = building.getAttribute('data-building-id'); const status = data[`id_${id}`].status; const price = data[`id_${id}`].price; building.classList.add(`-${status}`); const line = new LeaderLine( LeaderLine.pointAnchor(building, { x: '50%', y: '50%' }), LeaderLine.pointAnchor(info, { x: '50%', y: 0 }), { color: '#fff', startPlug: 'arrow1', endPlug: 'behind', endSocket: 'top' } ); lines.push(line); } 

जैसा कि आप देख सकते हैं, कुछ भी जटिल नहीं होता है। तत्वों के लिए लाइन में "अटैचमेंट पॉइंट" होते हैं। तत्वों के सापेक्ष इन बिंदुओं के निर्देशांक आमतौर पर प्रतिशत में निर्धारित करने के लिए सुविधाजनक होते हैं। सामान्य तौर पर, कई अलग-अलग विकल्प होते हैं, यह सूची और याद करने के लिए समझ में नहीं आता है, इसलिए मैं सिर्फ प्रलेखन के माध्यम से देखने की सलाह देता हूं। इन विकल्पों में से एक - स्टार्टलैब - एक कीमत के साथ एक छोटा टूलटिप बनाने के लिए हमारे लिए आवश्यक होगा।

 const line = new LeaderLine( LeaderLine.pointAnchor(building, { x: '50%', y: '50%' }), LeaderLine.pointAnchor(info, { x: '50%', y: 0 }), { startLabel: LeaderLine.captionLabel(`${price}/`, { fontFamily: 'Rubik Mono One', fontWeight: 400, offset: [-30, -50], outlineColor: '#555' }), color: '#fff', startPlug: 'arrow1', endPlug: 'behind', endSocket: 'top', hide: true } ); 

कोई भी एक आलेखीय संपादक में सभी युक्तियों को आकर्षित करने के लिए परेशान नहीं करता है। यदि उनके पास सुसंगत सामग्री होनी चाहिए, तो यह सुविधाजनक भी हो सकती है। खासकर अगर उन्हें अलग-अलग वस्तुओं के लिए अलग-अलग स्थिति पूछने की इच्छा है।

हम छिपा विकल्प भी जोड़ सकते हैं ताकि सभी लाइनों को झाड़ू के रूप में प्रदर्शित न किया जाए। हम उन्हें एक बार में दिखाएंगे जब आप उन इमारतों पर मंडराते हैं जिनसे वे मेल खाते हैं:

 building.addEventListener('mouseover', () => { line.show(); }); building.addEventListener('mouseout', () => { line.hide(); }); 

यहां आप अतिरिक्त जानकारी (हमारे मामले में, बस वस्तु की वर्तमान स्थिति) को जानकारी के लिए प्रदर्शित कर सकते हैं। यह लगभग वही होगा जो आवश्यक है:

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

 svg { width: 100%; height: 100%; } 

इस मामले में, एसवीजी तत्व के अनुपात निश्चित रूप से अंदर की छवि के अनुपात से मेल नहीं खाते। क्या करें?

बेमेल अनुपात

पहली चीज़ जो दिमाग में आती है वह है ऑब्जेक्ट-फिट: CSS से कवर प्रॉपर्टी। लेकिन एक बिंदु है: यह एसवीजी के साथ काम करने में सक्षम नहीं है। और यहां तक ​​कि अगर यह काम करता है, तो योजना के किनारों वाले घर योजना के किनारों से बाहर निकल सकते हैं और पूरी तरह से दुर्गम हो सकते हैं। इसलिए यहां आपको थोड़ा और जटिल तरीके से जाने की जरूरत है।

पहला कदम। एसवीजी में एक संरक्षित-अनुपात विशेषता है, जो कुछ हद तक ऑब्जेक्ट-फिट संपत्ति के समान है (बिल्कुल नहीं, निश्चित रूप से, लेकिन ...)। हमारी योजना के मुख्य एसवीजी तत्व के लिए preserveAspectRatio="xMinYMin slice" करके, हमें किनारों पर बिना विरूपण और विरूपण के बिना एक विस्तारित सर्किट मिलता है।

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

हमें सभी दिशाओं में इमारतों और चित्र के साथ परत को स्थानांतरित करने की आवश्यकता है। इसे आसान बनाएं:

 const buildingsLayer = map.querySelector('.buildings_layer'); const hammertime = new Hammer(buildingsLayer); hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL }); 

डिफ़ॉल्ट रूप से, हथौड़ा.जेएस में svaypas की मान्यता भी शामिल है, लेकिन हमें नक्शे पर उनकी आवश्यकता नहीं है, इसलिए उन्हें तुरंत बंद करें ताकि हमारे सिर को मूर्ख न करें:

 hammertime.get('swipe').set({ enable: false }); 

अब आपको किसी तरह समझने की ज़रूरत है कि नक्शे को केवल उसके किनारों पर स्थानांतरित करने के लिए आपको क्या पोस्ट करने की आवश्यकता है, लेकिन आगे नहीं। हमारे सिर में दो आयतों के एक सरल प्रतिनिधित्व के साथ, हम समझते हैं कि इसके लिए हमें चारों तरफ से मूल तत्व (हमारे मामले में SVG) से इमारतों के साथ परत के इंडेंटेशन का पता लगाने की आवश्यकता है। GetBoundingClientRect बचाव के लिए आता है:

 const layer = buildingsLayer.getBoundingClientRect(); const parent = svg.getBoundingClientRect(); const offsets = { top: layer.top - parent.top, bottom: layer.bottom - parent.bottom, right: layer.right - parent.right, left: layer.left - parent.left, }; 

और ऐसा करने के लिए हमारे पास अभी भी कोई और अधिक सभ्य (और स्थिर कार्य) तरीका क्यों नहीं है? GetBoundingClientRect को हर बार खींचना प्रदर्शन के मामले में बहुत बुरा है, लेकिन चुनाव बहुत समृद्ध नहीं है, और यह अवरोध को नोटिस करना लगभग असंभव है, इसलिए हम समय से पहले अनुकूलन के साथ नहीं आए हैं जहां सब कुछ ठीक काम करता है। एक तरह से या किसी अन्य, यह हमें इमारतों के साथ परत की स्थिति की जांच करने और सब कुछ स्थानांतरित करने की अनुमति देता है अगर यह समझ में आता है:

 let translateX = 0; let translateY = 0; hammertime.on('pan', (e) => { const layer = buildingsLayer.getBoundingClientRect(); const parent = svg.getBoundingClientRect(); const offsets = { top: layer.top - parent.top, bottom: layer.bottom - parent.bottom, right: layer.right - parent.right, left: layer.left - parent.left, }; const speedX = e.velocityX * 10; const speedY = e.velocityY * 10; if (speedX > 0 && offsets.left < 0) { //  } else if (speedX < 0 && offsets.right > 0) { //  } if (speedY > 0 && offsets.top < 0) { //  } else if (speedY < 0 && offsets.bottom > 0) { //   } buildingsLayer.setAttribute('transform', `translate(${translateX} ${translateY})`); }); 

किनारों पर, यह आमतौर पर धीमा होने के लायक होता है ताकि अचानक रुकने या झटके न हों। इस प्रकार, सब कुछ इस तरह से आगे और पीछे चला जाता है:

 if (speedX < -offsets.left) { translateX += speedX; } else { translateX += -offsets.left * speedX / 10; } 

मंदी के लिए कई विकल्प हैं। यह सबसे आसान है। और हां, यह बहुत सुंदर नहीं है, लेकिन यह एक कॉर्क और स्पष्ट के रूप में गूंगा है। ऐसे उदाहरणों में गुणांक आमतौर पर कार्ड के वांछित व्यवहार के आधार पर, आंख से चुना जाता है।

यदि आप एक ब्राउज़र खोलते हैं और डेवलपर के टूल में विंडो के आकार के साथ खेलते हैं, तो आप पा सकते हैं कि कुछ गलत हुआ ...

अशुद्ध शक्तियाँ

डेस्कटॉप डिवाइस पर, सब कुछ काम करता है, लेकिन मोबाइल पर, जादू होता है, अर्थात्, नक्शे को स्थानांतरित करने के बजाय, शरीर तत्व चलता है। ऊ-ऊ-ऊ-ऊ-uuuu! केवल वहाँ कास्ट पर्याप्त नहीं है। यद्यपि ठीक है, ऐसा इसलिए होता है क्योंकि कुछ कहीं पर बह निकला है और कुछ ओवरराइट को ओवरफ्लो सेट नहीं किया गया है: छिपा हुआ। लेकिन हमारे मामले में, ऐसा हो सकता है कि कुछ भी नहीं चलता है।

ग्रीन टाइपसेटर्स के लिए एक पहेली: इसमें g तत्व है, svg तत्व के अंदर, div एलिमेंट के अंदर, बॉडी एलिमेंट के अंदर, html एलिमेंट के अंदर। Doctype स्वाभाविक रूप से HTML। यदि आप ट्रांसफ़ॉर्म जोड़ते हैं: g एलिमेंट को ड्रैग करने के लिए इसे ट्रांसलेट (...) करें, तो लैपटॉप पर वह चल जाएगा, जैसा कि यह इरादा था, लेकिन फोन पर यह भी नहीं चलेगा। कंसोल में कोई त्रुटि नहीं हैं। लेकिन एक बग जरूर है। ब्राउज़र अंतिम क्रोम है वहां और वहां दोनों। सवाल यह है कि क्यों?

मेरा सुझाव है कि उत्तर देखने से पहले आप Google के बिना 10 मिनट के बारे में सोचें।

 svg { touch-action: none !important; } 

लेकिन हमारी भेड़ों पर वापस जाएं और परिणाम देखें (यह बेहतर है, ज़ाहिर है, एक अलग टैब में खोलें)

मैंने किसी भी फैशनेबल ढांचे के लिए कोड को अनुकूलित नहीं करने का फैसला किया, ताकि यह एक तटस्थ निराकार रिक्त के रूप में बना रहे, जिससे आप अपने घटकों को बनाते समय निर्माण कर सकते हैं।

परिणाम क्या है?

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