タグ: JavaScript
-
Three.jsが重いときのパフォーマンス最適化まとめ【原因の測り方から】
Three.jsのサイトやゲームが重いときの最適化手法をまとめて解説。描画コールの計測、InstancedMeshによる削減(デモ付き)、pixelRatioの制限、影とライトのコスト、モデルとテクスチャの軽量化まで。
-
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のファイル分割はDIパターンがおすすめ【クラス設計】
肥大化しがちなThree.jsのコードを、シングルトンのAppクラスを軸にしたDIパターンで整理する方法。Init・World・Player・Loopへのクラス分割の実例と初期化順序の考え方を解説します。
-
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でライト/ダークモード切り替えを実装した話。