{"id":203378,"date":"2013-11-27T20:52:03","date_gmt":"2013-11-27T16:52:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=203378"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=203378","title":{"rendered":"\u041a\u0430\u0440\u0442\u0430 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430 Three.js\/WebGL<\/span>"},"content":{"rendered":"
\n
<\/div>\n

\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043d\u044f \u0438\u043b\u0438 \u043d\u043e\u0447\u0438, \u0425\u0430\u0431\u0440!
\u0412 \u043d\u0430\u0448\u0438\u0445 \u043a\u0440\u0430\u044f\u0445 \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0438\u043c\u0430 \u043f\u0440\u0438\u0448\u043b\u0430 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e, \u043d\u043e \u0432 \u043a\u043e\u0441\u043c\u043e\u0441\u0435 \u0432\u0440\u0435\u043c\u0435\u043d \u0433\u043e\u0434\u0430 \u043d\u0435\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0448\u0442\u0443\u043a\u0430\u0445 \u043d\u0430 webgl. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u043a\u0430\u0440\u0442\u0435 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0436\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u043e \u043a\u0430\u0440\u0442\u0430 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.
\u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u043f\u043e\u0439\u0434\u0435\u0442 \u043f\u043e \u0448\u0430\u0433\u0430\u043c. \u0418\u0442\u0430\u043a\u2026
<\/a> <\/p>\n

\u0428\u0430\u0433 0 \u2014 \u0427\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c?<\/h4>\n

\u041a\u0430\u0440\u0442\u0430 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u2014 \u043a\u0430\u043a\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0432 \u043d\u0435\u0439 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c? \u041d\u0443 \u043f\u0435\u0440\u0432\u043e\u0435 \u2014 \u044d\u0442\u043e \u0437\u0432\u0435\u0437\u0434\u0430. \u0412\u0442\u043e\u0440\u043e\u0435 \u2014 \u043f\u043b\u0430\u043d\u0435\u0442\u044b, \u0442\u0440\u0435\u0442\u044c\u0435 \u2014 \u043b\u0443\u043d\u044b.
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0438 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u2014 Jumpgate, \u0438\u043b\u0438 \u041f\u0440\u044b\u0436\u043a\u043e\u0432\u044b\u0435 \u0412\u0440\u0430\u0442\u0430 \u0438\u043b\u0438 \u0432 \u0441\u0440\u0435\u0434\u0435 \u043a\u043e\u0441\u043c\u043e\u0441\u0438\u043c\u0449\u0438\u043a\u043e\u0432 \u0438\u0445 \u0437\u043e\u0432\u0443\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u0435\u0439\u0442\u0430\u043c\u0438. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u043a\u0438, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f.
\u0422\u0430\u043a\u0436\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.
\u0415\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0441\u0442\u0435\u0439: \u043d\u0438\u0447\u0435\u0433\u043e \u0440\u0430\u0441\u043a\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u043f\u0443\u0441\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u0447\u0435\u0440\u043d\u043e-\u0431\u0435\u043b\u043e\u0435. \u0412\u0442\u043e\u0440\u043e\u0435 \u2014 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043f\u043b\u0430\u043d\u0435\u0442 \u0438 \u043b\u0443\u043d. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e, \u043d\u043e \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0435 \u0432 \u0442\u0435\u043c\u0443.<\/p>\n

\u0428\u0430\u0433 1 \u2014 \u0417\u0432\u0435\u0437\u0434\u0430 \u0438 \u0444\u043e\u043d<\/h4>\n

\u0421\u043d\u043e\u0432\u0430 \u0440\u0438\u0441\u0443\u0435\u043c \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u041c\u0430\u043b\u0435\u0432\u0438\u0447\u0430: <\/p>\n

renderer.setClearColor(0x000000); <\/code><\/pre>\n
  \u041d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u0442\u0430\u043a\u0436\u0435 \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u0437\u0432\u0435\u0437\u0434\u0443, \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u043b\u044b\u0439 \u043a\u0440\u0443\u0433.
  \u041d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0443\u0433 \u043b\u0435\u0433\u043a\u043e, \u0430 \u0432\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435. \u042f \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b c Three.js, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0443\u0436\u043d\u043e \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u044d\u0442\u0443 \u0434\u0435\u0442\u0430\u043b\u044c, \u0432\u0434\u0440\u0443\u0433 \u0435\u0449\u0451 \u043a\u0442\u043e-\u0442\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0435\u0442\u0441\u044f.
  \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0438\u0438 \u043a\u0430\u043c\u0435\u0440\u044b \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043d\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e(\u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438 \u043f\u0440\u0438\u0431\u043b\u0438\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u0437\u043d\u044f \u0438\u0437 \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u0430\u0440\u0442\u0430), \u043d\u043e \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b \u0431\u044b\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435(\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u0441\u043a\u043e\u043f\u043b\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438). \u041e\u0431\u044a\u0435\u043a\u0442 THREE.Mesh \u0442\u0430\u043a\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0434\u0430\u0435\u0442, \u0437\u0434\u0435\u0441\u044c \u043b\u0443\u0447\u0448\u0435, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c THREE.ParticleSystem.
  \u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u043e\u043b\u043d\u044b\u0439 \u043b\u0438\u0441\u0442\u0438\u043d\u0433 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438:  <\/p>\n
this.addStar = function(pos) {     \/\/\u0417\u0430\u0434\u0430\u0435\u043c \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430     var radius = 50;     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u0430\u043d\u0432\u0430\u0441 \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432 \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u0430\u0432\u043d\u044b\u0439 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0443 \u043a\u0440\u0443\u0433\u0430     var canvas = document.createElement('canvas');     canvas.width = radius*2;     canvas.height = radius*2;     \/\/\u0417\u0430\u0434\u0430\u0435\u043c \u0445\u0430\u0440-\u043a\u0438 \u043a\u0440\u0443\u0433\u0430 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c     var ctx = canvas.getContext('2d');     ctx.fillStyle = "#fff";     ctx.beginPath();     ctx.arc(radius,radius,radius,0,2*Math.PI);     ctx.fill();     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u0443 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0430\u043d\u0432\u0430\u0441\u0430     var texture = new THREE.Texture(canvas)      texture.needsUpdate = true;     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0442\u043e\u0447\u043a\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0437\u0432\u0435\u0437\u0434\u044b     var vertex = new THREE.Vector3();     vertex.x = pos.x;     vertex.y = pos.y;     vertex.z = 0;     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e     var geometry = new THREE.Geometry();     \/\/\u0412 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0435\u0440\u0448\u0438\u043d \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438 \u0437\u0430\u043d\u043e\u0441\u0438\u043c \u0432\u044b\u0448\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443     geometry.vertices.push( vertex );     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b     material = new THREE.ParticleBasicMaterial( { size: 215, map: texture, transparent: true } );     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0447\u0430\u0441\u0442\u0438\u0446 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0451 \u0432 \u0441\u0446\u0435\u043d\u0443     particles = new THREE.ParticleSystem( geometry, material );     particles.sortParticles = true;     this.scene.add(particles); } <\/code><\/pre>\n
  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.  <\/p>\n
<\/div>\n
  <\/p>\n
\u0428\u0430\u0433 2 \u2014 \u041f\u043b\u0430\u043d\u0435\u0442\u044b<\/h4>\n
  \u0420\u0438\u0441\u0443\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043f\u043b\u0430\u043d\u0435\u0442, \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043a\u0440\u0443\u0433 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439.  <\/p>\n
var radius = 15; \/\/\u0417\u0430\u0434\u0430\u0435\u043c \u0445\u0430\u0440-\u043a\u0438 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c 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(); <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u041f\u0440\u043e\u0441\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430, \u043d\u0443\u0436\u043d\u044b \u0435\u0449\u0451 \u043e\u0440\u0431\u0438\u0442\u044b. \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u043c \u0438\u0445 \u0440\u0443\u043a\u0430\u043c\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0443\u0442\u044c-\u0447\u0443\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0441 \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439.   <\/p>\n
this.addOrbit = function(pos, radius) {     \/\/\u0417\u0430\u0434\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430.      var resolution = 170;     var size = 360 \/ resolution;     \/\/\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b     var geometry = new THREE.Geometry();     var material = new THREE.LineBasicMaterial( { color: 0x777777} );     for(var i = 0; i <= resolution; i++) {         \/\/\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0443\u0433\u043e\u043b \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u0442.\u0435. \u043d\u0430\u0448 \u0440\u0430\u0437\u043c\u0435\u0440 * \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 * 1 \u0440\u0430\u0434\u0438\u0430\u043d.         var segment = ( i * size ) * Math.PI \/ 180;         \/\/\u0412\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043a\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0430\u043a \u043a\u043e\u0441\u0438\u043d\u0443\u0441\\\u0441\u0438\u043d\u0443\u0441 \u0443\u0433\u043b\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u0445\\y \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u0438\u0447\u043d\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0443\u0441\u0430, \u0438 \u0443\u043c\u043d\u043e\u0436\u0430\u0435\u043c \u043d\u0430 \u0440\u0430\u0434\u0438\u0443\u0441, \u0442.\u0435. \u043e\u0442\u0434\u0430\u043b\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443.         geometry.vertices.push( new THREE.Vertex( new THREE.Vector3( Math.cos( segment ) * radius, Math.sin( segment ) * radius ), 0 ) );              }     \/\/\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043b\u0438\u043d\u0438\u044e \u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0435\u0451 \u043f\u043e\u0437\u0438\u0446\u0438\u044e     var line = new THREE.Line( geometry, material );     line.position.x = pos.x;     line.position.y = pos.y;     this.scene.add(line);      return line;  } <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  \u0423\u0436\u0435 \u043b\u0443\u0447\u0448\u0435, \u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043c \u0435\u0449\u0451. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u0430\u043c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 "<\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b> Planet <\u043d\u043e\u043c\u0435\u0440 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u043e\u0442 \u0437\u0432\u0435\u0437\u0434\u044b>". \u0424\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0436\u0443, \u043e\u043d\u0430 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f. \u0422\u0435 \u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446 \u0438 \u043a\u0430\u043d\u0432\u0430\u0441 \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043a\u0441\u0442.  <\/p>\n
<\/div>\n
  <\/p>\n
\u0428\u0430\u0433 3 \u2014 \u041b\u0443\u043d\u044b<\/h4>\n
  \u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0451 \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u043e\u0434 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439, \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043d\u0435 \u0432 \u0446\u0435\u043d\u0442\u0440, \u0430 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u043f\u043b\u0430\u043d\u0435\u0442\u0443 + \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 \u043f\u043b\u0430\u043d\u0435\u0442\u044b:  <\/p>\n
var vertex = new THREE.Vector3(); vertex.x = planetPos.x + pos.x; vertex.y = planetPos.y + pos.y; vertex.z = 0; <\/code><\/pre>\n
  \u041f\u043b\u044e\u0441 \u0442\u0430\u043a\u0436\u0435 \u0432\u0435\u0448\u0430\u0435\u043c \u043e\u0440\u0431\u0438\u0442\u0443:  <\/p>\n
\/\/\u0421\u0442\u0430\u0432\u0438\u043c \u0446\u0435\u043d\u0442\u0440 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u043b\u0430\u043d\u0435\u0442\u044b, \u0430 \u0440\u0430\u0434\u0438\u0443\u0441 \u0437\u0430\u0434\u0430\u0435\u043c \u043a\u0430\u043a \u0434\u043b\u0438\u043d\u0443 \u0432\u0435\u043a\u0442\u043e\u0440\u0430 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043b\u0443\u043d\u044b moon.orbit = this.addOrbit(planetPos, vectorLength(pos)); <\/code><\/pre>\n
  <\/p>\n
<\/div>\n
  <\/p>\n
\u0428\u0430\u0433 4 \u2014 Jumpgates<\/h4>\n
  <\/p>\n
\"image\"<\/div>\n
  \u041d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 Jumpgate \u0438\u0437 \u0441\u0435\u0440\u0438\u0430\u043b\u0430 \u0412\u0430\u0432\u0438\u043b\u043e\u043d-5. 
  \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043c\u044b \u0441\u0430\u043c\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0433\u0435\u0439\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0440-\u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435.  <\/p>\n
\/\/\u0417\u0430\u0434\u0430\u0435\u043c \u0445\u0430\u0440-\u043a\u0438 \u0438 \u0440\u0438\u0441\u0443\u0435\u043c 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(); <\/code><\/pre>\n
  \u041d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u0443 \u043d\u0430\u0441 \u0436\u0435 \u043a\u0430\u0440\u0442\u0430, \u0442.\u0435. \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0433\u0435\u0439\u0442\u0430\u043c\u0438. \u041f\u0440\u044b\u0433\u043d\u0443\u043b\u0438 \u0432 \u043e\u0434\u0438\u043d \u2014 \u0432 \u043a\u0430\u043a\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043c\u044b \u043e\u043a\u0430\u0436\u0435\u043c\u0441\u044f? \u0412\u043e\u0442 \u0438 \u043a\u0430\u0440\u0442\u0430 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.
  \u041f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u0432\u044f\u0437\u0438 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u043d\u043e \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u043c.
  \u0421\u0434\u0435\u043b\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:  <\/p>\n
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} },<\/code><\/pre>\n
  \u0423 \u043d\u0430\u0441 \u0432\u0435\u0437\u0434\u0435 \u043f\u043e\u043b\u0435 link \u2014 \u043e\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 id, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0434\u0435\u0442 \u0441\u0432\u044f\u0437\u044c.  <\/p>\n
\/\/\u0421\u0442\u0440\u043e\u0438\u043c \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u0432\u0440\u0430\u0442\u0430\u043c\u0438 for (var v in list) {     \/\/\u0421\u0442\u0440\u043e\u0438\u043c \u0441\u0432\u044f\u0437\u044c \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0433\u0435\u0439\u0442\u0430\u043c\u0438(\u0442\u0443\u0434\u0430 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e)     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)); } <\/code><\/pre>\n
  \u0422.\u0435. \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u0438\u043d\u0438\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0433\u0435\u0439\u0442\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044f \u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0418 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0442\u043e\u0436\u0435, \u044d\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f.
  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0442\u0430\u0440\u0430\u043d\u0438\u0439:  <\/p>\n
<\/div>\n
  <\/p>\n
\u0428\u0430\u0433 5 \u2014 \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438<\/h4>\n
  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u043d\u0435\u0442, \u043b\u0443\u043d, \u0433\u0435\u0439\u0442\u043e\u0432 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:
  Jumpgate:  <\/p>\n
this.domEvent.bind(particles, "mouseover", function(e){     e.target.material.color.setHex(0xffffff);     \/\/\u041f\u043e\u0434\u0441\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u043b\u0438\u043d\u043a\u0438 \u0432 \u043e\u0434\u043d\u0443 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443     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);     }     \/\/\u0421\u0432\u0435\u0442\u0438\u043c \u043e\u0440\u0431\u0438\u0442\u0443     e.target.orbit.hover(); }); this.domEvent.bind(particles, "mouseout", function(e){     e.target.material.color.setHex(0xaaaaaa);     \/\/\u0413\u0430\u0441\u0438\u043c \u043b\u0438\u043d\u043a\u0438 \u0441 \u043e\u0434\u043d\u043e\u0439 \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b     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);     }     \/\/\u0413\u0430\u0441\u0438\u043c \u043e\u0440\u0431\u0438\u0442\u0443     e.target.orbit.unhover(); }); <\/code><\/pre>\n
  \u041b\u0443\u043d\u044b:  <\/p>\n
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(); }); <\/code><\/pre>\n
  \u041f\u043b\u0430\u043d\u0435\u0442\u044b:  <\/p>\n
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(); }); <\/code><\/pre>\n
  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 mouseover, mouseout, \u0438 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0435\u043c \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0435\u0442 \u0438 \u043b\u0443\u043d \u2014 \u043e\u0440\u0431\u0438\u0442\u044b, \u0434\u043b\u044f \u0432\u0440\u0430\u0442 \u2014 \u0441\u0432\u044f\u0437\u0438 \u0438 \u043e\u0440\u0431\u0438\u0442\u044b.
  Three.js \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0439 \u0441 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u043e\u0433\u0443\u0433\u043b\u0438\u043b, \u043f\u043e\u0434\u0443\u043c\u0430\u043b, \u0438 \u0432\u043a\u0440\u0443\u0442\u0438\u043b \u0432 \u0444\u0430\u0439\u043b three.js, \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430 \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u044f \u0441 \u0432\u0435\u0440\u0448\u0438\u043d\u0430\u043c\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446:<\/p>\n
  \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:  <\/p>\n
<\/div>\n
  <\/p>\n
\u0428\u0430\u0433 6 \u2014 \u0413\u0434\u0435 \u043c\u044b?<\/h4>\n
  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u043a\u0435\u0440 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u0432\u044b\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u0435\u0440\u0445\u044a\u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u0432\u0430\u0434\u0440\u0430\u0442 \u0438 \u043d\u0430\u0434\u043f\u0438\u0441\u044c.  <\/p>\n
<\/div>\n
  <\/p>\n
\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n
  \u041d\u0443 \u0432\u0440\u043e\u0434\u0435 \u043a\u0430\u043a \u0432\u0441\u0451 \u0447\u0442\u043e \u0445\u043e\u0442\u0435\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e\u0435 \u0435\u0449\u0451 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0432\u043e\u0439\u043d\u044b\u0435 \u0437\u0432\u0435\u0437\u0434\u044b, \u0430\u0441\u0442\u0435\u0440\u043e\u0438\u0434\u043d\u044b\u0435 \u043f\u043e\u044f\u0441\u0430, \u0433\u0430\u0437\u043e\u0432\u044b\u0435 \u043e\u0431\u043b\u0430\u043a\u0430, \u043d\u043e, \u043a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, \u043b\u0443\u0447\u0448\u0435\u0435 \u0432\u0440\u0430\u0433 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e. \u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0434\u0435\u043c\u043a\u0443 \u0442\u0443\u0442 \u0436\u0435. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 Chrome, Firefox, \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 Safari, \u041e\u043f\u0435\u0440\u0435, \u0438 \u0435\u0449\u0451 \u0446\u0435\u043b\u043e\u0439 \u043a\u0443\u0447\u0438 \u0425\u0440\u043e\u043c\u043e-\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. IE11 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f.
  \u0414\u0435\u043c\u043e: magistravsh.github.io\/starsystemmap\/<\/a>
  \u041a\u043e\u0434: github.com\/MagistrAVSH\/starsystemmap\/<\/a>
  \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437 \u043d\u0430\u0434\u0435\u044e\u0441\u044c \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0440\u0430\u0431\u043b\u0435\u0439, \u0441\u0442\u0430\u043d\u0446\u0438\u0439, \u043c\u043e\u0436\u0435\u0442\u0435 \u0447\u0435\u0433\u043e-\u0442\u043e \u0435\u0449\u0451 \ud83d\ude42    \t<\/p>\n
<\/div>\n<\/p><\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  http:\/\/habrahabr.ru\/post\/203378\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\n
<\/div>\n
  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043d\u044f \u0438\u043b\u0438 \u043d\u043e\u0447\u0438, \u0425\u0430\u0431\u0440!
  \u0412 \u043d\u0430\u0448\u0438\u0445 \u043a\u0440\u0430\u044f\u0445 \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0438\u043c\u0430 \u043f\u0440\u0438\u0448\u043b\u0430 \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u043e, \u043d\u043e \u0432 \u043a\u043e\u0441\u043c\u043e\u0441\u0435 \u0432\u0440\u0435\u043c\u0435\u043d \u0433\u043e\u0434\u0430 \u043d\u0435\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u043d\u043e\u0432\u0430 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0448\u0442\u0443\u043a\u0430\u0445 \u043d\u0430 webgl. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u043a\u0430\u0440\u0442\u0435 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0436\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u043e \u043a\u0430\u0440\u0442\u0430 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.
  \u041a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430, \u0440\u0430\u0441\u0441\u043a\u0430\u0437 \u043f\u043e\u0439\u0434\u0435\u0442 \u043f\u043e \u0448\u0430\u0433\u0430\u043c. \u0418\u0442\u0430\u043a\u2026  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-203378","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/203378","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=203378"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/203378\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=203378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=203378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=203378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}