गैलेक्सी मैप ऑन थ्री.जेएस / वेबजीएल

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

मैं खुद को आरंभिक कोड और विवरण नहीं दूंगा। तीनों का विवरण, नेटवर्क इस बारे में जानकारी से भरा है।
और हमारा पहला कदम ...

चरण 1 - काले और काले रंग की पृष्ठभूमि

पहले हमें एक सब्सट्रेट बनाने की आवश्यकता है। यह केवल एक पंक्ति में किया जाता है:

renderer.setClearColor(0x000000); 

यह इस तरह दिखेगा:

स्पष्ट रूप से यह मालेविच का आयत है, और यही वह जगह है जहाँ हम पहला कदम खत्म करते हैं।
क्या यह वास्तव में सरल नहीं है?

चरण 2 - और सितारों से भरा आकाश

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

 //     var countStars = 20000; var a = 1.1; ar b = 0.17; var windings = 3.7; var tMax = 2.0 * Math.PI * windings; var drift = 0.3 

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

 //   for (var i = 0; i < countStars; i++) { // +    var t = tMax * Math.random(); var x = a * Math.exp(b * t) * Math.cos(t); x = x + (drift*x*Math.random()) - (drift*x*Math.random()); var y = a * Math.exp(b * t) * Math.sin(t); y = y + (drift*y*Math.random()) - (drift*y*Math.random()) //    if (Math.random() > 0.5) { list.push({x:vec.x, y:vec.y}); } else { //  list.push({x:-vec.x, y:-vec.y}); } } 

चूंकि अंकों की संख्या बहुत बड़ी है, हम उन्हें कणों की एक प्रणाली के साथ व्यवस्थित करते हैं, बहुत कम अंतराल होंगे:

 // var geometry = new THREE.Geometry(); //   var material = new THREE.ParticleSystemMaterial({ color: 0xeeeeee, size: 3 }); //  var particleSystem = new THREE.ParticleSystem( geometry, material ); //  for (var i = 0; i < list.length; i++) { addStar(list[i].x, list[i].y); } scene.add(particleSystem); 

इस स्तर पर AddStar फ़ंक्शन:

 var addStar = function(x, y) { var v = new THREE.Vector3(); vx = x * 10; vy = y * 10; geometry.vertices.push(v); } 

और हमने किया ...

एक छेद के केंद्र में कुछ, चलो एक करीब देखो:

घृणित, लेकिन ठीक करना मुश्किल नहीं है, दो चक्र जोड़ें।
पहला चक्र हम बिंदुओं की एक अंगूठी उत्पन्न करते हैं:

 for (var i = 0; i < 4000; i++) { var vec = {x:Math.sRandom(0.8, 1.7),y:0}; var angle = Math.sRandom(0, Math.PI*2.5); vec = VectorRot(vec, angle); list.push({x:vec.x, y:vec.y}); } 

दूसरा चक्र बिंदुओं का एक चक्र उत्पन्न करता है:

 for (var i = 0; i < 4000; i++) { var vec = {x:Math.sRandom(0.001, 0.8),y:0}; var angle = Math.sRandom(0, Math.PI*2.5); vec = VectorRot(vec, angle); list.push({x:vec.x, y:vec.y}); } 

महान, हमारे पास पहले से ही एक आकाशगंगा जैसी कोई चीज है। लेकिन हमें अपने सितारों के लिए नाम चाहिए। आपके पास% उपयोगकर्ता नाम% है, लेकिन स्टार नहीं है। क्या यह उचित है?

चरण 3 - स्टार का नाम% स्टारनाम% है

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

 //        var projector = new THREE.Projector(); var vector = new THREE.Vector3( ( e.pageX / window.innerWidth ) * 2 - 1, - ( e.pageY / window.innerHeight ) * 2 + 1, 0.5 ); var pos = projector.unprojectVector( vector, e.data.self.camera ); //      e.data.self.sceneNames = new THREE.Scene(); //  KDTree      var items = e.data.self.tree.nearest({x:pos.x,y:pos.y}, 1, 100); //   label for (var i = 0; i < items.length; i++) { e.data.self.sceneNames.add(e.data.self.labelBasic(items[i][0].name,vector.x, vector.y, 60, "#f00")); } 

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

चरण 4 - अराजकता के लिए आदेश लाना

इसलिए, हमारे पास पहले से ही एक आकाशगंगा है, सितारों के नाम हैं, हम उन्हें देख सकते हैं, लेकिन चूंकि हमारे पास एक नक्शा है, तो हमें अंतरिक्ष के विभाजन की आवश्यकता है। अगर मैं कहता हूं: "सुनो, TX-82 प्रणाली पर उड़ो और मुझे केफिर खरीदो," यह स्पष्ट नहीं होगा कि कहां उड़ना है, क्योंकि क) यह तथ्य नहीं है कि TX-82 नाम वाला सिस्टम केवल एक ही है, ख) 20k सितारों के बीच प्रणाली को कैसे खोजना है ? ग) इस तथ्य से नहीं कि केफिर पहले ही वितरित किया जा चुका है ।
आइए, इस तरह के ब्रेकडाउन बनाते हैं: क्वाडेंट हैं, सेक्टर हैं। पूरी आकाशगंगा को 4 * 4 = 16 चतुर्भुजों में विभाजित किया गया है, प्रत्येक तरफ 4। प्रत्येक चतुर्थांश, बदले में, 4 क्षेत्रों में विभाजित है। यानी हम सिस्टम को क्वाड्रंट # qX-qY - सेक्टर (sx-sy) - सिस्टम% स्टारनाम% के रूप में संबोधित कर सकते हैं।
हम इसे तुच्छ लाइनों के साथ करते हैं, फिर से, मैं कोड नहीं देता, यह बड़ा और दिलचस्प नहीं है - बस प्रत्येक पंक्ति की शुरुआत और अंत के निर्देशांक की गणना करना। कौन परवाह करता है - जीथब में आपका स्वागत है।
परिणाम, जैसा कि आपने अनुमान लगाया होगा, लेख के शीर्ष लेख में है। लेकिन मैं एक और तस्वीर दूंगा:

आपको केवल संकेतन जोड़ने की जरूरत है - पाठ, जैसे (1-1), (3-3), (2-3)। एक ग्रिड है, लेकिन कोई संकेतन नहीं है। जोड़ें।

चरण 5 - चिप और डेल

तस्वीर में ये नंबर ऊपर हैं, यह गलतफहमी से बचाएं। या कम से कम कोशिश करें। हां। HTML और CSS की दो लाइनें:

 <span id="quad" style="position:absolute;left:100px;top:10px;color:white;font-family:Arial;font-size:19px">#xy Quadrant</span> <span id="sector" style="position:absolute;left:100px;top:30px;color:#555;font-family:Arial;font-size:19px">(sx-sy) Sector</span> 

चरण 6 - मैं कहाँ हूँ?

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

हाँ, कोड है:

 //  var addMarker = function(x, y) { // var g = new THREE.Geometry(); //   var m = new THREE.ParticleBasicMaterial({ color: 0x550000, size: 35 }); for (var i = 0; i < 100; i++) { g.vertices.push({x:x,y:y}); }; //  var p = new THREE.ParticleSystem( g, m ); this.sceneLabel.add(this.labelBasic(">> ", x , y , 70, "#f00")); this.sceneLabel.add(this.labelBasic(" <<", x , y , 70, "#f00")); this.sceneLabel.add(this.labelBasic(this.points[this.here].name, x , y , 60, "#f00")); this.sceneLabel.add(p); } 

निष्कर्ष

इसलिए, हमने एक नक्शा बनाया। मैंने लेख में कई चीजों का हवाला नहीं दिया, उदाहरण के लिए, कुंजी को दबाकर मानचित्र को स्थानांतरित करना, ज़ूम करना, कार्य को तीन बार में विस्तार से नहीं बताया, मेरी राय में यह गौण है और इतना दिलचस्प नहीं है।
जीथब: जीथुब. com/ MagistrAVSH / galmap
डेमो नवीनतम एफएफ, क्रोम, ओपेरा में काम करता है। IE11 में यह खराब तरीके से काम करेगा, आपको कोई भी लेबल दिखाई नहीं देगा, यह टेढ़े-मेढ़े WebGL का समर्थन करता है। magistravsh.imtqy.com/galmap

भविष्य के लिए स्टार सिस्टम के नक्शे के बारे में लेख लिखने के लिए विचार हैं, नेबुला जनरेटर के बारे में, विभिन्न वस्तुओं के जनरेटर, और सामान्य रूप से शानदार अंतरिक्ष के विषय पर :) यदि आप रुचि रखते हैं, तो लिखें।

अंत में, स्पॉइलर के नीचे, कुछ और स्क्रीनशॉट।