エンジニアじゃなくても3Dゲームが3時間できた話。

～three.jsで3D糸通しをつくってみた～

まずは、

自己紹介

■名前：

　木下　雄策(27歳・福岡出身) @afroscript10

■略歴：

　九州大学大学院で宇宙の研究

　2013年　レバレジーズ入社

■今のお仕事：

　日本のエンジニア業界を最強にすること!!

　→エンジニア特化型Q&Aサイト【teratail】のDevRel担当

　→ITの勉強会【ヒカ☆ラボ】

■その他

　→Gs'ACADEMY2期生の趣味エンジニア

　→LIGブログ「0エンジニアから0.5エンジニアへ」連載中

伝えたいこと

three.js使えばめっちゃ簡単に3D入門できる！！！

目次

目次

■非エンジニア的に3Dの基礎をフワっとまとめてみる

　・3Dって実はたった4つのことをやるだけでいい

■3D糸通しつくってみた

　・Demo

　・作り方を一部紹介

　　・壁をいっぱいつくる

　　・当たり判定もどき

　・悩んでるとこ

【非エンジニア的に

3Dの基礎をふわふわとまとめてみる】

3Dって実はたった4つのことをやるだけでいい

3Dは、

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

・シーンを用意する

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

・シーンを用意する

・ライト(光源)つくる

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

・シーンを用意する

・ライト(光源)つくる→シーンに追加

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

・シーンを用意する

・ライト(光源)つくる→シーンに追加

・物体(Mesh)つくる

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

・シーンを用意する

・ライト(光源)つくる→シーンに追加

・物体(Mesh)つくる→シーンに追加

　

3Dって実はたった4つのことをやるだけでいい

3Dは、

・カメラ(視点)用意する

・シーンを用意する

・ライト(光源)つくる→シーンに追加

・物体(Mesh)つくる→シーンに追加

　あとは一定時間毎にレンダリングするだけ！！

基本はこれだけ！！

※そしてレンダリング毎に、

カメラ/ライト/物体の位置をずらすとアニメーションになる！

詳しくはこちらの記事で。:)

https://html5experts.jp/yomotsu/5225/

【3D糸通しを作ってみた】

Demo

作り方を一部紹介

作り方を一部紹介

今回は2点に絞って。

　・物体をランダムで位置変えていっぱいつくる

　・当たり判定？

・物体をランダムで位置変えていっぱいつくる　

物体をランダムで位置変えていっぱいつくる　

当然ですが、

「物体をつくる」を

for文で繰り返すだけ

物体をランダムで位置変えていっぱいつくる　

物体(壁)の大きさを決める※単位は[m]

壁

2[m]

2[m]

20[m]

物体をランダムで位置変えていっぱいつくる　

物体(壁)の色をランダムで決める

物体をランダムで位置変えていっぱいつくる　

物体(壁)を生成！(上下2個一気に作ってます)

物体をランダムで位置変えていっぱいつくる　

8m間隔で壁が現れるようにz座標を設定

※z軸は奥行き※座標は物体の中心を表す

物体をランダムで位置変えていっぱいつくる　

8m間隔で壁が現れるようにz座標を設定

※z軸は奥行き※座標は物体の中心を表す

重要っ！！

物体をランダムで位置変えていっぱいつくる　

壁のy座標をランダムで設定

※y軸は上下※座標は物体の中心を表す

・当たり判定　

当たり判定　

今回は、レンダリングするごとにカメラの位置を

z軸方向に-0.05[m]ずつ動かしている(前に0.05[m]ずつ進む)

当たり判定　

今回は、レンダリングするごとにカメラの位置を

z軸方向に-0.05[m]ずつ動かしている(前に0.05[m]ずつ進む)

↓

zで条件分岐させて、壁が存在するzの範囲(8〜10とか)で、

カメラのy座標と、それぞれ通過する壁のy座標を比較する

当たり判定　

こんな感じ

当たり判定　

カメラの奥行き(z座標)が8〜10[m]のとき、

0 8 10

壁1(下)

壁1(上)

当たり判定　

カメラの高さの位置(y座標)が1番目の壁(上)の下面のy座標、より大きければ、GAMEOVER!!

0 8 10

壁1(下)

壁1(上)

当たり判定　

カメラの高さの位置(y座標)が1番目の壁(下)の上面のy座標、より低ければ、GAMEOVER!!

0 8 10

壁1(下)

壁1(上)

当たり判定　

問題なければ通常通りレンダリング！

0 8 10

壁1(下)

壁1(上)

当たり判定　

【2番目の壁とのあたり判定】カメラの奥行き(z座標)が18〜20[m]のとき…

18 20

壁2(下)

壁2(上)

当たり判定　

以下同文！：）

18 20

壁2(下)

壁2(上)

当たり判定　

壁を5個すり抜けるとclear!!

58 60

壁5(下)

壁5(上)

当たり判定　

z座標が壁の間を通過してないときは、ただレンダリングをして0.05[m]ずつ進んでいく

壁(下)

壁(上)

壁(下)

壁(上)

簡単でしょ？？：）　

【まとめ】

まとめ

・現実世界を再認識できておもしろい

　(「確かに現実世界も、シーン/カメラ(視点)/物体/光源で

　成り立ってるな〜。」って思ったり)

・数学/物理を多様する気配がプンプンするので、

　理系男子的には萌える

・three.jsを使うと超簡単に3D作成を体験できる！

みなさんも今すぐ3Dやりましょう！！

ご清聴ありがとうございました。