babylon.js
babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう！ パーティクルの作り方 パーティクルシ…
babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! ２つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から…
babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう！ レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelpe…
babylon.js チュートリアル ステップ11 は画面クリックとのコリジョンです。コリジョンシリーズの３回目です。いきましょう！ 3Dオブジェクトのクリック(hit)を検出 ヒットした情報を用いて銃槍の位置をずらす デモ 3Dオブジェクトのクリック(hit)を検出 壁…
メッシュ同士が、それぞれ衝突を検出する方法をやりますいきましょう！！ 説明 2つのメッシュが接触しているときに衝突イベントを発生させる方法 メッシュと1点間の接触を検出する方法 まとめ 説明 衝突検出の2つの方法を紹介します。 2つのメッシュが接触し…
babylon.js を覚えようステップ9は衝突判定と重力制御です！ いやー、重力とか楽しそうですね。 メッシュだけでなく、カメラにも設定できるようです。 いきましょう！！ 説明 1.重力の設定 2.楕円体を定義する 衝突を適用する(Apply collision) メッシュオブ…
babylon.js でのステップも８個目！！今回はアニメーションです！アニメーションは、メッシュに動きを与えて見栄えがするシーンを作成出来ます。いきましょう！ アニメーションの２つの方法 キーフレームアニメーション アニメーションを止める方法 終了を待…
babylon.js ステップ7 ライティングです。3D表現はライティングが無いと始まりません。ライディングの無い空間はただの暗黒です。暗黒の空間に一条の光として、ライトを設置します。ライトと言っても、太陽のような環境光もあります。いきましょう！ ライト…
babylon.jsにはよく使われる２つのカメラがあります。一つは１人称視点のユニバーサルカメラ(the Universal Camera)、もう一つはアークカメラ(Arc Rotate Camera)です。 まずカメラのコントロールを可能にしましょう camera.attachControl(canvas, true); ユ…
マテリアルを使用すると、メッシュを色とテクスチャで覆うことができます。なお、メッシュを表示するには光が必要です。拡散マテリアル(Diffuse)と鏡面マテリアル(Specular)では、光源を作成する必要があります。いきましょう！ 色 まずは、StandardMaterial…
babylon.js やってみようシリーズのステップ4位置、回転、スケーリングのお話です 位置の話 babylon.jsには２つの座標系があります ワールド座標系 ローカル座標系 ワールド座標系 ワールド座標系の原点は変わりません。通常、メッシュが作成されると、その…
いろいろな形状シリーズです。いきましょう！ 線 //Array of points to construct lines var myPoints = [ new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1, 1), new BABYLON.Vector3(0, 1, 0) ]; //Create lines var lines = BABYLON.MeshBuilder.…
早速いきますBABYLON.MeshBuilderを使っていろいろ作っていきますThree.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。 球体 // Add and manipulate meshes in the scene var sphere = BABYLON.MeshBuilder.Cr…
こんにちはどうしても3Dでゲームっぽい物をWeb上で作りたくて、ここ数ヶ月Three.jsを勉強していたのですが、、どうやらゲームを作るにはbabylon.jsの方が良さそうです。なぜ、Three.jsではダメなのか？それは純粋な3D表現ツールだからです。 キャラクターが…
