Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A-Frameでお手軽WebAR

shinjism
July 30, 2017

 A-Frameでお手軽WebAR

2017.7.22 ARコンテンツ作成勉強会 #AR_Fukuoka のハンズオン資料
2017.8.30 JSライブラリのアップデートに伴い資料を更新

shinjism

July 30, 2017
Tweet

More Decks by shinjism

Other Decks in Research

Transcript

  1. ໨࣍ d"'SBNFͷ֓ཁͱ։ൃ४උ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ •

    ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
  2. ໨࣍ d73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ •

    ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
  3. ໨࣍ d73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ •

    ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
  4. ໨࣍ d73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ •

    ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
  5. ໨࣍ d73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ •

    ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
  6. ໨࣍ d"3ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ •

    ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
  7. ඞཁͳ΋ͷΛ֬ೝ͠Α͏ ඞਢͷ΋ͷ • ϊʔτ1$ 8JO.BDͲͪΒͰ΋ • 8FCΧϝϥ 1$౥ࡌ·ͨ͸64#઀ଓ • 8FC73Λαϙʔτͨ͠8FCϒϥ΢β

    • 'JSFGPY IUUQTXXXNP[JMMBPSHKBGJSFGPYOFX • (PPHMF$ISPNF IUUQTXXXHPPHMFDPKQDISPNFCSPXTFSEFTLUPQJOEFYIUNM • )5.-΍ςΩετΛฤू͢ΔΤσΟλ • 'BDFCPPL·ͨ͸(JUIVCͷΞΧ΢ϯτ ͋Δͱخ͍͠΋ͷ • "OESPJE୺຤
  8. "'SBNFͬͯͳʹʁ d"'SBNFͷ֓ཁ d • 8FCϒϥ΢β্Ͱಈ࡞͢Δ73ίϯςϯπ ͕खܰʹ࡞੒Ͱ͖ΔΦʔϓϯιʔεϑϨʔ ϜϫʔΫɻ • 8FC73ͱ͍͏࢓༷ʹج͖ͮɺ8FCٕज़ )5.-ͱ+BWB4DSJQU

    Ͱ73ίϯςϯπΛ ࡞੒ɻ • ಛผͳπʔϧ౳͸ෆཁɻ࠷௿Ͱ΋ςΩετ ΤσΟλͱ8FC73ରԠͷ8FCϒϥ΢β 'JSFGPY(PPHMF$ISPNF౳ ͕͋Ε͹Մɻ • )5$7JWFɺ0DVMVT3JGUͳͲଟ਺ͷ73 ϔουηοτΛαϙʔτɻ • ଞʹ΋1$͸΋ͪΖΜɺJ04΍"OESPJEͰ΋ 73ίϯςϯπͷମݧ͕Մೳɻ
  9. "'SBNFͬͯͳʹʁ d"'SBNFͷυΩϡϝϯτ d ެࣜαΠτ • IUUQTBGSBNFJP ެࣜυΩϡϝϯτ • IUUQTBGSBNFJPEPDT ಈ࡞αϯϓϧू

    • IUUQTBGSBNFJPFYBNQMFT ίϯϙʔωϯτू • IUUQTBGSBNFJPBGSBNFSFHJTUSZ • IUUQTHJUIVCDPNBGSBNFWSBXFTPNFBGSBNF
  10. ։ൃͷ४උΛ͠Α͏ d(MJUDIͱ͸ d )5.- +BWB4DSJQU ίʔσΟϯά ެ։ ಈ࡞֬ೝ Ξοϓϩʔυ ΤσΟλ౳Πϯετʔϧ

    αʔό؀ڥߏங ᶃ ᶄ ᶅ ᶆ "'SBNF੡ ίϯςϯπΛ ެ։͢Δ·Ͱ ௨ৗͷ৔߹ ख͕͔͔ؒΔʂ ͓͕͔͔ۚΔʂ
  11. ։ൃͷ४උΛ͠Α͏ d(MJUDIͱ͸ d (MJUDIΛ࢖͓͏ r (MJUDIͱ͸ • 8FCϒϥ΢β্Ͱ؆୯ɾखܰʹ8FCΞϓϦ έʔγϣϯΛߏஙͰ͖Δແྉ ݱࡏ

    ͷαʔϏεɻ • Πϯλʔωοτ্·ͨ͸ϩʔΧϧϚγϯ্ʹ αʔό؀ڥΛߏஙͤͣͱ΋"'SBNF੡ΞϓϦ ͷ࣮ߦ͕Մೳɻ • ίʔυΤσΟλΛඋ͓͑ͯΓɺ਺ଟ͘ͷαϯϓ ϧϓϩδΣΫτ͔Β೚ҙͷ΋ͷΛϦϛοΫε ίϐʔฤू ࣮ͯ͠ߦͰ͖Δɻ • (JUIVC·ͨ͸'BDFCPPLΞΧ΢ϯτ͕͋Ε͹ ͙͢ʹར༻Մೳɻ • ϓϩδΣΫτຖͷεϖʔε͕.#·ͰͳͲ ͷ੍໿͕͋ΔͨΊɺࠓͷͱ͜Ζࢼ࡞΍࣮ݧ޲͖ɻ
  12. <!DOCTYPE html> <html> <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title>

    <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> ։ൃͷ४උΛ͠Α͏ dϓϩδΣΫτͷ࣮ߦͱ֬ೝ d αϯϓϧͷίʔυ͸ͨͬͨ͜Ε͚ͩ ྘ͷ෦෼͕"'SBNFʹؔ܎͢Δهड़ɻ 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
  13. <!DOCTYPE html> <html> <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title>

    <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> ։ൃͷ४උΛ͠Α͏ dϓϩδΣΫτͷ࣮ߦͱ֬ೝ d +BWB4DSJQUͷϥΠϒϥϦΛಡΈࠐΉهड़ɻ ͜͜Ͱ͸"'SBNFͷػೳΛఏڙ͢ΔϥΠϒϥ ϦΛಡΈࠐΜͰ͍Δɻ 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17.
  14. <!DOCTYPE html> <html> <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title>

    <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. ։ൃͷ४උΛ͠Α͏ dϓϩδΣΫτͷ࣮ߦͱ֬ೝ d BTDFOFʙBTDFOFͷؒʹ͸ Ծ૝ۭؒʹදࣔ͢Δ΋ͷΛهड़͢Δɻ
  15. <!DOCTYPE html> <html> <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title>

    <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. ։ൃͷ४උΛ͠Α͏ dϓϩδΣΫτͷ࣮ߦͱ֬ೝ d
  16. <!DOCTYPE html> <html> <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title>

    <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. ։ൃͷ४උΛ͠Α͏ dϓϩδΣΫτͷ࣮ߦͱ֬ೝ d
  17. ͓͓͖͍͑ͯͨ͞ϙΠϯτ dΑ͘࢖͏༻ޠ d 4DFOF γʔϯ ࡾ࣍ݩͷ෺ମΛ഑ஔ͢ΔԾ૝ۭؒͦͷ ΋ͷɻ $BNFSB Χϝϥ ࡾ࣍ݩͷԾ૝ۭؒΛͲ͔͜ΒݟΔ͔ɺ

    ࢹ఺Λઃఆ͢ΔͨΊͷ΋ͷɻγʔϯ಺ ʹσϑΥϧτͰඋΘ͍ͬͯΔɻ -JHIU ϥΠτ র໌͕ͳ͍ͱ҉ͯ͘Կ΋ݟ͑ͳ͍ͨΊɺ ޫݯͱͯ͠ϥΠτΛઃఆ͢Δɻγʔϯ ಺ʹσϑΥϧτͰඋΘ͍ͬͯΔɻ
  18. ͓͓͖͍͑ͯͨ͞ϙΠϯτ d"'SBNFͷҐஔɾճసɾॖई d 1PTJUJPO Ґஔ 9 : ;ͷॱʹεϖʔε۠੾Γ ͰҐஔΛࢦఆ ୯Ґϝʔτϧ

    3PUBUJPO ճస 9 : ;ͷॱʹεϖʔε۠੾Γ Ͱ֯౓Λࢦఆ ୯Ґ౓ 4DBMF ॖई 9 : ;ͷॱʹεϖʔε۠੾Γ Ͱഒ཰Λࢦఆ ୯Ґഒ ྫݪ఺͔Βӈʹϝʔτϧ  ྫ:࣠Λத৺ʹ›ճస  ྫج४ͱͳΔେ͖͞ͷഒ 
  19. ٿମΛදࣔ͠Α͏ dٿମͷ഑ஔ d <!DOCTYPE html> <html> <head> <title>Hello, WebAR! -

    A-Frame &amp; AR.js</title> <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. ݱࡏɺ࠷৽όʔδϣϯ͸ ͳͷͰɺ͜ΕΑΓݹ͍৔߹͸มߋ͓ͯ͘͠ɻ
  20. ٿମΛදࣔ͠Α͏ dٿମͷ഑ஔ d <!DOCTYPE html> <html> <head> <title>Hello, WebAR! -

    A-Frame &amp; AR.js</title> <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. BTDFOFʙBTDFOFͷத਎Λ࡟আ
  21. ٿମΛදࣔ͠Α͏ dٿମͷ഑ஔ d <!DOCTYPE html> <html> <head> <title>Hello, WebAR! -

    A-Frame &amp; AR.js</title> <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> <body> <a-scene> </a-scene> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. BTDFOFʙBTDFOFͷதʹ ͜Ε͔Βඞཁͳ΋ͷΛهड़͍ͯ͘͠
  22. // 前略 <body> <a-scene> <a-sphere position="0 0 0" rotation="0 0

    0" scale="1 1 1" radius="1" color="blue"></a-sphere> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. ٿମΛදࣔ͠Α͏ dٿମͷ഑ஔ d X: 0 Y: 0 Z: 0 BTQIFSFʙBTQIFSFΛهड़͠ ٿମͷϓϦϛςΟϒΛ௥Ճɻ QPTJUJPOɺSPUBUJPOɺTDBMFͷ֤஋͸ YɺZɺ[ͷॱʹεϖʔε۠੾ΓͰهड़ɻ SBEJVT͸൒ܘͷ஋ ϝʔτϧ Λهड़ɻ DPMPSͰ৭Λهड़ɻ ˔DPQZBOEQBTUFUYUͷ <੨͍ٿମΛ ഑ஔ> ͔Βίϐϖɻ
  23. // 前略 <body> <a-scene> <a-sphere position="2 0 -5" rotation="0 0

    0" scale="1 1 1" radius="1.5" color="blue"></a-sphere> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. ٿମΛදࣔ͠Α͏ dٿମͷ഑ஔ d BTQIFSFʙBTQIFSFʹ͋Δ QPTJUJPOɺTDBMF ɺSBEJVT ɺDPMPS ͷ֤஋Λ͍Ζ͍Ζม͑ͯΈͯ͸࣮ߦ݁Ռ Λ֬ೝ͠ɺײ֮Λ͔ͭΉɻ
  24. // 前略 <body> <a-scene> <a-sphere position="0 0 0" rotation="0 0

    0" scale="1 1 1" radius="1" color="blue"></a-sphere> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. ٿମΛදࣔ͠Α͏ dٿମͷ഑ஔ d ׳Ε͖ͯͨΒBTQIFSFʙBTQIFSFͷ QPTJUJPOɺ SPUBUJPOɺ TDBMFɺSBEJVT͸ ্هઃఆʹ͓ͯ͘͠ɻ ޙͷ"3දࣔʹ޲͚ͯͷઃఆ
  25. // 前略 <body> <a-scene> <a-sphere position="0 0 0" rotation="0 0

    0" scale="1 1 1" radius="1" color="blue"></a-sphere> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. ٿମΛදࣔ͠Α͏ dΧϝϥͷ഑ஔ d ݱঢ়Ͱ͸૬มΘΒͣٿମ͕ݟ͑ͳ͍ͷͰΧϝϥ ͷελʔτҐஔΛมߋ͢Δɻ BTQIFSFʙBTQIFSFͷԼʹߦૠೖɻ
  26. // 前略 <body> <a-scene> <a-sphere position="0 0 0" rotation="0 0

    0" scale="1 1 1" radius="1" color="blue"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. ٿମΛදࣔ͠Α͏ dΧϝϥͷ഑ஔ d BFOUJUZʙBFOUJUZΛ௥Ճͯ͠ΧϝϥػೳͷDBNFSBΛ௥Ճɻ σϑΥϧτΧϝϥɺࢹ఺มߋɺΩʔૢ࡞͕ແޮʹͳͬͯ͠·͏ͨΊɺ ࢹ఺มߋͷMPPLDPOUSPMTͱΩʔૢ࡞ͷXBTEDPOUSPMTΛ௥Ճɻ ٿମ͕ࢹ໺ʹೖΔҐஔʹQPTJUJPOΛઃఆɻ ˔DPQZBOEQBTUFUYUͷ <ΧϝϥΛ഑ஔ> ͔Βίϐϖɻ
  27. // 前略 <body> <a-scene> <a-sphere position="0 0 0" rotation="0 0

    0" scale="1 1 1" radius="1" color="blue"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. ը૾ΛషΓ෇͚Α͏ dٿମ΁ͷը૾ͷషΓ෇͚ d Ξοϓϩʔυͨ͠ը૾Λ࢖༻ ͢ΔͨΊͷ४උΛߦ͏ɻ BTQIFSFʙBTQIFSF ͷ্ʹߦૠೖɻ
  28. // 前略 <body> <a-scene> <a-assets> </a-assets> <a-sphere position="0 0 0"

    rotation="0 0 0" scale="1 1 1" radius="1" color="blue"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. ը૾ΛషΓ෇͚Α͏ dٿମ΁ͷը૾ͷషΓ෇͚ d BBTTFUTʙBBTTFUTΛهड़ɻ ͜ͷؒʹը૾΍%Ϟσϧʹؔ͢Δ৘ใΛ هड़͍ͯ͘͠ɻ
  29. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> </a-assets> <a-sphere

    position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" color="blue"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. ը૾ΛషΓ෇͚Α͏ dٿମ΁ͷը૾ͷషΓ෇͚ d JNHΛهड़ͯ͠Ξοϓϩʔυͨ͠FBSKQHͷ࢖༻Λએݴɻ  JE͸Ұҙͷ໊শ  TSD͸ίϐʔ͓͍ͯͨ͠FBSKQHͷ63-ΛషΓ෇͚
  30. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> </a-assets> <a-sphere

    position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" color="blue"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. ը૾ΛషΓ෇͚Α͏ dٿମ΁ͷը૾ͷషΓ෇͚ d ٿମʹը૾ΛషΓ෇͚ΔͨΊɺ৭ͷࢦఆ͸ෆཁʹͳΔɻ BTQIFSFʙBTQIFSFͷDPMPSΛ࡟আɻ
  31. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> </a-assets> <a-sphere

    position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. ը૾ΛషΓ෇͚Α͏ dٿମ΁ͷը૾ͷషΓ෇͚ d ୅ΘΓʹTSDΛ௥Ճͯ͠FBSKQHͷJEͱؔ࿈ ෇͚Δɻ͜͜Ͱ͸JEͷલʹγϟʔϓه߸  Λ͚ͭΔɻ
  32. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> </a-assets> <a-sphere

    position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. ը૾ΛషΓ෇͚Α͏ dٿମ΁ͷը૾ͷషΓ෇͚ d ٿମͱFBSKQH͕JEʹ Αͬͯؔ࿈෇͍ͨɻ
  33. %ϞσϧΛදࣔ͠Α͏ d࢖༻͢Δ%Ϟσϧ 0#+ ͷϑΝΠϧߏ੒ d 0#+ ܗঢ়Λද͢ϑΝΠϧ 1/(+1((*' ৭΍֎؍ɾ࣭ײΛද͢ը૾ ϑΝΠϧ

    ͭͷϑΝΠϧΛ͋Θͤͯ %ϞσϧΛදࣔ .5- ը૾ϑΝΠϧͷ৭͕ܗঢ় ͷͲͷҐஔʹ૬౰͢Δ͔ ؔ܎ੑΛද͢ϑΝΠϧ
  34. // 前略 newmtl body Ns 96.078431 Ka 1.000000 1.000000 1.000000

    Kd 0.800000 0.800000 0.000000 Ks 0.500000 0.500000 0.500000 Ke 0.000000 0.000000 0.000000 Ni 1.000000 d 1.000000 illum 2 map_Kd https://cdn.glitch.com/f87d2f49-ea88-4c64-bf8b- 9d0d5ba378e7%2Fduck_texture.png?1500398467350 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. ࠷ޙͷߦͷNBQ@,EΑΓޙΖͷ63-Λ࡟আͯ͠ʜ %ϞσϧΛදࣔ͠Α͏ d.5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d
  35. // 前略 newmtl body Ns 96.078431 Ka 1.000000 1.000000 1.000000

    Kd 0.800000 0.800000 0.000000 Ks 0.500000 0.500000 0.500000 Ke 0.000000 0.000000 0.000000 Ni 1.000000 d 1.000000 illum 2 map_Kd duck_textture.pngのURL 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. ίϐʔ͓͍ͯͨ͠EVDL@UFYUVSFQOHͷ63-ΛషΓ෇͚ޙɺ EVDLNUMΛ্ॻ͖อଘ %ϞσϧΛදࣔ͠Α͏ d.5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d
  36. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> </a-assets> <a-sphere

    position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. FBSKQHͷJNHͷ࣍ͷߦͰΞοϓϩʔυ ͨ͠EVDLPCKͷ࢖༻Λએݴ͢Δɻ %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d
  37. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d BBTTFUJUFNʙBBTTFUJUFNΛهड़ɻ  JE͸Ұҙͷ໊শ  TSD͸ίϐʔ͓͍ͯͨ͠EVDLPCKͷ63-ΛషΓ෇͚
  38. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d EVDLPCKͷBBTTFUJUFNʙBBTTFUJUFNͷ࣍ͷ ߦͰΞοϓϩʔυͨ͠EVDLNUMͷ࢖༻Λએݴ͢Δɻ
  39. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d BBTTFUJUFNʙBBTTFUJUFNΛهड़ɻ  JE͸Ұҙͷ໊শ  TSD͸ίϐʔ͓͍ͯͨ͠EVDLNUMͷ63-ΛషΓ෇͚
  40. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d %ϞσϧͷදࣔͰඞཁͱͳΔϑΝΠϧ͸એݴ͕ͨ͠ɺ·ͩ ഑ஔʹؔ͢Δهड़͕ͳ͍ɻ %ϞσϧΛ഑ஔ͢ΔͨΊBTQIFSFʙBTQIFSFͷ Լʹߦૠೖ͠
  41. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d BPCKNPEFMʙBPCKNPEFMΛ௥Ճɻ TSDʹ͸EVDLPCKͷJEΛɺNUMʹ͸EVDLNUMͷJEΛͦΕͧΕ ؔ࿈෇͚ΔɻJEͷઌ಄ʹ͸γϟʔϓه߸  Λ͚ͭΔ͜ͱɻ ˔DPQZBOEQBTUFUYUͷ <μοΫΛ഑ஔ> ͔Βίϐϖɻ
  42. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d ഑ஔͨ͠%ϞσϧͱEVDLPCK͕JEʹΑͬͯ ؔ࿈෇͍ͨɻ
  43. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷ഑ஔ d ಉ༷ʹ%ϞσϧͱEVDLNUM΋ؔ࿈෇͍ͨɻ
  44. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷճస d ޲͖Λม͑ΔͨΊʹBPCKNPEFMʙBPCKNPEFM ͷSPUBUJPOΛมߋ͢Δɻ
  45. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. %ϞσϧΛදࣔ͠Α͏ d%Ϟσϧͷճస d :࣠ ਨ௚ํ޲ͷ࣠ Λ౓ճసͤͯ͞લ޲͖ʹɻ
  46. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. ஍ٿͱμοΫΛಉ͡଎౓Ͱɺಉ͡ํ޲ʹճసͤ͞ΔΊɺ ݸผͰ͸ͳ͘·ͱΊͯճస͍ͤͨ͞ɻ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dΞχϝʔγϣϯͷద༻ d
  47. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. BTQIFSFʙBTQIFSFͱ BPCKNPEFMʙBPCKNPEFMͷ લޙʹߦͣͭૠೖͯ͠ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dΞχϝʔγϣϯͷద༻ d
  48. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. BFOUJUZʙBFOUJUZͰׅͬͯ·ͱΊΔɻ ͜ͷBFOUJUZʙBFOUJUZʹΞχϝʔγϣϯΛద༻͢Δ͜ ͱͰɺ·ͱ·Γͷߏ੒ཁૉͰ͋Δ஍ٿͱμοΫʹΞχϝʔγϣϯ ͕ద༻͞ΕΔɻ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dΞχϝʔγϣϯͷద༻ d
  49. // 前略 <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj" src="duck.objのURL"></a-asset-item> <a-asset-item

    id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> // 以下省略 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. BFOUJUZʙBFOUJUZ಺ͷ࠷ॳʹ ߦૠೖͯ͠ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dΞχϝʔγϣϯͷద༻ d
  50. // 前略 <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj" src="duck.objのURL"></a-asset-item> <a-asset-item

    id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> // 以下省略 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dΞχϝʔγϣϯͷద༻ d BBOJNBUJPOʙBBOJNBUJPOΛهड़ɻ ˔DPQZBOEQBTUFUYUͷ <Ξχϝʔγϣϯͷద༻> ͔Βίϐϖɻ
  51. // 前略 <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj" src="duck.objのURL"></a-asset-item> <a-asset-item

    id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 180 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> // 以下省略 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dμοΫͷ޲͖Λมߋ d μοΫΛਐߦํ޲΁޲͔͍ͤͨ
  52. // 前略 <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj" src="duck.objのURL"></a-asset-item> <a-asset-item

    id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> // 以下省略 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dμοΫͷ޲͖Λมߋ d :࣠ͷճసΛݩʹ΋Ͳ͢
  53. // 前略 <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360

    0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> // 以下省略 15. 16. 17. 18. 19. ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ dΞχϝʔγϣϯͷղઆ d  BUUSJCVUFSPUBUJPO ճసʹ͍ͭͯͷΞχϝʔγϣϯ  GSPN Ξχϝʔγϣϯ։࢝࣌ͷճస֯౓ ›  UP Ξχϝʔγϣϯऴྃ࣌ͷճస֯౓ ›  EVS Ξχϝʔγϣϯ։͔࢝Βऴྃ·Ͱʹཁ͢Δ࣌ؒ ඵ ඵ୯ҐͰࢦఆ  FBTJOHMJOFBS ؇ٸͳ͠  SFQFBUUSVF ܁Γฦ͋͠Γ
  54. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫݕ஌ϥΠϒϥϦͷಡΈࠐΈ d // 前略 <head> <title>Hello, WebAR! - A-Frame

    &amp; AR.js</title> <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> </head> // 以下省略 3. 4. 5. 6. 7. 8. Ϛ΢εΫϦοΫݕ஌ʹରԠ͢ΔϥΠϒϥϦΛಡΈࠐΉɻ IFBEʙIFBE಺ͷ࠷ޙʹߦૠೖɻ
  55. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫݕ஌ϥΠϒϥϦͷಡΈࠐΈ d // 前略 <head> <title>Hello, WebAR! - A-Frame

    &amp; AR.js</title> <meta name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor- component/master/dist/aframe-mouse-cursor-component.js"></script> </head> // 以下省略 3. 4. 5. 6. 7. 8. TDSJQUʙTDSJQUΛهड़ͯ͠BGSBNFNPVTFDVSTPSDPNQPOFOU ಡΈࠐΈɻ ˔DPQZBOEQBTUFUYUͷ <ΫϦοΫΛݕ஌͢ΔϥΠϒϥϦ> ͔Βίϐϖɻ
  56. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫݕ஌ͷ༗ޮԽ d ϥΠϒϥϦΛಡΈࠐΜͩͷͰΫϦοΫͷݕ஌Λ༗ޮԽ͍ͨ͠ɻ DBNFSBΛ࣋ͭBFOUJUZʙBFOUJUZʹରͯ͠
  57. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫݕ஌ͷ༗ޮԽ d NPVTFDVSTPSΛ௥Ճ͠༗ޮԽ
  58. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫʹΑΔΞχϝʔγϣϯ։࢝ d ஍ٿ͔μοΫΛΫϦοΫͨ͠ΒΞχϝʔγϣϯΛ։͍࢝ͨ͠ɻ BBOJNBUJPOʙBBOJNBUJPOʹରͯ͠
  59. // 前略 <body> <a-scene> <a-assets> <img id="earth-jpg" src="ear.jpgのURL"> <a-asset-item id="duck-obj"

    src="duck.objのURL"></a-asset-item> <a-asset-item id="duck-mtl" src="duck.mtlのURL"></a-asset-item> </a-assets> <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫʹΑΔΞχϝʔγϣϯ։࢝ d CFHJOΛ௥Ճͯ͠Ξχϝʔγϣϯ։࢝৚݅ ΛDMJDL ΫϦοΫ࣌ ʹ͢Δɻ
  60. "3ۭؒʹදࣔ͠Α͏ d"'SBNFʹΑΔ8FC"3ͷ࣮ݱ d "3KTͱ͸ • "'SBNF͸ຊདྷ8FC73ٕज़ɻ೥ʹ8FC"3ϥΠϒ ϥϦ"3KT͕ొ৔͠ɺ73͚ͩͰͳ͘"3΋਎ۙʹɻ • IUUQTHJUIVCDPNKFSPNFFUJFOOF"3KT •

    IUUQTHJUIVCDPNKFSPNFFUJFOOF"3KTUSFF NBTUFSBGSBNF • 8FC(-ٴͼ8FC35$ʹରԠ͍ͯ͠Ε͹εϚʔτϑΥϯ Ͱ΋ར༻Մೳ J04ͷ8FC35$ରԠ͸7FS͔Βͷ༧ఆ • +4"35PPM,JU ୅දత"3ϥΠϒϥϦ"35PPM,JUͷ +BWB4DSJQU൛ ʹΑΔϚʔΧʔܕͷ"3ɻ • "3KTͰར༻Ͱ͖ΔϚʔΧʔͷछྨ͸ز͔ͭ͋Δ͕ɺࠓճ ͸)JSPͱ͍͏λΠϓͷ"3ϚʔΧʔΛ࢖༻ɻ
  61. // 前略 <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title> <meta

    name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor- component/master/dist/aframe-mouse-cursor-component.js"></script> </head> // 以下省略 3. 4. 5. 6. 7. 8. 9. "3KTͷϥΠϒϥϦΛಡΈࠐΉɻ IFBEʙIFBE಺ͷ࠷ޙʹߦૠೖɻ "3ۭؒʹදࣔ͠Α͏ d"3KTͷϥΠϒϥϦಡΈࠐΈ d
  62. // 前略 <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title> <meta

    name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor- component/master/dist/aframe-mouse-cursor-component.js"></script> <script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe- ar.js"></script> </head> // 以下省略 3. 4. 5. 6. 7. 8. 9. "3ۭؒʹදࣔ͠Α͏ d"3KTͷϥΠϒϥϦಡΈࠐΈ d TDSJQUʙTDSJQUΛهड़ͯ͠"3KTಡΈࠐΈɻ ˔DPQZBOEQBTUFUYUͷ <"3ʹରԠ͢ΔϥΠϒϥϦ> ͔Βίϐϖɻ
  63. // 前略 <body> <a-scene> // 中略 <a-entity> <a-animation begin="click" attribute="rotation"

    from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. 8FCΧϝϥ͔ΒϦΞϧλΠϜͷө૾Λऔಘͯ͠ϒϥ΢β্ʹ දࣔ͢ΔɻBTDFOFʙBTDFOFʹ "3ۭؒʹදࣔ͠Α͏ d8FCΧϝϥͷө૾Λදࣔ d
  64. // 前略 <body> <a-scene arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. "3ۭؒʹදࣔ͠Α͏ d8FCΧϝϥͷө૾Λදࣔ d BSKTͷهड़Λ௥Ճ͢Δɻ ˔DPQZBOEQBTUFUYUͷ <"3ϚʔΧʔͷಡऔ৚݅> ͔Βίϐϖɻ
  65. // 前略 <body> <a-scene arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. "3ۭؒʹදࣔ͠Α͏ d8FCΧϝϥͷө૾Λදࣔ d BSKT "3ϚʔΧʔಡΈऔΓͷͨΊͷ৚݅Λઃఆ͢Δ Լه͸ϞόΠϧσό Πε޲͚ͷෛՙΛ཈͑ͨઃఆ  TPVSDF5ZQFXFCDBN ˠ ΢ΣϒΧϝϥͷө૾Λ࢖༻͢Δ  EFUFDUJPO.PEFNPOP ˠ നࠇϞʔυͰϚʔΧʔݕग़Λߦ͏  NBY%FUFDUJPO3BUF ˠ ඵʹ͖ͭճͷϚʔΧʔݕग़ΛࢼΈΔ  DBOWBT8JEUI ˠ ϚʔΧʔݕग़ͷͨΊͷը૾ղ૾౓ ෯  DBOWBT)FJHIU ˠ ϚʔΧʔݕग़ͷͨΊͷը૾ղ૾౓ ߴ͞  EFCVH6*&OBCMFEGBMTF ˠ σόοά৘ใඇදࣔ
  66. // 前略 <body> <a-scene arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor look-controls wasd-controls position="0 0 5"></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. "3ۭؒʹදࣔ͠Α͏ d8FCΧϝϥͷө૾Λදࣔ d 8FCΧϝϥΛ࢖༻͢Δ͜ͱʹΑͬͯࢹ఺ૢ࡞΍Ωʔૢ࡞ɺ Ґஔͷݻఆ͕ෆཁʹͳΔͨΊɺMPPLDPOUSPMTɺXBTE DPOUSPMTɺQPTJUJPOΛ࡟আɻ
  67. // 前略 <body> <a-scene arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. "3ۭؒʹදࣔ͠Α͏ d8FCΧϝϥͷө૾Λදࣔ d DBNFSBͱNPVTFDVSTPS͸࡟আͤͣ࢒ͯ͠ ͓͘͜ͱɻ
  68. // 前略 <body> <a-scene arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. BTDFOFʙBTDFOFʹ "3ۭؒʹදࣔ͠Α͏ dө૾ͷॎԣൺΛௐ੔ d
  69. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. "3ۭؒʹදࣔ͠Α͏ dө૾ͷॎԣൺΛௐ੔ d FNCFEEFEΛ௥Ճɻ͜ΕΛࢦఆ͠ͳ͍ͱ8FCΧϝϥ ͔Βͷө૾ͷॎԣൺ่͕ΕΔ͜ͱ͕͋Δɻ
  70. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. "3ۭؒʹදࣔ͠Α͏ d"3ϚʔΧʔʹ͔ͯ͟͠ίϯςϯπදࣔ d ݱঢ়Ͱ͸8FCΧϝϥΛ"3ϚʔΧʔʹ͔ͯ͟͠΋ ίϯςϯπͱ"3ϚʔΧʔͷؔ࿈෇͚͕Ͱ͖͍ͯ ͳ͍ͨΊԿ΋ى͜Βͳ͍ɻ Ξχϝʔγϣϯ࣌ʹׅͬͨ஍ٿͱμοΫͷ·ͱ· ΓΛɺ"3ϚʔΧʔͱؔ࿈෇͚Δඞཁ͕͋Δɻ
  71. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. "3ۭؒʹදࣔ͠Α͏ d"3ϚʔΧʔʹ͔ͯ͟͠ίϯςϯπදࣔ d ஍ٿͱμοΫͷ·ͱ·ΓBFOUJUZʙBFOUJUZͷ ্ԼʹͦΕͧΕߦͣͭૠೖͯ͠
  72. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. "3ۭؒʹදࣔ͠Α͏ d"3ϚʔΧʔʹ͔ͯ͟͠ίϯςϯπදࣔ d BNBSLFSʙBNBSLFSͰғΉ͜ͱʹΑΓؔ࿈෇͚Δɻ ·ͨɺݕ஌͢Δ"3ϚʔΧʔͷλΠϓΛ)JSPʹ͢ΔͨΊQSFTFU Λ௥Ճ͢Δɻ
  73. Z (-) X (+) Y (+) Z (+) Y (-)

    X (-) X: 0 Y: 0 Z: 0 ϚʔΧʔͱ ࠲ඪͷؔ܎ "3ۭؒʹදࣔ͠Α͏ d"3ίϯςϯπͷҐஔɾαΠζௐ੔ d
  74. ϚʔΧʔͷαΠζ ϝʔτϧ σϑΥϧτ ϝʔτϧ σϑΥϧτ • ϚʔΧʔͷαΠζ͸ҰลΛϝʔτϧͱΈ ͳ͢ɻ σϑΥϧτ •

    αΠζΛࢦఆ͢Δ৔߹͸ɺҰลͷ௕͞Λ ϝʔτϧ୯ҐͰࢦఆ͢Δɻ "3ۭؒʹදࣔ͠Α͏ d"3ίϯςϯπͷҐஔɾαΠζௐ੔ d
  75. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0 0" rotation="0 0 0" scale="1 1 1" radius="1" src="#earth-jpg"></a-sphere> <a-obj-model position="2 0 0" rotation="0 0 0" scale="0.25 0.25 0.25" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. "3ۭؒʹදࣔ͠Α͏ d"3ίϯςϯπͷҐஔɾαΠζௐ੔ d ݱ࣌఺Ͱ͸ϚʔΧʔʹରͯ͠஍ٿ΍μοΫ͕େ͖͗͢Δɻ ·ͨ஍ٿͷத৺͕ݪ఺ʹ͋ΔͨΊɺϚʔΧʔ͕஍ٿʹຒ΋Ε ͯ͠·͏ɻ
  76. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> <a-animation begin="click" attribute="rotation" from="0 0 0" to="0 360 0" dur="3000" easing="linear" repeat="true"></a-animation> <a-sphere position="0 0.5 0" rotation="0 0 0" scale="1 1 1" radius="0.5" src="#earth-jpg"></a-sphere> <a-obj-model position="1 0.5 0" rotation="0 0 0" scale="0.125 0.125 0.125" src="#duck-obj" mtl="#duck-mtl"></a-obj-model> </a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> </body> // 以下省略 10. 11. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. "3ۭؒʹදࣔ͠Α͏ d"3ίϯςϯπͷҐஔɾαΠζௐ੔ d ஍ٿ͕ϚʔΧʔͷதʹऩ·ΔαΠζͰɺ͔ͭɺ ϚʔΧʔͷ্ʹͪΐ͏Ͳ৐Δ͘Β͍ͷҐஔʹௐ੔ɻ μοΫͷαΠζɺҐஔ΋߹Θͤͯௐ੔ɻ
  77. // 前略 <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title> <meta

    name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor- component/master/dist/aframe-mouse-cursor-component.js"></script> <script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe- ar.js"></script> </head> // 以下省略 3. 4. 5. 6. 7. 8. 9. 10. %ςΩετΛදࣔ͠Α͏ d%ςΩετදࣔϥΠϒϥϦͷಡΈࠐΈ d %ςΩετΛදࣔ͢ΔͨΊͷϥΠϒϥϦΛಡΈࠐΉɻ IFBEʙIFBE಺ͷ࠷ޙʹߦૠೖɻ
  78. // 前略 <head> <title>Hello, WebAR! - A-Frame &amp; AR.js</title> <meta

    name="description" content="Hello, WebAR! - A-Frame &amp; AR.js"> <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script> <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor- component/master/dist/aframe-mouse-cursor-component.js"></script> <script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe- ar.js"></script> <script src="https://rawgit.com/ngokevin/kframe/master/components/text- geometry/dist/aframe-text-geometry-component.js"></script> </head> // 以下省略 3. 4. 5. 6. 7. 8. 9. 10. %ςΩετΛදࣔ͠Α͏ d%ςΩετදࣔϥΠϒϥϦͷಡΈࠐΈ d TDSJQUʙTDSJQUΛهड़ͯ͠BGSBNFUFYUHFPNFUSZDPNQPOFOU ಡΈࠐΈɻ ˔DPQZBOEQBTUFUYUͷ <%ςΩετΛදࣔ͢ΔϥΠϒϥϦ> ͔Βίϐϖɻ
  79. // 前略 <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> // 中略 </a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> // 以下省略 12. 18. 19. 23. 24. 25. 26. 27. %ςΩετΛදࣔ͠Α͏ d%ςΩετͷ഑ஔ d "3ϚʔΧʔΛݕ஌ͨ͠Β%ςΩετ͕දࣔ͞ΕΔΑ͏ʹ͢Δɻ ͨͩ͠Ξχϝʔγϣϯ͸ߦΘͳ͍ɻ BNBSLFSʙBNBSLFS಺ͷ࠷ޙʹߦૠೖɻ
  80. // 前略 <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> // 中略 </a-entity> <a-entity position="-1.2 0 0.75" rotation="-30 0 0" text-geometry="value: #AR_Fukuoka; bevelEnabled: true; bevelSize: 0.016; bevelThickness: 0.016; size: 0.25;" material="color: cyan;"></a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> // 以下省略 12. 18. 19. 23. 24. 25. 26. 27. %ςΩετΛදࣔ͠Α͏ d%ςΩετͷ഑ஔ d BFOUJUZʙBFOUJUZΛ௥Ճ͠UFYUHFPNFUSZΛ෇͚Δɻ WBMVFͷ஋͸޷͖ͳӳ਺ࣈΛೖྗɻ σϑΥϧτͰ͸೔ຊޠෆՄ ˔DPQZBOEQBTUFUYUͷ <%ςΩετͷදࣔ> ͔Βίϐϖɻ
  81. // 前略 <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> // 中略 </a-entity> <a-entity position="-1.2 0 0.75" rotation="-30 0 0" text-geometry="value: #AR_Fukuoka; bevelEnabled: true; bevelSize: 0.016; bevelThickness: 0.016; size: 0.25;" material="color: cyan;"></a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> // 以下省略 12. 18. 19. 23. 24. 25. 26. 27. %ςΩετΛදࣔ͠Α͏ d%ςΩετͷղઆ d UFYUHFPNFUSZ ςΩετΛཱମతʹදࣔ͢Δɻ  WBMVF"3@'VLVPLB ˠ ೚ҙͷจࣈྻ σϑΥϧτϑΥϯτ͸೔ຊޠෆՄ  CFWFM&OBCMFEUSVF ˠ ϕϕϧ༗ޮ จࣈͷ֯ΛؙΊΔ  CFWFM4J[F ˠ ஋͕େ͖͍΄Ͳจࣈͷྠֲ͕ଠ͘ͳΔ  CFWFM5IJDLOFTT ˠ ஋͕େ͖͍΄Ͳ೑ްʹͳΔ  TJ[F ˠ ϕϕϧͷαΠζΛม͑ͣจࣈαΠζ͚ͩม͑Δ৔߹ʹࢦఆ
  82. // 前略 <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> // 中略 </a-entity> <a-entity position="-1.2 0 0.75" rotation="-30 0 0" text-geometry="value: #AR_Fukuoka; bevelEnabled: true; bevelSize: 0.016; bevelThickness: 0.016; size: 0.25;" material="color: cyan;"></a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> // 以下省略 12. 18. 19. 23. 24. 25. 26. 27. +BWB4DSJQUͰΠϯλϥΫγϣϯ d%ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d ઌʹར༻ͨ͠ΫϦοΫݕ஌ϥΠϒϥϦΛԠ༻ͯ͠ɺ %ςΩετͷΫϦοΫ࣌ʹಛఆͷ8FCϖʔδΛ։͘ Α͏ʹ͢Δɻ·ͣ͸ઌʹ഑ஔͨ͠%ςΩετʹ
  83. // 前略 <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate: 30;

    canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 <a-marker preset="hiro"> <a-entity> // 中略 </a-entity> <a-entity id="arfukuoka" position="-1.2 0 0.75" rotation="-30 0 0" text- geometry="value: #AR_Fukuoka; bevelEnabled: true; bevelSize: 0.016; bevelThickness: 0.016; size: 0.25;" material="color: cyan;"></a-entity> </a-marker> <a-entity camera mouse-cursor></a-entity> </a-scene> // 以下省略 12. 18. 19. 23. 24. 25. 26. 27. JEΛ௥Ճͯ͠Ұҙͷ໊শΛ͚ͭΔ +BWB4DSJQUͰΠϯλϥΫγϣϯ d%ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d
  84. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 </a-scene> </body> // 以下省略 11. 12. 27. 28. 29. 30. 31. 32. 29. %ςΩετΫϦοΫ࣌ͷڍಈΛهड़͢Δɻ BTDFOFʙBTDFOFͷԼʹߦૠೖͯ͠ +BWB4DSJQUͰΠϯλϥΫγϣϯ d%ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d
  85. // 前略 <body> <a-scene embedded arjs="sourceType: webcam; detectionMode: mono; maxDetectionRate:

    30; canvasWidth: 240; canvasHeight: 180; debugUIEnabled: false;"> // 中略 </a-scene> <script> document.getElementById("arfukuoka").addEventListener("click", function(evt) { window.open("https://twitter.com/search?q=%23ar_fukuoka", "_blank"); }, false); </script> </body> // 以下省略 11. 12. 27. 28. 29. 30. 31. 32. 29. +BWB4DSJQUͰΠϯλϥΫγϣϯ d%ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d TDSJQUʙTDSJQUΛ௥Ճͯ͠+BWB4DSJQUΛهड़ɻ͜͜Ͱ͸ɺ࣍ͷΑ͏ͳ ڍಈͱͳΔɻ  JE͕BSGVLVPLBͷཁૉ %ςΩετ ͰΫϦοΫΛݕ஌͢Δ  ࢦఆ63- BS@GVLVPLBͷ5XJUUFSݕࡧ݁Ռϖʔδ Λ৽͍͠λϒͰ։͘ ˔DPQZBOEQBTUFUYUͷ <+BWB4DSJQUͰͷΫϦοΫݕ஌> ͔Βίϐϖɻ