![[JavaScript] Three.jsでパーティクルが消えない本当の原因と正しい後始末](https://assets.lain-lab.com/images/uploads/javascript-threejs-particle-filter-ghost-bug.webp)
[JavaScript] Three.jsでパーティクルが消えない本当の原因と正しい後始末
Three.jsでparticleをfilterで削除したのに消えない原因は、MeshをSceneからremoveする前に参照を失っていることだった。配列管理とScene管理の違い、正しいdispose順序、ゴーストが生まれる仕組みを実例付きで解説する。
ARCHIVE_INDEX / PAGE_20
TOTAL_ITEMS: 582
![[JavaScript] GameBoxアーキテクチャで作る Three.js ブロック崩し（実装完了編）](https://assets.lain-lab.com/images/uploads/javascript-threejs-gamebox-breakout-complete.webp)
[JavaScript] GameBoxアーキテクチャで作る Three.js ブロック崩し（実装完了編）
前回紹介したGameBoxアーキテクチャを土台に、Three.jsでブロック崩しを実装完了まで構築する。差し替え可能なGameModule設計、Box3による当たり判定、CanvasTextureを使ったGAME OVER表示、UIボタンとキー入力の統合など、WebXRも見据えた構成を解説する。
![[JavaScript] フレームは飛ぶ ― deltaTime を信じた結果、世界が壊れた話](https://assets.lain-lab.com/images/uploads/javascript-frame-skip-delta-time-problem.webp)
[JavaScript] フレームは飛ぶ ― deltaTime を信じた結果、世界が壊れた話
requestAnimationFrame / setAnimationLoop ではフレーム間隔は保証されない。deltaTime がワープすることで起きる物理破綻と、started フラグ・delta clamp による現実的な解決策を整理する。
![[JavaScript] Three.js / WebXRで差し替え可能なゲーム箱を作る（3D空間でブロック崩しゲーム）](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-gamebox-architecture.webp)
[JavaScript] Three.js / WebXRで差し替え可能なゲーム箱を作る（3D空間でブロック崩しゲーム）
Three.js と WebXR を使って、VR空間に配置できる差し替え可能なゲーム用ボックスを実装。ブロック崩しを例に、THREE.Group を基軸にした設計、ゲームモジュールの分離、2Dロジックを3D空間で動かす考え方を整理します。
![[JavaScript] Three.js + WebXR で動画プレイヤーUIをクラス設計する](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-video-playlist-ui.webp)
[JavaScript] Three.js + WebXR で動画プレイヤーUIをクラス設計する
Three.js と WebXR を使い、VideoTexture をクラス設計で管理し、プレイリスト再生・曲送り・サムネ表示・UI操作までを一体化した動画プレイヤーを実装する方法を解説します
![[JavaScript] Three.jsでPMX / VMDを読み込んでアニメーションを再生する](https://assets.lain-lab.com/images/uploads/javascript-threejs-pmx-vmd-mmdloader-vmd-animation.webp)
[JavaScript] Three.jsでPMX / VMDを読み込んでアニメーションを再生する
Three.jsでPMX / VMDを扱う方法を整理。MMDLoaderによるモデル読み込み、VMDモーションの適用、MMDAnimationHelperでの更新処理、VMDなしの場合の扱い、physics設定の注意点を解説する。
![[Human x AI] ChatGPT(5.2)との対話録 ～ 数学マジシャン ～](https://assets.lain-lab.com/images/uploads/ai-dialogue-2025-12-26-2.webp)
[Human x AI] ChatGPT(5.2)との対話録 ～ 数学マジシャン ～
[Human x AI] ChatGPT(5.1)との対話録 ～ 数学マジシャン ～
![[Human x AI] ChatGPT(5.2)との対話録 ～ オープンソースとフリーソフト ～](https://assets.lain-lab.com/images/uploads/ai-dialogue-2025-12-26.webp)
[Human x AI] ChatGPT(5.2)との対話録 ～ オープンソースとフリーソフト ～
[Human x AI] ChatGPT(5.1)との対話録 ～ オープンソースとフリーソフト ～
![[JavaScript] Three.js + VR でキャラクターの上にセリフを表示（Canvas＋Sprite）](https://assets.lain-lab.com/images/uploads/javascript-threejs-character-dialogue-sprite.webp){kind=icon}
[JavaScript] Three.js + VR でキャラクターの上にセリフを表示（Canvas＋Sprite）
Three.jsでCanvasTextureとSpriteを使い、VR/PC両対応でキャラクターの頭上にセリフを表示する方法を解説します。改行対応や簡単な装飾、データ駆動の設計についても触れます。
![[JavaScript] VRにおける衝突判定の考え方（Three.js / WebXR）](https://assets.lain-lab.com/images/uploads/javascript-vr-collision-detection-threejs-webxr.webp)
[JavaScript] VRにおける衝突判定の考え方（Three.js / WebXR）
VRではなぜ衝突判定が直感通りにいかないのか。Three.jsとWebXRを使ったVR開発において、playerRig基準の衝突判定設計、ルームスケール移動との関係、Box3とMatrix4の正しい使い分けを実装ベースで解説する。
![[JavaScript] Three.js WebXR：VRコントローラのレーザーポインタでUIボタンを押す（Raycaster入門）](https://assets.lain-lab.com/images/uploads/javascript-threejs-webxr-raycaster-ui-button.webp)
[JavaScript] Three.js WebXR：VRコントローラのレーザーポインタでUIボタンを押す（Raycaster入門）
Three.jsのWebXRでVRコントローラのレーザーポインタを表示し、RaycasterでUIボタン（Plane）へ当たり判定を行い、トリガー入力でonClickを発火させる実装を解説。レイ方向の毎フレーム更新（matrixWorld→origin/direction）とinputSources/gamepad入力の取得方法、よくある落とし穴もまとめる。
![[JavaScript] Three.js Vector3完全理解 —— 3D数学の基礎から実践までを一気に掴む](/images/uploads/javascript-threejs-vector3-complete-guide.webp)
[JavaScript] Three.js Vector3完全理解 —— 3D数学の基礎から実践までを一気に掴む
Three.jsにおけるVector3は、座標・方向・速度・力・法線など、3D空間を扱うすべての計算の中心にある。本記事では、Vector3の基礎から応用、便利な使い方、ハマりがちな罠まで体系的にまとめます。