{"id":360232,"date":"2024-05-21T00:49:10","date_gmt":"2024-05-21T00:49:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=360232"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=360232","title":{"rendered":"<span>React + Three.js. \u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 3D \u0448\u0443\u0442\u0435\u0440. \u0427\u0430\u0441\u0442\u044c 2<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0425\u0430\u0431\u0440!  <\/p>\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435  <\/h4>\n<p>\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0434\u043d\u0451\u043c. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b, \u043d\u043e \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0438\u0433\u0440\u044b \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/docs.pmnd.rs\/react-three-fiber\/getting-started\/introduction\" rel=\"noopener noreferrer nofollow\"><strong>React Three Fiber<\/strong><\/a> &#8212; \u043c\u043e\u0449\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\"><strong>Three.js<\/strong><\/a> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <strong>React<\/strong>.  <\/p>\n<p>\u0412 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437 \u043e\u0440\u0443\u0436\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 <a href=\"https:\/\/github.com\/JI0PATA\/fps-game\" rel=\"noopener noreferrer nofollow\"><u>GitHub<\/u><\/a>  <\/p>\n<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u043c\u043e<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65549de7627c4d30971aabdb\" data-style=\"\" id=\"65549de7627c4d30971aabdb\" width=\"\"><\/div>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;undefined&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span><\/span><\/div>\n<p><a href=\"https:\/\/codesandbox.io\/p\/github\/JI0PATA\/fps-game\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">codesandbox.io<\/a><\/div>\n<\/div>\n<h4>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u0430\u0432\u043a\u0438  <\/h4>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 images \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043f\u0430\u043f\u043a\u0435 assets. \u0418 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u043c \u0432 \u044d\u0442\u0443 \u043f\u0430\u043f\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0432 \u0444\u0430\u0439\u043b\u0435 <strong>Ground.jsx<\/strong>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d3d\/886\/98a\/d3d88698ae1e517c9810686eb8c81af8.png\" alt=\"\u0424\u0430\u0439\u043b Ground.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e  \" title=\"\u0424\u0430\u0439\u043b Ground.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e  \" width=\"520\" height=\"139\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d3d\/886\/98a\/d3d88698ae1e517c9810686eb8c81af8.png\"\/><\/p>\n<div><figcaption><em>\u0424\u0430\u0439\u043b Ground.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/050c0cc402ee0f4043e7c786db36afb10f07fa00\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430<\/a><\/p>\n<h4>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f  <\/h4>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0448\u0443\u0442\u0435\u0440\u043e\u0432, \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438. \u041d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0434\u0440\u0443\u0433\u0443\u044e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0438\u0433\u0440\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u0434\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0438, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 <strong>React(Vite)<\/strong> \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <strong>.env<\/strong>. \u0414\u0430\u043b\u0435\u0435, \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <strong>VITE_***<\/strong> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 <strong>.env<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u0434\u044b \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e, \u043a\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a11\/66a\/23c\/a1166a23ce3bb7113decdc0a46920434.png\" alt=\".env \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438  \" title=\".env \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438  \" width=\"182\" height=\"39\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a11\/66a\/23c\/a1166a23ce3bb7113decdc0a46920434.png\"\/><\/p>\n<div><figcaption><em>.env \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.\u00a0<\/p>\n<p>\u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043c\u044b\u0448\u0438 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430, \u0447\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443, \u0447\u0442\u043e \u043f\u043e\u043a\u0430 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0442\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0438\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c.\u00a0<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <strong>Zustand<\/strong>. \u0412 \u0444\u0430\u0439\u043b\u0435 <strong>App.jsx<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u0438 \u0440\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/58c\/682\/19e\/58c68219e876e1c00f1684978376eef3.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 App.jsx  \" title=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 App.jsx  \" width=\"887\" height=\"747\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/58c\/682\/19e\/58c68219e876e1c00f1684978376eef3.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 App.jsx<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <strong>Weapon.jsx<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c\u044b\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043c\u044b\u0448\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>mouseButtonHandler<\/strong>. \u0412\u043d\u0443\u0442\u0440\u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0435\u0449\u0451 \u043d\u0435 \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d, \u0442\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0415\u0449\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 <strong>.env<\/strong> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u043c\u044b\u0448\u0438, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0436\u0438\u043c \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b \u0438\u043b\u0438 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1f7\/2c1\/7f7\/1f72c17f754105dbfe3535d759518756.png\" alt=\"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 .env  \" title=\"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 .env  \" width=\"489\" height=\"85\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1f7\/2c1\/7f7\/1f72c17f754105dbfe3535d759518756.png\"\/><\/p>\n<div><figcaption><em>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 .env<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448 \u043c\u044b\u0448\u0438.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/226\/2db\/67b\/2262db67b06387a9452df53bb8698aed.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043c\u044b\u0448\u0438  \" title=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043c\u044b\u0448\u0438  \" width=\"556\" height=\"558\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/226\/2db\/67b\/2262db67b06387a9452df53bb8698aed.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043c\u044b\u0448\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>useAimingStore<\/strong> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ef9\/506\/d71\/ef9506d7179a0b050e8e84c466670a32.png\" alt=\"\u0418\u043c\u043f\u043e\u0440\u0442 Zustand  \" title=\"\u0418\u043c\u043f\u043e\u0440\u0442 Zustand  \" width=\"416\" height=\"79\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ef9\/506\/d71\/ef9506d7179a0b050e8e84c466670a32.png\"\/><\/p>\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 Zustand<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6de\/5f5\/3eb\/6de5f53eb264dedc6b1f9468873345c0.png\" alt=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 Weapon.jsx  \" title=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 Weapon.jsx  \" width=\"454\" height=\"83\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6de\/5f5\/3eb\/6de5f53eb264dedc6b1f9468873345c0.png\"\/><\/p>\n<div><figcaption><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 Weapon.jsx<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6d2\/45d\/dcd\/6d245ddcd4b31387157536bcc628199a.png\" alt=\"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setIsAiming  \" title=\"\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setIsAiming  \" width=\"520\" height=\"25\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6d2\/45d\/dcd\/6d245ddcd4b31387157536bcc628199a.png\"\/><\/p>\n<div><figcaption><em>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setIsAiming<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>mouseButtonHandler<\/strong>, \u0433\u0434\u0435 \u0440\u0430\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 <strong>AIM_BUTTON<\/strong>, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1d8\/a22\/d67\/1d8a22d67152ad908ddf655ea5dfaf4f.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 mouseButtonHandler  \" title=\"\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 mouseButtonHandler  \" width=\"449\" height=\"165\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1d8\/a22\/d67\/1d8a22d67152ad908ddf655ea5dfaf4f.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 mouseButtonHandler<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0444\u0430\u0439\u043b\u0443 <strong>Player.jsx<\/strong> \u0438 \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <strong>useAimingStore<\/strong> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <strong>Weapon.jsx<\/strong>. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>easing<\/strong> \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0444\u0430\u0439\u043b\u0430.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e05\/053\/84d\/e0505384df426629d092f21fabfa870a.png\" alt=\"\u0418\u043c\u043f\u043e\u0440\u0442 useAimingStore \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing  \" title=\"\u0418\u043c\u043f\u043e\u0440\u0442 useAimingStore \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing  \" width=\"444\" height=\"182\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e05\/053\/84d\/e0505384df426629d092f21fabfa870a.png\"\/><\/p>\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 useAimingStore \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>isAiming<\/strong> \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/08a\/4db\/dd5\/08a4dbdd5b5774638ba02bee79ae4943.png\" alt=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isAiming  \" title=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isAiming  \" width=\"526\" height=\"44\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/08a\/4db\/dd5\/08a4dbdd5b5774638ba02bee79ae4943.png\"\/><\/p>\n<div><figcaption><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isAiming<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/81b\/9c1\/61a\/81b9c161a458aa56edcf728d435375ad.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 aimingAnimation \u0438 aimingBackAnimation  \" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 aimingAnimation \u0438 aimingBackAnimation  \" width=\"546\" height=\"42\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/81b\/9c1\/61a\/81b9c161a458aa56edcf728d435375ad.png\"\/><\/p>\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 aimingAnimation \u0438 aimingBackAnimation<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initAimingAnimation<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e08\/3fb\/a7f\/e083fba7fea7fb496beeda7d520944e3.png\" alt=\"\u0424\u0443\u043d\u043a\u0446\u0438\u044f initAmingAnimation  \" title=\"\u0424\u0443\u043d\u043a\u0446\u0438\u044f initAmingAnimation  \" width=\"567\" height=\"362\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e08\/3fb\/a7f\/e083fba7fea7fb496beeda7d520944e3.png\"\/><\/p>\n<div><figcaption><em>\u0424\u0443\u043d\u043a\u0446\u0438\u044f initAmingAnimation<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0433\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initAimingAnimation<\/strong>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043e\u0440\u0443\u0436\u0438\u044f.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4f6\/d6b\/4e5\/4f6d6b4e5488becae0b0b80c92423d5f.png\" alt=\"useEffect \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 initAimingAnimation \" title=\"useEffect \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 initAimingAnimation \" width=\"262\" height=\"63\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4f6\/d6b\/4e5\/4f6d6b4e5488becae0b0b80c92423d5f.png\"\/><\/p>\n<div><figcaption><em>useEffect \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 initAimingAnimation<\/em> <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <strong>isAiming<\/strong> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u0438\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043e\u0440\u0443\u0436\u0438\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c <strong>useEffect<\/strong>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430 \u0438\u043b\u0438 \u0438\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u201c\u043f\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\u201d, \u0430 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043e\u0440\u0443\u0436\u0438\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <strong>onComplete<\/strong> \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u201c\u043f\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\u201d.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d7b\/6d6\/3f0\/d7b6d63f07b738b2013d68990342675f.png\" alt=\"useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438  \" title=\"useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438  \" width=\"441\" height=\"221\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d7b\/6d6\/3f0\/d7b6d63f07b738b2013d68990342675f.png\"\/><\/p>\n<div><figcaption><em>useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0431\u0443\u0434\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043b\u0441\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <strong>isAiming<\/strong> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0432 <strong>false<\/strong>, \u0438 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0430 \u201c\u0438\u043b\u0438\u201d \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0438. \u0420\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e, \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 <strong>null<\/strong>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0438.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/99d\/e93\/db8\/99de93db85881f8731ff1cba3695089a.png\" alt=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c isAiming \u043d\u0430 null  \" title=\"\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c isAiming \u043d\u0430 null  \" width=\"457\" height=\"99\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/99d\/e93\/db8\/99de93db85881f8731ff1cba3695089a.png\"\/><\/p>\n<div><figcaption><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c isAiming \u043d\u0430 null<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e7a\/702\/22a\/e7a70222aab9e9c521b2a03bc1f84eae.png\" alt=\"useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c  \" title=\"useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c  \" width=\"439\" height=\"220\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e7a\/702\/22a\/e7a70222aab9e9c521b2a03bc1f84eae.png\"\/><\/p>\n<div><figcaption><em>useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u0430 \u043f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 &#8212; \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/199\/668\/ee4\/199668ee41ff8a0b2f4f1b773ef75e17.GIF\" alt=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f\" title=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f\" width=\"500\" height=\"282\"\/><\/p>\n<div><figcaption><em>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f<\/em><\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/2f9fa332d587ca25cfdd6cce55d0080db9409d5e\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430<\/a> <\/p>\n<h4>\u0420\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0430\u0447\u0438  <\/h4>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <strong>Player.jsx<\/strong> \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 <strong>setAnimationParams<\/strong> \u043d\u0430 <strong>setSwayingAnimationParams<\/strong>. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0b2\/8f3\/974\/0b28f3974dd22cab21df538ca3bc17b1.png\" alt=\"\u0424\u0430\u0439\u043b Player.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438  \" title=\"\u0424\u0430\u0439\u043b Player.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438  \" width=\"547\" height=\"713\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0b2\/8f3\/974\/0b28f3974dd22cab21df538ca3bc17b1.png\"\/><\/p>\n<div><figcaption><em>\u0424\u0430\u0439\u043b Player.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>initSwayingObjectAnimation<\/strong> \u0443\u0431\u0435\u0440\u0451\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>easing<\/strong>, \u0442.\u043a. \u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u0432\u044b\u043d\u0435\u0441\u043b\u0438 \u0435\u0451 \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0444\u0430\u0439\u043b\u0430.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/53c\/fdb\/908\/53cfdb908ff4ffd21e0165f4b2f59b77.png\" alt=\"\u0423\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing  \" title=\"\u0423\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing  \" width=\"440\" height=\"26\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/53c\/fdb\/908\/53cfdb908ff4ffd21e0165f4b2f59b77.png\"\/><\/p>\n<div><figcaption><em>\u0423\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0444\u0430\u0439\u043b\u0430 <strong>Weapon.jsx<\/strong>.\u00a0<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <strong>recoilDuration<\/strong> \u043d\u0430 50.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d83\/fd8\/2a5\/d83fd82a5260140d55800fa298022875.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 recoilDuration  \" title=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 recoilDuration  \" width=\"288\" height=\"43\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d83\/fd8\/2a5\/d83fd82a5260140d55800fa298022875.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 recoilDuration<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c <strong>recoilBackAnimation<\/strong> \u0437\u0430 \u043d\u0435\u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u044c\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c <strong>isRecoilAnimationFinished<\/strong>.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3bb\/1c1\/81b\/3bb1c181b794ed253a0d15dc396e4a55.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isRecoilAnimationFinished  \" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isRecoilAnimationFinished  \" width=\"667\" height=\"42\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3bb\/1c1\/81b\/3bb1c181b794ed253a0d15dc396e4a55.png\"\/><\/p>\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isRecoilAnimationFinished<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>generateNewPositionOfRecoil<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <strong>currentPosition<\/strong>.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/084\/c04\/c58\/084c04c585cde47e8ed93cba763d3108.png\" alt=\"\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 generateNewPositionOfRecoil  \" title=\"\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 generateNewPositionOfRecoil  \" width=\"711\" height=\"41\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/084\/c04\/c58\/084c04c585cde47e8ed93cba763d3108.png\"\/><\/p>\n<div><figcaption><em>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 generateNewPositionOfRecoil<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>initRecoilAnimation<\/strong> \u0443\u0434\u0430\u043b\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>initialPosition<\/strong> \u0437\u0430 \u043d\u0435\u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u044c\u044e.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ea9\/ad3\/5d2\/ea9ad35d2e41c1e87452dfdb3fa75322.png\" alt=\"\u0423\u0431\u0440\u0430\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f initialPosition  \" title=\"\u0423\u0431\u0440\u0430\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f initialPosition  \" width=\"510\" height=\"38\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ea9\/ad3\/5d2\/ea9ad35d2e41c1e87452dfdb3fa75322.png\"\/><\/p>\n<div><figcaption><em>\u0423\u0431\u0440\u0430\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f initialPosition<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f Tween-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443, \u0441\u0434\u0435\u043b\u0430\u0432 \u0435\u0451 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438-\u0432\u043e\u0437\u0432\u0440\u0430\u0442\u043d\u043e\u0439 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e <strong>twRecoilBackAnimation<\/strong>.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e4a\/778\/fb8\/e4a778fb8ab010f635224a5bc2e124a5.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f initRecoilAnimation  \" title=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f initRecoilAnimation  \" width=\"589\" height=\"637\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e4a\/778\/fb8\/e4a778fb8ab010f635224a5bc2e124a5.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f initRecoilAnimation<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c <strong>useEffect<\/strong>, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u043d\u0430 2 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0430\u0447\u0438 \u043e\u0440\u0443\u0436\u0438\u044f.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/1ea\/ab1\/3dc\/1eaab13dc04113a4dfbb74bf13d7e276.png\" alt=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 useEffect  \" title=\"\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 useEffect  \" width=\"463\" height=\"315\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/1ea\/ab1\/3dc\/1eaab13dc04113a4dfbb74bf13d7e276.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 useEffect<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/6a848a2c232bdcefb5466fd532edbdc1ea14a76d\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <\/a> <\/p>\n<h4>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435  <\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435 \u0438\u0437 \u043e\u0440\u0443\u0436\u0438\u044f.\u00a0<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <strong>Weapon.jsx<\/strong> \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>useLoader<\/strong>. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u0432 <strong>assets\/images.<\/strong><\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d19\/743\/813\/d197438132ea2f0945549ff5eeb08387.png\" alt=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435  \" title=\"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435  \" width=\"324\" height=\"308\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d19\/743\/813\/d197438132ea2f0945549ff5eeb08387.png\"\/><\/p>\n<div><figcaption><em>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a <strong>FlashShoot<\/strong>.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/31b\/f5c\/d10\/31bf5cd109aa43a41fb9c85865a6c732.png\" alt=\"\u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f  \" title=\"\u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f  \" width=\"424\" height=\"21\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/31b\/f5c\/d10\/31bf5cd109aa43a41fb9c85865a6c732.png\"\/><\/p>\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <strong>useLoader<\/strong> \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0446\u0435\u043d\u0443. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <strong>flashAnimation<\/strong>.<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5a7\/f35\/2b1\/5a7f352b1b6015007bcb44f54fc31c3d.png\" alt=\"\u0418\u043c\u043f\u043e\u0440\u0442 useLoader  \" title=\"\u0418\u043c\u043f\u043e\u0440\u0442 useLoader  \" width=\"473\" height=\"40\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5a7\/f35\/2b1\/5a7f352b1b6015007bcb44f54fc31c3d.png\"\/><\/p>\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 useLoader<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/cbb\/9cc\/4c9\/cbb9cc4c902d776dcf49810739b74f29.png\" alt=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438  \" title=\"\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438  \" width=\"476\" height=\"79\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/cbb\/9cc\/4c9\/cbb9cc4c902d776dcf49810739b74f29.png\"\/><\/p>\n<div><figcaption><em>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>flashOpacity<\/strong> \u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438. \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initFlashAnimation<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043f\u0438\u0448\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0418 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <strong>useEffect<\/strong> \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/568\/6c7\/e02\/5686c7e02f8a4c94fa76d48ad5382c28.png\" alt=\"\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435  \" title=\"\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435  \" width=\"512\" height=\"438\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/568\/6c7\/e02\/5686c7e02f8a4c94fa76d48ad5382c28.png\"\/><\/p>\n<div><figcaption><em>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u043e\u0440\u0443\u0436\u0438\u044f, \u0437\u0430\u0434\u0430\u0432 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u0434\u0443\u043b\u0430 \u043e\u0440\u0443\u0436\u0438\u044f.  <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fd9\/417\/c38\/fd9417c3880401470699d23716e84870.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443  \" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443  \" width=\"870\" height=\"137\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fd9\/417\/c38\/fd9417c3880401470699d23716e84870.png\"\/><\/p>\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>startShooting.<\/strong>  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9d3\/7c3\/1b4\/9d37c31b46f8f0111837c7f23b9e0db3.png\" alt=\"\u0414\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f startShooting  \" title=\"\u0414\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f startShooting  \" width=\"355\" height=\"120\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9d3\/7c3\/1b4\/9d37c31b46f8f0111837c7f23b9e0db3.png\"\/><\/p>\n<div><figcaption><em>\u0414\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f startShooting<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b65\/d03\/a5a\/b65d03a5a89eaebacee4285f4849b83d.GIF\" alt=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435\" title=\"\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435\" width=\"500\" height=\"282\"\/><\/p>\n<div><figcaption><em>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435<\/em><\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/641ed6732466cc7a0ea5debf60a21f0d21f56f0b\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <\/a><\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0432\u0443\u043a\u0430 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430  <\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0432 \u043f\u0430\u043f\u043a\u0443 <strong>assets\/sounds<\/strong>.\u00a0<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6c1\/e5c\/1a4\/6c1e5c1a496b74fd7d6d1ba35a742025.png\" alt=\"\u0418\u043c\u043f\u043e\u0440\u0442 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u0430  \" title=\"\u0418\u043c\u043f\u043e\u0440\u0442 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u0430  \" width=\"551\" height=\"59\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6c1\/e5c\/1a4\/6c1e5c1a496b74fd7d6d1ba35a742025.png\"\/><\/p>\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u0430<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <strong>HTMLAudioElement<\/strong> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043d\u0435 \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u044b).<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a3b\/43f\/249\/a3b43f24907d282241a71170d87403b7.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442  \" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442  \" width=\"407\" height=\"60\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a3b\/43f\/249\/a3b43f24907d282241a71170d87403b7.png\"\/><\/p>\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>startShooting<\/strong> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b. \u041f\u0440\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430\u0445 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u044b\u0435 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430. \u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f.  <\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/279\/33b\/09f\/27933b09fbaebb72b089754b2da5159d.png\" alt=\"\u041f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 startShooting  \" title=\"\u041f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 startShooting  \" width=\"358\" height=\"158\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/279\/33b\/09f\/27933b09fbaebb72b089754b2da5159d.png\"\/><\/p>\n<div><figcaption><em>\u041f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 startShooting<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/aed0be8dba52949b5e25e90ed97dff56019b3e40\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430<\/a>  <\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435  <\/h4>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043d\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u0438 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438!<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/902\/8bd\/c2f\/9028bdc2f792124ac1ddfc05eb7b5516.png\" width=\"262\" height=\"63\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/902\/8bd\/c2f\/9028bdc2f792124ac1ddfc05eb7b5516.png\"\/><\/figure>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/774090\/\"> https:\/\/habr.com\/ru\/articles\/774090\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u0443\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0435 \u0443\u0447\u0430\u0441\u0442\u043d\u0438\u043a\u0438 \u0425\u0430\u0431\u0440!  <\/p>\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435  <\/h4>\n<p>\u0412 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0441\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0434\u043d\u0451\u043c. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b, \u043d\u043e \u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u0438\u0433\u0440\u044b \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/docs.pmnd.rs\/react-three-fiber\/getting-started\/introduction\" rel=\"noopener noreferrer nofollow\"><strong>React Three Fiber<\/strong><\/a> &#8212; \u043c\u043e\u0449\u043d\u043e\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f 3D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 <a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\"><strong>Three.js<\/strong><\/a> \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 <strong>React<\/strong>.  <\/p>\n<p>\u0412 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c:<\/p>\n<ul>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437 \u043e\u0440\u0443\u0436\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 <a href=\"https:\/\/github.com\/JI0PATA\/fps-game\" rel=\"noopener noreferrer nofollow\"><u>GitHub<\/u><\/a>  <\/p>\n<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u043c\u043e<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/65549de7627c4d30971aabdb\" data-style=\"\" id=\"65549de7627c4d30971aabdb\" width=\"\"><\/div>\n<div class=\"embed_link\">\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;undefined&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span><\/span><\/div>\n<p><a href=\"https:\/\/codesandbox.io\/p\/github\/JI0PATA\/fps-game\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed__caption-link\">codesandbox.io<\/a><\/div>\n<\/div>\n<h4>\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u0440\u0430\u0432\u043a\u0438  <\/h4>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043f\u0430\u043f\u043a\u0443 images \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043f\u0430\u043f\u043a\u0435 assets. \u0418 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0451\u043c \u0432 \u044d\u0442\u0443 \u043f\u0430\u043f\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043f\u0443\u0442\u044c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0432 \u0444\u0430\u0439\u043b\u0435 <strong>Ground.jsx<\/strong>.<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0424\u0430\u0439\u043b Ground.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043f\u0443\u0442\u0451\u043c \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/050c0cc402ee0f4043e7c786db36afb10f07fa00\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430<\/a><\/p>\n<h4>\u041c\u0435\u0445\u0430\u043d\u0438\u043a\u0430 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f  <\/h4>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0448\u0443\u0442\u0435\u0440\u043e\u0432, \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438. \u041d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043d\u0430 \u043b\u044e\u0431\u0443\u044e \u0434\u0440\u0443\u0433\u0443\u044e \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0438\u0433\u0440\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u043a\u043e\u0434\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0448\u0438, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 <strong>React(Vite)<\/strong> \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0431\u0435\u0437 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0444\u0430\u0439\u043b <strong>.env<\/strong>. \u0414\u0430\u043b\u0435\u0435, \u0438\u043c\u0435\u043d\u043d\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 <strong>VITE_***<\/strong> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 <strong>.env<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043a\u043e\u0434\u044b \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e, \u043a\u043e\u0434 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"\">\n<div><figcaption><em>.env \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u044b\u0448\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.\u00a0<\/p>\n<p>\u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0435 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043c\u044b\u0448\u0438 \u043d\u0430 \u0445\u043e\u043b\u0441\u0442\u0435. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043c\u044b\u0448\u0438 \u043f\u043e \u044d\u043a\u0440\u0430\u043d\u0443 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430, \u0447\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443, \u0447\u0442\u043e \u043f\u043e\u043a\u0430 \u043a\u0443\u0440\u0441\u043e\u0440 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0442\u043e \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043a\u043b\u0438\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c.\u00a0<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <strong>Zustand<\/strong>. \u0412 \u0444\u0430\u0439\u043b\u0435 <strong>App.jsx<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043d\u0430 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u0438 \u0440\u0430\u0437\u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u043a\u0443 \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 App.jsx<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <strong>Weapon.jsx<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0436\u0438\u043c\u0430\u0435\u043c\u044b\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u043c\u044b\u0448\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>mouseButtonHandler<\/strong>. \u0412\u043d\u0443\u0442\u0440\u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u0435\u0449\u0451 \u043d\u0435 \u0431\u044b\u043b \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0447\u0435\u043d, \u0442\u043e \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u0415\u0449\u0451 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 <strong>.env<\/strong> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043b\u0430\u0432\u0438\u0448 \u043c\u044b\u0448\u0438, \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0436\u0438\u043c \u0441\u0442\u0440\u0435\u043b\u044c\u0431\u044b \u0438\u043b\u0438 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0438\u0437 .env<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448 \u043c\u044b\u0448\u0438.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043c\u044b\u0448\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>useAimingStore<\/strong> \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 Zustand<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\">\n<div><figcaption><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432 Weapon.jsx<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0434\u043b\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 setIsAiming<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>mouseButtonHandler<\/strong>, \u0433\u0434\u0435 \u0440\u0430\u043d\u0435\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043f\u0443\u0441\u0442\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438 <strong>AIM_BUTTON<\/strong>, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 mouseButtonHandler<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0444\u0430\u0439\u043b\u0443 <strong>Player.jsx<\/strong> \u0438 \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <strong>useAimingStore<\/strong> \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 <strong>Weapon.jsx<\/strong>. \u0410 \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>easing<\/strong> \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0444\u0430\u0439\u043b\u0430.<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 useAimingStore \u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>isAiming<\/strong> \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isAiming<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f: \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 aimingAnimation \u0438 aimingBackAnimation<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initAimingAnimation<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0431\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0424\u0443\u043d\u043a\u0446\u0438\u044f initAmingAnimation<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u0434\u0430\u043d\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043c\u043e\u0433\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initAimingAnimation<\/strong>. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043e\u0440\u0443\u0436\u0438\u044f.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>useEffect \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 initAimingAnimation<\/em> <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <strong>isAiming<\/strong> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u0438\u043b\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043e\u0440\u0443\u0436\u0438\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c <strong>useEffect<\/strong>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0430 \u0438\u043b\u0438 \u0438\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430. \u0422\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u201c\u043f\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\u201d, \u0430 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043e\u0440\u0443\u0436\u0438\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0430 \u043f\u0440\u0438 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f <strong>onComplete<\/strong> \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u201c\u043f\u043e\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\u201d.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0431\u0443\u0434\u0442\u043e \u0438\u0433\u0440\u043e\u043a \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043b\u0441\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0438\u0437 \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <strong>isAiming<\/strong> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d \u0432 <strong>false<\/strong>, \u0438 \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0430 \u201c\u0438\u043b\u0438\u201d \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0438. \u0420\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e, \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 <strong>null<\/strong>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u0438\u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u0438.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c isAiming \u043d\u0430 null<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\">\n<div><figcaption><em>useEffect \u0434\u043b\u044f \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u0430 \u043f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 &#8212; \u0432\u044b\u0445\u043e\u0434 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f<\/em><\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/2f9fa332d587ca25cfdd6cce55d0080db9409d5e\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430<\/a> <\/p>\n<h4>\u0420\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0430\u0447\u0438  <\/h4>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <strong>Player.jsx<\/strong> \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0441 <strong>setAnimationParams<\/strong> \u043d\u0430 <strong>setSwayingAnimationParams<\/strong>. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0424\u0430\u0439\u043b Player.jsx \u0441 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0410 \u0438\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>initSwayingObjectAnimation<\/strong> \u0443\u0431\u0435\u0440\u0451\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>easing<\/strong>, \u0442.\u043a. \u0440\u0430\u043d\u0435\u0435 \u043c\u044b \u0432\u044b\u043d\u0435\u0441\u043b\u0438 \u0435\u0451 \u0432 \u043a\u043e\u0440\u0435\u043d\u044c \u0444\u0430\u0439\u043b\u0430.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0423\u0431\u0440\u0430\u043d\u043d\u0430\u044f \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 easing<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0444\u0430\u0439\u043b\u0430 <strong>Weapon.jsx<\/strong>.\u00a0<\/p>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <strong>recoilDuration<\/strong> \u043d\u0430 50.<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 recoilDuration<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c <strong>recoilBackAnimation<\/strong> \u0437\u0430 \u043d\u0435\u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u044c\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c <strong>isRecoilAnimationFinished<\/strong>.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 isRecoilAnimationFinished<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>generateNewPositionOfRecoil<\/strong> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <strong>currentPosition<\/strong>.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 generateNewPositionOfRecoil<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>initRecoilAnimation<\/strong> \u0443\u0434\u0430\u043b\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 <strong>initialPosition<\/strong> \u0437\u0430 \u043d\u0435\u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u044c\u044e.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0423\u0431\u0440\u0430\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f initialPosition<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043b\u044f Tween-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043b\u043e\u0433\u0438\u043a\u0443, \u0441\u0434\u0435\u043b\u0430\u0432 \u0435\u0451 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438-\u0432\u043e\u0437\u0432\u0440\u0430\u0442\u043d\u043e\u0439 \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u043d\u0443\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e <strong>twRecoilBackAnimation<\/strong>.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f initRecoilAnimation<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c <strong>useEffect<\/strong>, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u043d\u0430 2 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442\u0434\u0430\u0447\u0438 \u043e\u0440\u0443\u0436\u0438\u044f.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430 useEffect<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/6a848a2c232bdcefb5466fd532edbdc1ea14a76d\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <\/a> <\/p>\n<h4>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435  <\/h4>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435 \u0438\u0437 \u043e\u0440\u0443\u0436\u0438\u044f.\u00a0<\/p>\n<p>\u0412 \u0444\u0430\u0439\u043b\u0435 <strong>Weapon.jsx<\/strong> \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>useLoader<\/strong>. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u0432 <strong>assets\/images.<\/strong><\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u043a <strong>FlashShoot<\/strong>.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 <strong>useLoader<\/strong> \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0446\u0435\u043d\u0443. \u0410 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 <strong>flashAnimation<\/strong>.<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 useLoader<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\">\n<div><figcaption><em>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 <strong>flashOpacity<\/strong> \u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438. \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e <strong>initFlashAnimation<\/strong>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u043f\u0438\u0448\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0418 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f <strong>useEffect<\/strong> \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0434\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0446\u0435\u043d\u0435 \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u043e\u0440\u0443\u0436\u0438\u044f, \u0437\u0430\u0434\u0430\u0432 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u043a\u043e\u043d\u0446\u0435 \u0434\u0443\u043b\u0430 \u043e\u0440\u0443\u0436\u0438\u044f.  <\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0446\u0435\u043d\u0443<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>startShooting.<\/strong>  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0414\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f startShooting<\/em>  <\/figcaption><\/div>\n<\/figure>\n<figure class=\"\">\n<div><figcaption><em>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435<\/em><\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/641ed6732466cc7a0ea5debf60a21f0d21f56f0b\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430 <\/a><\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0432\u0443\u043a\u0430 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430  <\/h4>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0432 \u043f\u0430\u043f\u043a\u0443 <strong>assets\/sounds<\/strong>.\u00a0<\/p>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b.<\/p>\n<figure class=\"full-width\">\n<div><figcaption><em>\u0418\u043c\u043f\u043e\u0440\u0442 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u0430<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <strong>HTMLAudioElement<\/strong> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (\u043d\u0435 \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u044b).<\/p>\n<figure class=\"\">\n<div><figcaption><em>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <strong>startShooting<\/strong> \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b. \u041f\u0440\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0430\u0445 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u044b\u0435 \u0430\u0443\u0434\u0438\u043e\u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u043d\u0430 \u0434\u0440\u0443\u0433\u0430. \u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f.  <\/p>\n<figure class=\"\">\n<div><figcaption><em>\u041f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u043d\u0438\u0435 \u0430\u0443\u0434\u0438\u043e \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 startShooting<\/em>  <\/figcaption><\/div>\n<\/figure>\n<p><a href=\"https:\/\/github.com\/JI0PATA\/fps-game\/commit\/aed0be8dba52949b5e25e90ed97dff56019b3e40\" rel=\"noopener noreferrer nofollow\">\u041a\u043e\u0434 \u0440\u0430\u0437\u0434\u0435\u043b\u0430<\/a>  <\/p>\n<h4>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435  <\/h4>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u0440\u0438\u0446\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u044f, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u043f\u044b\u0448\u043a\u0438 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0437\u0432\u0443\u043a\u043e\u0432\u043e\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u0438 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0435. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043d\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 \u0438 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438!<\/p>\n<figure class=\"\"><\/figure>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/774090\/\"> https:\/\/habr.com\/ru\/articles\/774090\/<\/a><br \/><\/br><\/br><\/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-360232","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360232","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=360232"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/360232\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=360232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=360232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=360232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}