{"id":201790,"date":"2013-11-12T17:14:03","date_gmt":"2013-11-12T13:14:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=201790"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=201790","title":{"rendered":"<span class=\"post_title\">\u041a\u0430\u0440\u0442\u0430 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438 \u043d\u0430 Three.js\/WebGL<\/span>"},"content":{"rendered":"<div class=\"content html_format\">\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/c41\/3c3\/14a\/c413c314a09e05f507b2361f93083217.png\" \/><\/div>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043d\u044f \u0438\u043b\u0438 \u043d\u043e\u0447\u0438. \u0412 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0438\u0433\u0440\u044b \u043d\u0430 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u043d\u0430 Three.js\/WebGL \u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0435\u0440\u0438\u044e \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438\u0433\u0440\u044b, \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043a\u0430\u0440\u0442\u0435 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438. \u0420\u0430\u0441\u0441\u043a\u0430\u0437 \u043f\u043e\u0439\u0434\u0435\u0442 \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u2014 \u043f\u043e \u0448\u0430\u0433\u0430\u043c.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u0434 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0441\u0430\u043c\u043e\u0433\u043e Three.js, \u0432 \u0441\u0435\u0442\u0438 \u043f\u043e\u043b\u043d\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0432\u043e\u0434\u0443.<br \/>  \u0418 \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433\u2026<\/p>\n<h4>\u0428\u0430\u0433 1 \u2014 \u0427\u0435\u0440\u043d\u044b\u0439-\u0447\u0435\u0440\u043d\u044b\u0439 \u0444\u043e\u043d <\/h4>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0434\u043b\u043e\u0436\u043a\u0443. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e \u0432 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u0447\u043a\u0443:  <\/p>\n<pre><code class=\"actionscript\">renderer.setClearColor(0x000000); <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/8ab\/eec\/5f1\/8abeec5f1ac063aa5f6d2ed32c4935e2.png\" \/><\/div>\n<p>  \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e \u044d\u0442\u043e \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u041c\u0430\u043b\u0435\u0432\u0438\u0447\u0430 \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u043c\u044b \u043f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u043c.<br \/>  \u0412\u0435\u0434\u044c \u043f\u0440\u0430\u0432\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e?<\/p>\n<h4>\u0428\u0430\u0433 2 \u2014 And the Sky Full of Stars<\/h4>\n<p>  \u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u041c\u0430\u043b\u0435\u0432\u0438\u0447\u0430 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u043d\u0430\u0434\u043e \u0432\u0441\u0451 \u0442\u0430\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0435\u0437\u0434\u044b.<br \/>  \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0443 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0441\u043f\u0438\u0440\u0430\u043b\u044c \u043f\u043e\u0445\u043e\u0436\u0430\u044f \u043d\u0430 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0443. \u042f \u0432\u044b\u0431\u0440\u0430\u043b <a href=\"http:\/\/ru.wikipedia.org\/wiki\/%D0%9B%D0%BE%D0%B3%D0%B0%D1%80%D0%B8%D1%84%D0%BC%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%81%D0%BF%D0%B8%D1%80%D0%B0%D0%BB%D1%8C\">\u043b\u043e\u0433\u0430\u0440\u0438\u0444\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u043f\u0438\u0440\u0430\u043b\u044c<\/a>.<br \/>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435  <\/p>\n<pre><code class=\"javascript\">\/\/\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043b\u043e\u0433\u0430\u0440\u0438\u0444\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043f\u0438\u0440\u0430\u043b\u0438 var countStars = 20000; var a = 1.1; \u043car b = 0.17; var windings = 3.7; var tMax = 2.0 * Math.PI * windings;         var drift = 0.3 <\/code><\/pre>\n<p>  \u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442: \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u0432 \u0446\u0438\u043a\u043b\u0435 \u0438 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0432\u0435\u0437\u0434\u044b(\u0444\u043e\u0440\u043c\u0443\u043b\u0430 \u0432 \u0432\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u0438) \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e \u0438\u0445 \u0441\u043c\u0435\u0449\u0430\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0443.  <\/p>\n<pre><code class=\"javascript\">\/\/\u0421\u0442\u0440\u043e\u0438\u043c \u043b\u043e\u0433\u0430\u0440\u0438\u0444\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u043f\u0438\u0440\u0430\u043b\u044c for (var i = 0; i &lt; countStars; i++) {     \/\/\u0444\u043e\u0440\u043c\u0443\u043b\u0430 + \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u043e\u0435 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u0435\u043a     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())     \/\/\u0417\u0435\u0440\u043a\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0442\u043e\u0447\u043a\u0438     if (Math.random() &gt; 0.5) {         list.push({x:vec.x, y:vec.y});     }     else { \/\/\u041e\u0442\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043f\u0438\u0440\u0430\u043b\u0438         list.push({x:-vec.x, y:-vec.y});     } } <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0442\u043e\u0447\u0435\u043a \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0435, \u0438\u0445 \u043c\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u044f\u0435\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0447\u0430\u0441\u0442\u0438\u0446, \u043b\u0430\u0433\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043a\u0443\u0434\u0430 \u043c\u0435\u043d\u044c\u0448\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/\u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f var geometry = new THREE.Geometry(); \/\/\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446 var material = new THREE.ParticleSystemMaterial({       color: 0xeeeeee,       size: 3 }); \/\/\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 var particleSystem = new THREE.ParticleSystem(       geometry,         material ); \/\/\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u0432\u0435\u0437\u0434\u044b for (var i = 0; i &lt; list.length; i++) {     addStar(list[i].x, list[i].y);   } scene.add(particleSystem); <\/code><\/pre>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f addStar \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435:  <\/p>\n<pre><code class=\"javascript\">var addStar = function(x, y) {     var v = new THREE.Vector3();     v.x = x * 10;     v.y = y * 10;      geometry.vertices.push(v);   } <\/code><\/pre>\n<p>  \u0418 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c\u2026  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/a3d\/1c8\/b21\/a3d1c8b214ff8db45dfde49bc83e3179.png\" \/><\/div>\n<p>  \u0427\u0442\u043e-\u0442\u043e \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0434\u044b\u0440\u043a\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043b\u044f\u0434\u0438\u043c \u043f\u043e\u0431\u043b\u0438\u0436\u0435:  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/f29\/b39\/199\/f29b39199fd9e5c4bf6747b539b9bb4a.png\" \/><\/div>\n<p>  \u041e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u0446\u0438\u043a\u043b\u0430.<br \/>  \u041f\u0435\u0440\u0432\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u043c \u043a\u043e\u043b\u044c\u0446\u043e \u0438\u0437 \u0442\u043e\u0447\u0435\u043a:  <\/p>\n<pre><code class=\"javascript\">for (var i = 0; i &lt; 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}); } <\/code><\/pre>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/204\/1f2\/ec0\/2041f2ec07e2221f5cecb318eb172973.png\" \/><\/div>\n<p>  \u0412\u0442\u043e\u0440\u044b\u043c \u0446\u0438\u043a\u043b\u043e\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u043c \u043a\u0440\u0443\u0433 \u0438\u0437 \u0442\u043e\u0447\u0435\u043a:  <\/p>\n<pre><code class=\"javascript\">for (var i = 0; i &lt; 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}); } <\/code><\/pre>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/ab9\/66e\/302\/ab966e302e4b08557c07fc7d33afc94d.png\" \/><\/div>\n<p>  \u041e\u0442\u043b\u0438\u0447\u043d\u043e, \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u043d\u0430 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0443. \u041d\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0438\u043c\u0435\u043d\u0430 \u043d\u0430\u0448\u0438\u043c \u0437\u0432\u0435\u0437\u0434\u0430\u043c. \u0423 \u0442\u0435\u0431\u044f %username% \u0435\u0441\u0442\u044c \u0438\u043c\u044f, \u0430 \u0443 \u0437\u0432\u0435\u0437\u0434\u044b \u043d\u0435\u0442. \u0420\u0430\u0437\u0432\u0435 \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e?<\/p>\n<h4>\u0428\u0430\u0433 3 \u2014 \u0417\u0432\u0435\u0437\u0434\u0430 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 %starname%<\/h4>\n<p>  \u041d\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<br \/>  \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f. \u041d\u0443\u0436\u0435\u043d \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0432\u0435\u0437\u0434(\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b + \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435). \u041d\u0443\u0436\u043d\u043e \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0432\u0435\u0437\u0434 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0443\u0434\u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435. \u042d\u0442\u043e \u043f\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u043d\u0430\u043b\u0438\u0447\u0438\u044e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439. \u0422\u0430\u043a\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0437\u0432\u0435\u0437\u0434\u044b \u043f\u0440\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 mouseover. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0447\u0430\u0441\u0442\u0438\u0446 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0435 \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c, \u0437\u043d\u0430\u0447\u0438\u0442 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0435. \u0412\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043c\u043d\u043e\u0433\u043e, \u043d\u043e \u044f \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u043d\u0430\u0448\u0435\u043b JS \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e KDTree, \u0438 \u0437\u0430\u0433\u043d\u0430\u043b \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0441\u0435 \u0442\u043e\u0447\u043a\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c(\u0442.\u0435. \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a), \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f mousemove \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:  <\/p>\n<pre><code class=\"javascript\">\/\/\u043a\u043b\u0430\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043c\u044b\u0448\u0438 \u0432 \u043c\u0438\u0440\u043e\u0432\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 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 ); \/\/\u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0446\u0435\u043d\u0443 \u0434\u043b\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f e.data.self.sceneNames = new THREE.Scene(); \/\/\u0412\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0435\u043c \u0438\u0437 KDTree \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0438 \u0437\u0432\u0435\u0437\u0434\u044b \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043c\u044b\u0448\u0438 var items = e.data.self.tree.nearest({x:pos.x,y:pos.y}, 1, 100); \/\/\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e label for (var i = 0; i &lt; items.length; i++) {     e.data.self.sceneNames.add(e.data.self.labelBasic(items[i][0].name,vector.x, vector.y, 60, &quot;#f00&quot;)); } <\/code><\/pre>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u0435\u0448 \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442.<br \/>  \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u044f \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043a\u0442\u043e \u0437\u0430\u0445\u043e\u0447\u0435\u0442 \u0441\u043c\u043e\u0436\u0435\u0442 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431 \u0438 \u043f\u043e\u0433\u043b\u044f\u0434\u0435\u0442\u044c, \u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0434 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043f\u043e\u0433\u043b\u044f\u0434\u0438\u043c \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/c60\/d47\/97a\/c60d4797a475f41a59cc46fcc35278bd.png\" \/><\/div>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/690\/dcf\/54c\/690dcf54ce30d6c374e540e42c9b6a4e.png\" \/><\/div>\n<p>  <\/p>\n<h4>\u0428\u0430\u0433 4 \u2014 \u0412\u043d\u043e\u0441\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0445\u0430\u043e\u0441<\/h4>\n<p>  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430, \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0437\u0432\u0435\u0437\u0434, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0445 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043d\u043e \u0440\u0430\u0437 \u0443 \u043d\u0430\u0441 \u043a\u0430\u0440\u0442\u0430, \u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u0415\u0441\u043b\u0438 \u044f \u0441\u043a\u0430\u0436\u0443: \u00ab\u0441\u043b\u0443\u0445\u0430\u0439, \u043b\u0435\u0442\u0438 \u043a\u0430 \u0442\u044b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 TX-82 \u0438 \u043a\u0443\u043f\u0438 \u043c\u043d\u0435 \u043a\u0435\u0444\u0438\u0440\u0430\u00bb, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0443\u0434\u0430 \u043b\u0435\u0442\u0435\u0442\u044c, \u0438\u0431\u043e \u0430) \u043d\u0435 \u0444\u0430\u043a\u0442 \u0447\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c TX-82 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f, \u0431) \u043a\u0430\u043a \u043d\u0430\u0439\u0442\u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441\u0440\u0435\u0434\u0438 over 20k \u0437\u0432\u0435\u0437\u0434? <s>\u0432) \u043d\u0435 \u0444\u0430\u043a\u0442 \u0447\u0442\u043e \u043a\u0435\u0444\u0438\u0440 \u0443\u0436\u0435 \u0437\u0430\u0432\u0435\u0437\u043b\u0438<\/s>.<br \/>  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0430\u043a\u043e\u0435 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435: \u0435\u0441\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442\u044b, \u0435\u0441\u0442\u044c \u0441\u0435\u043a\u0442\u043e\u0440\u0430. \u0412\u0441\u044f \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0430 \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043d\u0430 4*4=16 \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442\u043e\u0432, \u043f\u043e 4 \u0441 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043d\u0430 4 \u0441\u0435\u043a\u0442\u043e\u0440\u0430. \u0422.\u0435. \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0430\u0434\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u0430\u043a \u043a\u0432\u0430\u0434\u0440\u0430\u043d\u0442 #qX-qY \u2014 \u0441\u0435\u043a\u0442\u043e\u0440 (sx-sy) \u2014 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 %starname%.<br \/>  \u0414\u0435\u043b\u0430\u0435\u043c \u043c\u044b \u044d\u0442\u043e \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043b\u0438\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u0434 \u043e\u043f\u044f\u0442\u044c \u0436\u0435 \u043d\u0435 \u043f\u0440\u0438\u0432\u043e\u0436\u0443, \u043e\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438 \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0447\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438 \u043a\u043e\u043d\u0446\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u043b\u0438\u043d\u0438\u0438. \u041a\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u2014 \u0434\u043e\u0431\u0440\u043e \u043f\u043e\u0436\u0430\u043b\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431.<br \/>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u0430\u043a \u0432\u044b \u043c\u043e\u0433\u043b\u0438 \u0434\u043e\u0433\u0430\u0434\u0430\u0442\u044c\u0441\u044f, \u0432 \u0448\u0430\u043f\u043a\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f. \u041d\u043e \u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0443 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443:  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/9b4\/23e\/9f7\/9b423e9f78c5ff648661c3729380ca5e.png\" \/><\/div>\n<p>  \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u0435\u0449\u0451 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u2014 \u0442\u0435\u043a\u0441\u0442, \u0432\u0440\u043e\u0434\u0435 (1-1),(3-3),(2-3). \u0421\u0435\u0442\u043a\u0430 \u0435\u0441\u0442\u044c, \u0430 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0435\u0442. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c.  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/1bb\/926\/e30\/1bb926e30036275dc1c01285e4cf9ff9.png\" \/><\/div>\n<p>  <\/p>\n<h4>\u0428\u0430\u0433 5 \u2014 \u0427\u0438\u043f \u0438 \u0414\u0435\u0439\u043b<\/h4>\n<p>  \u0421\u043f\u0430\u0441\u0435\u043c \u043e\u0442 \u043d\u0435\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0447\u0442\u043e \u044d\u0442\u043e \u0437\u0430 \u0447\u0438\u0441\u043b\u0430 \u0432\u044b\u0448\u0435 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435. \u0418\u043b\u0438 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f. \u0414\u0430. \u0414\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 HTML \u0438 CSS:  <\/p>\n<pre><code class=\"html\">&lt;span id=&quot;quad&quot; style=&quot;position:absolute;left:100px;top:10px;color:white;font-family:Arial;font-size:19px&quot;&gt;#x-y Quadrant&lt;\/span&gt; &lt;span id=&quot;sector&quot; style=&quot;position:absolute;left:100px;top:30px;color:#555;font-family:Arial;font-size:19px&quot;&gt;(sx-sy) Sector&lt;\/span&gt; <\/code><\/pre>\n<p>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/cf4\/61b\/1f3\/cf461b1f3074f9ad726489ae13808a29.png\" \/><\/div>\n<p>  <\/p>\n<h4>\u0428\u0430\u0433 6 \u2014 \u0413\u0434\u0435 \u044f?<\/h4>\n<p>  \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u2014 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430\u0448\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438. \u0421\u0442\u0443\u043a\u043d\u0443\u043b \u043a\u0438\u0440\u043f\u0438\u0447 \u043f\u043e \u0433\u043e\u043b\u043e\u0432\u0435, \u0437\u0430\u0431\u044b\u043b \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0448\u0441\u044f. \u0410 \u043d\u0430\u043c \u0432\u0435\u0434\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0443\u0434\u0430 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a\u0435\u0444\u0438\u0440, \u0447\u0442\u043e \u0436\u0435 \u043d\u0430\u043c \u0434\u0435\u043b\u0430\u0442\u044c? \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u0440\u0442\u0443 \u0438 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f\u043c:  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/6e6\/d3c\/cb3\/6e6d3ccb3528c5c22b2a0d9c74ac6f0f.png\" \/><\/div>\n<p>  \u0414\u0430, \u043a\u043e\u0434 \u0442\u0430\u043a\u043e\u0439:  <\/p>\n<pre><code class=\"javascript\">\/\/\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0430\u0440\u043a\u0435\u0440 var addMarker = function(x, y) {     \/\/\u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f     var g = new THREE.Geometry();     \/\/\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0447\u0430\u0441\u0442\u0438\u0446     var m = new THREE.ParticleBasicMaterial({           color: 0x550000,           size: 35     });     for (var i = 0; i &lt; 100; i++) {         g.vertices.push({x:x,y:y});     };          \/\/\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0447\u0430\u0441\u0442\u0438\u0446     var p = new THREE.ParticleSystem(           g,           m     );      this.sceneLabel.add(this.labelBasic(&quot;&gt;&gt;                &quot;, x , y , 70, &quot;#f00&quot;));     this.sceneLabel.add(this.labelBasic(&quot;                &lt;&lt;&quot;, x , y , 70, &quot;#f00&quot;));      this.sceneLabel.add(this.labelBasic(this.points[this.here].name, x , y , 60, &quot;#f00&quot;));      this.sceneLabel.add(p); } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0418\u0442\u0430\u043a, \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043a\u0430\u0440\u0442\u0443. \u042f \u043d\u0435 \u043f\u0440\u0438\u0432\u0435\u043b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u0435\u0449\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u043f\u043e \u0437\u0430\u0436\u0430\u0442\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0435, \u0437\u0443\u043c, \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 Three.js, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u044d\u0442\u043e \u0432\u0442\u043e\u0440\u0438\u0447\u043d\u043e \u0438 \u043d\u0435 \u0442\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<br \/>  \u0413\u0438\u0442\u0445\u0430\u0431: <a href=\"https:\/\/github.com\/MagistrAVSH\/galmap\">github.com\/MagistrAVSH\/galmap<\/a><br \/>  \u0414\u0435\u043c\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 FF, Chrome, Opera. \u0412 IE11 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u043e\u0445\u043e, \u0432\u044b \u043d\u0435 \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u0432\u043e\u043e\u0431\u0449\u0435, \u043e\u043d \u043a\u0440\u0438\u0432\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 WebGL. <a href=\"http:\/\/magistravsh.github.io\/galmap\/\">magistravsh.github.io\/galmap\/<\/a><\/p>\n<p>  \u041d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0435\u0441\u0442\u044c \u0438\u0434\u0435\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u0440\u043e \u043a\u0430\u0440\u0442\u0443 \u0437\u0432\u0435\u0437\u0434\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043f\u0440\u043e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0442\u0443\u043c\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439, \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0430 \u0442\u0435\u043c\u0443 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0441\u043c\u043e\u0441\u0430 \ud83d\ude42 \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u2014 \u043f\u0438\u0448\u0438\u0442\u0435.<\/p>\n<p>  \u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u043f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u043c \u0435\u0449\u0451 \u043f\u0430\u0440\u043e\u0447\u043a\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/1f7\/4e2\/92d\/1f74e292dd1ef6aa03a3c87b07375d51.png\"\/>  <\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/536\/0fb\/9a7\/5360fb9a78b6a7ba0b40a5277c868b6d.png\" \/><\/div>\n<p>  <\/div>\n<\/div>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/201790\/\"> http:\/\/habrahabr.ru\/post\/201790\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/c41\/3c3\/14a\/c413c314a09e05f507b2361f93083217.png\" \/><\/div>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0434\u043d\u044f \u0438\u043b\u0438 \u043d\u043e\u0447\u0438. \u0412 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u044f \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0441\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0438\u0433\u0440\u044b \u043d\u0430 \u043a\u043e\u0441\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u043d\u0430 Three.js\/WebGL \u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0441\u0435\u0440\u0438\u044e \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438\u0433\u0440\u044b, \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u043a\u0430\u0440\u0442\u0435 \u0433\u0430\u043b\u0430\u043a\u0442\u0438\u043a\u0438. \u0420\u0430\u0441\u0441\u043a\u0430\u0437 \u043f\u043e\u0439\u0434\u0435\u0442 \u0443\u0436\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u2014 \u043f\u043e \u0448\u0430\u0433\u0430\u043c.  <\/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-201790","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/201790","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=201790"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/201790\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=201790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=201790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=201790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}