स्टार सिस्टम मैप थ्री.जेएस / वेबजीएल पर

अच्छा दिन हो या रात, हब्र!
हमारे क्षेत्र में, हमेशा की तरह, सर्दियों में अप्रत्याशित रूप से आया, लेकिन अंतरिक्ष में कोई मौसम नहीं हैं, इसलिए फिर से हम वेबलॉग पर विभिन्न अंतरिक्ष चीजों के बारे में बात करेंगे। आकाशगंगा के नक्शे पर पिछला लेख यहाँ पढ़ा जा सकता है । आज हम स्टार सिस्टम के नक्शे के बारे में बात करेंगे।
हमेशा की तरह, कहानी चरणों में जाएगी। इसलिए ...

चरण ० - हम क्या करना चाहते हैं?

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

चरण 1 - स्टार और पृष्ठभूमि

फिर से मालेविच आयत बनाएँ:

renderer.setClearColor(0x000000); 

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

 this.addStar = function(pos) { //   var radius = 50; //          var canvas = document.createElement('canvas'); canvas.width = radius*2; canvas.height = radius*2; // -    var ctx = canvas.getContext('2d'); ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(radius,radius,radius,0,2*Math.PI); ctx.fill(); //     var texture = new THREE.Texture(canvas) texture.needsUpdate = true; //    var vertex = new THREE.Vector3(); vertex.x = pos.x; vertex.y = pos.y; vertex.z = 0; //  var geometry = new THREE.Geometry(); //        geometry.vertices.push( vertex ); //  material = new THREE.ParticleBasicMaterial( { size: 215, map: texture, transparent: true } ); //        particles = new THREE.ParticleSystem( geometry, material ); particles.sortParticles = true; this.scene.add(particles); } 

इसी तरह, स्टार सिस्टम की अन्य सभी वस्तुओं को जोड़ा जाता है।

चरण 2 - ग्रह

हम ग्रहों के मार्करों को खींचते हैं, हम कुछ भी विशेष नहीं सोचते हैं, हम एक स्ट्रोक के साथ एक सरल चक्र बनाते हैं।

 var radius = 15; // -   var ctx = canvas.getContext('2d'); ctx.strokeStyle = "#666"; ctx.fillStyle = "#444"; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(radius,radius,radius-2,0,2*Math.PI); ctx.fill(); ctx.stroke(); 

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

 this.addOrbit = function(pos, radius) { //  . var resolution = 170; var size = 360 / resolution; //   var geometry = new THREE.Geometry(); var material = new THREE.LineBasicMaterial( { color: 0x777777} ); for(var i = 0; i <= resolution; i++) { //  , ..   *  * 1 . var segment = ( i * size ) * Math.PI / 180; //   \   ,    \y   ,    , ..  . geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * radius, Math.sin( segment ) * radius ), 0 ) ); } //      var line = new THREE.Line( geometry, material ); line.position.x = pos.x; line.position.y = pos.y; this.scene.add(line); return line; } 

पहले से बेहतर, लेकिन फिर भी सुधार। प्रारूप में ग्रहों के नाम जोड़ें "<तारा प्रणाली का नाम> ग्रह <तारा से ग्रह की संख्या>"। मैं पाठ जोड़ने का कार्य नहीं करता, यह दिलचस्प नहीं है। वही कण प्रणाली और कैनवास जिसमें पाठ खींचा जाता है।

चरण 3 - द मून्स

यहां सब कुछ सरल है, ड्राइंग कोड समान है, बस स्थिति को केंद्र में न रखें, लेकिन एक विशिष्ट ग्रह पर + ग्रह से ऑफसेट:

 var vertex = new THREE.Vector3(); vertex.x = planetPos.x + pos.x; vertex.y = planetPos.y + pos.y; vertex.z = 0; 

प्लस भी एक कक्षा लटका:

 //     ,         moon.orbit = this.addOrbit(planetPos, vectorLength(pos)); 

चरण 4 - जंपगेट्स

एक उदाहरण के लिए तस्वीर में बाबुल 5 श्रृंखला से जंपगेट।
अब तक, हम खुद अपना गेट नहीं बनाएंगे, लेकिन सिर्फ लाल मार्कर त्रिकोण बनाएं और नाम लटकाएं।

 // -   var ctx = canvas.getContext('2d'); ctx.strokeStyle = "#333"; ctx.fillStyle = "#f00"; ctx.lineWidth = 7; ctx.beginPath(); ctx.moveTo(len/2, 0); ctx.lineTo(0, len); ctx.lineTo(len, len); ctx.closePath(); ctx.stroke(); ctx.fill(); 

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

 jgs:{ 0: {type:"jg", names: [ "Jumpgate Main Shipyard", ], id: 0, pos: {x:500, y:-50}, link: 1}, 1: {type:"jg", names: [ "Jumpgate Solar Plants" ], id: 1, pos: {x:-440, y:400}, link: 2}, 2: {type:"jg", names: [ "Jumpgate Trade Station" ], id: 2, pos: {x:200, y:-130}, link: 0}, 3: {type:"jg", names: [ "Jumpgate Ore Mining" ], id: 3, pos: {x:-300, y:-280}, link: 1}, 4: {type:"jg", names: [ "Jumpgate Cross" ], id: 4, pos: {x:-640, y:10}, link: 2} }, 

हमारे पास हर जगह एक लिंक फ़ील्ड है - यह उस आईडी को इंगित करता है जिससे कनेक्शन हो रहा है।

 //    for (var v in list) { //    (  ) list[data.jgs[v].id].link.push(this.addLine(data.jgs[v].pos, data.jgs[data.jgs[v].link].pos)); list[data.jgs[v].link].link.push(this.addLine(data.jgs[v].pos, data.jgs[data.jgs[v].link].pos)); } 

यानी एक गेट की स्थिति से दूसरे की स्थिति में लाइनें जोड़ें। और विपरीत दिशा में भी, यह हमारे लिए उपयोगी होगा।
प्रयासों का परिणाम:

चरण 5 - अन्तरक्रियाशीलता जोड़ें

ग्रहों, चन्द्रमाओं, द्वारों को जोड़ने के लिए निम्नलिखित पंक्तियों को कार्यों में जोड़ें:
Jumpgate:

 this.domEvent.bind(particles, "mouseover", function(e){ e.target.material.color.setHex(0xffffff); //       for (var i = 0; i < e.target.link.length; i++) { e.target.link[i].material.color.setHex(0xffffff); } for (var i = 0; i < e.target.link2.length; i++) { e.target.link2[i].material.color.setHex(0xffffff); } //  e.target.orbit.hover(); }); this.domEvent.bind(particles, "mouseout", function(e){ e.target.material.color.setHex(0xaaaaaa); //       for (var i = 0; i < e.target.link.length; i++) { e.target.link[i].material.color.setHex(0xaaaaaa); } for (var i = 0; i < e.target.link2.length; i++) { e.target.link2[i].material.color.setHex(0xaaaaaa); } //  e.target.orbit.unhover(); }); 

चाँद की:

 this.domEvent.bind(particles, "mouseover", function(e){ e.target.material.color.setHex(0xffffff); e.target.orbit.hover(); }); this.domEvent.bind(particles, "mouseout", function(e){ e.target.material.color.setHex(0xaaaaaa); e.target.orbit.unhover(); }); 

ग्रह:

 this.domEvent.bind(particles, "mouseover", function(e){ e.target.material.color.setHex(0xffffff); e.target.orbit.hover(); }); this.domEvent.bind(particles, "mouseout", function(e){ e.target.material.color.setHex(0xaaaaaa); e.target.orbit.unhover(); }); 

यहां हम गेट्स - संचार और कक्षाओं के लिए हैंडलर माउसओवर, माउसआउट, और ग्रहों और चंद्रमाओं - कक्षाओं के लिए हाइलाइट करते हैं।
तीन .js बॉक्स के बाहर कण प्रणाली के साथ चौराहों के लिए जाँच का समर्थन नहीं करता है, इसलिए मैं googled, इसे खत्म कर दिया और तीन। Js फ़ाइल में इसे खराब कर दिया, कण प्रणाली के कोने के साथ चौराहों के लिए जाँच के समारोह में:

यह इस तरह दिखता है:

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

सिस्टम में हमारी स्थिति का एक मार्कर जोड़ें। हम कुछ अलौकिक का आविष्कार नहीं करेंगे, और बस एक वर्ग और एक शिलालेख जोड़ें।

निष्कर्ष

ठीक है, जैसे वे चाहते थे सब कुछ किया। बेशक, बहुत कुछ जोड़ा जा सकता है, उदाहरण के लिए, डबल स्टार, क्षुद्रग्रह बेल्ट, गैस बादल, लेकिन, जैसा कि वे कहते हैं, अच्छे का सबसे अच्छा दुश्मन। हमेशा की तरह, जीथब पर सभी कोड, डेमो के लिए एक लिंक वहीं। क्रोम, फ़ायरफ़ॉक्स में काम करता है, सफारी, ओपेरा और क्रोम-आकार के ब्राउज़रों के एक पूरे समूह में काम करना चाहिए। IE11 समर्थित नहीं है।
डेमो: magistravsh.imtqy.com/starsystemmap
कोड: github.com/MagistrAVSH/starsystemmap
अगली बार मुझे विभिन्न वस्तुओं, जहाजों, स्टेशनों की पीढ़ी के बारे में लिखने की उम्मीद है, आप कुछ और कर सकते हैं :)