एचटीएमएल 5 सर्कुलर पैनोरमा तीन.जेएस पर

हाल ही में, अधिक से अधिक आप इंटरनेट पर एक परिपत्र चित्रमाला पर ठोकर खा सकते हैं। उदाहरण के लिए एक ही पनीर घर ले लो। यह शानदार छोटी चीज जल्द ही रेस्तरां, होटल, होटल आदि के लिए आम हो सकती है। हालांकि, अगर मेरे कंप्यूटर पर फ्लैश की समस्या है, तो मुझे क्या करना चाहिए? यह एक वास्तविक स्थिति है जो आईटी विभाग की कड़ी सुरक्षा नीति के कारण मेरे काम में आई है।
इस छोटे से लेख में, मैं आपको उन कठिनाइयों के बारे में बताऊंगा, जो मुझे WebGL + THREE.js पर एक इंटरैक्टिव पैनोरमा बनाने में आई थीं।


पैनोरमा आवश्यकताओं को परिभाषित करें:

• हम WebGL का उपयोग करते हैं, क्योंकि कैनवास पैनोरमा बस भयानक हैं, और एक और नया IE का समर्थन करता है ;
• माउस बटन को खींचकर और पकड़कर पैनोरमा देखना;
• सक्रिय तत्वों को ध्यान देने और जानकारी प्रदान करने के लिए डिज़ाइन किया गया;
• एक पृष्ठ पर कई पैनोरमा देखने की क्षमता।

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

कंपनी का उत्पादन

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

mesh.scale.x = -1; 

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

 mesh = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' ) side: THREE.BackSide } ) ); 

वैसे, यह THREE.js की दुनिया में एक विशिष्ट वस्तु निर्माण है। एक नियम के रूप में, वस्तु की ज्यामिति बनाई जाती है, सामग्री (बनावट), और फिर दृश्य में जोड़ा जाता है।

तत्वों

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



लेकिन यहां हम आश्चर्य में हैं। THREE.js के प्रतिपादन के लिए दो "वर्ग" हैं: WebGLRenderer और CanvasRenderer । और दो प्रकार की सरल वस्तुएँ: कण (कण) और स्प्राइट । WebGL पार्टिकल के साथ स्प्राइट और कैनवस के साथ काम करता है। उसी समय, हमें WebGL की आवश्यकता है, और स्प्राइट ऑब्जेक्ट का अंतरिक्ष में कोई वॉल्यूम नहीं है। यही है, माउस के साथ उस पर प्राप्त करना असंभव है।
ठीक है, चलो ले जाएं और एक समान स्प्राइट को विमान ज्यामिति (प्लेनग्रोमेट्री) के साथ 3 डी ऑब्जेक्ट का उपयोग करके अनुकरण करें:

 var itemGeometry = new THREE.PlaneGeometry(35, 35), pointMapHovered = THREE.ImageUtils.loadTexture( "img/information-hover.PNG" ), pointMap = THREE.ImageUtils.loadTexture( "img/information-unhover.PNG" ); point = new THREE.Mesh( itemGeometry, new THREE.MeshBasicMaterial({ map: pointMap, transparent:true // ,  ,  -    }) ); 

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

डेटा

चूंकि यह एक पृष्ठ पर कई पैनोरमा को देखने में सक्षम होना चाहिए, इसलिए सभी डेटा को JSON में रखना बेहतर है। कुछ इस तरह:

 { "points": [ { "coords": { "x": 302.0282521739266, "y": -32.30522607035554, "z": 389.86440214968525 }, "header": "", "body": "." }, ], "texture": "panorama.jpg", "name": " " } 

विभिन्न पैनोरामाओं को देखने के लिए, हम क्षेत्र की बनावट की जगह लेंगे, बिंदुओं को हटाएंगे और निर्देशांक द्वारा नए निर्माण करेंगे।

क्या हुआ?

मैं आपको देखने के लिए आमंत्रित करता हूं