{"id":11008,"date":"2021-04-01T12:09:34","date_gmt":"2021-04-01T03:09:34","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=11008"},"modified":"2021-04-01T12:26:30","modified_gmt":"2021-04-01T03:26:30","slug":"matter-js%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ea%b0%95%ec%b2%b4-%ec%8b%9c%eb%ae%ac%eb%a0%88%ec%9d%b4%ec%85%98","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=11008","title":{"rendered":"matter.js\ub97c \uc774\uc6a9\ud55c \uac15\uccb4 \uc2dc\ubbac\ub808\uc774\uc158"},"content":{"rendered":"

matter.js<\/a> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc774\uc6a9\ud558\uc5ec \uad6c\ud604\ud558\uace0\uc790 \ud558\ub294 \uacb0\uacfc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <link rel=\"stylesheet\" href=\"style_matter.js.css\">\r\n    <script src=\"decomp.js\"><\/script>\r\n    <script src=\"pathseg.js\"><\/script>\r\n    <script src=\"matter.0.16.1.js\"><\/script>\r\n    <script src=\"app_matter.js.js\" defer><\/script>\r\n<\/head>\r\n<body>\r\n    <div><\/div>\r\n<\/body>\r\n<\/html> \r\n<\/pre>\n
\uc9c0\ud615\uc740 SVG \ub370\uc774\ud130\ub97c \ud1b5\ud574 \uc88c\ud45c\ub97c \ubf51\uc544\uc624\ub294\ub370 \uc774\ub97c \uc704\ud574 matter.js \uc774\uc678\uc5d0\ub3c4 decomp.js\uc640 pathseg.js \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. div \uc694\uc18c\uc5d0 \uac15\uccb4 \uc2dc\ubbac\ub808\uc774\uc158\uc758 \uacb0\uacfc\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4. \ub2e4\uc74c\uc740 CSS\uc785\ub2c8\ub2e4.<\/p>\n
\r\n* {\r\n    outline: none;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n    \r\nbody {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: 100%;\r\n    height: 100vh;\r\n}\r\n<\/pre>\n
div \uc694\uc18c\ub97c \ud654\uba74 \uc911\uc2ec\uc5d0 \ub193\uae30 \uc704\ud55c \uac83\uc774 \uc804\ubd80\uc785\ub2c8\ub2e4. \uc774\uc81c js \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800 \uc544\ub798\uc758 \ucf54\ub4dc\ub85c \uae30\ubcf8 \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\r\nconst engine = Matter.Engine.create();\r\nconst world = engine.world;\r\n\r\nconst render = Matter.Render.create({\r\n    element: document.querySelector(\"div\"),\r\n    engine: engine,\r\n    options: {\r\n        width: 800,\r\n        height: 600,\r\n        wireframes: false,\r\n        background: 'black'\r\n    }\r\n});\r\n\r\nMatter.Render.run(render);\r\n\r\nconst runner = Matter.Runner.create();\r\nMatter.Runner.run(runner, engine);\r\n<\/pre>\n
\ub2e4\uc74c\uc73c\ub85c \uc9c0\ud615\uacfc \uc9c0\ud615 \uc18d\uc5d0 \uc0ac\uac01\ud615 \ubb3c\uccb4\ub97c \uad6c\uc131\ud558\ub294 \ucf54\ub4dc\uc785\ub2c8\ub2e4.<\/p>\n
\r\nfetch(\".\/terrain.svg\")\r\n    .then((response) => { return response.text(); })\r\n    .then((raw) => { return (new window.DOMParser()).parseFromString(raw, \"image\/svg+xml\"); })\r\n    .then(function(root) {\r\n        const paths = Array.prototype.slice.call(root.querySelectorAll('path'));\r\n        const vertices = paths.map((path) => { return Matter.Svg.pathToVertices(path, 30); });\r\n        const terrain = Matter.Bodies.fromVertices(400, 350, vertices, {\r\n            isStatic: true,\r\n            render: {\r\n                fillStyle: '#2c3e50',\r\n                strokeStyle: '#2c3e50',\r\n                lineWidth: 1,\r\n            }\r\n        }, true);\r\n\r\n        Matter.World.add(world, terrain);\r\n\r\n        const bodyOptions = {\r\n            frictionAir: 0.1, \r\n            friction: 0.5,\r\n            restitution: 0.1\r\n        };\r\n        \r\n        Matter.World.add(world, Matter.Composites.stack(100, 200, 40, 10, 15, 15, (x, y) => {\r\n            if (Matter.Query.point([terrain], { x: x, y: y }).length === 0) {\r\n                return Matter.Bodies.polygon(x, y, 4, 10, bodyOptions);\r\n            }\r\n        }));\r\n    }\r\n);\r\n<\/pre>\n
\ub05d\uc73c\ub85c \ub9c8\uc6b0\uc2a4\ub97c \ud1b5\ud574 \uc0ac\uac01\ud615 \uac1d\uccb4\ub97c \ub4dc\ub808\uadf8\ud558\uc5ec \uc62e\uae38 \uc218 \uc788\ub3c4\ub85d \ud569\ub2c8\ub2e4.<\/p>\n
\r\nconst mouse = Matter.Mouse.create(render.canvas),\r\nmouseConstraint = Matter.MouseConstraint.create(engine, {\r\n    mouse: mouse,\r\n    constraint: {\r\n        stiffness: 0.2,\r\n        render: {\r\n            visible: false\r\n        }\r\n    }\r\n});\r\n\r\nMatter.World.add(world, mouseConstraint);\r\n<\/pre>\n
matter.js\ub294 \ub9e4\uc6b0 \uc815\uad50\ud55c \uac15\uccb4 \uc2dc\ubbac\ub808\uc774\uc158\uc5d0\ub294 \uc801\ud569\ud558\uc9c0 \uc54a\uc73c\ub098 \uc2dc\uac01\uc801\uc778 \uba74\uc5d0\uc11c \ub2e4\uc591\ud55c \ubb3c\ub9ac \ud6a8\uacfc\ub97c 2\ucc28\uc6d0\uc5d0\uc11c \ud3ed\ub113\uac8c \uc751\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc774 \ub9e4\uc6b0 \ud070 \uc7a5\uc810\uc785\ub2c8\ub2e4.<\/p>\n
\uc544\ub798\ub294 \ud544\uc694\ud55c \ucf54\ub4dc\uc640 \ub370\uc774\ud130 \uc804\uccb4\ub97c \ub2e4\uc6b4\ub85c\ub4dc \ubc1b\uc744 \uc218 \uc788\ub294 \ub9c1\ud06c\uc785\ub2c8\ub2e4.<\/p>\n
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
matter.js \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc774\uc6a9\ud558\uc5ec \uad6c\ud604\ud558\uace0\uc790 \ud558\ub294 \uacb0\uacfc\ub294 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4. \ube44\ub514\uc624\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uc6f9\ube0c\ub77c\uc6b0\uc838\uc785\ub2c8\ub2e4. \uba3c\uc800 HTML \ucf54\ub4dc\uc785\ub2c8\ub2e4. <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”style_matter.js.css”> <script src=”decomp.js”><\/script> <script src=”pathseg.js”><\/script> <script src=”matter.0.16.1.js”><\/script> <script src=”app_matter.js.js” defer><\/script> <\/head> <body> <div><\/div> <\/body> <\/html> \uc9c0\ud615\uc740 SVG \ub370\uc774\ud130\ub97c \ud1b5\ud574 \uc88c\ud45c\ub97c \ubf51\uc544\uc624\ub294\ub370 \uc774\ub97c \uc704\ud574 matter.js \uc774\uc678\uc5d0\ub3c4 decomp.js\uc640 pathseg.js \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. div … <\/p>\n
\ub354 \ubcf4\uae30 “matter.js\ub97c \uc774\uc6a9\ud55c \uac15\uccb4 \uc2dc\ubbac\ub808\uc774\uc158”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[],"class_list":["post-11008","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11008"}],"version-history":[{"count":7,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11008\/revisions"}],"predecessor-version":[{"id":11018,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/11008\/revisions\/11018"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11008"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}