エンジニアじゃなくても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/
作り方を一部紹介
今回は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やりましょう!!