YL

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.

相关提示词

标签