{"id":565,"date":"2024-01-26T16:58:53","date_gmt":"2024-01-26T07:58:53","guid":{"rendered":"https:\/\/elosove.com\/?p=565"},"modified":"2024-01-29T11:30:05","modified_gmt":"2024-01-29T02:30:05","slug":"a-framev1-2-0%e3%81%a7%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc%e3%83%88%e3%83%a9%e3%83%83%e3%82%ad%e3%83%b3%e3%82%b0%e3%82%92%e3%81%97%e3%81%a6%e3%82%b9%e3%82%af%e3%82%b7%e3%83%a7%e3%82%92%e6%92%ae","status":"publish","type":"post","link":"https:\/\/elosove.com\/?p=565","title":{"rendered":"A-Frame(v1.2.0)\u3067\u30de\u30fc\u30ab\u30fc\u30c8\u30e9\u30c3\u30ad\u30f3\u30b0\u3092\u3057\u3066\u30b9\u30af\u30b7\u30e7\u3092\u64ae\u308b"},"content":{"rendered":"\n<p>A-Frame\u3068AR.js\u3067\u30de\u30fc\u30ab\u30fc\u30c8\u30e9\u30c3\u30ad\u30f3\u30b0\u3092\u3057\u3001html2canvas\u3067\u7d50\u679c\u3092\u753b\u50cf\u4fdd\u5b58\u3059\u308b\u30a2\u30d7\u30ea\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u73fe\u6642\u70b9\u3067\u306e\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3(1.5.0)\u3092\u52d5\u304b\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u305f\u5f8c\u306bshader\u95a2\u9023\u306e\u30a8\u30e9\u30fc\u304c\u51fa\u305f\u70ba\u3001\u904e\u53bb\u30d0\u30fc\u30b8\u30e7\u30f3(1.2.0)\u3067\u884c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>(1.3.0 , 1.4.0, 1.5.0\u3068\u3082\u306b\u30a8\u30e9\u30fc\u3067\u3057\u305f\u304c\u3001\uff11\u5ea6\u3060\u3051\u306a\u3089\u30b9\u30af\u30b7\u30e7\u304c\u64ae\u308c\u307e\u3059)<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/elosove.com\/?p=565\/#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A7%8B%E6%88%90\" title=\"\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\">\u30d5\u30a1\u30a4\u30eb\u69cb\u6210<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/elosove.com\/?p=565\/#%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%AE%E7%94%A8%E6%84%8F\" title=\"\u30de\u30fc\u30ab\u30fc\u306e\u7528\u610f\">\u30de\u30fc\u30ab\u30fc\u306e\u7528\u610f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/elosove.com\/?p=565\/#A-Frame%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF\" title=\"A-Frame\u306e\u8aad\u307f\u8fbc\u307f\">A-Frame\u306e\u8aad\u307f\u8fbc\u307f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/elosove.com\/?p=565\/#A-Sene%E3%82%92%E8%A8%AD%E7%BD%AE\" title=\"A-Sene\u3092\u8a2d\u7f6e\">A-Sene\u3092\u8a2d\u7f6e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/elosove.com\/?p=565\/#%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE\" title=\"\u30dc\u30bf\u30f3\u3092\u8a2d\u7f6e\">\u30dc\u30bf\u30f3\u3092\u8a2d\u7f6e<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/elosove.com\/?p=565\/#html2canvas%E3%81%A7%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7%E3%82%92%E4%BF%9D%E5%AD%98\" title=\"html2canvas\u3067\u30b9\u30af\u30b7\u30e7\u3092\u4fdd\u5b58\">html2canvas\u3067\u30b9\u30af\u30b7\u30e7\u3092\u4fdd\u5b58<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/elosove.com\/?p=565\/#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E8%B5%B7%E5%8B%95%EF%BC%88%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%AE%E3%81%BF%EF%BC%89\" title=\"\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\uff08\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306e\u307f\uff09\">\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\uff08\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306e\u307f\uff09<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/elosove.com\/?p=565\/#%E3%82%B3%E3%83%BC%E3%83%89%E5%85%A8%E4%BD%93\" title=\"\u30b3\u30fc\u30c9\u5168\u4f53\">\u30b3\u30fc\u30c9\u5168\u4f53<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E6%A7%8B%E6%88%90\"><\/span>\u30d5\u30a1\u30a4\u30eb\u69cb\u6210<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u30ed\u30fc\u30ab\u30eb\u3067\u5b9f\u884c\u3059\u308b\u5834\u5408\u306f\u540c\u3058\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u4e0b\u8a183\u30d5\u30a1\u30a4\u30eb\u3092\u7f6e\u3044\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p><a href=\"https:\/\/glitch.com\/\" data-type=\"link\" data-id=\"https:\/\/glitch.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">glitch<\/a>\u306a\u3069\u306e\u30b5\u30fc\u30d0\u30fc\u4e0a\u3067\u5b9f\u884c\u3059\u308b\u5834\u5408\u306f\u305d\u308c\u305e\u308c\u9069\u5b9c\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>index.htm : \u30b9\u30af\u30ea\u30d7\u30c8\u3092\u76f4\u63a5\u66f8\u304f<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>marker.patt : \u30de\u30fc\u30ab\u30fc<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sample.glb : 3D\u30e2\u30c7\u30eb\u306e\u30b5\u30f3\u30d7\u30eb<\/li>\n<\/ul>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%AE%E7%94%A8%E6%84%8F\"><\/span>\u30de\u30fc\u30ab\u30fc\u306e\u7528\u610f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/jeromeetienne.github.io\/AR.js\/three.js\/examples\/marker-training\/examples\/generator.html\" data-type=\"link\" data-id=\"https:\/\/jeromeetienne.github.io\/AR.js\/three.js\/examples\/marker-training\/examples\/generator.html\">AR.js Marker Training<\/a>\u3068\u3044\u3046\u30b5\u30a4\u30c8\u3067AR\u30de\u30fc\u30ab\u30fc\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u4eca\u56de\u306fQR\u30b3\u30fc\u30c9\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>Pattern Ratio \u3092\u5f04\u308b\u3068\u5468\u308a\u306e\u9ed2\u67a0\u306e\u30b5\u30a4\u30ba\u304c\u5c0f\u3055\u304f\u306a\u308a\u307e\u3059\u304c\u3001\u691c\u77e5\u7cbe\u5ea6\u304c\u843d\u3061\u3066\u3057\u307e\u3046\u306e\u3067\u4eca\u56de\u306f\u691c\u77e5\u3057\u3084\u3059\u3044\u30ae\u30ea\u30ae\u30ea\u306e0.8\u3092\u9078\u629e\u3057\u307e\u3057\u305f\u3002\uff08Image size\u306f512px\u306e\u307e\u307e\uff09<\/p>\n\n\n\n<p>\u8a2d\u5b9a\u304c\u304a\u308f\u3063\u305f\u3089Download Marker\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068.patt\u62e1\u5f35\u5b50\u306e\u30de\u30fc\u30ab\u30fc\u30d5\u30a1\u30a4\u30eb\u304c\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"440\" src=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/01\/marker.png\" alt=\"\" class=\"wp-image-575\" srcset=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/01\/marker.png 450w, https:\/\/elosove.com\/wp-content\/uploads\/2024\/01\/marker-300x293.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A-Frame%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF\"><\/span>A-Frame\u306e\u8aad\u307f\u8fbc\u307f<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u30d0\u30fc\u30b8\u30e7\u30f30.6.0\u306e\u30de\u30fc\u30ab\u30fc\u30c8\u30e9\u30c3\u30ad\u30f3\u30b0\u5b9f\u88c5\u30b5\u30f3\u30d7\u30eb\u306f<a href=\"https:\/\/aframe.io\/blog\/arjs\/\" data-type=\"link\" data-id=\"https:\/\/aframe.io\/blog\/arjs\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u516c\u5f0fblog<\/a>\u306b\u8f09\u3063\u3066\u3044\u307e\u3059\u304c\u3001\u3053\u306e\u307e\u307e\u30d0\u30fc\u30b8\u30e7\u30f3\u3060\u30511.5.0\u306b\u3059\u308b\u3068AR.js\u306e\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u306e\u3067AR.js\u30e9\u30a4\u30d6\u30e9\u30ea\u3082\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u5909\u3048\u307e\u3059\u3002<\/p>\n\n\n\n<p>A-Frame\u5bfe\u5fdc\u306eAR.js\u30e9\u30a4\u30d6\u30e9\u30ea\u306f<a href=\"https:\/\/github.com\/AR-js-org\/AR.js\" data-type=\"link\" data-id=\"https:\/\/github.com\/AR-js-org\/AR.js\">github\u30da\u30fc\u30b8<\/a>\u304b\u3089&#8221;<strong>AR.js with Marker Tracking + Location Based AR (AFRAME)<\/strong>&#8220;\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u9078\u629e<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script src=&quot;https:\/\/aframe.io\/releases\/1.5.0\/aframe.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/raw.githack.com\/AR-js-org\/AR.js\/master\/aframe\/build\/aframe-ar.js&quot;&gt;&lt;\/script&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/aframe.io\/releases\/1.5.0\/aframe.min.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/raw.githack.com\/AR-js-org\/AR.js\/master\/aframe\/build\/aframe-ar.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u30b9\u30af\u30b7\u30e7\u3092\u64ae\u308b\u6a5f\u80fd\u3092\u5165\u308c\u305f\u3044\u5834\u5408\u306f\u3001v1.5.0\u3067\u306f\u30a8\u30e9\u30fc\u304c\u51fa\u308b\u306e\u3067\u4e0b\u8a18\u306e\u3088\u3046\u306b1.2.0\u3092\u8aad\u307f\u8fbc\u3093\u3067\u304f\u3060\u3055\u3044<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script src=&quot;https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/jeromeetienne.github.io\/AR.js\/aframe\/build\/aframe-ar.js&quot;&gt;&lt;\/script&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/jeromeetienne.github.io\/AR.js\/aframe\/build\/aframe-ar.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A-Sene%E3%82%92%E8%A8%AD%E7%BD%AE\"><\/span>A-Sene\u3092\u8a2d\u7f6e<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;a-scene    arjs=&quot;trackingMethod: best; sourceType: webcam; debugUIEnabled: false;  patternRatio: 0.80;&quot; embedded=&quot;&quot; renderer=&quot;logarithmicDepthBuffer: true; precision: medium;&quot; vr-mode-ui=&quot;enabled: false&quot;&gt;\n            &lt;!-- glb\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f --&gt;\n            &lt;a-assets&gt;\n                &lt;a-asset-item id=&quot;glb-obj&quot; src=&quot;sample.glb&quot;&gt;&lt;\/a-asset-item&gt;\n            &lt;\/a-assets&gt;\n\n            &lt;!-- \u30de\u30fc\u30ab\u30fc\u306e\u691c\u51fa --&gt;\n            &lt;a-marker preset=&quot;custom&quot; type=&quot;pattern&quot; url=&quot;sample.patt&quot;&gt;\n                &lt;a-entity rotation=&quot;0 0 0&quot; scale=&quot;1,1,1&quot; gltf-model=&quot;#glb-obj&quot;&gt;&lt;\/a-entity&gt;\n            &lt;\/a-marker&gt;\n\n        &lt;\/a-scene&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-scene<\/span><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">arjs<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;trackingMethod: best; sourceType: webcam; debugUIEnabled: false;  patternRatio: 0.80;&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">embedded<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">renderer<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;logarithmicDepthBuffer: true; precision: medium;&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">vr-mode-ui<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;enabled: false&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">&lt;!-- glb\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-assets<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-asset-item<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;glb-obj&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;sample.glb&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">a-asset-item<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">a-assets<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">&lt;!-- \u30de\u30fc\u30ab\u30fc\u306e\u691c\u51fa --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-marker<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">preset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;custom&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">type<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;pattern&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">url<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;sample.patt&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-entity<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">rotation<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;0 0 0&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">scale<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;1,1,1&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">gltf-model<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;#glb-obj&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">a-entity<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">a-marker<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">a-scene<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E8%A8%AD%E7%BD%AE\"><\/span>\u30dc\u30bf\u30f3\u3092\u8a2d\u7f6e<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>a-scene\u306e\u5916\u5074(&lt;\/a-scene&gt;\u306e\u5f8c)\u306b\u30dc\u30bf\u30f3\u3068\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u7f6e\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30ad\u30e3\u30f3\u30d0\u30b9\u306fhtml2canvas\u304c\u66f8\u304d\u8fbc\u3080\u306e\u3067hidden\u306b\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;button id=&quot;screenshot-button&quot;&gt;&lt;\/button&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;screenshot-button&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"html2canvas%E3%81%A7%E3%82%B9%E3%82%AF%E3%82%B7%E3%83%A7%E3%82%92%E4%BF%9D%E5%AD%98\"><\/span><strong>html2canvas\u3067\u30b9\u30af\u30b7\u30e7\u3092\u4fdd\u5b58<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>a-scene\u306egetCanvas\u3067\u306f\u30b7\u30fc\u30f3\u306b\u5199\u3063\u3066\u3044\u308b3d model\u3060\u3051\u3057\u304b\u6620\u3089\u306a\u3044\u306e\u3067\u3001\u80cc\u666f\u3068\u3057\u3066\u30ab\u30e1\u30e9\u753b\u50cf\u3092html2canvas\u3067\u5408\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30ab\u30e1\u30e9\u6620\u50cf\u306fAR.js\u304c\u52d5\u7684\u306b\u751f\u6210\u3057\u305fvideo\u3092\u4f7f\u3063\u3066\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;script&gt;\n    document.getElementById(&quot;screenshot-button&quot;).addEventListener(&quot;click&quot;, function() {\n        html2canvas(document.body).then(function(canvas) {\n            \/\/ \u30ab\u30e1\u30e9\u753b\u50cf\u3092\u53d6\u5f97\u3059\u308b\u70ba\u3001AR.js\u3067\u5c55\u958b\u3055\u308c\u3066\u3044\u308bvideo\u3092\u53d6\u5f97\n            var camera = document.querySelector('video');\n            \/\/ \u7a7a\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u7528\u610f\n            var canvas = document.createElement(&quot;canvas&quot;);\n            var context = canvas.getContext(&quot;2d&quot;);\n            \n            var width = camera.videoWidth;\n            var height = camera.videoHeight;\n\n            \/\/ A-Frame\u3067\u63cf\u753b\u3057\u3066\u3044\u308bScene\u3092\u53d6\u5f97\n            var aScene = document.querySelector(&quot;a-scene&quot;).components.screenshot.getCanvas(&quot;perspective&quot;);\n\n            if (width &amp;&amp; height) {\n                \/\/ \u30ab\u30e1\u30e9\u306e\u30b5\u30a4\u30ba\u3092canvas\u306b\u30bb\u30c3\u30c8\n                canvas.width = width;\n                canvas.height = height;\n\n                \/\/ canvas\u306b\u30ab\u30e1\u30e9\u753b\u50cf\u3092\u63cf\u3044\u3066\u304b\u3089glb\u304c\u6620\u3063\u3066\u3044\u308bscene\u3092\u4e0a\u66f8\u304d\n                context.drawImage(camera, 0, 0, width, height);\n                context.drawImage(aScene, 0, 0, width, height);\n\n                \/\/ png\u753b\u50cf\u3092\u4f5c\u6210\n                var snap = canvas.toDataURL('image\/png');\n                var link = document.createElement(&quot;a&quot;);\n                link.href = snap;\n                link.download = &quot;screenshot.png&quot;;\n\n                \/\/\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9(\u30af\u30ea\u30c3\u30af)\n                link.click();\n            }\n        });\n    });\n&lt;\/script&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getElementById<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;screenshot-button&quot;<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">addEventListener<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;click&quot;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #DCDCAA\">html2canvas<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">body<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">then<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">\/\/ \u30ab\u30e1\u30e9\u753b\u50cf\u3092\u53d6\u5f97\u3059\u308b\u70ba\u3001AR.js\u3067\u5c55\u958b\u3055\u308c\u3066\u3044\u308bvideo\u3092\u53d6\u5f97<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelector<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;video&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">\/\/ \u7a7a\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u7528\u610f<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">createElement<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;canvas&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">context<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getContext<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;2d&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">videoWidth<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">videoHeight<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">\/\/ A-Frame\u3067\u63cf\u753b\u3057\u3066\u3044\u308bScene\u3092\u53d6\u5f97<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">aScene<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelector<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;a-scene&quot;<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">screenshot<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getCanvas<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;perspective&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\"> &amp;&amp; <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/ \u30ab\u30e1\u30e9\u306e\u30b5\u30a4\u30ba\u3092canvas\u306b\u30bb\u30c3\u30c8<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/ canvas\u306b\u30ab\u30e1\u30e9\u753b\u50cf\u3092\u63cf\u3044\u3066\u304b\u3089glb\u304c\u6620\u3063\u3066\u3044\u308bscene\u3092\u4e0a\u66f8\u304d<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">context<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">drawImage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">context<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">drawImage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">aScene<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/ png\u753b\u50cf\u3092\u4f5c\u6210<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">snap<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">toDataURL<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;image\/png&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">createElement<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;a&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">href<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">snap<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">download<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&quot;screenshot.png&quot;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #6A9955\">\/\/\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9(\u30af\u30ea\u30c3\u30af)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">click<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%92%E8%B5%B7%E5%8B%95%EF%BC%88%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%AE%E3%81%BF%EF%BC%89\"><\/span>\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\uff08\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306e\u307f\uff09<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u4eca\u56de\u306fpython3.8\u3092\u4f7f\u3044\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p>html\u306e\u30d5\u30a9\u30eb\u30c0\u306b\u79fb\u52d5\u3057\u3066\u304b\u3089\u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u3067\u4e0b\u8a18\u3092\u6253\u3061\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"python -m http.server 8000\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #DCDCAA\">python<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #569CD6\">-m<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #CE9178\">http.server<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">8000<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>\u30d6\u30e9\u30a6\u30b6\u3067 http:\/\/localhost:8000\/ \u306eURL\u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\uff08\u203b\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u306a\u3044\u3068\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080\u969b\u306bCORS policy\u306b\u5f15\u3063\u304b\u304b\u308a\u8868\u793a\u3055\u308c\u306a\u3044\u5834\u5408\u304c\u3042\u308a\u307e\u3059\uff09<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<p>\u30ab\u30e1\u30e9\u3092\u5411\u3051\u3066\u767b\u9332\u3057\u305f\u30de\u30fc\u30ab\u30fc\uff08\u4eca\u56de\u306fQR\u30b3\u30fc\u30c9)\u3092\u691c\u77e5\u3059\u308b\u30683D\u30e2\u30c7\u30eb\u304c\u8868\u793a\u3055\u308c\u308b\u306e\u3067\u3001<\/p>\n\n\n\n<p>\u4e38\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u30b9\u30af\u30b7\u30e7\u304c\u64ae\u5f71\u3055\u308c\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3055\u308c\u3066\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"353\" height=\"281\" src=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/01\/ar_detect.png\" alt=\"\" class=\"wp-image-581\" srcset=\"https:\/\/elosove.com\/wp-content\/uploads\/2024\/01\/ar_detect.png 353w, https:\/\/elosove.com\/wp-content\/uploads\/2024\/01\/ar_detect-300x239.png 300w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/figure>\n\n\n\n<p>\u3000<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E3%82%B3%E3%83%BC%E3%83%89%E5%85%A8%E4%BD%93\"><\/span>\u30b3\u30fc\u30c9\u5168\u4f53<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>index.html\u30d5\u30a1\u30a4\u30eb\u306e\u4e2d\u8eab<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;jp&quot;&gt;\n    &lt;head&gt;\n        &lt;meta charset=&quot;utf-8&quot;\/&gt;\n        &lt;meta content=&quot;width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0&quot; name=&quot;viewport&quot;\/&gt;\n        \n        &lt;!-- screenshot button\u7528style--&gt;\n        &lt;style type=&quot;text\/css&quot;&gt;\n            #screenshot-button {\n                position: fixed;\n                bottom: 20px;\n                left: 50%;\n                transform: translateX(-50%);\n                width: 60px;\n                height: 60px;\n                border-radius: 50%;\n                background-color: #f3f3f3;\n                border: none;\n                cursor: pointer;\n                outline: none;\n                box-shadow: 0px 2px 5px rgba(0,0,0,0.2);\n            }\n        &lt;\/style&gt;\n\n        &lt;title&gt;A-Frame Marker Tracking sample&lt;\/title&gt;\n\n        &lt;script src=&quot;https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js&quot;&gt;&lt;\/script&gt;\n        &lt;script src=&quot;https:\/\/jeromeetienne.github.io\/AR.js\/aframe\/build\/aframe-ar.js&quot;&gt;&lt;\/script&gt;\n\n        &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.3.2\/html2canvas.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;\/head&gt;\n\n    &lt;body&gt;\n        &lt;a-scene    arjs=&quot;trackingMethod: best; sourceType: webcam; debugUIEnabled: false;  patternRatio: 0.80;&quot;\n                    embedded=&quot;&quot;\n                    renderer=&quot;logarithmicDepthBuffer: true; precision: medium;&quot;\n                    vr-mode-ui=&quot;enabled: false&quot;&gt;\n\n            &lt;!-- glb\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f --&gt;\n            &lt;a-assets&gt;\n                &lt;a-asset-item id=&quot;glb-obj&quot; src=&quot;sample.glb&quot;&gt;&lt;\/a-asset-item&gt;\n            &lt;\/a-assets&gt;\n\n            &lt;!-- \u30de\u30fc\u30ab\u30fc\u306e\u691c\u51fa --&gt;\n            &lt;a-marker preset=&quot;custom&quot; type=&quot;pattern&quot; url=&quot;sample.patt&quot;&gt;\n                &lt;a-entity rotation=&quot;0 0 0&quot; scale=&quot;1,1,1&quot; gltf-model=&quot;#glb-obj&quot;&gt;&lt;\/a-entity&gt;\n            &lt;\/a-marker&gt;\n\n        &lt;\/a-scene&gt;\n        \n        &lt;button id=&quot;screenshot-button&quot;&gt;&lt;\/button&gt;\n\n        &lt;script&gt;\n            document.getElementById(&quot;screenshot-button&quot;).addEventListener(&quot;click&quot;, function() {\n                html2canvas(document.body).then(function(canvas) {\n                    \/\/ \u30ab\u30e1\u30e9\u753b\u50cf\u3092\u53d6\u5f97\u3059\u308b\u70ba\u3001AR.js\u3067\u5c55\u958b\u3055\u308c\u3066\u3044\u308bvideo\u3092\u53d6\u5f97\n                    var camera = document.querySelector('video');\n                    \/\/ \u7a7a\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u7528\u610f\n                    var canvas = document.createElement(&quot;canvas&quot;);\n                    var context = canvas.getContext(&quot;2d&quot;);\n                    \n                    var width = camera.videoWidth;\n                    var height = camera.videoHeight;\n\n                    \/\/ A-Frame\u3067\u63cf\u753b\u3057\u3066\u3044\u308bScene\u3092\u53d6\u5f97\n                    var aScene = document.querySelector(&quot;a-scene&quot;).components.screenshot.getCanvas(&quot;perspective&quot;);\n\n                    if (width &amp;&amp; height) {\n                        \/\/ \u30ab\u30e1\u30e9\u306e\u30b5\u30a4\u30ba\u3092canvas\u306b\u30bb\u30c3\u30c8\n                        canvas.width = width;\n                        canvas.height = height;\n\n                        \/\/ canvas\u306b\u30ab\u30e1\u30e9\u753b\u50cf\u3092\u63cf\u3044\u3066\u304b\u3089glb\u304c\u6620\u3063\u3066\u3044\u308bscene\u3092\u4e0a\u66f8\u304d\n                        context.drawImage(camera, 0, 0, width, height);\n                        context.drawImage(aScene, 0, 0, width, height);\n\n                        \/\/ png\u753b\u50cf\u3092\u4f5c\u6210\n                        var snap = canvas.toDataURL('image\/png');\n                        var link = document.createElement(&quot;a&quot;);\n                        link.href = snap;\n                        link.download = &quot;screenshot.png&quot;;\n\n                        \/\/\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\n                        link.click();\n                    }\n                });\n            });\n        &lt;\/script&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;\" style=\"color:#D4D4D4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #808080\">&lt;!<\/span><span style=\"color: #569CD6\">DOCTYPE<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">lang<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;jp&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">charset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;utf-8&quot;<\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">meta<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">content<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">name<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;viewport&quot;<\/span><span style=\"color: #808080\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #6A9955\">&lt;!-- screenshot button\u7528style--&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">style<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">type<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;text\/css&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #D7BA7D\">#screenshot-button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">position<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">fixed<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">bottom<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">20px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">left<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50%<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">transform<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #DCDCAA\">translateX<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">-50%<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">60px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">60px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">border-radius<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">50%<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">background-color<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">#f3f3f3<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">border<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">none<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">cursor<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">pointer<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">outline<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">none<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #9CDCFE\">box-shadow<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #B5CEA8\">0px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">2px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">5px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #DCDCAA\">rgba<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">,<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">,<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">,<\/span><span style=\"color: #B5CEA8\">0.2<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">style<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><span style=\"color: #D4D4D4\">A-Frame Marker Tracking sample<\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">title<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/aframe.io\/releases\/1.2.0\/aframe.min.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/jeromeetienne.github.io\/AR.js\/aframe\/build\/aframe-ar.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.3.2\/html2canvas.min.js&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">head<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-scene<\/span><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #9CDCFE\">arjs<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;trackingMethod: best; sourceType: webcam; debugUIEnabled: false;  patternRatio: 0.80;&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">embedded<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">renderer<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;logarithmicDepthBuffer: true; precision: medium;&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #9CDCFE\">vr-mode-ui<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;enabled: false&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">&lt;!-- glb\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-assets<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-asset-item<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;glb-obj&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">src<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;sample.glb&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">a-asset-item<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">a-assets<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #6A9955\">&lt;!-- \u30de\u30fc\u30ab\u30fc\u306e\u691c\u51fa --&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-marker<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">preset<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;custom&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">type<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;pattern&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">url<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;sample.patt&quot;<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">a-entity<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">rotation<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;0 0 0&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">scale<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;1,1,1&quot;<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">gltf-model<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;#glb-obj&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">a-entity<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">a-marker<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">a-scene<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">id<\/span><span style=\"color: #D4D4D4\">=<\/span><span style=\"color: #CE9178\">&quot;screenshot-button&quot;<\/span><span style=\"color: #808080\">&gt;&lt;\/<\/span><span style=\"color: #569CD6\">button<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getElementById<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;screenshot-button&quot;<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">addEventListener<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;click&quot;<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                <\/span><span style=\"color: #DCDCAA\">html2canvas<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">body<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #DCDCAA\">then<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #569CD6\">function<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #6A9955\">\/\/ \u30ab\u30e1\u30e9\u753b\u50cf\u3092\u53d6\u5f97\u3059\u308b\u70ba\u3001AR.js\u3067\u5c55\u958b\u3055\u308c\u3066\u3044\u308bvideo\u3092\u53d6\u5f97<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelector<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;video&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #6A9955\">\/\/ \u7a7a\u306e\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u7528\u610f<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">createElement<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;canvas&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">context<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getContext<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;2d&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">videoWidth<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">videoHeight<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #6A9955\">\/\/ A-Frame\u3067\u63cf\u753b\u3057\u3066\u3044\u308bScene\u3092\u53d6\u5f97<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">aScene<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">querySelector<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;a-scene&quot;<\/span><span style=\"color: #D4D4D4\">).<\/span><span style=\"color: #9CDCFE\">components<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">screenshot<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">getCanvas<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;perspective&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    <\/span><span style=\"color: #C586C0\">if<\/span><span style=\"color: #D4D4D4\"> (<\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\"> &amp;&amp; <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #6A9955\">\/\/ \u30ab\u30e1\u30e9\u306e\u30b5\u30a4\u30ba\u3092canvas\u306b\u30bb\u30c3\u30c8<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #6A9955\">\/\/ canvas\u306b\u30ab\u30e1\u30e9\u753b\u50cf\u3092\u63cf\u3044\u3066\u304b\u3089glb\u304c\u6620\u3063\u3066\u3044\u308bscene\u3092\u4e0a\u66f8\u304d<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">context<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">drawImage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">camera<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">context<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">drawImage<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #9CDCFE\">aScene<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">width<\/span><span style=\"color: #D4D4D4\">, <\/span><span style=\"color: #9CDCFE\">height<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #6A9955\">\/\/ png\u753b\u50cf\u3092\u4f5c\u6210<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">snap<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">canvas<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">toDataURL<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&#39;image\/png&#39;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #569CD6\">var<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">document<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">createElement<\/span><span style=\"color: #D4D4D4\">(<\/span><span style=\"color: #CE9178\">&quot;a&quot;<\/span><span style=\"color: #D4D4D4\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">href<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #9CDCFE\">snap<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #9CDCFE\">download<\/span><span style=\"color: #D4D4D4\"> = <\/span><span style=\"color: #CE9178\">&quot;screenshot.png&quot;<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #6A9955\">\/\/\u81ea\u52d5\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                        <\/span><span style=\"color: #9CDCFE\">link<\/span><span style=\"color: #D4D4D4\">.<\/span><span style=\"color: #DCDCAA\">click<\/span><span style=\"color: #D4D4D4\">();<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">                });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">            });<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">        <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">script<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">    <\/span><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">body<\/span><span style=\"color: #808080\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #808080\">&lt;\/<\/span><span style=\"color: #569CD6\">html<\/span><span style=\"color: #808080\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A-Frame\u3068AR.js\u3067\u30de\u30fc\u30ab\u30fc\u30c8\u30e9\u30c3\u30ad\u30f3\u30b0\u3092\u3057\u3001html2canvas\u3067\u7d50\u679c\u3092\u753b\u50cf\u4fdd\u5b58\u3059\u308b\u30a2\u30d7\u30ea\u3092\u4f5c\u308a\u307e\u3059\u3002 \u73fe\u6642\u70b9\u3067\u306e\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3(1.5.0)\u3092\u52d5\u304b\u3057\u305f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u305f\u5f8c\u306bshade [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":580,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[21],"class_list":["post-565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-a-frame"],"_links":{"self":[{"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=565"}],"version-history":[{"count":18,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts\/565\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/posts\/565\/revisions\/600"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=\/wp\/v2\/media\/580"}],"wp:attachment":[{"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elosove.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}