blog.in-j.com
-
Three.jsが重いときのパフォーマンス最適化まとめ【原因の測り方から】
Three.jsのサイトやゲームが重いときの最適化手法をまとめて解説。描画コールの計測、InstancedMeshによる削減(デモ付き)、pixelRatioの制限、影とライトのコスト、モデルとテクスチャの軽量化まで。
-
BlenderからThree.jsへモデルをエクスポートする設定まとめ【glTF】
Blenderで作った3DモデルをThree.jsで正しく表示するためのglTFエクスポート設定を解説。スケール適用や原点、マテリアル、Draco圧縮、アニメーションの注意点、表示されないときのチェックリスト付き。
-
Three.jsで経路探索AIを作る【NavMeshとrecast-navigation】
Three.jsで敵キャラやNPCが壁を避けて移動する経路探索(パスファインディング)をrecast-navigationで実装。NavMeshの生成・可視化・経路計算からCDN導入の落とし穴まで解説します。
-
Three.jsで三人称視点(TPS)カメラを実装する【キャラクター追従】
Three.jsでキャラクターの後ろを追いかけるTPSカメラの実装を解説。カメラ基準の移動、キャラクターの滑らかな回頭、遅延追従カメラ、アニメーション切り替えまで動くデモ付き。
-
Three.jsで一人称視点(FPS)を作る方法【PointerLockControls】
Three.jsのPointerLockControlsでFPSゲームの視点操作を実装する方法。マウスロックのUI、WASD移動、重力とジャンプまで動くデモ付きで解説します。
-
Three.jsで3Dモデルの地形の上を歩く方法【Raycasterで接地判定】
Three.jsでglTFの地形モデルの起伏に沿ってキャラクターを歩かせる実装を解説。物理エンジンを使わず、真下へのRaycasterだけで接地判定する軽量な方法です。動くデモ付き。
-
Three.jsの物理エンジンはどれを選ぶ?cannon-es・Rapier・Jolt比較
Three.jsで使える物理エンジンcannon-es・Rapier・Joltを実際に全部試して比較。導入の手軽さ、性能、ドキュメント、開発の活発さから、用途別のおすすめを紹介します。
-
Three.jsに物理エンジンを導入する【Rapier入門】落下・衝突・デバッグ表示
Three.jsに物理エンジンRapierを導入して、重力で落下・衝突するオブジェクトを作る入門解説。cannon-esとの比較、compat版のCDN読み込み、物理ボディとメッシュの同期、コライダーのデバッグ表示まで。
-
Three.jsでオブジェクトのクリック判定・ホバー判定を実装する【Raycaster】
Three.jsの3DオブジェクトにはclickイベントがないのでRaycasterで判定します。マウス座標の正規化、クリック判定、ホバーで光らせる実装、glTFモデルで判定する際の注意点まで動くデモ付きで解説。
-
Three.jsでWebGLレンダラーとCSS3Dレンダラーを共存させる方法
Three.jsのCSS3DRendererで本物のHTML(iframeやボタン)を3D空間に埋め込み、WebGLのオブジェクトと正しく前後関係を持たせて共存させる実装を解説。NoBlendingの透明プレーンで深度を合わせるのがポイントです。
-
Three.jsをCloudflareにデプロイしてWebSocketで位置を同期する方法
Three.jsのサイトをCloudflare Pagesで無料公開する手順と、WebSocket(Workers + Durable Objects)でプレイヤーの位置をリアルタイム同期する仕組みを解説。タブ間で試せる同期デモ付き。
-
Three.jsのファイル分割はDIパターンがおすすめ【クラス設計】
肥大化しがちなThree.jsのコードを、シングルトンのAppクラスを軸にしたDIパターンで整理する方法。Init・World・Player・Loopへのクラス分割の実例と初期化順序の考え方を解説します。
-
Three.jsに3Dモデルをインポートする方法【GLTFLoaderとアニメーション再生】
Three.jsのGLTFLoaderでglTF/GLB形式の3Dモデルを読み込む手順と、AnimationMixerでのアニメーション再生・クロスフェード切り替えを解説。BlenderからのエクスポートやDraco圧縮にも触れます。
-
Three.jsでキーボードとNipplejsジョイスティックの入力を受け取る方法
Three.jsでWASDキー入力とNipplejsのバーチャルジョイスティックを両対応させる実装を解説。keyStatesパターン、deltaTimeベースの移動、スマホのタッチ操作対応まで動くデモ付きで紹介します。
-
Three.jsのレンダラー・ライト・カメラの使い方と設定まとめ
Three.jsのWebGLRendererのオプション、環境光と平行光源の使い分け、PerspectiveCameraの視野角やOrbitControlsの設定を、GUIで動かせるデモを見ながら解説します。
-
【Three.js入門】ビルドツール不要、CDNだけで始める基本の使い方
Three.jsをCDNのimportmapで読み込んで、HTMLファイル1枚で3D表示を始める方法を解説します。シーン・カメラ・レンダラーの3点セットとアニメーションループまで、動くデモ付き。
-
ダークモード対応のメモ
CSS変数とlocalStorageでライト/ダークモード切り替えを実装した話。
-
Astroでブログを始めました
Astroでブログサイトを立ち上げたので、構成のメモを残します。
-
コンテンツコレクションでMarkdownを型安全に管理する
Astroのコンテンツコレクションを使うと、フロントマターをスキーマで検証できます。
-
PreSonus eris3.5の購入後の感想【実機レビュー】
モニタースピーカーPreSonus Eris 3.5を購入して使ってみた実機レビューです。
-
DMMfxのセルフバックする方法と確定までの日数
DMM FXのセルフバックのやり方と、報酬が確定するまでの日数を紹介します。
-
バックトゥザフューチャーの感想【ドクの記憶の矛盾とオリジナルの家族】
映画バック・トゥ・ザ・フューチャーの感想。ドクの記憶の矛盾とオリジナルの家族についての考察です。
-
Windows11のフォトのプログラムの場所
Windows11の「フォト」アプリのプログラム(実行ファイル)がある場所を紹介します。
-
omenゲーミングpcの無音時のノイズを消す方法
OMENのゲーミングPCで無音時に聞こえるノイズを消す方法を紹介します。
-
ハイトマップでMagicavoxelに地形をインポートする【FileToVox】
FileToVoxを使って、ハイトマップからMagicaVoxelに地形をインポートする方法を紹介します。
-
3Dモデルのnゴンを消す簡単な方法
3Dモデルのnゴン(五角形以上のポリゴン)を消す簡単な方法を紹介します。
-
3DモデルをMgicavoxelにインポートする方法【vox化】
3DモデルをMagicaVoxelにインポートしてvox化する方法を紹介します。
-
UGEE-s640のレビュー【格安ペンタブレット】
約2,600円で買える格安ペンタブレットUGEE S640のレビュー。開封から描き心地、ドライバ設定まで。
-
omenゲーミングpcのスリープ時のフロントledを消す方法
OMENのゲーミングPCで、スリープ中にフロントLEDが光ったままになるのを消す設定方法を紹介します。
-
Amazon fire tvのスクリーンセーバーの時間の調節方法
Amazon Fire TVのスクリーンセーバーが起動するまでの時間を調節する方法を紹介します。
-
Amazon fire tvを再起動と初期化する方法
Amazon Fire TVを再起動する方法と、工場出荷状態に初期化する手順を紹介します。
-
Amazon fire tvのバージョン確認とアップデートする方法
Amazon Fire TVのソフトウェアバージョンの確認方法と、アップデートする手順を紹介します。
-
Wordpressで簡単にプラグインを使わずプロフィールを作る方法を紹介【画像付き】
WordPressでプラグインを使わずに、簡単にプロフィール欄を作る方法を紹介します。
-
Amazon fire stick tv 4kのバックグラウンドのアプリの停止方法
Fire TV Stick 4Kでバックグラウンドのアプリを強制停止して、動作の重さやフリーズを解消する方法を紹介します。
該当する投稿がありません。