BOOTSTRAP · 单文件 HTML
双相机主视图 + 正交小地图Perspective main + orthographic minimap
主透视相机渲染全屏,第二 OrthographicCamera 渲染角落小地图,同步目标点。
效果预览
轻量 WebGL 示意(非完整工程实现),可拖拽旋转;完整逻辑见下方提示词。
预期产出 · Returns
单 HTML:右下角 minimap 显示玩家位置与朝向指示。
适合用在哪
游戏小地图、园区总览、策略类俯视导航。
容易踩的坑
- 忘记 setScissorTest 会导致小地图绘制到全屏。
提示词 · Prompt
单文件 HTML + Three.js 双相机:
1) 主 PerspectiveCamera 全屏;角落 viewport 用 scissor + setViewport 渲染 OrthographicCamera 俯视;
2) 场景:地面 Grid + 玩家 mesh + 若干障碍;
3) WASD 移动玩家,小地图显示玩家位置与 forward 箭头;
4) resize 时更新两个相机的 aspect/viewport;
5) 注释 scissor test 与 clear 顺序;
6) 中文注释。
完整 HTML。
Single HTML dual camera: perspective main + orthographic minimap with scissor viewport.