A-Frameでお手軽WebAR

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

Transcript

1. "'SBNFͰ͓खܰ8FC"3 "3ίϯςϯπ࡞੒ษڧձ "3@'VLVPLB
2. ᶄ $MPOF
   PS
   EPXOMPBEΛΫϦοΫ ᶃ Լه63-ʹΞΫηε IUUQTHJUIVCDPNTIJOKJTN8FC"34BNQMF ᶅ %PXOMPBE
   ;*1ΛΫϦοΫͯ͠μ΢ϯ ϩʔυͨ͠;*1ϑΝΠϧΛσεΫτοϓͳ Ͳͷ෼͔Γ΍͍͢৔ॴʹల։ ͸͡Ίʹ d
   ͜ͷࢿྉͰ࢖༻͢Δσʔλͷμ΢ϯϩʔυ d
3. • 1$͔ΒΞΫηε 1$಺ଂ PS
   64#઀ଓͷ8FCΧϝϥ͕ඞཁ https://arjs-sample.glitch.me/ • εϚʔτϑΥϯ͔ΒΞΫηε ݱࡏɺҰ෦"OESPJEͷΈӾཡՄ ͪ͜Βͷ23ίʔυ͔Βˠ ࠓ೔ͷςʔϚ d
   ׬੒ΠϝʔδΛମݧ͢Δ d
4. ࠓ೔ͷςʔϚ d
   ׬੒ΠϝʔδΛମݧ͢Δ d • 8FCΧϝϥ͕ىಈͨ͠Βӈͷ ϚʔΧʔʹ͔͟͢ • ίϯςϯπ͕දࣔ͞ΕͨΒ஍ٿ ·ͨ͸μοΫΛΫϦοΫ͢Δ ˰ ஍ٿͱμοΫ͕ճస • ಉ͘͡"3@'VLVPLBͷจࣈΛ ΫϦοΫ͢Δ ˰ 8FCϖʔδ͕։͘
5. ໨࣍ d
   "'SBNFͷ֓ཁͱ։ൃ४උ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ • ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
6. ໨࣍ d
   73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ • ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
7. ໨࣍ d
   73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ • ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
8. ໨࣍ d
   73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ • ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
9. ໨࣍ d
   73ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ • ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
10. ໨࣍ d
    "3ฤ d • ඞཁͳ΋ͷΛ֬ೝ͠Α͏ • "'SBNFͬͯͳʹʁ • ։ൃͷ४උΛ͠Α͏ • ͓͓͖͍͑ͯͨ͞ϙΠϯτ • ٿମΛදࣔ͠Α͏ • ը૾ΛషΓ෇͚Α͏ • %ϞσϧΛදࣔ͠Α͏ • ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ • ΠϯλϥΫγϣϯΛ͚ͭΑ͏ • "3ۭؒʹදࣔ͠Α͏ • %ςΩετΛදࣔ͠Α͏ • +BWB4DSJQUͰΠϯλϥΫγϣϯ
11. ඞཁͳ΋ͷΛ֬ೝ͠Α͏ 
    ඞਢͷ΋ͷ • ϊʔτ1$ 8JO.BDͲͪΒͰ΋ • 8FCΧϝϥ 1$౥ࡌ·ͨ͸64#઀ଓ • 8FC73Λαϙʔτͨ͠8FCϒϥ΢β • 'JSFGPY IUUQTXXXNP[JMMBPSHKBGJSFGPYOFX • (PPHMF
    $ISPNF IUUQTXXXHPPHMFDPKQDISPNFCSPXTFSEFTLUPQJOEFYIUNM • )5.-΍ςΩετΛฤू͢ΔΤσΟλ • 'BDFCPPL·ͨ͸(JUIVCͷΞΧ΢ϯτ 
    ͋Δͱخ͍͠΋ͷ • "OESPJE୺຤
12. "'SBNFͬͯͳʹʁ
13. "'SBNFͬͯͳʹʁ d
    "'SBNFͷ֓ཁ d • 8FCϒϥ΢β্Ͱಈ࡞͢Δ73ίϯςϯπ ͕खܰʹ࡞੒Ͱ͖ΔΦʔϓϯιʔεϑϨʔ ϜϫʔΫɻ • 8FC73ͱ͍͏࢓༷ʹج͖ͮɺ8FCٕज़ )5.-ͱ+BWB4DSJQU Ͱ73ίϯςϯπΛ ࡞੒ɻ • ಛผͳπʔϧ౳͸ෆཁɻ࠷௿Ͱ΋ςΩετ ΤσΟλͱ8FC73ରԠͷ8FCϒϥ΢β 'JSFGPY(PPHMF
    $ISPNF౳ ͕͋Ε͹Մɻ • )5$
    7JWFɺ0DVMVT
    3JGUͳͲଟ਺ͷ73 ϔουηοτΛαϙʔτɻ • ଞʹ΋1$͸΋ͪΖΜɺJ04΍"OESPJEͰ΋ 73ίϯςϯπͷମݧ͕Մೳɻ
14. "'SBNFͬͯͳʹʁ d
    "'SBNFΛମݧͯ͠ΈΑ͏ d ᶃ "'SBNFͰݕࡧɺ·ͨ͸ɺ௚઀ IUUQTBGSBNFJPʹΞΫηε ᶄ )FMMP
    8FC73ΛΫϦοΫ
15. "'SBNFͬͯͳʹʁ d
    "'SBNFΛମݧͯ͠ΈΑ͏ d υϥοάͰࢹ఺͕มΘΔɻ ্ԼࠨӈΩʔͰલޙࠨӈ ʹҠಈɻ શը໘දࣔ
16. "'SBNFͬͯͳʹʁ d
    "'SBNFΛମݧͯ͠ΈΑ͏ d &YBNQMFTͷத͔Β ͍Ζ͍ΖΫϦοΫମݧ
17. εϚʔτϑΥϯͰ΋ମݧͯ͠ΈΑ͏ J04"OESPJE "'SBNFͬͯͳʹʁ d
    "'SBNFΛମݧͯ͠ΈΑ͏ d
18. "'SBNFͬͯͳʹʁ d
    "'SBNFΛମݧͯ͠ΈΑ͏ d εϚϗͷ޲͖΍ υϥοάͰࢹ఺ ͕มΘΔɻ εςϨΦදࣔ
19. "'SBNFͬͯͳʹʁ d
    "'SBNFͷυΩϡϝϯτ d 
    ެࣜαΠτ • IUUQTBGSBNFJP 
    ެࣜυΩϡϝϯτ • IUUQTBGSBNFJPEPDT 
    ಈ࡞αϯϓϧू • IUUQTBGSBNFJPFYBNQMFT 
    ίϯϙʔωϯτू • IUUQTBGSBNFJPBGSBNFSFHJTUSZ • IUUQTHJUIVCDPNBGSBNFWSBXFTPNFBGSBNF
20. ։ൃͷ४උΛ͠Α͏
21. ։ൃͷ४උΛ͠Α͏ d
    (MJUDIͱ͸ d )5.- +BWB4DSJQU ίʔσΟϯά ެ։ ಈ࡞֬ೝ Ξοϓϩʔυ ΤσΟλ౳Πϯετʔϧ αʔό؀ڥߏங ᶃ ᶄ ᶅ ᶆ "'SBNF੡ ίϯςϯπΛ ެ։͢Δ·Ͱ ௨ৗͷ৔߹ ख͕͔͔ؒΔʂ ͓͕͔͔ۚΔʂ
22. ։ൃͷ४උΛ͠Α͏ d
    (MJUDIͱ͸ d 
    (MJUDIΛ࢖͓͏ r (MJUDIͱ͸ • 8FCϒϥ΢β্Ͱ؆୯ɾखܰʹ8FCΞϓϦ έʔγϣϯΛߏஙͰ͖Δແྉ ݱࡏ ͷαʔϏεɻ • Πϯλʔωοτ্·ͨ͸ϩʔΧϧϚγϯ্ʹ αʔό؀ڥΛߏஙͤͣͱ΋"'SBNF੡ΞϓϦ ͷ࣮ߦ͕Մೳɻ • ίʔυΤσΟλΛඋ͓͑ͯΓɺ਺ଟ͘ͷαϯϓ ϧϓϩδΣΫτ͔Β೚ҙͷ΋ͷΛϦϛοΫε ίϐʔฤू ࣮ͯ͠ߦͰ͖Δɻ • (JUIVC·ͨ͸'BDFCPPLΞΧ΢ϯτ͕͋Ε͹ ͙͢ʹར༻Մೳɻ • ϓϩδΣΫτຖͷεϖʔε͕.#·ͰͳͲ ͷ੍໿͕͋ΔͨΊɺࠓͷͱ͜Ζࢼ࡞΍࣮ݧ޲͖ɻ
23. ։ൃͷ४උΛ͠Α͏ d
    (MJUDIͱ͸ d )5.-+BWB4DSJQUͷ ίʔσΟϯά͔Β ެ։ɺಈ࡞֬ೝ·Ͱ 8FCϒϥ΢β಺Ͱ׬݁ ͔͠΋ແྉ 8FCϒϥ΢βͰ(MJUDI ΁ΞΫηε ᶃ "'SBNF੡ ίϯςϯπΛ ެ։͢Δ·Ͱ (MJUDIͷ৔߹ ᶄ
24. ։ൃͷ४උΛ͠Α͏ d
    "'SBNFͷαϯϓϧΛ(MJUDI΁ίϐʔ d ᶃ ΫϦοΫ ᶄ ΫϦοΫ
25. ։ൃͷ४උΛ͠Α͏ d
    "'SBNFͷαϯϓϧΛ(MJUDI΁ίϐʔ d ᶃ 7&34*0/
    Λબ୒ "3KTʹରԠ͍ͯ͠Δ࠷৽ όʔδϣϯ ᶅ SFNJY
    UIF
    TUBSUFS
    FYBNQMF
    PO
    (MJUDI ΛΫϦοΫ ᶄ (FUUJOH
    4UBSUFEΛΫϦοΫ
26. ։ൃͷ४උΛ͠Α͏ d
    "'SBNFͷαϯϓϧΛ(MJUDI΁ίϐʔ d IUUQTHMJUDIDPNdBGSBNF͕։͍ͯΔ͜ͱΛ֬ೝ "'SBNF
    1SPKFDUͷϙοϓΞοϓ ΢Πϯυ΢͕දࣔ͞Ε͍ͯΔ͜ͱΛ ֬ೝ
27. ։ൃͷ४උΛ͠Α͏ d
    "'SBNFͷαϯϓϧΛ(MJUDI΁ίϐʔ d 3FNJY
    ZPVS
    PXO ΛΫϦοΫ
28. ։ൃͷ४උΛ͠Α͏ d
    "'SBNFͷαϯϓϧΛ(MJUDI΁ίϐʔ d ࣗಈతʹ෇༩͞Εͨ ϓϩδΣΫτ໊ ίϐʔͨ͠ϑΝΠϧ͕ల։͞Ε͍ͯΔɻݱஈ֊Ͱ͸ɺ·ͩԾ ͷྖҬʹ͋Γ੍ݶ͕͋ΔͨΊɺαΠϯΠϯͯࣗ͠෼ͷྖҬͰ ѻ͑ΔΑ͏ʹ͢Δɻ
29. ։ൃͷ४උΛ͠Α͏ d
    (MJUDI΁αΠϯΠϯ d ᶄ 4JOH
    JO
    XJUI
    'BDFCPPL·ͨ͸4JHO
    JO
    XJUI
    (JUIVCΛΫϦοΫɻ 'BDFCPPLͱ(JUIVCͷ͏ͪΞΧ΢ϯτΛॴ༗͍ͯ͠ΔํΛબͿɻ ྆ํॴ༗͍ͯ͠Δ৔߹͸޷͖ͳํͰ0,ɻ ᶃ 4JOH
    JOΛΫϦοΫ
30. ։ൃͷ४උΛ͠Α͏ d
    (MJUDI΁αΠϯΠϯ d ᶃ Ϣʔβ໊͔ϝʔϧΞυϨεΛೖྗ ᶄ ύεϫʔυΛೖྗ ᶅ 4JOH
    JOΛΫϦοΫ ᶆ "VUIPSJ[F
    'PH$SFFL ΛΫϦοΫ (JUIVCͰ αΠϯΠϯ
31. ։ൃͷ४උΛ͠Α͏ d
    (MJUDI΁αΠϯΠϯ d ᶃ ϝʔϧΞυϨε͔ి࿩൪߸Λೖྗ ᶄ ύεϫʔυΛೖྗ ᶅ ϩάΠϯΛΫϦοΫ ᶆ ˔˔˔ͱͯ͠ϩάΠϯ ΛΫϦοΫ 'BDFCPPL ͰαΠϯΠϯ
32. ։ൃͷ४උΛ͠Α͏ d
    (MJUDI΁αΠϯΠϯ d αΠϯΠϯʹ੒ޭͨ͠Βࣗ෼ͷϓϩϑΟʔϧ ը૾͕දࣔ͞ΕΔ ͜ͷ޿͍ྖҬʹબ୒ͨ͠ϑΝΠϧͷ಺༰͕දࣔ ͞ΕΔɻίʔσΟϯά΋͜ͷྖҬͰߦ͏ɻ ΫϦοΫͯ͠ ϑΝΠϧબ୒
33. ։ൃͷ४උΛ͠Α͏ d
    ϓϩδΣΫτͷ࣮ߦͱ֬ೝ d ᶃ JOEFYIUNM ΛΫϦοΫ ᶄ JOEFYIUNMͷιʔείʔυΛ ֬ೝɻ αϯϓϧͷιʔείʔυ
34. ։ൃͷ४උΛ͠Α͏ d
    ϓϩδΣΫτͷ࣮ߦͱ֬ೝ d 4IPXΛΫϦοΫͯ͠ ϓϩδΣΫτΛ࣮ߦ
35. ։ൃͷ४උΛ͠Α͏ d
    ϓϩδΣΫτͷ࣮ߦͱ֬ೝ d IUUQTϓϩδΣΫτ໊HMJUDINF͕։͘ɻ J04"OESPJEͷϒϥ΢βͰ΋ಉ͡63-ʹ ΞΫηεͯ֬͠ೝͰ͖Δ
36. <!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.
37. <!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.
38. <!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ͷؒʹ͸ Ծ૝ۭؒʹදࣔ͢Δ΋ͷΛهड़͢Δɻ
39. <!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
40. <!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
41. ։ൃͷ४උΛ͠Α͏ d
    ϓϩδΣΫτͷ࣮ߦͱ֬ೝ d λϒΛด࣮ͯ͡ߦதͷ ϓϩδΣΫτΛऴྃ
42. ։ൃͷ४උΛ͠Α͏ d
    ϓϩδΣΫτͷ࣮ߦͱ֬ೝ d ฤूը໘ͷλϒʹ໭͍ͬͯΕ͹0,
43. ։ൃͷ४උΛ͠Α͏ d
    ϓϩδΣΫτ໊ͷมߋ d ᶄ ֮͑΍͍͢ϓϩδΣΫτ໊ʹมߋ ଞͷϓϩδΣΫτ໊ͱॏෳ͠ͳ͍΋ͷ ᶃ ϓϩδΣΫτ໊ΛΫϦοΫ ᶅ &4$ΩʔͰϓϩδΣΫτ໊ͷมߋΛ ऴΘΔ
44. ͓͓͖͍͑ͯͨ͞ϙΠϯτ
45. ͓͓͖͍͑ͯͨ͞ϙΠϯτ d
    Α͘࢖͏༻ޠ d 
    4DFOF γʔϯ ࡾ࣍ݩͷ෺ମΛ഑ஔ͢ΔԾ૝ۭؒͦͷ ΋ͷɻ 
    $BNFSB Χϝϥ ࡾ࣍ݩͷԾ૝ۭؒΛͲ͔͜ΒݟΔ͔ɺ ࢹ఺Λઃఆ͢ΔͨΊͷ΋ͷɻγʔϯ಺ ʹσϑΥϧτͰඋΘ͍ͬͯΔɻ 
    -JHIU ϥΠτ র໌͕ͳ͍ͱ҉ͯ͘Կ΋ݟ͑ͳ͍ͨΊɺ ޫݯͱͯ͠ϥΠτΛઃఆ͢Δɻγʔϯ ಺ʹσϑΥϧτͰඋΘ͍ͬͯΔɻ
46. ͓͓͖͍͑ͯͨ͞ϙΠϯτ d
    Α͘࢖͏༻ޠ d 
    &OUJUZ ΤϯςΟςΟ ࡾ࣍ݩͷԾ૝ۭؒʹଘࡏ͢Δ෺ମɻ ओʹܗঢ়ͱ֎؍ͷ૊Έ߹ΘͤͰදݱ͞ ΕΔɻ 
    1SJNJUJWF ϓϦϛςΟϒ ٿମ΍ཱํମͳͲɺओʹجຊతͳܗঢ় ͷ෺ମΛ؆ܿͳखଓ͖Ͱѻ͍΍͘͢͠ ͨ΋ͷɻ
47. ͓͓͖͍͑ͯͨ͞ϙΠϯτ d
    "'SBNFͷ࠲ඪܥ d "'SBNFͷ ࠲ඪܥ Z (-) X (+) Y (+) Z (+) Y (-) X (-) X: 0 Y: 0 Z: 0
48. ͓͓͖͍͑ͯͨ͞ϙΠϯτ d
    "'SBNFͷҐஔɾճసɾॖई d 
    1PTJUJPO Ґஔ 9
    :
    ;ͷॱʹεϖʔε۠੾Γ ͰҐஔΛࢦఆ ୯Ґ
    ϝʔτϧ 
    3PUBUJPO ճస 9
    :
    ;ͷॱʹεϖʔε۠੾Γ Ͱ֯౓Λࢦఆ ୯Ґ
    ౓ 
    4DBMF ॖई 9
    :
    ;ͷॱʹεϖʔε۠੾Γ Ͱഒ཰Λࢦఆ ୯Ґ
    ഒ ྫ
    ݪ఺͔Βӈʹϝʔτϧ 
    
     ྫ
    :࣠Λத৺ʹ›ճస 
    
     ྫ
    ج४ͱͳΔେ͖͞ͷഒ 
    
    
49. ٿମΛදࣔ͠Α͏
50. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d ᶃ JOEFYIUNM ΛΫϦοΫ ᶄ JOEFYIUNMͷιʔείʔυΛ ֬ೝɻ αϯϓϧͷιʔείʔυ ͜ͷྖҬͰίʔσΟϯάΛߦ͏ɻ
51. ٿମΛදࣔ͠Α͏ 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. ݱࡏɺ࠷৽όʔδϣϯ͸ ͳͷͰɺ͜ΕΑΓݹ͍৔߹͸มߋ͓ͯ͘͠ɻ
52. ٿମΛදࣔ͠Α͏ 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ͷத਎Λ࡟আ
53. ٿମΛදࣔ͠Α͏ 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ͷதʹ ͜Ε͔Βඞཁͳ΋ͷΛهड़͍ͯ͘͠
54. // 前略 <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ͷ <੨͍ٿମΛ ഑ஔ> ͔Βίϐϖɻ
55. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d 4IPXΛΫϦοΫ࣮ͯ͠ߦ
56. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d Կ΋ग़ͳ͍ɻ<$USM> <"MU> <J> ΩʔΛԡ͢ͱʜ
57. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d "'SBNF
    *OTQFDUPS ʹ੾ΓସΘΔ
58. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d ΧϝϥͷΞΠίϯΛ࣋ͭ BFOUJUZΛΫϦοΫ
59. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d Χϝϥ͕બ୒ঢ়ଶʹɻ Α͘ݟΔͱٿମ͕ࢮ֯ͷ Ґஔʹ͋Δɻ
60. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d QPTJUJPO͕ 
    
    
    Ͱ ٿମͷਅ্ʹҐஔ͍ͯ͠Δ
61. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d #BDL
    UP
    4DFOFΛΫϦοΫ
62. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d Լ໼ҹΩʔΛԡ͠ଓ͚͍ͯΔͱʜ
63. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d खલͷํ͔Βٿମ͕ݱΕΔɻ σϑΥϧτΧϝϥͷࢹ໺ʹٿମ͕ೖͬͯ͘Δ·Ͱɺ ΧϝϥΛखલํ޲΁Ҡಈͤͨ͜͞ͱʹΑΔ΋ͷɻ
64. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d ฤूը໘ͷλϒʹ੾Γସ͑
65. // 前略 <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 ͷ֤஋Λ͍Ζ͍Ζม͑ͯΈͯ͸࣮ߦ݁Ռ Λ֬ೝ͠ɺײ֮Λ͔ͭΉɻ
66. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d ࣮ߦ݁Ռͷλϒʹ੾Γସ͑
67. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d มߋͨ͠஋ʹΑͬͯٿମ͕ ༷ʑͳҐஔ΍େ͖͞ɺ৭Ͱ දࣔ͞ΕΔ͜ͱΛ֬ೝ
68. ٿମΛදࣔ͠Α͏ d
    ٿମͷ഑ஔ d ฤूը໘ͷλϒʹ੾Γସ͑
69. // 前略 <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දࣔʹ޲͚ͯͷઃఆ
70. // 前略 <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ͷԼʹߦૠೖɻ
71. // 前略 <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ͷ <ΧϝϥΛ഑ஔ> ͔Βίϐϖɻ
72. ٿମΛදࣔ͠Α͏ d
    Χϝϥͷ഑ஔ d ࣮ߦ݁Ռͷλϒʹ੾Γସ͑
73. ٿମΛදࣔ͠Α͏ d
    Χϝϥͷ഑ஔ d ٿମ͕දࣔ ͞ΕͨΒ0,
74. ٿମΛදࣔ͠Α͏ d
    Χϝϥͷ഑ஔ d ฤूը໘ͷλϒʹ੾Γସ͑
75. ը૾ΛషΓ෇͚Α͏
76. ը૾ΛషΓ෇͚Α͏ d
    షΓ෇͚Δը૾ͷΞοϓϩʔυ d ᶃ "TTFUT ΛΫϦοΫ ᶄ "EE
    "TTFU ΛΫϦοΫ ᶅ $PNQVUFSˠ ΛΫϦοΫ
77. ը૾ΛషΓ෇͚Α͏ d
    షΓ෇͚Δը૾ͷΞοϓϩʔυ d ᶃ ࣄલʹμ΢ϯϩʔυɾల։ͨ͠ TBNQMFϑΥϧμ಺ͷFBSKQHΛ ΫϦοΫ ᶄ ։͘ΛΫϦοΫ
78. ը૾ΛషΓ෇͚Α͏ d
    షΓ෇͚Δը૾ͷΞοϓϩʔυ d Ξοϓϩʔυͨ͠ϑΝΠϧͷαϜωΠϧ ͕දࣔ͞ΕͨΒ0,
79. ը૾ΛషΓ෇͚Α͏ d
    ٿମ΁ͷը૾ͷషΓ෇͚ d FBSKQHͷαϜωΠϧ ΛΫϦοΫ
80. ը૾ΛషΓ෇͚Α͏ d
    ٿମ΁ͷը૾ͷషΓ෇͚ d ᶃ $PQZ
    6SM ΛΫϦοΫ ᶄ &4$ΩʔΛԡͯ͠ ϙοϓΞοϓ΢Πϯυ΢ Λด͡Δ
81. ը૾ΛషΓ෇͚Α͏ d
    ٿମ΁ͷը૾ͷషΓ෇͚ d JOEFYIUNM ΛΫϦοΫ
82. // 前略 <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 ͷ্ʹߦૠೖɻ
83. // 前略 <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Λهड़ɻ ͜ͷؒʹը૾΍%Ϟσϧʹؔ͢Δ৘ใΛ هड़͍ͯ͘͠ɻ
84. // 前略 <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-ΛషΓ෇͚
85. // 前略 <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Λ࡟আɻ
86. // 前略 <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ͷલʹγϟʔϓه߸  Λ͚ͭΔɻ
87. // 前略 <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ʹ Αͬͯؔ࿈෇͍ͨɻ
88. ࣮ߦ݁Ռͷλϒʹ੾Γସ͑ ը૾ΛషΓ෇͚Α͏ d
    ٿମ΁ͷը૾ͷషΓ෇͚ d
89. ஍ٿ͕දࣔ͞ΕͨΒ0, ը૾ΛషΓ෇͚Α͏ d
    ٿମ΁ͷը૾ͷషΓ෇͚ d
90. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ ը૾ΛషΓ෇͚Α͏ d
    ٿମ΁ͷը૾ͷషΓ෇͚ d
91. %ϞσϧΛදࣔ͠Α͏
92. %ϞσϧΛදࣔ͠Α͏ d
    ࢖༻͢Δ%Ϟσϧ 0#+ ͷϑΝΠϧߏ੒ d 0#+ ܗঢ়Λද͢ϑΝΠϧ 1/(
    
    +1(
    
    (*' ৭΍֎؍ɾ࣭ײΛද͢ը૾ ϑΝΠϧ ͭͷϑΝΠϧΛ͋Θͤͯ %ϞσϧΛදࣔ .5- ը૾ϑΝΠϧͷ৭͕ܗঢ় ͷͲͷҐஔʹ૬౰͢Δ͔ ؔ܎ੑΛද͢ϑΝΠϧ
93. %ϞσϧΛදࣔ͠Α͏ d
    0#+ϑΝΠϧͱ1/(ϑΝΠϧͷΞοϓϩʔυ d ᶃ "TTFUT ΛΫϦοΫ ᶄ "EE
    "TTFU ΛΫϦοΫ ᶅ $PNQVUFSˠ ΛΫϦοΫ
94. %ϞσϧΛදࣔ͠Α͏ d
    0#+ϑΝΠϧͱ1/(ϑΝΠϧͷΞοϓϩʔυ d ᶃ ࣄલʹμ΢ϯϩʔυɾల։ͨ͠ TBNQMFϑΥϧμ಺ͷEVDLPCKͱ EVDL@UFYUVSFQOHΛΫϦοΫ ᶄ ։͘ΛΫϦοΫ
95. %ϞσϧΛදࣔ͠Α͏ d
    0#+ϑΝΠϧͱ1/(ϑΝΠϧͷΞοϓϩʔυ d Ξοϓϩʔυͨ͠ϑΝΠϧͷαϜωΠϧ ͕දࣔ͞ΕͨΒ0,
96. %ϞσϧΛදࣔ͠Α͏ d
    .5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d EVDLNUMʹը૾ϑΝΠϧͷ৔ॴΛ஌ΒͤΔඞཁ ͕͋ΔͨΊ63-Λௐ΂Δɻ EVDL@UFYUVSFQOHͷαϜωΠϧΛΫϦοΫɻ
97. %ϞσϧΛදࣔ͠Α͏ d
    .5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d ᶃ $PQZ
    6SM ΛΫϦοΫ ᶄ &4$ΩʔΛԡͯ͠ϙοϓ Ξοϓ΢Πϯυ΢Λด͡Δ
98. %ϞσϧΛදࣔ͠Α͏ d
    .5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d ࣄલʹμ΢ϯϩʔυɾల։ͨ͠TBNQMFϑΥϧμ ಺ͷEVDLNUMΛςΩετΤσΟλͰ։͘
99. // 前略 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
100. // 前略 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
101. ᶃ "TTFUT ΛΫϦοΫ ᶄ "EE
     "TTFU ΛΫϦοΫ ᶅ $PNQVUFSˠ ΛΫϦοΫ %ϞσϧΛදࣔ͠Α͏ d
     .5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d
102. ᶃ ࣄલʹμ΢ϯϩʔυɾల։ͨ͠ TBNQMFϑΥϧμ͔Βฤूɾอଘ ࡁΈͷEVDLNUMΛΫϦοΫ ᶄ ։͘ΛΫϦοΫ %ϞσϧΛදࣔ͠Α͏ d
     .5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d
103. ͭͷϑΝΠϧ͕ἧ͍ͬͯΕ͹0, %ϞσϧΛදࣔ͠Α͏ d
     .5-ϑΝΠϧͷฤूͱΞοϓϩʔυ d
104. %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d %ϞσϧΛࢀর͢ΔͨΊ63-Λௐ΂Δɻ EVDLPCKͷαϜωΠϧΛΫϦοΫɻ
105. ᶃ $PQZ
     6SM ΛΫϦοΫ ᶄ &4$ΩʔΛԡͯ͠ϙοϓ Ξοϓ΢Πϯυ΢Λด͡Δ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
106. ᶃ JOEFYIUNM ΛΫϦοΫ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
107. // 前略 <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
108. // 前略 <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-ΛషΓ෇͚
109. ᶃ BTTFUTΛΫϦοΫ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
110. %Ϟσϧʹؔ࿈෇͚Δը૾৘ใΛࢀর͢Δ ͨΊ63-Λௐ΂ΔɻEVDLNUMͷαϜωΠϧ ΛΫϦοΫɻ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
111. ᶃ $PQZ
     6SM ΛΫϦοΫ ᶄ &4$ΩʔΛԡͯ͠ϙοϓ Ξοϓ΢Πϯυ΢Λด͡Δ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
112. ᶃ JOEFYIUNM ΛΫϦοΫ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
113. // 前略 <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ͷ࢖༻Λએݴ͢Δɻ
114. // 前略 <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-ΛషΓ෇͚
115. // 前略 <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ͷ Լʹߦૠೖ͠
116. // 前略 <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ͷ <μοΫΛ഑ஔ> ͔Βίϐϖɻ
117. // 前略 <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ʹΑͬͯ ؔ࿈෇͍ͨɻ
118. // 前略 <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΋ؔ࿈෇͍ͨɻ
119. 4IPXΛΫϦοΫ࣮ͯ͠ߦ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
120. μοΫ͕දࣔ͞ΕͨΒ 0, %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷ഑ஔ d
121. μοΫ͕ޙΖ޲͖ɻ લΛ޲͔͍ͤͨɻ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷճస d
122. ฤूը໘ͷλϒʹ੾Γସ͑ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷճస d
123. // 前略 <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Λมߋ͢Δɻ
124. // 前略 <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 :࣠ ਨ௚ํ޲ͷ࣠ Λ౓ճసͤͯ͞લ޲͖ʹɻ
125. ࣮ߦ݁Ռͷλϒʹ੾Γସ͑ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷճస d
126. μοΫ͕લ޲͖ʹදࣔ ͞ΕͨΒ0, %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷճస d
127. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ %ϞσϧΛදࣔ͠Α͏ d
     %Ϟσϧͷճస d
128. ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏
129. ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     ΞχϝʔγϣϯͷΠϝʔδ d ࣗస͢Δ஍ٿͷपғ ΛμοΫ͕ެస͢Δ Πϝʔδɻ ճసεϐʔυ͸ಉ͡ɻ μοΫ ஍ٿ
130. // 前略 <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
131. // 前略 <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
132. // 前略 <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
133. // 前略 <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
134. // 前略 <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ͷ <Ξχϝʔγϣϯͷద༻> ͔Βίϐϖɻ
135. ͻͱ·ͣ4IPXΛΫϦοΫ ࣮ͯ͠ߦ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     Ξχϝʔγϣϯͷద༻ d
136. ஍ٿͱμοΫ͕ճస ͍ͯ͠Ε͹0, ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     Ξχϝʔγϣϯͷద༻ d
137. μοΫ͕ޙΖ޲͖ʹ ճస͍ͯ͠Δɻ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     μοΫͷ޲͖Λมߋ d
138. ฤूը໘ͷλϒʹ੾Γସ͑ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     μοΫͷ޲͖Λมߋ d
139. // 前略 <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 μοΫΛਐߦํ޲΁޲͔͍ͤͨ
140. // 前略 <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 :࣠ͷճసΛݩʹ΋Ͳ͢
141. ࣮ߦ݁Ռͷλϒʹ੾Γସ͑ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     μοΫͷ޲͖Λมߋ d
142. μοΫ͕લ޲͖Ͱ प͍ͬͯΕ͹0, ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     μοΫͷ޲͖Λมߋ d
143. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ ΞχϝʔγϣϯΛ࢖ͬͯΈΑ͏ d
     μοΫͷ޲͖Λมߋ d
144. // 前略 <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 
     ܁Γฦ͋͠Γ
145. ΠϯλϥΫγϣϯΛ͚ͭΑ͏
146. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ 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಺ͷ࠷ޙʹߦૠೖɻ
147. ΠϯλϥΫγϣϯΛ͚ͭΑ͏ 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ͷ <ΫϦοΫΛݕ஌͢ΔϥΠϒϥϦ> ͔Βίϐϖɻ
148. // 前略 <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ʹରͯ͠
149. // 前略 <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Λ௥Ճ͠༗ޮԽ
150. // 前略 <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ʹରͯ͠
151. // 前略 <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 ΫϦοΫ࣌ ʹ͢Δɻ
152. 4IPXΛΫϦοΫ࣮ͯ͠ߦ ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫʹΑΔΞχϝʔγϣϯ։࢝ d
153. ஍ٿPSμοΫΛΫϦοΫͯ͠Ξχϝʔγϣϯ ͕ελʔτͨ͠Β0, ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫʹΑΔΞχϝʔγϣϯ։࢝ d
154. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ ΠϯλϥΫγϣϯΛ͚ͭΑ͏ dΫϦοΫʹΑΔΞχϝʔγϣϯ։࢝ d
155. "3ۭؒʹදࣔ͠Α͏
156. "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ϚʔΧʔΛ࢖༻ɻ
157. // 前略 <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
158. // 前略 <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ʹରԠ͢ΔϥΠϒϥϦ> ͔Βίϐϖɻ
159. // 前略 <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ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d
160. // 前略 <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ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d BSKTͷهड़Λ௥Ճ͢Δɻ ˔DPQZBOEQBTUFUYUͷ <"3ϚʔΧʔͷಡऔ৚݅> ͔Βίϐϖɻ
161. // 前略 <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ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d BSKT 
     "3ϚʔΧʔಡΈऔΓͷͨΊͷ৚݅Λઃఆ͢Δ Լه͸ϞόΠϧσό Πε޲͚ͷෛՙΛ཈͑ͨઃఆ  TPVSDF5ZQF
     XFCDBN ˠ ΢ΣϒΧϝϥͷө૾Λ࢖༻͢Δ  EFUFDUJPO.PEF
     NPOP ˠ നࠇϞʔυͰϚʔΧʔݕग़Λߦ͏  NBY%FUFDUJPO3BUF
      ˠ ඵʹ͖ͭճͷϚʔΧʔݕग़ΛࢼΈΔ  DBOWBT8JEUI
      ˠ ϚʔΧʔݕग़ͷͨΊͷը૾ղ૾౓ ෯  DBOWBT)FJHIU
      ˠ ϚʔΧʔݕग़ͷͨΊͷը૾ղ૾౓ ߴ͞  EFCVH6*&OBCMFE
     GBMTF ˠ σόοά৘ใඇදࣔ
162. // 前略 <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ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d 8FCΧϝϥΛ࢖༻͢Δ͜ͱʹΑͬͯࢹ఺ૢ࡞΍Ωʔૢ࡞ɺ Ґஔͷݻఆ͕ෆཁʹͳΔͨΊɺMPPLDPOUSPMTɺXBTE DPOUSPMTɺQPTJUJPOΛ࡟আɻ
163. // 前略 <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ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d DBNFSBͱNPVTFDVSTPS͸࡟আͤͣ࢒ͯ͠ ͓͘͜ͱɻ
164. 4IPXΛΫϦοΫ࣮ͯ͠ߦ "3ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d
165. "3ۭؒʹදࣔ͠Α͏ d
     8FCΧϝϥͷө૾Λදࣔ d ϒϥ΢βʹ8FCΧϝϥͷө૾͕ දࣔ͞ΕͨΒ0,ɻ ͜ͷஈ֊Ͱ͸ϚʔΧʔʹ͔͟͠ ͯ΋Կ΋දࣔ͞Εͳ͍ɻ
166. "3ۭؒʹදࣔ͠Α͏ d
     ө૾ͷॎԣൺΛௐ੔ d ؀ڥʹΑͬͯ͸ө૾ͷॎԣൺ ่͕Εͯ͠·͏৔߹͕͋Δͷ Ͱௐ੔͢Δɻ
167. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ "3ۭؒʹදࣔ͠Α͏ d
     ө૾ͷॎԣൺΛௐ੔ d
168. // 前略 <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
169. // 前略 <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Χϝϥ ͔Βͷө૾ͷॎԣൺ่͕ΕΔ͜ͱ͕͋Δɻ
170. 4IPXΛΫϦοΫ࣮ͯ͠ߦ "3ۭؒʹදࣔ͠Α͏ d
     ө૾ͷॎԣൺΛௐ੔ d
171. 8FCΧϝϥͷө૾ͷॎԣൺ่͕ΕΔ ͜ͱͳ͘දࣔ͞Ε͍ͯΕ͹0,ɻ "3ۭؒʹදࣔ͠Α͏ d
     ө૾ͷॎԣൺΛௐ੔ d
172. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ "3ۭؒʹදࣔ͠Α͏ d
     ө૾ͷॎԣൺΛௐ੔ d
173. // 前略 <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ϚʔΧʔͱؔ࿈෇͚Δඞཁ͕͋Δɻ
174. // 前略 <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ͷ ্ԼʹͦΕͧΕߦͣͭૠೖͯ͠
175. // 前略 <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 Λ௥Ճ͢Δɻ
176. 4IPXΛΫϦοΫ࣮ͯ͠ߦ "3ۭؒʹදࣔ͠Α͏ d
     "3ϚʔΧʔʹ͔ͯ͟͠ίϯςϯπදࣔ d
177. ϚʔΧʔʹ͔ͯ͟͠஍ٿͱ μοΫ͕දࣔ͞ΕͨΒ0,ɻ "3ۭؒʹදࣔ͠Α͏ d
     "3ϚʔΧʔʹ͔ͯ͟͠ίϯςϯπදࣔ d
178. ·ͩαΠζ΍Ґஔͷௐ੔͕ ඞཁɻ "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d
179. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d
180. Z (-) X (+) Y (+) Z (+) Y (-) X (-) X: 0 Y: 0 Z: 0 ϚʔΧʔͱ ࠲ඪͷؔ܎ "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d
181. ϚʔΧʔͷαΠζ ϝʔτϧ σϑΥϧτ ϝʔτϧ σϑΥϧτ • ϚʔΧʔͷαΠζ͸ҰลΛϝʔτϧͱΈ ͳ͢ɻ σϑΥϧτ • αΠζΛࢦఆ͢Δ৔߹͸ɺҰลͷ௕͞Λ ϝʔτϧ୯ҐͰࢦఆ͢Δɻ "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d
182. // 前略 <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 ݱ࣌఺Ͱ͸ϚʔΧʔʹରͯ͠஍ٿ΍μοΫ͕େ͖͗͢Δɻ ·ͨ஍ٿͷத৺͕ݪ఺ʹ͋ΔͨΊɺϚʔΧʔ͕஍ٿʹຒ΋Ε ͯ͠·͏ɻ
183. // 前略 <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 ஍ٿ͕ϚʔΧʔͷதʹऩ·ΔαΠζͰɺ͔ͭɺ ϚʔΧʔͷ্ʹͪΐ͏Ͳ৐Δ͘Β͍ͷҐஔʹௐ੔ɻ μοΫͷαΠζɺҐஔ΋߹Θͤͯௐ੔ɻ
184. 4IPXΛΫϦοΫ࣮ͯ͠ߦ "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d
185. "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d ஍ٿ͕ϚʔΧʔ্ʹ͓͞·Δ͘Β͍ͷ ҐஔɾαΠζͰɺμοΫ΋ఔΑ͘ௐ੔ Ͱ͖͍ͯΕ͹0,
186. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ "3ۭؒʹදࣔ͠Α͏ d
     "3ίϯςϯπͷҐஔɾαΠζௐ੔ d
187. %ςΩετΛදࣔ͠Α͏
188. // 前略 <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಺ͷ࠷ޙʹߦૠೖɻ
189. // 前略 <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ͷ <%ςΩετΛදࣔ͢ΔϥΠϒϥϦ> ͔Βίϐϖɻ
190. // 前略 <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಺ͷ࠷ޙʹߦૠೖɻ
191. // 前略 <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ͷ <%ςΩετͷදࣔ> ͔Βίϐϖɻ
192. 4IPXΛΫϦοΫ࣮ͯ͠ߦ %ςΩετΛදࣔ͠Α͏ d
     %ςΩετͷ഑ஔ d
193. %ςΩετ͕දࣔ ͞ΕͨΒ0, %ςΩετΛදࣔ͠Α͏ d
     %ςΩετͷ഑ஔ d
194. ࣮ߦ݁ՌͷλϒΛดͯ͡ ฤूը໘ͷλϒ΁໭Δ %ςΩετΛදࣔ͠Α͏ d
     %ςΩετͷ഑ஔ d
195. // 前略 <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&OBCMFE
     USVF ˠ ϕϕϧ༗ޮ จࣈͷ֯ΛؙΊΔ  CFWFM4J[F
      ˠ ஋͕େ͖͍΄Ͳจࣈͷྠֲ͕ଠ͘ͳΔ  CFWFM5IJDLOFTT
      ˠ ஋͕େ͖͍΄Ͳ೑ްʹͳΔ  TJ[F
      ˠ ϕϕϧͷαΠζΛม͑ͣจࣈαΠζ͚ͩม͑Δ৔߹ʹࢦఆ
196. +BWB4DSJQUͰΠϯλϥΫγϣϯ
197. // 前略 <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ϖʔδΛ։͘ Α͏ʹ͢Δɻ·ͣ͸ઌʹ഑ஔͨ͠%ςΩετʹ
198. // 前略 <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
199. // 前略 <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
200. // 前略 <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ͰͷΫϦοΫݕ஌> ͔Βίϐϖɻ
201. 4IPXΛΫϦοΫ࣮ͯ͠ߦ +BWB4DSJQUͰΠϯλϥΫγϣϯ d
     %ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d
202. %ςΩετΛΫϦοΫ +BWB4DSJQUͰΠϯλϥΫγϣϯ d
     %ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d
203. +BWB4DSJQUͰΠϯλϥΫγϣϯ d
     %ςΩετͷΫϦοΫͰ8FCϖʔδΛΦʔϓϯ d ৽͍͠λϒͰ8FCϖʔδ ͕։͚͹0,
204. ׬੒ʂ ͓ർΕ༷Ͱͨ͠ɻ