式姫で遊ぶ日記

2020-01-01から1年間の記事一覧

three.js でgltf を読み込むと暗く見える

ただのメモです。 three.jsに限った話ではないそうですが、ほかのファイル形式と共存させたい場合は、materialのcolorを1より大きく作り直すのが今のところ手っ取り早くできるかと思います。もともとシーンに光源、カメラが一緒に入っているかと思いますが例…

ブラウザ3Dゲームを作る作戦その8: 軽量化メモ

軽量化 materialの変更 マップを分割する カメラを調整する 処理時間を監視する その他 サンプル 主に軽量化についてメモ書きしておきます。 軽量化 特に既存のmodelデータを使いたいときの場合。 materialの変更 構造によって細かい部分は変わりますが、基…

ブラウザ3Dゲームを作る作戦その7: 衝突回避

障害物を回避する サンプル 障害物を回避する NPCがプレーヤーを追いかけてくるような状況で、障害物に引っかからないようにする話です。調べてみるとたくさん方法があるみたいです。メッシュ上をいろんなアルゴリズムで経路探索したり、事前にマップに経路…

ブラウザ3Dゲームを作る作戦その6: 軽量化

Load の軽量化 フィールド等のMMD以外のモデルデータは、glTF(GL Transmission Format) がおすすめだそうです(.gltf /.glb)。 .gltf はjson形式、.glbはバイナリ形式になっているそうで、どちらも同じようにThree.js 側から読み込めます。 なのですが他の…

ブラウザ3Dゲームを作る作戦その5: フィールドマップとの衝突判定

今回はフィールドマップを追加して衝突判定をしたいと思います。 フィールドはここからお借りしました。 https://www.turbosquid.com/ja/3d-model/free/city今回から斉天大聖ちゃんになります。みどらさんありがとうございます。 斉天大聖配布開始しました /…

ブラウザ3Dゲームを作る作戦その4: MMDデータを読み込んで動かす

前回はcubeだったので今回は代わりにMMDデータを読み込んで使いたいと思います。 読み込む サンプル 移動しているときに歩かせる/走らせる 下準備:モーションファイル情報をまとめておく モデルデータ・モーションデータをロードしてhelperにセットする セ…

ブラウザ3Dゲームを作る作戦その3: カメラで追従する

今回は3人称視点を目指して少しずつ変更していきます。 わかりやすいように床を入れる マウスイベントを取得する サンプル 向いている方向に進む オブジェクトを作ってみる 向いている方向を基準に前後左右させる サンプル カメラを動かす マウスで向きが変…

ブラウザ3Dゲームを作る作戦その2: キーボードで物体を動かす

前回は動かないまま終わりましたが、今回は少し動かしてみました。 まずは箱をその場で回転させる サンプル 次にキーボードで回転させる まずはキー入力を認識させてみる サンプル まずは箱をその場で回転させる アニメーションですが、前回のコードで funct…

ゼロからブラウザ3Dゲームを作る作戦その1

知識がないので手探りですが、効率は無視してとにかく調べながら始めてみます。たくさん間違いがあると思いますがご了承ください。 ブラウザで何か文字を表示 サンプル javascript と three.js ライブラリ 実行する サンプル ブラウザで何か文字を表示 まず…