Web Design Articles

babylon.js チュートリアル ステップ11 は画面クリックとのコリジョンです。コリジョンシリーズの３回目です。いきましょう！ 3Dオブジェクトのクリック(hit)を検出 ヒットした情報を用いて銃槍の位置をずらす デモ 3Dオブジェクトのクリック(hit)を検出 壁を表す平面と、銃創の絵が描かれた平面の２つを作成して、壁への衝突を検出し、衝突している場合は、そこに銃槍を刻むシーンをやってみます。 まず、クリックイベントで「pick」関数を使用して座標を取得します //クリックイベント検出 window.addEventListener("click", function () { // pickでポインタ情報を取得する var pickResult = scene.pick(scene.pointerX, scene.pointerY); }); pickResultオブジェクトは、主に4つの情報で構成されています。 hit （ブール値）：クリックがシーン内のオブジェクトにヒットした場合はtrue。 distance （float）：アクティブなカメラとヒットの間の距離（メッシュにヒットしなかった場合は無限） pickedMesh （BABYLON.Mesh）：オブジェクトにヒットしたメッシュ。hitしてない場合はnull pickedPoint （BABYLON.Vector3）：クリックしたVector3型で返す。hitしてない場合はnull ヒットした情報を用いて銃槍の位置をずらす pickResultを用いて // もしクリックが壁にhitした場合、ぶつかった画像の位置を更新する if (pickResult.hit) { impact.position.x = pickResult.pickedPoint.x; impact.position.y = pickResult.pickedPoint.y; } デモ 完成したデモはこちら https://www.babylonjs-playground.com/#NU4F6Y 次回は,FPSなどで使えるレイキャスト(Raycasts)やっていきます

メッシュ同士が、それぞれ衝突を検出する方法をやりますいきましょう！！ 説明 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 まとめ 説明 衝突検出の2つの方法を紹介します。 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 2つのメッシュが接触しているときに衝突イベントを発生させる方法 intersectsMesh()を使うことで、対象との交差(衝突)判定を行うことが出来ますコードは次の通り // 平面(plan1)とballoon1との交差判定 if (balloon1.intersectsMesh(plan1, false)) { balloon1.material.emissiveColor = new BABYLON.Color4(1, 0, 0, 1); } else { balloon1.material.emissiveColor = new BABYLON.Color4(1, 1, 1, 1); } バビロンエンジンでは、交差判定を効率よく行うために オブジェクトの周囲に下図のように境界ボックス(バウンティングボックス)を作成し、このボックスと衝突するメッシュの間の交差をテストします。 また、より詳細に接触を検出したい場合には第二引数をtrueにすることで、バウンティングボックスをメッシュにより近くし、交差判定を正確にすることが出来ます。ただ、この操作は計算負荷が高くなるようです。 左が、falseの例、右がtrueの例です。このタイプのバウンディングボックスは、メッシュをある角度に回転させる場合に特に役立ちます。 メッシュと1点間の接触を検出する方法 特定の１点との接触判定をする方法が、intersectsPoint()です。 使用方法は次の通り var pointToIntersect = new BABYLON.Vector3(10, -5, 0); if [...]

babylon.js を覚えようステップ9は衝突判定と重力制御です！ いやー、重力とか楽しそうですね。 メッシュだけでなく、カメラにも設定できるようです。 いきましょう！！ 説明 1.重力の設定 2.楕円体を定義する 衝突を適用する(Apply collision) メッシュオブジェクトとメッシュオブジェクトの衝突 ArcRotateCameraでの衝突 まとめ 説明 FPS（First Person Shooter）ゲームをプレイしたことがありますか？この回では、そのFPS的なカメラの動きをシミュレートします。カメラは床にあり、地面と衝突しており、シーン内のオブジェクトと衝突している可能性がありますねでは、このFPS的な設定をしていきましょう！ 1.重力の設定 シーンにグラビティ(重力)ベクトルをVector3型で設定します。 scene.gravity = new BABYLON.Vector3(0, -9.81, 0); 古典的には、yに重力加速度9.8を下向き（負）に設定すると良いです。カメラへの適用は、applyGravityプロパティをtrue設定します camera.applyGravity = true; 2.楕円体を定義する 次の重要なステップは、カメラの周りに楕円体を定義することらしいです。この楕円体はプレーヤーの幅(プレイヤーサイズ)を表します。外部のメッシュがこの楕円体に接触すると衝突イベントが発生し、カメラがこのメッシュに近づきすぎないようにすることで、カメラがメッシュにめり込まないようにします。 babylon.jsカメラの楕円体プロパティのデフォルトはサイズ（0.5、1、0.5）ですが、値を変更すると、調整された軸に応じて、背が高く、大きく、小さく、薄くなります。次の例では、カメラの楕円体をデフォルトの楕円体よりも少し大きくします。 //カメラの周りに楕円を定義 (e.g. your player's size) camera.ellipsoid = new BABYLON.Vector3(1, 1, 1); カメラの楕円体はオフセット(Offset)され、常に視点が楕円体の上にあります。camera.ellipsoidOffsetプロパティを更新することにより、この動作を制御できます。計算は次のようになります。finalPosition = position - vec3(0, ellipsoid.y, 0) [...]

babylon.js でのステップも８個目！！今回はアニメーションです！アニメーションは、メッシュに動きを与えて見栄えがするシーンを作成出来ます。いきましょう！ アニメーションの２つの方法 キーフレームアニメーション アニメーションを止める方法 終了を待って同期処理をする CreateAndStartAnimation関数 アニメーションのブレンド アニメーションの重みを設定してブレンド イージング機能 複雑なアニメーション まとめ アニメーションの２つの方法 アニメーション方法には２つあります。 予めアニメーションの動きのキーフレームを定義する方法 実行時にアニメーションを適用されるようにプロパティを随時変更する方法 キーフレームアニメーション まず環境を作りますシーン、ライト、カメラを設定してから、箱を一個置いてみます。 function createScene() { //Here... your basic scene as before: [scene, light, camera] //Create a box var box1 = BABYLON.Mesh.CreateBox("Box1", 10.0, scene); box1.position.x = -20;アニメーションオブジェクトを定義します。 (GSAPみたいなトゥイーン的な方法ですね) // new BABYLON.Animation(名前,変更対象(例:xの大きさ),値の型,動作タイプ); var animationBox = new [...]

babylon.js ステップ7　ライティングです。3D表現はライティングが無いと始まりません。ライディングの無い空間はただの暗黒です。暗黒の空間に一条の光として、ライトを設置します。ライトと言っても、太陽のような環境光もあります。いきましょう！ ライトの種類 4種類のライトあります ポイントライト(Point Light) 指向性ライト(Directional Light) スポットライト(Spot LIghe) 半球ライト(HemiLight) ポイントライト/点光源(Point Light) ポイントライトは、ワールドスペース内の一意のポイント(点)にから発光されるライトです。光はこのポイントからあらゆる方向に放出されます。ポイントライトの分かりやすい例は、裸電球です。ちょっと上(y軸を多め)に置くとメッシュ全体を照らせます。 var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(1, 10, 1), scene); 例はこちら https://www.babylonjs-playground.com/#20OAV9 指向性ライト/平行光源(Directional Light) 指向性ライト/平行光源は、方向によって定義される特殊な光です。光は、指定された方向のあらゆる場所から放出され、無限の範囲を持ちます。指向性ライトの例としては、太陽からの十分に遠い惑星があったとしてその惑星に対して、並行な光が降り注ぐと思うのですが、そんな感じです。下方向に光を当てると、オブジェクトの上部が明るくなります。 var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);例はこちら https://www.babylonjs-playground.com/#20OAV9#1 スポットライト(Spot LIghe) スポットライトは、単一の点から一方向に円錐状に放出されます。方向、角度、および指数を設定出来ます。値は、位置、照らす方向で光の円錐を定義します。照射角は、ラジアンで、スポットライトの円錐ビームのサイズ（照明のフィールド）を定義し、指数は、距離（距離）に伴う光の減衰の速度を定義します。 // new BABYLON.SpotLight(名前, 位置, 照らす方向, 照射角, 光の減衰, [...]