はじめてのBabylon.js

Transcript

1. 2022/7/8 Babylon.jsゆるほめLT会 ͸͡ΊͯͷBabylon.js 1 NewD @ 2022/7/8 Babylon.jsΏΔ΄ΊLTձ - The Very First StepΛਐΊͯΈͨ
2. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/6 Babylon.js 勉強会 vol.1を視聴する まで 2 ITΤϯδχΞͷํʑ OTͷΤϯδχΞͷํʑ 
 (Operational Technology) 2020೥ •x◆ʂˈʁ ▶︎ ▪□ xˍˋ ʁʁ python IoT ిࢠ޻࡞ JavaScript 3DϓϦϯλ ഑৴ Adobe/3D ಈը/Ξχϝʔγϣϯ 3DCG 2021೥ Blender A-Frame New Directions PlayCanvas AR.js Studio Unity 2022೥ •x◆ʂˈʁ ▶︎ ▪□ xˍˋ WebAR C# Babylon.js ʁʁ Babylon.js 勉強会 vol.1
3. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-00：最初（Firsts）から読み始める ▸ 1-01 : ϋϩʔϫʔϧυʂ࠷ॳͷγʔϯͱϞσϧ 3 #BCZMPOKT
   ެࣜ
   ೖ໳νϡʔτϦΞϧ
   ͬ͘͟Γ࿨༁ ༁஫ʣʂʹ΋ֶͼ͕͋Δ
4. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-03：モデルを扱う まで頑張って読む 1-03ɿ༁஫ʣʂͰߦ͖٧·Δ ▸ JavaScript Ͱͷඇಉظॲཧͱ Promise पΓͷ஌ࣝʁ 4 
   
   ϞσϧΛѻ͏
5. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-00：最初（Firsts）まで戻る ݱ৔100ว - ߦ͖٧·ͬͨΒݱ৔ʹ໭Δ ▸ 1-00ɿ࠷ॳʢFirstsʣ·Ͱ໭ͬͯΈΔ 5 #BCZMPOKT
   ެࣜ
   ೖ໳νϡʔτϦΞϧ
   ͬ͘͟Γ࿨༁
6. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアル ざっくり和訳」1-00：最初（Firsts）まで戻る ”͜ͷϖʔδͷݪจ ” ʹؾͮ͘ ▸ →ϦϯΫΛ౿ΜͰΈΔ 6 #BCZMPOKT
   ެࣜ
   ೖ໳νϡʔτϦΞϧ
   ͬ͘͟Γ࿨༁
7. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「最初（Firsts）」の更に前があることに気づく　→Your Journey Starts Here ཱྀͷ࢝·Γ͸΋ͬͱલʹ͋ͬͨ ▸ Your Journey Starts Here 7 Your Journey Starts Here https://doc.babylonjs.com/journey
8. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 こっちが本当の最初　Your Journey Starts Here＞The Very First Step ͍͖ͳΓ(FUUJOH
   4UBSUFE͸ૣ͗ͨ͢ ▸ The Very First StepΛਐΊͯΈΔ 8 The Very First Step
9. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ్த·Ͱ݁ߏαΫαΫ ▸ ফͯ͠ɺ੺ͯ͘͠ɺνΣοΫʹͳͬͨ 9 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
10. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ߦ͖٧·ͬͨ৔߹Ͱ΋ ▸ ֤࡞ۀ͝ͱͷมԽΛ ϓϨΠάϥ΢ϯυͷϦϯΫ͔Β ผλϒͰࢀর͠ͳ͕ΒਐΊΔ͜ͱ͕Ͱ͖Δ 10 https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation Your First Creation
11. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ςϯϓϨʔτͷग़͠ํ͕͔͍͍ͬ͜ ▸ CTRL+SPACEͰϘϯʂ 11 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation これから イエティを呼びます
12. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ςϯϓϨʔτͷग़͠ํ͕͔͍͍ͬ͜ ▸ ख࣋ͪͷMacBookͰ΋ fn + control + spaceͰͨ͠ 12 Introducing Playground Templates @Babylonjs YouTube 最初はWindowsPCで やりました
13. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ςϯϓϨʔτΛॻ͖׵͑ͯαΫαΫ ▸ .gltf ΦϒδΣΫτΛঌשͯ͠αΠζௐ੔ɻ 13 Your First Creation アニメーション付き .gltfオブジェクト https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
14. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ͪͳΈʹαΠζௐ੔͢Δલͷେ͖͞ ▸ .gltf ΦϒδΣΫτΛঌשɻ 14 Your First Creation 手順1.2.3をやって4.を飛ばして 5.シーンを更新してみた場合 https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
15. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ࣍ʹγʔϯΛΠϯλϥΫςΟϒʹ͍ͨͦ͠͏Ͱ͕͢ ▸ ࠓͷঢ়ଶͰ΋Ϛ΢εͰάϦάϦˍΧʔιϧͰҠಈͰ͖ Δ͚Ͳɺ͜Ε͸ΠϯλϥΫςΟϒͱ͸ݴΘͳ͍ͷʁʁ 15 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
16. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ࣍ʹγʔϯΛΠϯλϥΫςΟϒʹ͍ͨͦ͠͏Ͱ͕͢ 16 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation ▸ ʲଟ෼ʳࠓͷঢ়ଶ͸ɺVector3 (0, 5, -10)ʹஔ͍ͨ FreeCamera͔Βݪ఺ ( Vector3.Zero() )Λݟ͍ͯΔʁ
17. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ϋϸϜϱ⑲ύớᠭͩ͸"SD
    3PUBUF
    $BNFSBΤᑿ͘ ▸ Arc Rotate Camera͸͜ͷஈ֊ͳΒDegreesͰ΋ RadiansͰ΋ͲͪΒͰ΋ྑ͍ͷ͔ͳʁ 17 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
18. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ิ଍ ▸ Ծ૝ੈքΛදࣔͯ͠ૢ࡞͢Δʹ͸ɺΧϝϥΛΩϟϯ όεʹΞλον͢Δඞཁ͕͋Γ·͢ɻ 
 λʔήοτͷपΓʹճసͤ͞Δ͜ͱͷͰ͖Δ BABYLON.ArcRotateCameraͷλΠϓͷΧϝϥΛ௥ Ճ͠·͠ΐ͏ɻ 18 γʔϯΛ४උ͢Δ
 ˏBabylonJSΛ࢖༻ͨ͠ VR Hello World
19. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ϋϸϜϱ⑲ύớᠭͩ͸"SD
    3PUBUF
    $BNFSBΤᑿ͘ ▸ Arc Rotate Camera͸͜ͷஈ֊ͳΒDegreesͰ΋ RadiansͰ΋ͲͪΒͰ΋ྑ͍ͷ͔ͳʁ - DegreesͰɻ 19 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
20. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Your First Creation ΠϯλϥΫγϣϯ͕ՃΘͬͨΒ͍͠ ▸ ՃΘΔલͷಈ͖ɹ ɹͱɹ ɹՃΘͬͨޙͷಈ͖ 20 Your First Creation https://doc.babylonjs.com/journey/ 
 theFirstStep#your- fi rst-creation
21. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞The .html File IUNMϑΝΠϧΛμ΢ϯϩʔυ ▸ μ΢ϯϩʔυͨ͠ϑΝΠϧΛϗεςΟϯά͍ͨ͠ɾɾɹɹ 21 The .html File ファイルがzipだったからと言って そのままアップロードするものではないらしい。
22. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 Your Journey Starts Here＞The Very First Step＞Hosting Your Babylon Project 4ճ໨ͷਖ਼௚ ▸ 3ճࣦഊͯ͠ɺͦͷ౓ʹ First ͕૿͚͑ͨͲͰ͖ͨʂ 22 Hosting Your Babylon Project
23. 2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 GitHub 4ճ໨ͷਖ਼௚ ▸ ࣦഊͨ͠ͷ͸ޙͰ࡟আ͍ͨ͠ 23 GitHuB https://a2k3ine.github.io/ 
 myFirstBabylon/
24. 2022/7/8 Babylon.jsゆるほめLT会 ؤுͬͨɻ 24 2022/5/19 GitHub
25. 2022/7/8 Babylon.jsゆるほめLT会 ͸͡ΊͯͷBabylon.js 25 NewD @ 2022/7/8 Babylon.jsΏΔ΄ΊLTձ ͋Γ͕ͱ͏͍͟͝·ͨ͠