![[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）](https://humanxai.info/images/uploads/javascript-threejs-minimap-ui-frame-circle-mask-clock.webp)
[JavaScript] Three.js RenderTarget ミニマップを“ゲームUI”にする（円形マスク＋フレーム＋時計表示）
2026-01-31 | lain
前回の RenderTarget + サブカメラ方式ミニマップを、円形マスク（alphaMap）とUIフレーム重ね、CanvasTexture で日時・称号テキストまで表示する“ゲームHUD”へ進化。renderOrder / depthTest / toneMapped のハマり所も整理する。
カテゴリ：Minimap
![[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転](https://humanxai.info/images/uploads/javascript-threejs-minimap-render-target-subcamera-smooth-rotation.webp)
[JavaScript] Three.jsでミニマップ実装：サブカメラ＋RenderTarget＋カーナビ式スムーズ回転
2026-01-31 | lain
Three.jsでゲーム向けミニマップを実装。俯瞰サブカメラの描画をWebGLRenderTargetに出力し、Planeへ貼り付けて画面左上に固定。さらにキャラクターの進行方向に合わせてミニマップを回転させ、atan2補正＋lerpで急回転を滑らかにする。