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会 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
  2. 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
  3. 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
  4. 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
  5. 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 これから イエティを呼びます
  6. 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で やりました
  7. 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
  8. 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
  9. 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
  10. 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() )Λݟ͍ͯΔʁ
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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だったからと言って そのままアップロードするものではないらしい。
  16. 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