![[JavaScript] 複数ゲームを切り替えるためのシンプルなシーン設計](https://assets.lain-lab.com/images/uploads/javascript-game-switching-design.webp)
[JavaScript] 複数ゲームを切り替えるためのシンプルなシーン設計
複数ゲームを切り替えるためのシンプルなシーン設計
ARCHIVE_INDEX / PAGE_30
TOTAL_ITEMS: 702
![[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ](https://assets.lain-lab.com/images/uploads/javascript-threejs-ball-bound-animation.webp)
[JavaScript] Three.jsでボールバウンドアニメーションを実装する｜Canvas2D実装の移植ログ
Three.jsでGameBox内に複数ボールのバウンドアニメーションを実装する過程を解説。Canvas2D由来のロジックをVector3ベースに移植し、deltaTime管理、壁反射、ボール同士の衝突判定、残像表現を行う。
![[JavaScript] three.jsで作る「箱の中のゲーム」設計：シューティング編 (VR / PC両対応)](https://assets.lain-lab.com/images/uploads/javascript-gamebox-simple-shooting.webp)
[JavaScript] three.jsで作る「箱の中のゲーム」設計：シューティング編 (VR / PC両対応)
three.jsとJavaScriptで構築したGameBox構造を使い、2作目となるシンプルなシューティングゲームを実装。VRとPCの両方に対応したUI制御、ゲームの開始・終了・リスタート、差し替え可能なGameModule設計について解説する。
![[JavaScript] Three.jsで花火を実装して分かった、プロっぽく見せるための設計](https://assets.lain-lab.com/images/uploads/javascript-threejs-firework-particle-design.webp)
[JavaScript] Three.jsで花火を実装して分かった、プロっぽく見せるための設計
Three.jsで花火を実装する過程で遭遇した粒子が消えない問題、filterの罠、PointsとBufferGeometryの使い方、減速して止まり落下する演出など、プロっぽく見せるための考え方と実装ポイントを整理した記録。
![[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順序、ゴーストが生まれる仕組みを実例付きで解説する。
![[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)との対話録 ～ オープンソースとフリーソフト ～