地形との当たり判定(ランドスケープ):Three.jsで3Dブラウザゲームを作る その6

サンプルプログラム

Nengaです。今回はThreejsでの地形との当たり判定(ランドスケープ)処理をご紹介いたします。

前回のサンプルでキャラクターを移動させることができたので・・・

移動したキャラクターと地形との当たり判定を取り,キャラクターが地形に沿って歩く(キャラクターの位置が地形に合う)ようにしていきます。一般的に「ランドスケープ」と呼ばれる処理です。

地形はblenderで作成した.glTFファイルを使います。(キャラクターと同じです)

地形にそってキャラクターが動いてくれるようになり,フィールドの奥行き感を出すことができます。

 

スポンサーリンク

サンプルプログラム:ランドスケープ

サンプルプログラムを置きましたのでダウンロードお願いいたします。↓

 <サンプルプログラムをダウンロード> 

 

ダウンロードいただけたら,zip展開の上,jsの中にある「script.js」をローカルサーバーで実行方お願いいたします。ローカルサーバーでの実行方法は下記記事のとおりです。

サンプルのデモはこちらになります。


↑タップでデモ開始です。

サンプルプログラムのランドスケープ処理について

キャラクターの移動方法は前回と同じです。タッチ処理を用いてペギちゃんを移動させます。

スクウェアエニックス社のRPGアプリでよく使われる移動方法です。
①画面のどこかをタッチ(クリック)し・・・
②スワイプ(ドラック)でペギちゃんが動きます。
③指(クリック)を離すとペギちゃんが止まります。

さて,上記方法でキャラクターを山や谷に移動させてみましょう。

山なら登り,谷なら下っていくと思います。

ランドスケープ処理の書き方

さて,ランドスケープ処理は452~468行にあるlandScape関数にて行ないます。

function landScape(NUM){
if(!chara[NUM].model)return;

var raycast = new THREE.Raycaster();
raycast.set(new THREE.Vector3(
  chara[NUM].model.position.x,
  chara[NUM].model.position.y+1,
  chara[NUM].model.position.z),
  new THREE.Vector3(0, -1, 0));
const intersects = raycast.intersectObjects(meshList);
meshList.map(mesh => {
if (intersects.length > 0 && mesh === intersects[0].object) {
//console.log(“x”+intersects[0].point.x+”\ny”+intersects[0].point.y+”\nz”+intersects[0].point.z);
chara[NUM].model.position.y=intersects[0].point.y;
}
});
}

当たり判定は,three.jsが用意してくれているraycasterを使います。

 

456~460行で2つのvectorをraycastに与えています。1つめが始点。2つめが終点(注:終点は,絶対位置ではなく始点からの相対位置です。)

当たり判定後の位置情報はintersects.pointに入ってくるので,それを使ってキャラクターの位置をセットしています。(465行目です。)

 

本関数を334行目で呼び出しています。キャラクターが,移動する度に呼び出されます。

landScape(i);

まとめ

Three.jsでランドスケープするサンプルと,使用方法をご紹介させていただきました。

(1)地形との当たり判定にはraycasterを使う
(2)当たり判定の結果(raicastと地形が交差した位置)を取り出す(intersects[0].point.y)
(3)キャラクターの位置を上記(2)にセットする

この手順で,キャラクターをランドスケープさせることが可能です。

※それにしても,前回のまとめでは「three.jsはゲームクリエイターに優しくない!」というようなノリで締めましたが,raycasterという当たり判定関数を用意してくれているあたり,実は配慮してくれているのかもしれません。

「3Dまわりは用意しておくので,その他の部分は好きなように組んでください」というスタンスで,私が求めすぎているだけなのかもしれませんね。

three.jsさん,マジリスペクトっす。

 

お疲れさまでした。次回も何か機能追加して,ご紹介させていただきたく存じます。

サンプルプログラムの参考にさせていただいたサイト

・ics.media様(https://ics.media/tutorial-three/raycast/)
・stackoverrun様(https://stackoverrun.com/ja/q/10827775)
・steemit様(https://steemit.com/utopian-io/@clayjohn/learning-3d-graphics-with-three-js-or-how-to-use-a-raycaster)

Nenga

コメント

タイトルとURLをコピーしました