{"id":329522,"date":"2022-02-13T21:01:20","date_gmt":"2022-02-13T21:01:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=329522"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=329522","title":{"rendered":"<span>\u0420\u0438\u0441\u0443\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0433\u0440\u0438\u0431\u044b \u043d\u0430 javascript<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"Otinium caseubbacula\" title=\"Otinium caseubbacula\" height=\"2048\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/947\/66c\/254\/94766c254acd93ac8fcf917fc10a689d.png\" data-width=\"2048\"\/><figcaption>Otinium caseubbacula<\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0438\u0440\u00a0<em>\u0433\u0435\u043d\u0430\u0440\u0442\u0430<\/em>\u00a0\u0438\u00a0<em>nft<\/em>, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0433\u0440\u0438\u0431\u043e\u0432. \u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0432 \u0442\u0435\u043c\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043b\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u00a0<a href=\"https:\/\/habr.com\/ru\/post\/645467\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u044e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e<\/a>, \u0430 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u043d\u0430 \u0444\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0430 \u043d\u0430 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u043e\u0439 3\u0434 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 three js.<\/p>\n<h2>\u041d\u0430 \u0447\u0451\u043c \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c<\/h2>\n<p>\u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0433\u0430\u0442\u044c \u0433\u0440\u0438\u0431\u044b \u0432 \u0431\u043b\u0435\u043d\u0434\u0435\u0440\u0435 \u0438\u043b\u0438 \u0442\u0430\u0447\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c (\u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435) \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434 \u043d\u0444\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c\u0441\u044f javascript-\u043e\u043c \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 webgl. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 3d \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u044f \u0432\u044b\u0431\u0440\u0430\u043b <a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\">three.js<\/a>, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043d\u0430 \u0441\u043b\u0443\u0445\u0443 \u0434\u0430\u0436\u0435 \u0443 \u0434\u0430\u043b\u0451\u043a\u043e\u0433\u043e \u043e\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043c\u0435\u043d\u044f. \u0412\u0446\u0435\u043b\u043e\u043c, \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u043d\u0435 \u0436\u0430\u043b\u0435\u044e, api \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 three js, \u043f\u0440\u043e \u043d\u0438\u0445 <a href=\"https:\/\/threejs.org\/docs\/index.html#manual\/en\/introduction\/Creating-a-scene\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442<\/a>.<\/p>\n<h2>\u0420\u0438\u0441\u0443\u0435\u043c \u043d\u043e\u0436\u043a\u0443<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0438\u0431 \u0441 \u043d\u043e\u0436\u043a\u0438. \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u043b\u0451\u0433\u043a\u0438\u0445 \u043f\u0443\u0442\u0435\u0439, \u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c 3\u0434 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0442\u043e\u0447\u0435\u043a \u0438 \u0433\u0440\u0430\u043d\u0435\u0439. \u0418\u0434\u0435\u044f \u0442\u0430\u043a\u0430\u044f: \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u0433\u043b\u0430\u0434\u043a\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0438 \u0441\u0442\u0430\u043d\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u0439 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044b\u0439 \u043a\u043e\u043d\u0442\u0443\u0440, \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438. \u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0442\u044f\u043d\u0435\u043c \u043d\u0430 \u044d\u0442\u0438 \u0442\u043e\u0447\u043a\u0438 \u0433\u0440\u0430\u043d\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0451\u043d\u043d\u044b\u0439 \u0446\u0438\u043b\u0438\u043d\u0434\u0440 &#8212; \u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u043d\u043e\u0436\u043a\u0438 \u0433\u0440\u0438\u0431\u0430. \u0410 \u0432\u0430\u0440\u044c\u0438\u0440\u0443\u044f \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0438 \u0435\u0433\u043e \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0445\u043e\u0434\u0443 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u043a\u0440\u0438\u0432\u043e\u0439, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u043e\u0436\u043a\u0443 \u0431\u043e\u043b\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439.<\/p>\n<p><strong>\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u043d\u043e\u0436\u043a\u0438<\/strong><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0436\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438\" title=\"\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0436\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4d8\/289\/50b\/4d828950b5bd17fea90d657b965db2b1.png\" data-width=\"1920\"\/><figcaption>\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0436\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438<\/figcaption><\/figure>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u043d\u043e\u0436\u043a\u0438 \u043a\u0430\u043a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Centripetal_Catmull%E2%80%93Rom_spline\" rel=\"noopener noreferrer nofollow\">\u0441\u043f\u043b\u0430\u0439\u043d \u041a\u0430\u0442\u043c\u0443\u043b\u043b\u0430-\u0420\u043e\u043c\u0430<\/a> \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0442\u043e\u0447\u043a\u0430\u043c. \u0424\u043e\u0440\u043c\u0430 \u0441\u0440\u0435\u0437\u0430 \u043d\u043e\u0436\u043a\u0438 &#8212; \u0442\u043e\u0436\u0435 \u0441\u043f\u043b\u0430\u0439\u043d, \u043d\u043e \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044b\u0439, \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u043f\u043e 4 \u0442\u043e\u0447\u043a\u0430\u043c, \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0433\u043b\u0430 \u0438 <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/extras\/core\/Curve.getPointAt\" rel=\"noopener noreferrer nofollow\">\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0437\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043f\u043b\u0430\u0439\u043d\u0435<\/a>. \u041f\u0440\u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u043c \u043e\u0442 \u0443\u0433\u043b\u0430 \u0440\u0430\u0434\u0438\u0443\u0441\u0435, \u044d\u0442\u043e\u0442 \u0441\u043f\u043b\u0430\u0439\u043d \u0431\u043b\u0438\u0437\u043e\u043a \u043a \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b &#8212; \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c? \u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u043c \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0448\u0443\u043c \u043d\u0430 \u0444\u043e\u0440\u043c\u0443 \u043d\u043e\u0436\u043a\u0438 \u0433\u0440\u0438\u0431\u0430. \u041d\u0438\u0436\u0435 &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 api BufferGeometry, \u0433\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u0447\u043a\u0438 \u043d\u043e\u0436\u043a\u0438 \u0433\u0440\u0438\u0431\u0430 \u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0435\u0451 \u0433\u0440\u0430\u043d\u0438, \u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439 <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/core\/BufferGeometry\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0436\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">shroom_height = 10; stipe_vSegments = 20; stipe_rSegments = 20; stipe_points = []; stipe_indices = [];  \/\/ \u0440\u0430\u0434\u0438\u0443\u0441 \u043d\u043e\u0436\u043a\u0438, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0433\u043b\u0430 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043d\u0430 \u0441\u043f\u043b\u0430\u0439\u043d\u0435 function stipe_radius(a, t) { return 1; }  \/\/ \u0444\u043e\u0440\u043c\u0430 \u043d\u043e\u0436\u043a\u0438 stipe_shape = new THREE.CatmullRomCurve3( [   new THREE.Vector3( 0, 0, 0 ),   new THREE.Vector3( 1, shroom_height * 0.25, 0 ),   new THREE.Vector3( 2, shroom_height * 0.5, 0),   new THREE.Vector3( 0, shroom_height * 0.75, 0),   new THREE.Vector3( 1, shroom_height, 0 ), ], closed=false );  \/\/ t - \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0440\u0435\u0437\u0430 \u043d\u0430 stipe_shape, \u043e\u0442 0 \u0434\u043e 1 for (var t = 0; t &lt; 1; t += 1 \/ stipe_vSegments) {   \/\/ \u0444\u043e\u0440\u043c\u0430 \u0441\u0440\u0435\u0437\u0430 \u043d\u043e\u0436\u043a\u0438   var curve = new THREE.CatmullRomCurve3( [     new THREE.Vector3( 0, 0, stipe_radius(0, t)),     new THREE.Vector3( stipe_radius(Math.PI \/ 2, t), 0, 0 ),     new THREE.Vector3( 0, 0, -stipe_radius(Math.PI, t)),     new THREE.Vector3( -stipe_radius(Math.PI * 1.5, t), 0, 0 ), ], closed=true, curveType='catmullrom', tension=0.75);    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0441\u0440\u0435\u0437\u0435 \u043d\u043e\u0436\u043a\u0438   var local_points = curve.getPoints( stipe_rSegments );    \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u0447\u043a\u0438 \u043a \u043c\u0435\u0448\u0443   for (var i = 0; i &lt; local_points.length; i++) {     var v = local_points[i];   stipe_points.push(v.x, v.y, v.z);   } }  \/\/ \u0437\u0430\u0434\u0430\u0451\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0442\u043e\u0447\u0435\u043a, \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0449\u0438\u0445 \u0433\u0440\u0430\u043d\u0438, \u043f\u043e 2 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043d\u0430 \u0433\u0440\u0430\u043d\u044c for (var i = 0; i &lt; stipe_vSegments - 1; i ++) {   for (var j = 0; j &lt; stipe_rSegments; j ++) {     stipe_indices.push(i * (stipe_rSegments + 1) + j,                        i * (stipe_rSegments + 1) + j + 1,                        (i + 1) * (stipe_rSegments + 1) + j);      stipe_indices.push(i * (stipe_rSegments + 1) + j + 1,                        (i + 1) * (stipe_rSegments + 1) + j + 1,                        (i + 1) * (stipe_rSegments + 1) + j);   } }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0431\u0443\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0438\u0437 \u0442\u043e\u0447\u0435\u043a \u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0433\u0440\u0430\u043d\u0435\u0439 var stipe = new THREE.BufferGeometry(); stipe.setAttribute('position', new THREE.BufferAttribute(new Float32Array(stipe_points), 3)); stipe.setIndex(stipe_indices); stipe.computeVertexNormals();<\/code><\/pre>\n<\/div>\n<\/details>\n<p><strong>\u0428\u0443\u043c\u044b<\/strong><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0417\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u043e\u0436\u043a\u0438 \u043f\u0440\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0438 noise_c\" title=\"\u0417\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u043e\u0436\u043a\u0438 \u043f\u0440\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0438 noise_c\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f9\/ec7\/96d\/5f9ec796d5a4423e3f223557c16d1729.png\" data-width=\"1920\"\/><figcaption>\u0417\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u043e\u0436\u043a\u0438 \u043f\u0440\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0438 noise_c<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u043e\u0436\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0443\u043c\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0449\u0443\u044e \u0435\u0451 \u0440\u0430\u0434\u0438\u0443\u0441. \u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 &#8212; \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0443\u043c \u0438\u0437 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 \u043d\u0438\u0436\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443 \u043d\u043e\u0436\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430 <em>noise_c<\/em>. \u0417\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u043d\u043e\u0436\u043a\u0435, \u0447\u0435\u043c \u0432\u044b\u0448\u0435 &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0430\u0434\u043a\u043e\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u043d\u043e\u0436\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u043d\u043e\u0436\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">base_radius = 1; noise_c = 2;  \/\/ \u0440\u0430\u0434\u0438\u0443\u0441 \u043d\u043e\u0436\u043a\u0438, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0433\u043b\u0430 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043d\u0430 \u0441\u043f\u043b\u0430\u0439\u043d\u0435 function stipe_radius(a, t) { return base_radius + (1 - t)*(1 + Math.random())*noise_c; }<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u0420\u0438\u0441\u0443\u0435\u043c \u0448\u043b\u044f\u043f\u043a\u0443<\/h2>\n<p><strong>\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0448\u043b\u044f\u043f\u043a\u0438<\/strong><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u043b\u044f\u043f\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438\" title=\"\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u043b\u044f\u043f\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4cc\/74b\/111\/4cc74b111fe756de4b983849e49ce310.png\" data-width=\"1920\"\/><figcaption>\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u043b\u044f\u043f\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438<\/figcaption><\/figure>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043d\u043e\u0436\u043a\u0435, \u0438\u0437 \u0442\u043e\u0447\u0435\u043a \u0438 \u0433\u0440\u0430\u043d\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u043b\u044f\u043f\u043a\u0443. \u041f\u0443\u0441\u0442\u044c \u0441\u0440\u0435\u0437 \u0448\u043b\u044f\u043f\u043a\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043f\u043b\u0430\u0439\u043d\u043e\u043c (\u0441\u043c. \u043b\u0435\u0432\u044b\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a). \u0411\u0443\u0434\u0435\u043c \u0432\u0440\u0430\u0449\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043f\u043b\u0430\u0439\u043d \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0446\u0430 \u0441\u0442\u0435\u0431\u043b\u044f, \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044f \u0442\u043e\u0447\u043a\u0438 \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044f \u0438\u0445 \u0433\u0440\u0430\u043d\u044f\u043c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0448\u043b\u044f\u043f\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">pileus_points = []; pileus_indices = [];  \/\/ \u0442\u043e\u0447\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0448\u043b\u044f\u043f\u043a\u0438 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 function pileus_surface(a0, t0) {   \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438    \/\/ \u043d\u0430 \u043a\u0440\u0438\u0432\u043e\u0439 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430   var t = t * (1 + radnoise(a, t));   \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0432\u044b\u0448\u043b\u0438 \u0437\u0430 \u043a\u0440\u0438\u0432\u0443\u044e   if (t > 1) t = 1; if (t &lt; 0) t = 0;    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438    \/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 (\u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430)   var shape_point = pileus_shape.getPointAt(t);   var tangent = pileus_shape.getTangentAt(t);   var orth_noise_v = new THREE.Vector3(0,0,0);   const z1 = new THREE.Vector3(0,0,1);   orth_noise_v.crossVectors(z1, tangent);    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u0430 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0443\u0433\u043b\u043e\u0432\u043e\u0433\u043e \u0448\u0443\u043c\u0430 \u0438    \/\/ \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0443\u0433\u043b\u0430   var a = angnoise(a0, t);   var surface_point = new THREE.Vector3(     Math.cos(a) * shape_point.x,     shape_point.y,     Math.sin(a) * shape_point.x   );    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430   var surfnoise_val = orthnoise(a, t);    \/\/ \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 (a0, t0) \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0432\u0441\u0435\u0445 \u0448\u0443\u043c\u043e\u0432   surface_point.x += orth_noise_v.x * Math.cos(a) * surfnoise_val;   surface_point.y += orth_noise_v.y * surfnoise_val;   surface_point.z += orth_noise_v.x * Math.sin(a) * surfnoise_val;    return surface_point; }  \/\/ \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0448\u043b\u044f\u043f\u043a\u0438 \u0441 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \/\/ pileus_rSegments * pileus_cSegments for (var i = 1; i &lt;= pileus_rSegments; i++) {   var t0 = i \/ pileus_rSegments; for (var j = 0; j &lt; pileus_cSegments; j++) {     var a0 = Math.PI * 2 \/ pileus_cSegments * j;     var surface_point = pileus_surface(a0, t0);     pileus_points.push(       surface_point.x,        surface_point.y,        surface_point.z     ); } }  \/\/ \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u0430\u044f \u043c\u0430\u0433\u0438\u044f, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0430\u044f \u0442\u043e\u0447\u043a\u0438 \u0433\u0440\u0430\u043d\u044f\u043c\u0438 for (var i = 0; i &lt; pileus_rSegments - 1; i ++) {   if (i == 0) {      for (var j = 0; j &lt; pileus_cSegments; j ++)        pileus_indices.push(         0,          (j + 1) % pileus_cSegments + 1,          j + 1       );   }   for (var j = 0; j &lt; pileus_cSegments; j ++) {     pileus_indices.push(     i * pileus_cSegments + 1 + j,       (i + 1) * pileus_cSegments + 1 + (j + 1) % pileus_cSegments,   (i + 1) * pileus_cSegments + 1 + j );      pileus_indices.push(       i * pileus_cSegments + 1 + j,       i * pileus_cSegments + 1 + (j + 1) % pileus_cSegments,       (i + 1) * pileus_cSegments + 1 + (j + 1) % pileus_cSegments     ); } }  \/\/ \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u0447\u0442\u043e \u043d\u0430\u0433\u0435\u043d\u0435\u0440\u0438\u043b\u0438 \u0432 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e pileus.setAttribute('position', new THREE.BufferAttribute(new Float32Array(pileus_points), 3)); pileus.setIndex(pileus_indices); pileus.computeVertexNormals();<\/code><\/pre>\n<\/div>\n<\/details>\n<p><strong>\u0428\u0443\u043c\u044b<\/strong><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0428\u0443\u043c\u044b \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e: \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u0443\u0433\u043b\u043e\u0432\u043e\u0439, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438\" title=\"\u0428\u0443\u043c\u044b \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e: \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u0443\u0433\u043b\u043e\u0432\u043e\u0439, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f42\/8ea\/8b6\/f428ea8b620047821a5fe3ccc326e6af.png\" data-width=\"1920\"\/><figcaption>\u0428\u0443\u043c\u044b \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e: \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u0443\u0433\u043b\u043e\u0432\u043e\u0439, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043b\u043e\u0436\u0438\u043c \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0443 \u0448\u0443\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0451 \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0435\u0435. \u0412 \u0441\u0432\u043e\u0451\u043c \u043a\u043e\u0434\u0435 \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0448\u0443\u043c \u0448\u043b\u044f\u043f\u043a\u0438 \u043d\u0430 3 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435: <em>\u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439<\/em> &#8212; \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0448\u043b\u044f\u043f\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0433\u043b\u0430, <em>\u0443\u0433\u043b\u043e\u0432\u043e\u0439<\/em> &#8212; \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u0430 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442 \u0443\u0433\u043b\u0430, \u0438 <em>\u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/em> &#8212; \u0441\u0434\u0432\u0438\u0433 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043f\u043b\u0430\u0439\u043d\u0443 \u0448\u043b\u044f\u043f\u043a\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u0448\u043b\u044f\u043f\u043a\u0430 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0438\u0437\u0433\u0438\u0431\u043e\u0432 \u0437\u0434\u0435\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0448\u0443\u043c, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 2d <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A8%D1%83%D0%BC_%D0%9F%D0%B5%D1%80%D0%BB%D0%B8%D0%BD%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0448\u0443\u043c \u041f\u0435\u0440\u043b\u0438\u043d\u0430<\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/josephg\/noisejs\" rel=\"noopener noreferrer nofollow\">noisejs<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0428\u043b\u044f\u043f\u043d\u044b\u0439 \u0448\u0443\u043c<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">NOISE.seed(Math.random());  function radnoise(a, t) {   return -Math.abs(NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.5); }  function angnoise(a, t) {   return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.2; }  function orthnoise(a, t) {   return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * t; }<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u041f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438, \u044e\u0431\u043a\u0430, \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0435<\/h2>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u041f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438, \u044e\u0431\u043a\u0430, \u0442\u043e\u0447\u043a\u0438 \u0438 \u0433\u0440\u0438\u0431 \u0446\u0435\u043b\u0438\u043a\u043e\u043c\" title=\"\u041f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438, \u044e\u0431\u043a\u0430, \u0442\u043e\u0447\u043a\u0438 \u0438 \u0433\u0440\u0438\u0431 \u0446\u0435\u043b\u0438\u043a\u043e\u043c\" height=\"1080\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7d2\/9e7\/0dd\/7d29e70dd7a9c3f23966ac51aeb50e8e.png\" data-width=\"1920\"\/><figcaption>\u041f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438, \u044e\u0431\u043a\u0430, \u0442\u043e\u0447\u043a\u0438 \u0438 \u0433\u0440\u0438\u0431 \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/figcaption><\/figure>\n<p>\u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441\u043e \u0448\u043b\u044f\u043f\u043a\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0435\u0449\u0451 2 \u0443\u0437\u043d\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0447\u0430\u0441\u0442\u0438 \u0433\u0440\u0438\u0431\u0430 &#8212; \u043f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438 \u0438 \u044e\u0431\u043a\u0443. \u0410 \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0435 (\u043a\u0430\u043a \u0443 \u043c\u0443\u0445\u043e\u043c\u043e\u0440\u0430), \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u043a\u0430 \u0442\u043e\u0447\u0435\u043a \u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e \u043d\u0438\u043c \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u043c <a href=\"https:\/\/threejs.org\/docs\/#examples\/en\/geometries\/ConvexGeometry\" rel=\"noopener noreferrer nofollow\">ConvexGeometry<\/a>, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043c \u0438\u0445 \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u0443 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0447\u0435\u0440\u0435\u0437 <em>mergeBufferGeometries<\/em>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043c\u0443\u0445\u043e\u043c\u043e\u0440\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">var bufgeoms = []; var N = 10;  for (var i = 0; i &lt; dots_num; i++) {   var dot_points = [];  \/\/ \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0435\u043d\u0442\u0440 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0435   var a = Math.random() * Math.PI * 2;   var t = Math.random();   var dot_center = pileus_surface(a, t);  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043e\u0431\u043b\u0430\u043a\u043e \u0442\u043e\u0447\u0435\u043a \u0432\u043e\u043a\u0440\u0443\u0433 \u0446\u0435\u043d\u0442\u0440\u0430   for (var j = 0; j &lt; N; j++) {     dot_points.push(new THREE.Vector3(       dot_center.x + (1 - Math.random() * 2) * dot_radius,        dot_center.y + (1 - Math.random() * 2) * dot_radius,       dot_center.z + (1 - Math.random() * 2) * dot_radius );   }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u043b\u0430\u043a\u0430 \u0442\u043e\u0447\u0435\u043a   var dot_geometry = new THREE.ConvexGeometry( dots_points );   bufgeoms.push(dots_geometry); }  \/\/ \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u043c\u0443\u0445\u043e\u043c\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432 \u043e\u0434\u043d\u0443 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e var dots = THREE.BufferGeometryUtils.mergeBufferGeometries(bufgeoms);<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439<\/h2>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439\" title=\"\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439\" height=\"824\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3ac\/d0e\/42d\/3acd0e42de0a0acf301170c486cf9587.png\" data-width=\"1712\"\/><figcaption>\u0423\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0430\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439<\/figcaption><\/figure>\n<p>\u041e\u0434\u0438\u043d \u0433\u0440\u0438\u0431 \u0445\u043e\u0440\u043e\u0448\u043e, \u0430 \u043c\u043d\u043e\u0433\u043e &#8212; \u043b\u0443\u0447\u0448\u0435. \u041d\u043e \u0435\u0441\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u0433\u0440\u0438\u0431\u044b \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435, \u0442\u043e \u043e\u043d\u0438 \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u043d\u0430\u0447\u043d\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0427\u0442\u043e\u0431\u044b \u0442\u0430\u043a \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e, \u044f \u0447\u0435\u0441\u0442\u043d\u043e \u0441\u043f\u0451\u0440 <a href=\"https:\/\/stackoverflow.com\/questions\/11473755\/how-to-detect-collision-in-three-js\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u0442 \u043e\u0442\u0441\u044e\u0434\u0430<\/a> \u0441\u043d\u0438\u043f\u043f\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e\u0449\u0438\u0439 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0410 \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 &#8212; \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0433\u0440\u0438\u0431\u043e\u043c \u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e \u0435\u0433\u043e \u0443\u043f\u0440\u043e\u0449\u0451\u043d\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u043c\u0430\u043b\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u0435\u0440\u0442\u0435\u043a\u0441\u043e\u0432.<\/p>\n<h2>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439<\/h2>\n<p>\u0414\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0433\u0440\u0438\u0431\u043e\u0432 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u0443\u044e <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A6%D0%B5%D0%BF%D1%8C_%D0%9C%D0%B0%D1%80%D0%BA%D0%BE%D0%B2%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0446\u0435\u043f\u044c \u043c\u0430\u0440\u043a\u043e\u0432\u0430<\/a> \u043e\u0431\u0443\u0447\u0435\u043d\u043d\u0443\u044e \u043d\u0430 \u0442\u044b\u0441\u044f\u0447\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0438\u0434\u043e\u0432 \u0433\u0440\u0438\u0431\u043e\u0432 <a href=\"https:\/\/www.prevalentfungi.org\/fungi.cfm\" rel=\"noopener noreferrer nofollow\">\u0432\u043e\u0442 \u043e\u0442\u0441\u044e\u0434\u0430<\/a>. \u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043d\u0430\u0434\u043e \u0431\u044b\u043b\u043e \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0435 \u0442\u0435\u043a\u0441\u0442\u044b \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0431\u0449\u0438\u0445 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442. \u042f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u043e\u043a\u0435\u043d\u0438\u0437\u0430\u0442\u043e\u0440 <a href=\"https:\/\/github.com\/VKCOM\/YouTokenToMe\" rel=\"noopener noreferrer nofollow\">YouTokenMe<\/a>, \u0440\u0430\u0437\u0431\u0438\u043b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043d\u0430 200 \u0442\u043e\u043a\u0435\u043d\u043e\u0432, \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u043b \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430 \u0438 \u0437\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0443\u044e\u0441\u044f \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0432 json. \u0412\u0441\u0451 \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 JS \u043a\u043e\u0434 &#8212; \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u0443 \u043c\u0430\u0442\u0440\u0438\u0446\u0443 \u0438 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0442\u043e\u043a\u0435\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0430\u043a\u043e\u043f\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0432.<\/p>\n<h2>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p><strong>\u041e\u0431\u0432\u043e\u0434\u043a\u0430 \u043a\u043e\u043d\u0442\u0443\u0440\u0430<\/strong><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043d\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430\" title=\"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043d\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430\" height=\"540\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f28\/794\/d80\/f28794d803236dca306e6e3afbbcdc30.png\" data-width=\"1920\"\/><figcaption>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043d\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u0448\u0435\u0439\u0434\u0435\u0440\u0430<\/figcaption><\/figure>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/stemkoski.github.io\/Three.js\/Outline.html\" rel=\"noopener noreferrer nofollow\">OutlineEffect \u0432\u043e\u0442 \u043e\u0442\u0441\u044e\u0434\u0430<\/a>. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u0431\u0435\u043b\u043e\u0439 \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u043e\u0439 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435\u043c \u0442\u0435\u043d\u0435\u0439, \u0442\u0430\u043a\u0438\u0435 \u043a\u043e\u043d\u0442\u0443\u0440\u044b \u0434\u0430\u044e\u0442 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0435\u0442\u0447\u0435\u0432\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442.<\/p>\n<p><strong>\u0426\u0432\u0435\u0442<\/strong><\/p>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"\/img\/image-loader.svg\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0446\u0432\u0435\u0442\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0446\u0432\u0435\u0442\" height=\"630\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b7f\/cbb\/998\/b7fcbb99845e040894c571647b02ea1e.png\" data-width=\"1920\"\/><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0446\u0432\u0435\u0442<\/figcaption><\/figure>\n<p>\u041d\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0446\u0432\u0435\u0442\u0430, \u0430 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0449\u0451 \u0438 UV-map \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. \u0422\u0443\u0442 \u043e\u0447\u0435\u043d\u044c \u043a\u0441\u0442\u0430\u0442\u0438 \u043f\u0440\u0438\u0448\u043b\u0430\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0432\u0435\u0440\u0442\u0435\u043a\u0441\u043e\u0432 \u0431\u0443\u0444\u0435\u0440\u043d\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438. \u0422\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0438 \u0448\u0443\u043c\u044b \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0438, \u0446\u0432\u0435\u0442 \u0432\u0435\u0440\u0442\u0435\u043a\u0441\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0443\u0433\u043b\u0430 \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0441\u043f\u043b\u0430\u0439\u043d\u0435. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a, \u043a\u0440\u0430\u0441\u044f\u0449\u0438\u0445 \u0432\u0435\u0440\u0442\u0435\u043a\u0441\u044b \u0432 \u043a\u043e\u0434 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0436\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u0440\u0430\u0441\u0438\u043c \u043d\u043e\u0436\u043a\u0443<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">stipe_colors = [];  c = [100, 100, 100] \/\/ \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0446\u0432\u0435\u0442 v = [100, 100, 100] \/\/ \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u044b \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u0430  function stipe_color(a, t) {   return [c[0] + t * v[0], c[1] + t * v[1], c[2] + t * v[2]]; }  ... stipe_points.push(v.x, v.y, v.z); stipe_colors.push(...stipe_color(a, t)); ...  var stipe = new THREE.BufferGeometry(); ... stipe.setAttribute('color', new THREE.Float32BufferAttribute(stipe_colors, 3));<\/code><\/pre>\n<\/div>\n<\/details>\n<p><strong>&#171;\u041f\u043b\u0451\u043d\u043e\u0447\u043d\u044b\u0439&#187; \u0448\u0443\u043c<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/c6a\/6af\/9a4\/c6a6af9a446a2a26cceaee6fbd46e9e5.jpg\" alt=\"\u041f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0438 \u0448\u0443\u043c\u043d\u044b\u0435 \u0433\u0440\u0438\u0431\u044b\" title=\"\u041f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0438 \u0448\u0443\u043c\u043d\u044b\u0435 \u0433\u0440\u0438\u0431\u044b\" width=\"1196\" height=\"601\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c6a\/6af\/9a4\/c6a6af9a446a2a26cceaee6fbd46e9e5.jpg\" data-blurred=\"true\"\/><figcaption>\u041f\u043e\u0447\u0442\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0438 \u0448\u0443\u043c\u043d\u044b\u0435 \u0433\u0440\u0438\u0431\u044b<\/figcaption><\/figure>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044f \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0448\u0430\u0440\u044e \u0432 \u0448\u0435\u0439\u0434\u0435\u0440\u0430\u0445, \u0434\u043b\u044f \u0437\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/threejs.org\/docs\/#examples\/en\/postprocessing\/EffectComposer\" rel=\"noopener noreferrer nofollow\">EffectComposer<\/a> &#8212; \u0448\u0442\u0443\u043a\u0443, \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u044e\u0449\u0443\u044e \u043f\u043e\u0441\u0442\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0438\u043d\u0433 \u0432 three js. \u041a\u0430\u043a \u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/threejs.org\/examples\/#webgl_postprocessing_advanced\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0443\u0442<\/a>. \u0414\u043b\u044f \u043d\u0435\u0451 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043d\u0435 \u0448\u0443\u043c.<\/p>\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/f12\/ffc\/a6b\/f12ffca6b0c4aa4df9c3cdf3c50f2527.jpg\" alt=\"\u041f\u0435\u0440\u0432\u044b\u0435 15 &quot;\u043e\u0442\u0447\u0435\u043a\u0430\u043d\u0435\u043d\u043d\u044b\u0445&quot; \u043d\u0430 fxhash \u0433\u0440\u0438\u0431\u043e\u0432\" title=\"\u041f\u0435\u0440\u0432\u044b\u0435 15 &quot;\u043e\u0442\u0447\u0435\u043a\u0430\u043d\u0435\u043d\u043d\u044b\u0445&quot; \u043d\u0430 fxhash \u0433\u0440\u0438\u0431\u043e\u0432\" width=\"4000\" height=\"2400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f12\/ffc\/a6b\/f12ffca6b0c4aa4df9c3cdf3c50f2527.jpg\" data-blurred=\"true\"\/><figcaption>\u041f\u0435\u0440\u0432\u044b\u0435 15 &#171;\u043e\u0442\u0447\u0435\u043a\u0430\u043d\u0435\u043d\u043d\u044b\u0445&#187; \u043d\u0430 fxhash \u0433\u0440\u0438\u0431\u043e\u0432<\/figcaption><\/figure>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 <s>\u0432\u043e\u043b\u0448\u0435\u0431\u043d\u044b\u0445<\/s> \u0433\u0440\u0438\u0431\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. <a href=\"https:\/\/www.fxhash.xyz\/generative\/slug\/mushroom-atlas\" rel=\"noopener noreferrer nofollow\">\u041f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u0433\u0440\u0438\u0431\u044b<\/a> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 fxhash.<\/p>\n<h2>\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p><a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\">Three js<\/a> &#8212; \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e three js<\/p>\n<p><a href=\"https:\/\/genclub.club\/\" rel=\"noopener noreferrer nofollow\">\u0413\u0435\u043d\u043a\u043b\u0443\u0431<\/a> &#8212; \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u0433\u0435\u043d\u0430\u0440\u0442\u0430<\/p>\n<p><a href=\"https:\/\/twitter.com\/ferluht\" rel=\"noopener noreferrer nofollow\">Twitter<\/a> &#8212; \u043c\u043e\u0439 \u0442\u0432\u0438\u0442\u0442\u043e\u0440 \u0432\u043e\u0442 \u0441 \u044d\u0442\u0438\u043c\u0438 \u0432\u0441\u0435\u043c\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0448\u0442\u0443\u043a\u0430\u043c\u0438<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/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\/post\/651267\/\"> https:\/\/habr.com\/ru\/post\/651267\/<\/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_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><figcaption>Otinium caseubbacula<\/figcaption><\/figure>\n<p>\u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u043c\u0438\u0440\u00a0<em>\u0433\u0435\u043d\u0430\u0440\u0442\u0430<\/em>\u00a0\u0438\u00a0<em>nft<\/em>, \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0433\u0440\u0438\u0431\u043e\u0432. \u0414\u043b\u044f \u0442\u0435\u0445 \u043a\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0432 \u0442\u0435\u043c\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0441\u043b\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u00a0<a href=\"https:\/\/habr.com\/ru\/post\/645467\/\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u044e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044e<\/a>, \u0430 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u043d\u0430 \u0444\u0438\u043b\u043e\u0441\u043e\u0444\u0438\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u0430 \u043d\u0430 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043d\u043e\u0439 3\u0434 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0432 three js.<\/p>\n<h2>\u041d\u0430 \u0447\u0451\u043c \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c<\/h2>\n<p>\u041c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0430\u043f\u0440\u043e\u0433\u0430\u0442\u044c \u0433\u0440\u0438\u0431\u044b \u0432 \u0431\u043b\u0435\u043d\u0434\u0435\u0440\u0435 \u0438\u043b\u0438 \u0442\u0430\u0447\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0435 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c (\u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435) \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u0435\u0440\u044c\u0451\u0437\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u043d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434 \u043d\u0444\u0442 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c\u0441\u044f javascript-\u043e\u043c \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 webgl. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 3d \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u044f \u0432\u044b\u0431\u0440\u0430\u043b <a href=\"https:\/\/threejs.org\/\" rel=\"noopener noreferrer nofollow\">three.js<\/a>, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043d\u0430 \u0441\u043b\u0443\u0445\u0443 \u0434\u0430\u0436\u0435 \u0443 \u0434\u0430\u043b\u0451\u043a\u043e\u0433\u043e \u043e\u0442 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043c\u0435\u043d\u044f. \u0412\u0446\u0435\u043b\u043e\u043c, \u043e \u0432\u044b\u0431\u043e\u0440\u0435 \u043d\u0435 \u0436\u0430\u043b\u0435\u044e, api \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 three js, \u043f\u0440\u043e \u043d\u0438\u0445 <a href=\"https:\/\/threejs.org\/docs\/index.html#manual\/en\/introduction\/Creating-a-scene\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442<\/a>.<\/p>\n<h2>\u0420\u0438\u0441\u0443\u0435\u043c \u043d\u043e\u0436\u043a\u0443<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0451\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u0440\u0438\u0431 \u0441 \u043d\u043e\u0436\u043a\u0438. \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u043b\u0451\u0433\u043a\u0438\u0445 \u043f\u0443\u0442\u0435\u0439, \u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c 3\u0434 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438, \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0442\u043e\u0447\u0435\u043a \u0438 \u0433\u0440\u0430\u043d\u0435\u0439. \u0418\u0434\u0435\u044f \u0442\u0430\u043a\u0430\u044f: \u0432\u043e\u0437\u044c\u043c\u0451\u043c \u0433\u043b\u0430\u0434\u043a\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0438 \u0441\u0442\u0430\u043d\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u0439 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044b\u0439 \u043a\u043e\u043d\u0442\u0443\u0440, \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044f \u043f\u043e \u043c\u0435\u0440\u0435 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u043a\u0438. \u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0442\u044f\u043d\u0435\u043c \u043d\u0430 \u044d\u0442\u0438 \u0442\u043e\u0447\u043a\u0438 \u0433\u0440\u0430\u043d\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0441\u043a\u0440\u0438\u0432\u043b\u0451\u043d\u043d\u044b\u0439 \u0446\u0438\u043b\u0438\u043d\u0434\u0440 &#8212; \u043f\u043e\u0434\u043e\u0431\u0438\u0435 \u043d\u043e\u0436\u043a\u0438 \u0433\u0440\u0438\u0431\u0430. \u0410 \u0432\u0430\u0440\u044c\u0438\u0440\u0443\u044f \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0438 \u0435\u0433\u043e \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0445\u043e\u0434\u0443 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u043a\u0440\u0438\u0432\u043e\u0439, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043d\u043e\u0436\u043a\u0443 \u0431\u043e\u043b\u0435\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0438 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e\u0439.<\/p>\n<p><strong>\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u043d\u043e\u0436\u043a\u0438<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u043e\u0436\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438<\/figcaption><\/figure>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u043d\u043e\u0436\u043a\u0438 \u043a\u0430\u043a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Centripetal_Catmull%E2%80%93Rom_spline\" rel=\"noopener noreferrer nofollow\">\u0441\u043f\u043b\u0430\u0439\u043d \u041a\u0430\u0442\u043c\u0443\u043b\u043b\u0430-\u0420\u043e\u043c\u0430<\/a> \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0442\u043e\u0447\u043a\u0430\u043c. \u0424\u043e\u0440\u043c\u0430 \u0441\u0440\u0435\u0437\u0430 \u043d\u043e\u0436\u043a\u0438 &#8212; \u0442\u043e\u0436\u0435 \u0441\u043f\u043b\u0430\u0439\u043d, \u043d\u043e \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u044b\u0439, \u043f\u0440\u043e\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u043f\u043e 4 \u0442\u043e\u0447\u043a\u0430\u043c, \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0433\u043b\u0430 \u0438 <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/extras\/core\/Curve.getPointAt\" rel=\"noopener noreferrer nofollow\">\u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441\u0440\u0435\u0437\u0430 \u043d\u0430 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043f\u043b\u0430\u0439\u043d\u0435<\/a>. \u041f\u0440\u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u044f\u0449\u0435\u043c \u043e\u0442 \u0443\u0433\u043b\u0430 \u0440\u0430\u0434\u0438\u0443\u0441\u0435, \u044d\u0442\u043e\u0442 \u0441\u043f\u043b\u0430\u0439\u043d \u0431\u043b\u0438\u0437\u043e\u043a \u043a \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b &#8212; \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c? \u041d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0435\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0436\u0435 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u043c \u0447\u0442\u043e\u0431\u044b \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043d\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0448\u0443\u043c \u043d\u0430 \u0444\u043e\u0440\u043c\u0443 \u043d\u043e\u0436\u043a\u0438 \u0433\u0440\u0438\u0431\u0430. \u041d\u0438\u0436\u0435 &#8212; \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 api BufferGeometry, \u0433\u0434\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u0447\u043a\u0438 \u043d\u043e\u0436\u043a\u0438 \u0433\u0440\u0438\u0431\u0430 \u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0435\u0451 \u0433\u0440\u0430\u043d\u0438, \u0430 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u043e\u0439 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439 <a href=\"https:\/\/threejs.org\/docs\/#api\/en\/core\/BufferGeometry\" rel=\"noopener noreferrer nofollow\">\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u0443\u0442<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043d\u043e\u0436\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">shroom_height = 10; stipe_vSegments = 20; stipe_rSegments = 20; stipe_points = []; stipe_indices = [];  \/\/ \u0440\u0430\u0434\u0438\u0443\u0441 \u043d\u043e\u0436\u043a\u0438, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0433\u043b\u0430 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043d\u0430 \u0441\u043f\u043b\u0430\u0439\u043d\u0435 function stipe_radius(a, t) { return 1; }  \/\/ \u0444\u043e\u0440\u043c\u0430 \u043d\u043e\u0436\u043a\u0438 stipe_shape = new THREE.CatmullRomCurve3( [   new THREE.Vector3( 0, 0, 0 ),   new THREE.Vector3( 1, shroom_height * 0.25, 0 ),   new THREE.Vector3( 2, shroom_height * 0.5, 0),   new THREE.Vector3( 0, shroom_height * 0.75, 0),   new THREE.Vector3( 1, shroom_height, 0 ), ], closed=false );  \/\/ t - \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0440\u0435\u0437\u0430 \u043d\u0430 stipe_shape, \u043e\u0442 0 \u0434\u043e 1 for (var t = 0; t &lt; 1; t += 1 \/ stipe_vSegments) {   \/\/ \u0444\u043e\u0440\u043c\u0430 \u0441\u0440\u0435\u0437\u0430 \u043d\u043e\u0436\u043a\u0438   var curve = new THREE.CatmullRomCurve3( [     new THREE.Vector3( 0, 0, stipe_radius(0, t)),     new THREE.Vector3( stipe_radius(Math.PI \/ 2, t), 0, 0 ),     new THREE.Vector3( 0, 0, -stipe_radius(Math.PI, t)),     new THREE.Vector3( -stipe_radius(Math.PI * 1.5, t), 0, 0 ), ], closed=true, curveType='catmullrom', tension=0.75);    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0441\u0440\u0435\u0437\u0435 \u043d\u043e\u0436\u043a\u0438   var local_points = curve.getPoints( stipe_rSegments );    \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u0447\u043a\u0438 \u043a \u043c\u0435\u0448\u0443   for (var i = 0; i &lt; local_points.length; i++) {     var v = local_points[i];   stipe_points.push(v.x, v.y, v.z);   } }  \/\/ \u0437\u0430\u0434\u0430\u0451\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u044b \u0442\u043e\u0447\u0435\u043a, \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0449\u0438\u0445 \u0433\u0440\u0430\u043d\u0438, \u043f\u043e 2 \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u043d\u0430 \u0433\u0440\u0430\u043d\u044c for (var i = 0; i &lt; stipe_vSegments - 1; i ++) {   for (var j = 0; j &lt; stipe_rSegments; j ++) {     stipe_indices.push(i * (stipe_rSegments + 1) + j,                        i * (stipe_rSegments + 1) + j + 1,                        (i + 1) * (stipe_rSegments + 1) + j);      stipe_indices.push(i * (stipe_rSegments + 1) + j + 1,                        (i + 1) * (stipe_rSegments + 1) + j + 1,                        (i + 1) * (stipe_rSegments + 1) + j);   } }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0431\u0443\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0438\u0437 \u0442\u043e\u0447\u0435\u043a \u0438 \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u0432 \u0433\u0440\u0430\u043d\u0435\u0439 var stipe = new THREE.BufferGeometry(); stipe.setAttribute('position', new THREE.BufferAttribute(new Float32Array(stipe_points), 3)); stipe.setIndex(stipe_indices); stipe.computeVertexNormals();<\/code><\/pre>\n<\/div>\n<\/details>\n<p><strong>\u0428\u0443\u043c\u044b<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0417\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u043e\u0436\u043a\u0438 \u043f\u0440\u0438 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u0438 noise_c<\/figcaption><\/figure>\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u043e\u0436\u043a\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u0430 \u0431\u043e\u043b\u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u043e, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0443\u043c\u0430 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u044e\u0449\u0443\u044e \u0435\u0451 \u0440\u0430\u0434\u0438\u0443\u0441. \u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 &#8212; \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0448\u0443\u043c \u0438\u0437 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430 \u043d\u0438\u0436\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0444\u043e\u0440\u043c\u0443 \u043d\u043e\u0436\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430 <em>noise_c<\/em>. \u0417\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u043d\u043e\u0436\u043a\u0435, \u0447\u0435\u043c \u0432\u044b\u0448\u0435 &#8212; \u0442\u0435\u043c \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0430\u0434\u043a\u043e\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u043d\u043e\u0436\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u0437\u0430\u0448\u0443\u043c\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u043d\u043e\u0436\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">base_radius = 1; noise_c = 2;  \/\/ \u0440\u0430\u0434\u0438\u0443\u0441 \u043d\u043e\u0436\u043a\u0438, \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0443\u0433\u043b\u0430 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043d\u0430 \u0441\u043f\u043b\u0430\u0439\u043d\u0435 function stipe_radius(a, t) { return base_radius + (1 - t)*(1 + Math.random())*noise_c; }<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u0420\u0438\u0441\u0443\u0435\u043c \u0448\u043b\u044f\u043f\u043a\u0443<\/h2>\n<p><strong>\u0413\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044f \u0448\u043b\u044f\u043f\u043a\u0438<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0421\u0442\u0430\u0434\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u043b\u044f\u043f\u043a\u0438: \u0441\u043f\u043b\u0430\u0439\u043d, \u0442\u043e\u0447\u043a\u0438, \u0433\u0440\u0430\u043d\u0438<\/figcaption><\/figure>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043d\u043e\u0436\u043a\u0435, \u0438\u0437 \u0442\u043e\u0447\u0435\u043a \u0438 \u0433\u0440\u0430\u043d\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u043b\u044f\u043f\u043a\u0443. \u041f\u0443\u0441\u0442\u044c \u0441\u0440\u0435\u0437 \u0448\u043b\u044f\u043f\u043a\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u043f\u043b\u0430\u0439\u043d\u043e\u043c (\u0441\u043c. \u043b\u0435\u0432\u044b\u0439 \u0440\u0438\u0441\u0443\u043d\u043e\u043a). \u0411\u0443\u0434\u0435\u043c \u0432\u0440\u0430\u0449\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0441\u043f\u043b\u0430\u0439\u043d \u0432\u043e\u043a\u0440\u0443\u0433 \u043a\u043e\u043d\u0446\u0430 \u0441\u0442\u0435\u0431\u043b\u044f, \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044f \u0442\u043e\u0447\u043a\u0438 \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u044f \u0438\u0445 \u0433\u0440\u0430\u043d\u044f\u043c\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0448\u043b\u044f\u043f\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">pileus_points = []; pileus_indices = [];  \/\/ \u0442\u043e\u0447\u043a\u0430 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438 \u0448\u043b\u044f\u043f\u043a\u0438 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 function pileus_surface(a0, t0) {   \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438    \/\/ \u043d\u0430 \u043a\u0440\u0438\u0432\u043e\u0439 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430   var t = t * (1 + radnoise(a, t));   \/\/ \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0432\u044b\u0448\u043b\u0438 \u0437\u0430 \u043a\u0440\u0438\u0432\u0443\u044e   if (t > 1) t = 1; if (t &lt; 0) t = 0;    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043d\u043e\u0440\u043c\u0430\u043b\u044c, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438    \/\/ \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0435 (\u0435\u0434\u0438\u043d\u0438\u0447\u043d\u044b\u0439 \u0432\u0435\u043a\u0442\u043e\u0440 \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430)   var shape_point = pileus_shape.getPointAt(t);   var tangent = pileus_shape.getTangentAt(t);   var orth_noise_v = new THREE.Vector3(0,0,0);   const z1 = new THREE.Vector3(0,0,1);   orth_noise_v.crossVectors(z1, tangent);    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u0430 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0443\u0433\u043b\u043e\u0432\u043e\u0433\u043e \u0448\u0443\u043c\u0430 \u0438    \/\/ \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u043e\u0433\u043e \u0443\u0433\u043b\u0430   var a = angnoise(a0, t);   var surface_point = new THREE.Vector3(     Math.cos(a) * shape_point.x,     shape_point.y,     Math.sin(a) * shape_point.x   );    \/\/ \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u043c \u043c\u043d\u043e\u0436\u0438\u0442\u0435\u043b\u044c \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0448\u0443\u043c\u0430   var surfnoise_val = orthnoise(a, t);    \/\/ \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 (a0, t0) \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0432\u0441\u0435\u0445 \u0448\u0443\u043c\u043e\u0432   surface_point.x += orth_noise_v.x * Math.cos(a) * surfnoise_val;   surface_point.y += orth_noise_v.y * surfnoise_val;   surface_point.z += orth_noise_v.x * Math.sin(a) * surfnoise_val;    return surface_point; }  \/\/ \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u0448\u043b\u044f\u043f\u043a\u0438 \u0441 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \/\/ pileus_rSegments * pileus_cSegments for (var i = 1; i &lt;= pileus_rSegments; i++) {   var t0 = i \/ pileus_rSegments; for (var j = 0; j &lt; pileus_cSegments; j++) {     var a0 = Math.PI * 2 \/ pileus_cSegments * j;     var surface_point = pileus_surface(a0, t0);     pileus_points.push(       surface_point.x,        surface_point.y,        surface_point.z     ); } }  \/\/ \u0438\u043d\u0434\u0435\u043a\u0441\u043d\u0430\u044f \u043c\u0430\u0433\u0438\u044f, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0449\u0430\u044f \u0442\u043e\u0447\u043a\u0438 \u0433\u0440\u0430\u043d\u044f\u043c\u0438 for (var i = 0; i &lt; pileus_rSegments - 1; i ++) {   if (i == 0) {      for (var j = 0; j &lt; pileus_cSegments; j ++)        pileus_indices.push(         0,          (j + 1) % pileus_cSegments + 1,          j + 1       );   }   for (var j = 0; j &lt; pileus_cSegments; j ++) {     pileus_indices.push(     i * pileus_cSegments + 1 + j,       (i + 1) * pileus_cSegments + 1 + (j + 1) % pileus_cSegments,   (i + 1) * pileus_cSegments + 1 + j );      pileus_indices.push(       i * pileus_cSegments + 1 + j,       i * pileus_cSegments + 1 + (j + 1) % pileus_cSegments,       (i + 1) * pileus_cSegments + 1 + (j + 1) % pileus_cSegments     ); } }  \/\/ \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0451 \u0447\u0442\u043e \u043d\u0430\u0433\u0435\u043d\u0435\u0440\u0438\u043b\u0438 \u0432 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e pileus.setAttribute('position', new THREE.BufferAttribute(new Float32Array(pileus_points), 3)); pileus.setIndex(pileus_indices); pileus.computeVertexNormals();<\/code><\/pre>\n<\/div>\n<\/details>\n<p><strong>\u0428\u0443\u043c\u044b<\/strong><\/p>\n<figure class=\"full-width\"><figcaption>\u0428\u0443\u043c\u044b \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043e: \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u0443\u0433\u043b\u043e\u0432\u043e\u0439, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u0438<\/figcaption><\/figure>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043b\u043e\u0436\u0438\u043c \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0443 \u0448\u0443\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0435\u0451 \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u0435\u0435. \u0412 \u0441\u0432\u043e\u0451\u043c \u043a\u043e\u0434\u0435 \u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0448\u0443\u043c \u0448\u043b\u044f\u043f\u043a\u0438 \u043d\u0430 3 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435: <em>\u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439<\/em> &#8212; \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f \u0440\u0430\u0434\u0438\u0443\u0441\u0430 \u0448\u043b\u044f\u043f\u043a\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0443\u0433\u043b\u0430, <em>\u0443\u0433\u043b\u043e\u0432\u043e\u0439<\/em> &#8212; \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u0430 \u043a\u0430\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0442 \u0443\u0433\u043b\u0430, \u0438 <em>\u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439<\/em> &#8212; \u0441\u0434\u0432\u0438\u0433 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u043a\u0438 \u0432 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u0430, \u043e\u0440\u0442\u043e\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043f\u043b\u0430\u0439\u043d\u0443 \u0448\u043b\u044f\u043f\u043a\u0438 \u0432 \u044d\u0442\u043e\u0439 \u0442\u043e\u0447\u043a\u0435. \u0422\u0430\u043a \u043a\u0430\u043a \u0448\u043b\u044f\u043f\u043a\u0430 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438, \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 \u0438\u0437\u0433\u0438\u0431\u043e\u0432 \u0437\u0434\u0435\u0441\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0448\u0443\u043c, \u044f\u0432\u043b\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0435\u043f\u0440\u0435\u0440\u044b\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 2d <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%A8%D1%83%D0%BC_%D0%9F%D0%B5%D1%80%D0%BB%D0%B8%D0%BD%D0%B0\" rel=\"noopener noreferrer nofollow\">\u0448\u0443\u043c \u041f\u0435\u0440\u043b\u0438\u043d\u0430<\/a>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <a href=\"https:\/\/github.com\/josephg\/noisejs\" rel=\"noopener noreferrer nofollow\">noisejs<\/a>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0428\u043b\u044f\u043f\u043d\u044b\u0439 \u0448\u0443\u043c<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">NOISE.seed(Math.random());  function radnoise(a, t) {   return -Math.abs(NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.5); }  function angnoise(a, t) {   return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * 0.2; }  function orthnoise(a, t) {   return NOISE.perlin2(t * Math.cos(a), t * Math.sin(a)) * t; }<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u041f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438, \u044e\u0431\u043a\u0430, \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0435<\/h2>\n<figure class=\"full-width\"><figcaption>\u041f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438, \u044e\u0431\u043a\u0430, \u0442\u043e\u0447\u043a\u0438 \u0438 \u0433\u0440\u0438\u0431 \u0446\u0435\u043b\u0438\u043a\u043e\u043c<\/figcaption><\/figure>\n<p>\u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441\u043e \u0448\u043b\u044f\u043f\u043a\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0435\u0449\u0451 2 \u0443\u0437\u043d\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0447\u0430\u0441\u0442\u0438 \u0433\u0440\u0438\u0431\u0430 &#8212; \u043f\u043b\u0430\u0441\u0442\u0438\u043d\u043a\u0438 \u0438 \u044e\u0431\u043a\u0443. \u0410 \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0435 (\u043a\u0430\u043a \u0443 \u043c\u0443\u0445\u043e\u043c\u043e\u0440\u0430), \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0435 \u043e\u0431\u043b\u0430\u043a\u0430 \u0442\u043e\u0447\u0435\u043a \u0438 \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u043e \u043d\u0438\u043c \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u043c <a href=\"https:\/\/threejs.org\/docs\/#examples\/en\/geometries\/ConvexGeometry\" rel=\"noopener noreferrer nofollow\">ConvexGeometry<\/a>, \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043c \u0438\u0445 \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u0443 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u0447\u0435\u0440\u0435\u0437 <em>mergeBufferGeometries<\/em>.<\/p>\n<details class=\"spoiler\">\n<summary>\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043c\u0443\u0445\u043e\u043c\u043e\u0440\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">var bufgeoms = []; var N = 10;  for (var i = 0; i &lt; dots_num; i++) {   var dot_points = [];  \/\/ \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0446\u0435\u043d\u0442\u0440 \u0442\u043e\u0447\u043a\u0438 \u043d\u0430 \u0448\u043b\u044f\u043f\u043a\u0435   var a = Math.random() * Math.PI * 2;   var t = Math.random();   var dot_center = pileus_surface(a, t);  \/\/ \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0435 \u043e\u0431\u043b\u0430\u043a\u043e \u0442\u043e\u0447\u0435\u043a \u0432\u043e\u043a\u0440\u0443\u0433 \u0446\u0435\u043d\u0442\u0440\u0430   for (var j = 0; j &lt; N; j++) {     dot_points.push(new THREE.Vector3(       dot_center.x + (1 - Math.random() * 2) * dot_radius,        dot_center.y + (1 - Math.random() * 2) * dot_radius,       dot_center.z + (1 - Math.random() * 2) * dot_radius );   }  \/\/ \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043e\u0431\u043b\u0430\u043a\u0430 \u0442\u043e\u0447\u0435\u043a   var dot_geometry = new THREE.ConvexGeometry( dots_points );   bufgeoms.push(dots_geometry); }  \/\/ \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u0432\u0441\u0435 \u043c\u0443\u0445\u043e\u043c\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0432 \u043e\u0434\u043d\u0443 \u0431\u0443\u0444\u0444\u0435\u0440\u043d\u0443\u044e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u044e var dots = THREE.BufferGeometryUtils.mergeBufferGeometries(bufgeoms);<\/code><\/pre>\n<\/div>\n<\/details>\n<h2>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0439<\/h2>\n<figure class=\"full-width\"><figcaption>\u0423\u043f\u0440\u043e<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-329522","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/329522","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=329522"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/329522\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=329522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=329522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=329522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}