nuxt.js のSSRデバッグ方法 by Jetbrain
こちらの記事が参考になりました。 ありがとうございます。k-sasaki.net asyncDataのデバッグを諦めてconsole.logで頑張っていたところこれで、デバッグできるようになりました！こんな感じで、ブレークポイントを入れたい場所に「debugger;」と書けばchromeのDevツールでブレークされます。Jetbrain最高です。
babylon.js ステップ15 環境設定
ステップ15は環境設定です。今までは無機質な虚無空間でしたが、ここで遂に空が登場します。そうする事で、見栄えのする3D空間が完成します いきましょう！！ 背景色の変更 アンビエントカラーの変更 スカイボックス スカイボックスの自動生成方法 スカイボックス用の画像を自分で生成する方法 Fog霧 まとめ 背景色の変更 シーンの背景色を変更するプロパティを使う事で簡単に、背景色を設定できます scene.clearColor - 背景を変更する関数 scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.5);Color3型をnewして色を設定できます アンビエントカラーの変更 次のプロパティを使うとアンビエントカラーを設定できます scene.ambientColor = new BABYLON.Color3(0.3, 0.3, 0.3); clearColorの設定方法と同じように見えますが、アンビエントカラーについては、ambientColorシーンアイテムの最終的な色を決定するためにかなりの数の計算で使用されています。主に、メッシュとの組み合わせて使用され、メッシュマテリアルのStandardMaterial.ambientColor によって最終的なアンビエントカラーが決まるようです。 スカイボックス 美しい完璧な空を作りたいと思いませんか？それを簡単に実現したのがスカイボックスです。このボックスの中にカメラを設置すれば、あたかも広大な空の中にいるような演出ができます。作り方は次の通りまずは箱を作ります。 var skybox = BABYLON.Mesh.CreateBox("skyBox", [...]
babylon.js ステップ14 パーティクル表現
babylon.js を覚えようシリーズ ステップ14はパーティクル表現です。Three.jsでは自作で頑張るわけですが、babylon.jsではパーティクルシステムが備わっていますので、簡単にパーティクル表現が可能ですいきましょう！ パーティクルの作り方 パーティクルシステム 解説 パーティクルのテクスチャマスク パーティクルエミッタ ローカル空間 場所と広がり ライフタイム サイズ 色 ブレンドモード rate 放出方向 重力 回転 速度 速度リミット 抗力係数 整列 ノイズテクスチャ まとめ パーティクルの作り方 パーティクルシステム パーティクルシステムを用いたパーティクル表現の例はこちらです。コード中に説明を追加していますので順番にみていきましょう コード例は以下です。 var createScene = function () { var [...]
babylon.js ステップ13 スプライト(Sprites)
babylon.js ステップ13はスプライトアニメーションです。2Dではおなじみのこの技術。もちろんbabylon.jsでも使えます いきましょう! ２つのスプライト管理方法 スプライトマネージャー Picking(ピッキング) スプライトパックマネージャー(バージョン4.1から利用可能) スプライトの設定 スプライトアニメーション方法 スプライトマップ タイル表現に便利なスプライトマップタイル まとめ ２つのスプライト管理方法 スプライトは大量の2D画像を利用するため、パフォーマンス管理が重要です。babylon.jsでは２つの管理方法があります A uniform spritesheet (均一化されたスプライト)・・・SpriteManagerを利用 A packed spritesheet(パッケージされたスプライト)・・・SpritePackedManagerを利用 これらは、１枚のスプライトであってもManagerを使う必要があります。 スプライトマネージャー // 木の画像用のsprite managerの作成 var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "Assets/Palm-arecaceae.png", 2000, 800, scene); [...]
babylon.js ステップ12 レイキャスト(Raycasts)
babylon.jsのチュートリアルシリーズ 12回目今回はレイキャストをやっていきますいきましょう！ レイキャストとは光線による衝突判定 光線と最初に接したメッシュの取得 Predicate関数を使用したレイキャスト マルチピック Picking Ray デバッグ用のRayHelper まとめ レイキャストとは光線による衝突判定 前回の11回ではマウスの位置と、壁の衝突判定を行いましたが。レイキャストは、光線(レーザー・)による衝突または、交差チェックを行う機能です。FPSゲームの弾丸の軌道なんかはレイキャストで行います。 マウスクリックで、選択されたメッシュ情報を取得する方法(scene.pick)を使用しました。一方レイキャストでは似たようなメソッド、 scene.pickWithRay() を使っていきます 光線と最初に接したメッシュの取得 光線と最初に接したメッシュの取得をやっていきます。 真ん中に、光線を出力する赤い箱があります（箱はマウスで動かせる）そして、その光線と接する可能性のある、青い箱が２つと緑の箱があります。 なお、奥の青い箱は、光線が届きません。光線が当てられた箱は上に伸びていきます。 デモはこちらhttps://www.babylonjs-playground.com/#KNE0O#84 まず、最初に光線の出力もとである赤い箱には、衝突検出をoffにする設定を入れます。赤い箱自体が衝突判定されてしまっては困りますので。 box.isPickable = false; 次に、箱から出る光線のベクトルを定義します。その際,箱の位置()を差し引いて箱の原点origin(光線が始まる場所)からの方向を取得します。 // 赤い箱との方向ベクトル var forward = new BABYLON.Vector3(0,0,1); forward = vecToLocal(forward, box); [...]
test
test こんにちは！！！