{"id":3160,"date":"2019-02-15T20:03:54","date_gmt":"2019-02-15T11:03:54","guid":{"rendered":"https:\/\/alaki.co.jp\/blog\/?p=3160"},"modified":"2019-05-23T16:31:51","modified_gmt":"2019-05-23T07:31:51","slug":"webar%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%bf%e3%81%be%e3%81%9b%e3%82%93%e3%81%8b%ef%bc%9f%e3%80%9c%e7%ac%ac3%e5%9b%9e-8th-wall-web%e3%81%a7android%e3%81%ab%e3%82%82%e5%af%be%e5%bf%9c%e3%81%ae","status":"publish","type":"post","link":"http:\/\/test.alaki.co.jp\/blog\/?p=3160","title":{"rendered":"WebAR\u306f\u3058\u3081\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\u301c\u7b2c3\u56de 8th Wall Web\u3067Android\u306b\u3082\u5bfe\u5fdc\u306e\u30de\u30fc\u30ab\u30fc\u30ec\u30b9WebAR\u3092\u5b9f\u88c5\u3059\u308b\u301c"},"content":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\uff01<br \/>\n\u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u4f0a\u6771\uff08<a href=\"https:\/\/twitter.com\/ALAKIWebVRAR1\">@ALAKIWebVRAR1<\/a>\uff09\u3067\u3059\u3002<\/p>\n<p>\u203bTwitter\u3067\u3082WebAR\u306e\u4e8b\u3092\u4e2d\u5fc3\u306b\u60c5\u5831\u767a\u4fe1\u4e2d\uff01<br \/>\n\u3088\u304b\u3063\u305f\u3089\u30d5\u30a9\u30ed\u30fc\u304a\u9858\u3044\u3057\u307e\u3059m(_ _)m<br \/>\n<a href=\"https:\/\/twitter.com\/ALAKIWebVRAR1?ref_src=twsrc%5Etfw\" class=\"twitter-follow-button\" data-show-count=\"false\">Follow @ALAKIWebVRAR1<\/a><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>\u6628\u5e749\u6708\u306b\u3001Web\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u30de\u30fc\u30ab\u30fc\u30ec\u30b9AR\u4f53\u9a13\u304c\u53ef\u80fd\u306a\u300c8th Wall Web\u300d\u3068\u3044\u3046\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3057\u305f\u3002<br \/>\n<a href=\"https:\/\/alaki.co.jp\/blog\/?p=2930\" target=\"_blank\">8thWall\u304c8thWallWeb\u3092\u767a\u8868\uff01Web\u30d6\u30e9\u30a6\u30b6\u304b\u3089\u3067\u3082\u30de\u30fc\u30ab\u30fc\u30ec\u30b9AR\u304c\u4f53\u9a13\u53ef\u80fd\u306b<\/a><\/p>\n<p>\u305d\u306e\u6642\u70b9\u3067\u306f\u307e\u3060\u30c7\u30e2\u52d5\u753b\u3057\u304b\u516c\u958b\u3055\u308c\u3066\u3044\u306a\u3044\u72b6\u614b\u3067\u3057\u305f\u304c\u3001\u5148\u65e5<strong>\u3064\u3044\u306b\u6b63\u5f0f\u7248\u304c\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u307e\u3057\u305f\uff01<\/strong><\/p>\n<p>8th Wall Web\u30ea\u30ea\u30fc\u30b9\u524d\u306b\u3082\u3001ARkit2\u3092\u5229\u7528\u3057\u305f\u30de\u30fc\u30ab\u30fc\u30ec\u30b9WebAR\u306f\u5b9f\u88c5\u53ef\u80fd\u3067\u3057\u305f\u3002<br \/>\n\u305f\u3060\u3001ARkit2\u3092\u5229\u7528\u3059\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u3001\u52d5\u4f5c\u74b0\u5883\u304ciOS12\u4ee5\u4e0a\u306e\u7aef\u672b\u306b\u9650\u3089\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n8th Wall\u306f\u3001<strong>OS\u306b\u4f9d\u5b58\u3057\u306a\u3044\u3001Android\u306b\u3082\u5bfe\u5fdc\u3057\u305fWebAR\u958b\u767a\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/strong><\/p>\n<p>\u4eca\u56de\u306f\u305d\u306e8th Wall Web\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u4f5c\u6210\u304b\u3089\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\u3001\u5b9f\u88c5\u65b9\u6cd5\u307e\u3067\u3054\u7d39\u4ecb\u3057\u307e\u3059\uff01<br \/>\n\u4e0b\u306e\u52d5\u753b\u306e\u3088\u3046\u306a\u3001\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306aWebAR\u306e\u30b5\u30f3\u30d7\u30eb\u304c\u4f5c\u308c\u308b\u3088\u3046\u306b\u306a\u308b\u3068\u3053\u308d\u307e\u3067\u3092\u76ee\u6a19\u306b\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<div style=\"width: 332px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-3160-1\" width=\"332\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/demo3.mp4?_=1\" \/><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/demo3.mp4\">https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/demo3.mp4<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>\u6700\u5f8c\u307e\u3067\u3088\u308d\u3057\u304f\u304a\u9858\u3044\u3057\u307e\u3059\uff01<\/p>\n<p><!--more--><\/p>\n<h2>\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u4f5c\u6210<\/h2>\n<p>\u307e\u305a\u306f8th Wall\u306e\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<br \/>\n\u4e0b\u8a18\u306e\u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u3001\u53f3\u4e0a\u306b\u3042\u308b&#8221;Create Account&#8221;\u306e\u30ea\u30f3\u30af\u3092\u62bc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n<a href=\"https:\/\/8thwall.com\/\" target=\"_blank\">https:\/\/8thwall.com\/<\/a><\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8th-Wall-Augmented-Reality.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3161\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8th-Wall-Augmented-Reality-1024x529.png\" alt=\"8th Wall Augmented Reality\" width=\"720\" height=\"372\" srcset=\"http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8th-Wall-Augmented-Reality-1024x529.png 1024w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8th-Wall-Augmented-Reality-300x155.png 300w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8th-Wall-Augmented-Reality-768x397.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>\u30a2\u30ab\u30a6\u30f3\u30c8\u60c5\u5831\u3092\u5165\u529b\u3059\u308b\u753b\u9762\u306b\u9077\u79fb\u3057\u307e\u3059\u306e\u3067\u3001<br \/>\n\u5fc5\u8981\u306a\u60c5\u5831\u3092\u5165\u529b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u300cI would like to:\u300d\u306e\u9805\u76ee\u306f\u3001\u300cweb\u300d\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/b895439e13be54f373d9821216eba8de.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3162\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/b895439e13be54f373d9821216eba8de-1024x893.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-02-13 23.30.12\" width=\"720\" height=\"628\" srcset=\"http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/b895439e13be54f373d9821216eba8de-1024x893.png 1024w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/b895439e13be54f373d9821216eba8de-300x262.png 300w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/b895439e13be54f373d9821216eba8de-768x670.png 768w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/b895439e13be54f373d9821216eba8de.png 1692w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>\u300cGet Started\u300d\u3068\u66f8\u304b\u308c\u305f\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001<br \/>\n\u81ea\u52d5\u8fd4\u4fe1\u30e1\u30fc\u30eb\u304c\u5c4a\u304d\u307e\u3059\u3002<\/p>\n<p>\u30e1\u30fc\u30eb\u306b\u8a18\u8f09\u3055\u308c\u305f\u30a2\u30c9\u30ec\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001<br \/>\n\u30a2\u30ab\u30a6\u30f3\u30c8\u4f5c\u6210\u3092\u5b8c\u4e86\u3055\u305b\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2>\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210<\/h2>\n<p>\u30a2\u30ab\u30a6\u30f3\u30c8\u306e\u4f5c\u6210\u304c\u5b8c\u4e86\u3057\u3066\u3044\u308c\u3070\u3001\u300cLog In\u300d\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u7ba1\u7406\u753b\u9762\u306b\u30ed\u30b0\u30a4\u30f3\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/5b4f3dacaf408aa2fb674d4b9d1a810f.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3163\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/5b4f3dacaf408aa2fb674d4b9d1a810f-1024x291.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-02-13 23.45.59\" width=\"720\" height=\"205\" srcset=\"http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/5b4f3dacaf408aa2fb674d4b9d1a810f-1024x291.png 1024w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/5b4f3dacaf408aa2fb674d4b9d1a810f-300x85.png 300w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/5b4f3dacaf408aa2fb674d4b9d1a810f-768x218.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>\u307e\u3060\u65b0\u3057\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u767b\u9332\u3057\u3066\u3044\u306a\u3051\u308c\u3070\u3001<br \/>\n\u300c+ Create a new Web App\u300d\u304b\u3089\u767b\u9332\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/4cc9a2c64244f6268c912faa0ff626b5.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3164\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/4cc9a2c64244f6268c912faa0ff626b5-1024x493.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-02-13 23.48.02\" width=\"720\" height=\"347\" srcset=\"http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/4cc9a2c64244f6268c912faa0ff626b5-1024x493.png 1024w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/4cc9a2c64244f6268c912faa0ff626b5-300x145.png 300w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/4cc9a2c64244f6268c912faa0ff626b5-768x370.png 768w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/4cc9a2c64244f6268c912faa0ff626b5.png 1216w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>\u4efb\u610f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u540d\u3092\u5165\u529b\u3057\u3066\u3001\u300c+ Create\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\u3059\u308b\u3068\u3001\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306b\u65b0\u3057\u304f\u8ffd\u52a0\u3055\u308c\u305f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u8868\u793a\u3055\u308c\u307e\u3057\u305f\uff01<\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8c836a6635d58be33cb6a7c4273145ea.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3165\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8c836a6635d58be33cb6a7c4273145ea-1024x586.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-02-13 23.51.35\" width=\"720\" height=\"412\" srcset=\"http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8c836a6635d58be33cb6a7c4273145ea-1024x586.png 1024w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8c836a6635d58be33cb6a7c4273145ea-300x172.png 300w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/8c836a6635d58be33cb6a7c4273145ea-768x440.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u306e\u53f3\u4e0b\u306b\u30018th Wall Web\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u8aad\u307f\u8fbc\u3080\u305f\u3081\u306e\u30b3\u30fc\u30c9\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u3053\u306e\u30b3\u30fc\u30c9\u306e\u300cappKey=&#8221;&#8221;\u300d\u306e\u4e2d\u306e\u6587\u5b57\u5217\u304c\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u56fa\u6709\u306e\u30ad\u30fc\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n8th Wall Web\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u7528\u3059\u308b\u969b\u306b\u5fc5\u305a\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u63a7\u3048\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h2>\u5b9f\u88c5\u65b9\u6cd5<\/h2>\n<p>\u305d\u308c\u3067\u306f\u3044\u3088\u3044\u3088\u5b9f\u88c5\u65b9\u6cd5\u306b\u3064\u3044\u3066\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<br \/>\n\u7ba1\u7406\u753b\u9762\u5de6\u5074\u306e\u300cQUICK START\u300d\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001<br \/>\n\u300cWhat You&#8217;ll Need\u300d\u306e\u6240\u306bGithub\u306eURL\u304c\u8a18\u8f09\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u305d\u3053\u304b\u3089Github\u306b\u79fb\u52d5\u3057\u3066\u3001\u30c7\u30fc\u30bf\u4e00\u5f0f\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/7fe06d43a416fefd372097566af69e79.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3167\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/7fe06d43a416fefd372097566af69e79-1024x352.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2019-02-14 8.26.31\" width=\"720\" height=\"248\" srcset=\"http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/7fe06d43a416fefd372097566af69e79-1024x352.png 1024w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/7fe06d43a416fefd372097566af69e79-300x103.png 300w, http:\/\/test.alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/7fe06d43a416fefd372097566af69e79-768x264.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u300cweb-master\u300d\u306e\u4e2d\u306e\u300cexamples\u300d\u306b\u79fb\u52d5\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\u305d\u306e\u4e2d\u306b\u3001\u300caframe\u300d\u3084\u300cthreejs\u300d\u3068\u3044\u3046\u30d5\u30a9\u30eb\u30c0\u304c\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>8th Wall Web\u306f\u5358\u4f53\u3067\u52d5\u4f5c\u3059\u308b\u3082\u306e\u3067\u306f\u306a\u304f\u3001A-frame\u3084three.js\u3068\u5408\u308f\u305b\u3066\u4f7f\u7528\u3059\u308b\u3082\u306e\u3067\u3059\u3002<br \/>\n\u4eca\u56de\u306fA-frame\u3068\u5408\u308f\u305b\u3066\u958b\u767a\u3057\u3066\u3044\u304d\u305f\u3044\u306e\u3067\u3001\u300caframe\u300d\u30d5\u30a9\u30eb\u30c0\u306e\u30b5\u30f3\u30d7\u30eb\u3092\u4f7f\u7528\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u203bA-frame\u3092\u4f7f\u3063\u305fWebAR\u958b\u767a\u306b\u95a2\u3057\u3066\u306f\u3001\u3053\u3061\u3089\u306e\u8a18\u4e8b\u3082\u3054\u53c2\u8003\u304f\u3060\u3055\u3044<br \/>\n<a href=\"https:\/\/alaki.co.jp\/blog\/?p=2845\" target=\"_blank\">WebAR\u306f\u3058\u3081\u3066\u307f\u307e\u305b\u3093\u304b\uff1f\u301c\u7b2c1\u56de AR.js\u3067\u7c21\u5358WebAR\u301c<\/a><\/p>\n<p>\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u30c7\u30fc\u30bf\u306e\u4e2d\u306b\u306f\u30013\u7a2e\u985e\u306e\u30b5\u30f3\u30d7\u30eb\u304c\u7528\u610f\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u300cplaceground\u300d\u3068\u300cportal\u300d\u3068\u300ctossobject\u300d\u306e3\u3064\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u300ctossobject\u300d\u30d5\u30a9\u30eb\u30c0\u306e\u4e2d\u8eab\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\u30b9\u30de\u30db\u307e\u305f\u306f\u30bf\u30d6\u30ec\u30c3\u30c8\u3067\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u30da\u30fc\u30b8\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n<p>\u30ab\u30e1\u30e9\u306e\u5229\u7528\u3092\u8a31\u53ef\u3059\u308b\u3068\u3001\u7121\u4e8b\u306bWebAR\u306e\u753b\u9762\u306b\u9077\u79fb\u3057\u307e\u3057\u305f\uff01<br \/>\n\u753b\u9762\u3092\u30bf\u30c3\u30d7\u3059\u308b\u3068\u3001\u30c8\u30de\u30c8\u306e\u5f62\u3092\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u524d\u65b9\u306b\u6295\u3052\u3089\u308c\u307e\u3057\u305f\u3002<\/p>\n<div style=\"width: 332px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-3160-2\" width=\"332\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/demo3.mp4?_=2\" \/><a href=\"https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/demo3.mp4\">https:\/\/alaki.co.jp\/blog\/wp-content\/uploads\/2019\/02\/demo3.mp4<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>8th Wall Web\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u6319\u52d5\u306b\u5408\u308f\u305b\u30663D\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u308b\u306a\u3069\u3001<br \/>\n\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u6a5f\u80fd\u306e\u5b9f\u88c5\u3092\u5f97\u610f\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n  &lt;head&gt;\r\n    &lt;meta charset=\"utf-8\"&gt;\r\n    &lt;title&gt;8th Wall Web: Toss an Object&lt;\/title&gt;\r\n\r\n    &lt;!-- We've included a slightly modified version of A-Frame, which fixes some polish concerns --&gt;\r\n    &lt;script src=\"\/\/cdn.8thwall.com\/web\/aframe\/8frame-0.8.2.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"\/\/cdn.8thwall.com\/web\/aframe\/aframe-physics-system-3.2.0.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"\/\/cdn.8thwall.com\/web\/aframe\/aframe-animation-component-5.1.2.min.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;!-- XR Extras - provides utilities like load screen, almost there, and error handling.\r\n         See github.com\/8thwall\/web\/xrextras --&gt;\r\n    &lt;script src=\"\/\/cdn.8thwall.com\/web\/xrextras\/xrextras.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;!-- 8thWall Web - Replace the app key here with your own app key --&gt;\r\n    &lt;script async src=\"\/\/apps.8thwall.com\/xrweb?appKey=XXXXXXXX\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;script&gt;\r\n      AFRAME.registerComponent('shoot-tomato', {\r\n        init: function() {\r\n          const camera = document.getElementById('camera')\r\n          const splatSnd = document.querySelector('#splat').components.sound\r\n\r\n          this.el.sceneEl.addEventListener('touchstart', event =&gt; {\r\n\r\n            \/\/ Create element to be thrown, setting position, scale, and model\r\n            const tomato = document.createElement('a-entity')\r\n            tomato.setAttribute('position', camera.object3D.position)\r\n            tomato.setAttribute('scale', '0.0175 0.0175 0.0175')\r\n            tomato.setAttribute('gltf-model', '#tomatoModel')\r\n\r\n            \/\/ Choose a random rotation offset for some variation\r\n            const randomRotation = { x: -90 + Math.random() * 30, y: Math.random() * 360, z: 0 }\r\n            tomato.setAttribute('rotation', randomRotation)\r\n\r\n            \/\/ Set velocity, rotated with camera direction\r\n            const velocity = new THREE.Vector3(0, 0, -10)\r\n            velocity.applyQuaternion(camera.object3D.quaternion)\r\n            tomato.setAttribute('velocity', velocity)\r\n\r\n            \/\/ Add physics body\r\n            tomato.setAttribute('body', {\r\n              type: 'dynamic',\r\n              sphereRadius: 0.35,\r\n              shape: 'sphere'\r\n            })\r\n\r\n            \/\/ Add tomato to scene\r\n            this.el.sceneEl.appendChild(tomato)\r\n\r\n            \/\/ The splat is created at the same time as the thrown tomato so\r\n            \/\/ there is time to load the model before it hits the ground\r\n            const splatBase = document.createElement('a-entity')\r\n            splatBase.setAttribute('visible','false')\r\n\r\n            \/\/ The splat consists of a model wrapped in an empty\r\n            \/\/ parent so we can apply the correct scaling animation\r\n            const splat = document.createElement('a-entity')\r\n            splat.setAttribute('gltf-model', '#tomatoModel')\r\n            splat.setAttribute('scale', '0.0175 0.0175 0.0175')\r\n            splatBase.appendChild(splat)\r\n\r\n            this.el.sceneEl.appendChild(splatBase)\r\n\r\n            let didCollide = false\r\n            tomato.addEventListener('collide', event =&gt; {\r\n              \/\/ Only want to do the splat once, and with the ground only\r\n              if (didCollide || event.detail.body.el.id != 'ground') {\r\n                return\r\n              }\r\n              didCollide = true\r\n\r\n              \/\/Stop previous splat sound\r\n              splatSnd.stopSound()\r\n              \/\/Play splat sound\r\n              splatSnd.playSound()\r\n\r\n              \/\/ Copy positioning of thrown tomato to splat\r\n              splatBase.object3D.position.copy(tomato.object3D.position)\r\n              splat.object3D.rotation.copy(tomato.object3D.rotation)\r\n\r\n              splatBase.object3D.visible = true\r\n\r\n              tomato.setAttribute('visible', 'false')\r\n\r\n              \/\/ We can't remove the thrown tomato until the physics step is over\r\n              setTimeout(() =&gt; {\r\n                tomato.parentNode.removeChild(tomato)\r\n              }, 0)\r\n\r\n              \/\/ Using animation component to show flattening\r\n              splatBase.setAttribute('animation__scale', {\r\n                property: 'scale',\r\n                from: '1 1 1',\r\n                to: '3 0.1 3',\r\n                dur: 500,\r\n                easing: 'easeOutQuad'\r\n              })\r\n\r\n              \/\/ After 2.5 seconds, shrink the splat away and delete it\r\n              setTimeout(() =&gt; {\r\n                splatBase.setAttribute('animation__scale', {\r\n                  property: 'scale',\r\n                  from: '3 0.1 3',\r\n                  to: '0.001 0.001 0.001',\r\n                  dur: 1500,\r\n                  easing: 'easeInQuad'\r\n                })\r\n                setTimeout(() =&gt; splatBase.parentNode.removeChild(splatBase), 1500)\r\n              }, 2500)\r\n            })\r\n          })\r\n        }\r\n      })\r\n    &lt;\/script&gt;\r\n\r\n  &lt;\/head&gt;\r\n  &lt;body&gt;\r\n    &lt;!-- We must add the shoot-tomato component to the scene so it has an effect, as well as the physics component --&gt;\r\n    &lt;a-scene\r\n      xrweb\r\n      shoot-tomato\r\n      physics=\"iterations: 1\"\r\n      xrextras-almost-there\r\n      xrextras-loading\r\n      xrextras-runtime-error&gt;\r\n\r\n      &lt;!-- We can define assets here to be loaded when A-Frame initializes --&gt;\r\n      &lt;a-assets&gt;\r\n        &lt;!-- Credit to Poly by Google for the model: https:\/\/poly.google.com\/view\/dmzbb8UisNv --&gt;\r\n        &lt;a-asset-item id=\"tomatoModel\" src=\"tomato.glb\"&gt;&lt;\/a-asset-item&gt;\r\n        &lt;!-- Credit to Mike Koenig for the sound clip: http:\/\/soundbible.com\/642-Splat.html --&gt;\r\n        &lt;a-asset-item preload=\"auto\" class=\"a-sound\" id=\"splatSrc\" src=\"splat.m4a\" response-type=\"arraybuffer\"&gt;&lt;\/a-asset-item&gt;\r\n      &lt;\/a-assets&gt;\r\n\r\n      &lt;a-camera\r\n        id=\"camera\"\r\n        position=\"0 4 4\"&gt;\r\n        &lt;a-sound id=\"splat\" src=\"#splatSrc\"&gt;&lt;\/a-sound&gt;\r\n      &lt;\/a-camera&gt;\r\n\r\n      &lt;a-entity\r\n        light=\"type: directional;\r\n               intensity: 0.8;\"\r\n        position=\"1 4.3 2.5\"&gt;\r\n      &lt;\/a-entity&gt;\r\n\r\n      &lt;a-light type=\"ambient\" intensity=\"0.5\"&gt;&lt;\/a-light&gt;\r\n\r\n      &lt;!-- Adding the static-body component allows the ground to be collided with --&gt;\r\n      &lt;a-box\r\n        id=\"ground\"\r\n        material=\"transparent: true; opacity: 0\"\r\n        static-body\r\n        scale=\"1000 2 1000\"\r\n        position=\"0 -1 0\"&gt;\r\n      &lt;\/a-box&gt;\r\n    &lt;\/a-scene&gt;\r\n  &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>\u91cd\u8981\u306a\u90e8\u5206\u3092\u304b\u3044\u3064\u307e\u3093\u3067\u3054\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<h3>\u30c8\u30de\u30c8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u30b5\u30a6\u30f3\u30c9\u30d5\u30a1\u30a4\u30eb\u306e\u8aad\u307f\u8fbc\u307f<\/h3>\n<p>\u307e\u305a\u306f\u4e3b\u8981\u306a\u5916\u90e8\u30ea\u30bd\u30fc\u30b9\u3092\u3042\u3089\u304b\u3058\u3081\u8aad\u307f\u8fbc\u307e\u305b\u3066\u304a\u304d\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306f\u30c8\u30de\u30c8\u306e3D\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3001\u6295\u3052\u305f\u6642\u306e\u52b9\u679c\u97f3\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u307e\u305b\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e130\u884c\u76ee\u3042\u305f\u308a\u304c\u8aad\u307f\u8fbc\u307f\u90e8\u5206\u306b\u3042\u305f\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">&lt;a-assets&gt;\r\n  &lt;!-- Credit to Poly by Google for the model: https:\/\/poly.google.com\/view\/dmzbb8UisNv --&gt;\r\n  &lt;a-asset-item id=\"tomatoModel\" src=\"tomato.glb\"&gt;&lt;\/a-asset-item&gt;\r\n  &lt;!-- Credit to Mike Koenig for the sound clip: http:\/\/soundbible.com\/642-Splat.html --&gt;\r\n  &lt;a-asset-item preload=\"auto\" class=\"a-sound\" id=\"splatSrc\" src=\"splat.m4a\" response-type=\"arraybuffer\"&gt;&lt;\/a-asset-item&gt;\r\n&lt;\/a-assets&gt;<\/pre>\n<h3>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u6210\u3068\u547c\u3073\u51fa\u3057<\/h3>\n<p>\u6b21\u306b\u3001\u30c8\u30de\u30c8\u3092\u6295\u3052\u308b\u52d5\u4f5c\u3092\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3068\u3057\u3066\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n<p>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e20\u884c\u76ee\u4ee5\u964d\u304c\u8a72\u5f53\u7b87\u6240\u3067\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">AFRAME.registerComponent('shoot-tomato', {\r\n  init: function() {\r\n    \u7701\u7565...\r\n  }\r\n});<\/pre>\n<p>\u3053\u306e\u4e2d\u306b\u3001\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u8a18\u8ff0\u3057\u305f\u308a\u3001\u51e6\u7406\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3059\u3002<br \/>\n\u3053\u306e\u90e8\u5206\u306f\u5f8c\u307b\u3069\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a18\u8ff0\u304c\u7d42\u308f\u3063\u305f\u3089\u3001A-frame\u306e\u30b7\u30fc\u30f3\u3092\u5b9a\u7fa9\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u3067\u547c\u3073\u51fa\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true\">&lt;a-scene\r\n      xrweb\r\n      shoot-tomato\r\n      physics=\"iterations: 1\"\r\n      xrextras-almost-there\r\n      xrextras-loading\r\n      xrextras-runtime-error&gt;\r\n  \u7701\u7565...\r\n&lt;\/a-scene&gt;<\/pre>\n<h3>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u306b\u51e6\u7406\u3092\u8a18\u8ff0\u3059\u308b<\/h3>\n<p>\u305d\u308c\u3067\u306f\u3044\u3088\u3044\u3088\u30e1\u30a4\u30f3\u306e\u51e6\u7406\u306e\u90e8\u5206\u3092\u8a73\u3057\u304f\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u307e\u305a\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u753b\u9762\u3092\u30bf\u30c3\u30d7\u3057\u305f\u6642\u306e\u30a4\u30d9\u30f3\u30c8\u3092\u76e3\u8996\u3059\u308b\u3088\u3046\u3001<br \/>\n\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">this.el.sceneEl.addEventListener('touchstart', event =&gt; {\r\n  \u7701\u7565...\r\n}<\/pre>\n<p>\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u5185\u306b\u3001\u30c8\u30de\u30c8\u3092\u6295\u3052\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u307e\u305a\u306fA-frame\u306e\u300ca-entity\u300d\u30bf\u30b0\u3092\u7a7a\u306e\u72b6\u614b\u3067\u751f\u6210\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">const tomato = document.createElement('a-entity')<\/pre>\n<p>\u751f\u6210\u3057\u305f\u30bf\u30b0\u306b\u3001\u4f4d\u7f6e\u3001\u7e2e\u5c0f\u7387\u3001\u30e2\u30c7\u30eb\u306e\u60c5\u5831\u3092\u8ffd\u52a0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">tomato.setAttribute('position', camera.object3D.position)\r\ntomato.setAttribute('scale', '0.0175 0.0175 0.0175')\r\ntomato.setAttribute('gltf-model', '#tomatoModel')<\/pre>\n<p>\u4f4d\u7f6e\u306f\u30ab\u30e1\u30e9\u3068\u540c\u3058\u4f4d\u7f6e\u3001\u7e2e\u5c0f\u7387\u306f1.75%\u306b\u3057\u3066\u3001\u6295\u3052\u308b\u524d\u306e\u6700\u521d\u306e\u72b6\u614b\u3092\u4f5c\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u3042\u3089\u304b\u3058\u3081\u8aad\u307f\u8fbc\u3093\u3067\u304a\u3044\u305f\u30c8\u30de\u30c8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3082\u3001\u3053\u3053\u3067\u53cd\u6620\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3055\u3089\u306b\u3001\u30e9\u30f3\u30c0\u30e0\u3067\u30c8\u30de\u30c8\u3092\u50be\u3051\u3066\u30ea\u30a2\u30ea\u30c6\u30a3\u3092\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\nX\u8ef8\u3068Y\u8ef8\u306b\u3001Math.random\u3067\u751f\u6210\u3057\u305f\u4e71\u6570\u3092\u5229\u7528\u3057\u3066\u30bf\u30c3\u30d7\u3059\u308b\u305f\u3073\u306b\u50be\u304d\u304c\u5909\u308f\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u306d\u3002<\/p>\n<pre class=\"lang:default decode:true \">const randomRotation = { x: -90 + Math.random() * 30, y: Math.random() * 360, z: 0 }\r\ntomato.setAttribute('rotation', randomRotation)<\/pre>\n<p>\u6b21\u306b\u3001\u6295\u3052\u308b\u6642\u306e\u901f\u5ea6\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">const velocity = new THREE.Vector3(0, 0, -10)\r\nvelocity.applyQuaternion(camera.object3D.quaternion)\r\ntomato.setAttribute('velocity', velocity)<\/pre>\n<p>\u300cvelocity\u300d\u3068\u3044\u3046\u5c5e\u6027\u304c\u3001\u901f\u5ea6\u3092\u8868\u3059\u3082\u306e\u3067\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001\u4eca\u56de\u306f\u30c8\u30de\u30c8\u304c\u5730\u9762\u306b\u3076\u3064\u304b\u3063\u305f\u6642\u306b\u6f70\u308c\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3082\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u300c\u3076\u3064\u304b\u3063\u305f\u300d\u3068\u3044\u3046\u5224\u5b9a\u3092\u5f97\u308b\u305f\u3081\u306b\u3001\u300c\u7269\u7406\u30dc\u30c7\u30a3\u300d\u3068\u3044\u3046\u3082\u306e\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">tomato.setAttribute('body', {\r\n  type: 'dynamic',\r\n  sphereRadius: 0.35,\r\n  shape: 'sphere'\r\n})<\/pre>\n<p>\u7403\u4f53\u306e\u30dc\u30c7\u30a3\u3092\u8a2d\u5b9a\u3057\u3066\u3001\u3076\u3064\u304b\u308a\u5224\u5b9a\u3092\u5f97\u3089\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u3053\u3053\u307e\u3067\u8a2d\u5b9a\u3067\u304d\u305f\u3089\u3001\u30b7\u30fc\u30f3\u306b\u30c8\u30de\u30c8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">this.el.sceneEl.appendChild(splatBase)<\/pre>\n<p>\u3053\u3053\u307e\u3067\u306e\u30b3\u30fc\u30c9\u3067\u3001\u30c8\u30de\u30c8\u304c\u6295\u3052\u3089\u308c\u308b\u52d5\u304d\u304c\u5b9f\u88c5\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<p>\u6700\u5f8c\u306b\u3001\u30c8\u30de\u30c8\u304c\u6f70\u308c\u308b\u3068\u3053\u308d\u306e\u51e6\u7406\u3092\u5c11\u3057\u3060\u3051\u898b\u3066\u898b\u307e\u3057\u3087\u3046\u3002<br \/>\n\u307e\u305a\u306f\u3001\u3042\u3089\u304b\u3058\u3081\u6f70\u308c\u305f\u30c8\u30de\u30c8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">const splat = document.createElement('a-entity')\r\nsplat.setAttribute('gltf-model', '#tomatoModel')\r\nsplat.setAttribute('scale', '0.0175 0.0175 0.0175')\r\nsplatBase.appendChild(splat)<\/pre>\n<p>\u3053\u306e\u6642\u70b9\u3067\u306f\u300cscale\u300d\u306e\u5024\u304cX\u8ef8\u3001Y\u8ef8\u3001Z\u8ef8\u5171\u306b\u5747\u4e00\u306b\u7e2e\u5c0f\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u6b63\u5e38\u306a\u5f62\u306e\u30c8\u30de\u30c8\u306e\u307e\u307e\u3067\u3059\u3002<br \/>\n\u3053\u308c\u3092\u5f8c\u307b\u3069\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u304b\u3051\u3066\u6f70\u3059\u51e6\u7406\u3092\u304b\u3051\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u524d\u306b\u3001\u30c8\u30de\u30c8\u304c\u5730\u9762\u306b\u3076\u3064\u304b\u3063\u305f\u6642\u306e\u5f53\u305f\u308a\u5224\u5b9a\u3092\u53d7\u3051\u53d6\u308c\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\u5148\u307b\u3069\u8a2d\u5b9a\u3057\u305f\u300c\u7269\u7406\u30dc\u30c7\u30a3\u300d\u306e\u304a\u304b\u3052\u3067\u3001\u5f53\u305f\u308a\u5224\u5b9a\u3092\u300ccollide\u300d\u3068\u3044\u3046\u30a4\u30d9\u30f3\u30c8\u3068\u3057\u3066\u53d7\u3051\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"lang:default decode:true\">tomato.addEventListener('collide', event =&gt; {\r\n  \u7701\u7565...\r\n});<\/pre>\n<p>\u3053\u306e\u4e2d\u306b\u3076\u3064\u304b\u3063\u305f\u6642\u306e\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u5148\u307b\u3069\u8aad\u307f\u8fbc\u307e\u305b\u3066\u304a\u3044\u305f\u52b9\u679c\u97f3\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u518d\u751f\u3057\u307e\u3059\u3002<br \/>\n\u3082\u3057\u9023\u7d9a\u3067\u30c8\u30de\u30c8\u3092\u6295\u3052\u305f\u5834\u5408\u3001\u300cstopSound()\u300d\u3067\u5148\u306b\u52b9\u679c\u97f3\u3092\u6d88\u3059\u51e6\u7406\u3092\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u97f3\u304c\u4f55\u91cd\u306b\u3082\u805e\u3053\u3048\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<pre class=\"lang:default decode:true\">\/\/Stop previous splat sound\r\nsplatSnd.stopSound()\r\n\/\/Play splat sound\r\nsplatSnd.playSound()<\/pre>\n<p>\u6b21\u306b\u3001\u5148\u307b\u3069\u7528\u610f\u3057\u3066\u304a\u3044\u305f\u3001\u6f70\u308c\u305f\u30c8\u30de\u30c8\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u304b\u3051\u307e\u3059\u3002<\/p>\n<pre class=\"lang:default decode:true \">splatBase.setAttribute('animation__scale', {\r\n  property: 'scale',\r\n  from: '1 1 1',\r\n  to: '3 0.1 3',\r\n  dur: 500,\r\n  easing: 'easeOutQuad'\r\n})<\/pre>\n<p>X\u8ef8\u3068Z\u8ef8\u3092300\uff05\u306b\u62e1\u5927\u3057\u3066\u3044\u307e\u3059\u304c\u3001Y\u8ef8\u309210\uff05\u306b\u7e2e\u5c0f\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u7e26\u306b\u6f70\u308c\u305f\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u5909\u5316\u91cf\u306b\u30a4\u30fc\u30b8\u30f3\u30b0\u51e6\u7406\u3092\u304b\u3051\u3066\u3042\u3052\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u6ed1\u3089\u304b\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0a\u3001\u3056\u3063\u304f\u308a\u3067\u3059\u304c\u3001\u3053\u3053\u307e\u3067\u304c\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u306e\u30b3\u30fc\u30c9\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<h2>\u307e\u3068\u3081<\/h2>\n<p>\u3044\u304b\u304c\u3060\u3063\u305f\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p>A-frame\u3060\u3051\u3067\u306f\u306a\u304b\u306a\u304b\u5b9f\u73fe\u3067\u304d\u306a\u304b\u3063\u305f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u8868\u73fe\u304c\u30018th Wall Web\u3092\u5229\u7528\u3059\u308b\u3068\u53ef\u80fd\u306b\u306a\u308b\u3053\u3068\u304c\u304a\u5206\u308a\u3044\u305f\u3060\u3051\u305f\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p>\u307e\u305f\u3001\u5192\u982d\u3067\u3082\u8ff0\u3079\u305f\u3088\u3046\u306b\u30018th Wall Web\u3067\u306f\u3053\u306e\u3088\u3046\u306a\u52d5\u304d\u306e\u3042\u308bAR\u4f53\u9a13\u304c\u30c7\u30d0\u30a4\u30b9\u306e\u57a3\u6839\u3092\u8d85\u3048\u3066\u3088\u308a\u591a\u304f\u306e\u4eba\u306b\u4f53\u9a13\u3057\u3066\u3044\u305f\u3060\u3051\u308b\u3068\u3044\u3046\u30e1\u30ea\u30c3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u30a2\u30d7\u30ea\u578b\u306eAR\u3067\u306f\u5bfe\u5fdc\u6a5f\u7a2e\u3084OS\u304c\u53b3\u3057\u304f\u5236\u9650\u3055\u308c\u3066\u3044\u307e\u3059\u304c\u3001\u30c7\u30d0\u30a4\u30b9\u3067\u52d5\u4f5c\u3059\u308b\u305f\u3081\u3001\u305d\u306e\u5236\u9650\u304c\u7de9\u548c\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3088\u308a\u591a\u304f\u306e\u304b\u305f\u306b\u5411\u3051\u3066WebAR\u958b\u767a\u3092\u3055\u308c\u305f\u3044\u5834\u5408\u3001\u4e00\u5ea68th Wall Web\u3092\u3054\u691c\u8a0e\u3055\u308c\u3066\u898b\u3066\u306f\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p>&nbsp;<\/p>\n<p>ALAKI\u3067\u306f\u3001\u30c7\u30d0\u30a4\u30b9\u306e\u5236\u9650\u304c\u5c11\u306a\u3044WebAR\u958b\u767a\u306b\u529b\u3092\u5165\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u4eca\u56de\u306e\u8a18\u4e8b\u306b\u95a2\u3059\u308b\u8cea\u554f\u3001WebAR\u306b\u3064\u3044\u3066\u306e\u3054\u76f8\u8ac7\u306a\u3069\u306f\u3001<br \/>\n\u4e0b\u8a18\u306e\u30ea\u30f3\u30af\u304b\u3089\u304a\u6c17\u8efd\u306b\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><a href=\"https:\/\/alaki.co.jp\/contact\/\" target=\"_blank\">\u304a\u554f\u3044\u5408\u308f\u305b\u306f\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u306b\u3061\u306f\uff01 \u30c7\u30b6\u30a4\u30ca\u30fc\u306e\u4f0a\u6771\uff08@ALAKIWebVRAR1\uff09\u3067\u3059\u3002&#46;&#46;&#46;<\/p>\n","protected":false},"author":8,"featured_media":3192,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[32],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3160"}],"collection":[{"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3160"}],"version-history":[{"count":25,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3160\/revisions"}],"predecessor-version":[{"id":3370,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3160\/revisions\/3370"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=\/wp\/v2\/media\/3192"}],"wp:attachment":[{"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3160"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/test.alaki.co.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}