はじめてのBabylon.js

by NewD

Slide 1

Slide 1 text

2022/7/8 Babylon.jsゆるほめLT会 ͸͡ΊͯͷBabylon.js 1 NewD @ 2022/7/8 Babylon.jsΏΔ΄ΊLTձ - The Very First StepΛਐΊͯΈͨ

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアルざっくり和訳」1-00：最初（Firsts）から読み始める ▸ 1-01 : ϋϩʔϫʔϧυʂ࠷ॳͷγʔϯͱϞσϧ 3 #BCZMPOKTެࣜ ೖ໳νϡʔτϦΞϧ ͬ͘͟Γ࿨༁ ༁஫ʣʂʹ΋ֶͼ͕͋Δ

Slide 4

Slide 4 text

2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアルざっくり和訳」1-03：モデルを扱うまで頑張って読む 1-03ɿ༁஫ʣʂͰߦ͖٧·Δ ▸ JavaScript Ͱͷඇಉظॲཧͱ Promise पΓͷ஌ࣝʁ 4 ϞσϧΛѻ͏

Slide 5

Slide 5 text

2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアルざっくり和訳」1-00：最初（Firsts）まで戻る ݱ৔100ว - ߦ͖٧·ͬͨΒݱ৔ʹ໭Δ ▸ 1-00ɿ࠷ॳʢFirstsʣ·Ͱ໭ͬͯΈΔ 5 #BCZMPOKTެࣜ ೖ໳νϡʔτϦΞϧ ͬ͘͟Γ࿨༁

Slide 6

Slide 6 text

2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 「Babylon.js 公式入門チュートリアルざっくり和訳」1-00：最初（Firsts）まで戻る ”͜ͷϖʔδͷݪจ ” ʹؾͮ͘ ▸ →ϦϯΫΛ౿ΜͰΈΔ 6 #BCZMPOKTެࣜ ೖ໳νϡʔτϦΞϧ ͬ͘͟Γ࿨༁

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 これからイエティを呼びます

Slide 12

Slide 12 text

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でやりました

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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() )Λݟ͍ͯΔʁ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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だったからと言ってそのままアップロードするものではないらしい。

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

2022/7/8 Babylon.jsゆるほめLT会 2022/5/19 GitHub 4ճ໨ͷਖ਼௚ ▸ ࣦഊͨ͠ͷ͸ޙͰ࡟আ͍ͨ͠ 23 GitHuB https://a2k3ine.github.io/   myFirstBabylon/

Slide 24

Slide 24 text

2022/7/8 Babylon.jsゆるほめLT会 ؤுͬͨɻ 24 2022/5/19 GitHub

Slide 25

Slide 25 text

2022/7/8 Babylon.jsゆるほめLT会 ͸͡ΊͯͷBabylon.js 25 NewD @ 2022/7/8 Babylon.jsΏΔ΄ΊLTձ ͋Γ͕ͱ͏͍͟͝·ͨ͠