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

はじめてのBabylon.js

NewD
July 10, 2022

 はじめてのBabylon.js

NewD

July 10, 2022
Tweet

More Decks by NewD

Other Decks in How-to & DIY

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

    ͍͖ͳΓ(FUUJOH4UBSUFE͸ૣ͗ͨ͢ ▸ 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 ϋϸϜϱ⑲ύớᠭͩ͸"SD3PUBUF$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 ϋϸϜϱ⑲ύớᠭͩ͸"SD3PUBUF$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ձ ͋Γ͕ͱ͏͍͟͝·ͨ͠