SuperAPI AI 工具集

three-webgl-game

编程与开发

查看项目

更新于 10-16 03:05

技能介绍

用途:该技能用于插件中默认的非 React 3D 路径,提供一套有明确取向的浏览器 3D 技术栈,而非泛泛的 WebGL 建议。适用于纯 TypeScript 或 Vite 项目、需要直接命令式控制渲染循环、用户明确要求 Three.js,或运行时需要类似引擎般控制场景、相机、加载器与物理的场景。若 3D 场景位于现有 React 应用中,应改用 react-three-fiber-game;若主要问题是已发布资源优化而非运行时代码,或用户明确选择 Babylon.js、PlayCanvas,则不适用。

主要能力与规则:技术栈包含 three、TypeScript、Vite、GLB 或 glTF 2.0 资源、GLTFLoader/DRACOLoader/KTX2Loader 等加载器、Rapier JS 物理、SpectorJS 调试,以及用于 HUD、菜单和设置的 DOM 覆盖层。核心规则要求把模拟状态放在 Three.js 对象之外,游戏规则、AI、任务状态、计时器和进度不应存在于网格或材质中;渲染图仅作为适配器,场景图、相机、材质、加载器和后处理属于视图层。相机行为需显式管理,轨道、跟随、追逐、轨道式与第一人称各有控制边界。UI 默认使用 DOM,除非表现必须依赖 WebGL。默认发布模型格式为 GLB 或 glTF 2.0,不以 DCC 原生格式构建运行时。有实际 3D 物理或碰撞响应时使用 Rapier,而非临时碰撞代码。首个可玩视图保持低界面密度,默认一个紧凑目标或状态簇加临时提示,长文本、背景设定和控制说明折叠。

使用方式与结构:初始脚手架面向探索、移动和角色控制原型,采用稀疏外壳:一个边缘对齐的目标标签、一个临时控制提示、一个可选紧凑状态条。推荐模块边界包括 simulation/(规则、进度、状态、AI)、render/app/(渲染器、场景、相机、尺寸调整、上下文生命周期)、render/loaders/、render/objects/、render/materials/、physics/(Rapier 世界、刚体、碰撞体与模拟桥接)、ui/(DOM 覆盖层与菜单)、diagnostics/(调试开关、性能探针与捕获钩子)。

适用场景:探索演示、轻量 3D 战斗原型、载具或移动原型、带玩法的场景化产品或世界展示、以材质光照或后处理为主的体验,以及相机移动和深度可读性为核心的 3D 游戏。

限制与注意事项:该插件整体仍以 2D 为先,不应声称其 3D 深度与 Phaser 路线相当。需显式处理尺寸调整,预期 WebGL 上下文丢失与恢复,为脆弱 GPU 路径保留降级模式,关注纹理大小、几何数量、绘制调用增长与后处理开销,场景异常或帧成本不明时使用 SpectorJS。后处理应可选且可度量,不应损害玩法可读性。优先使用标准 Three.js 材质与正确光照,仅在视觉目标确实需要时使用自定义着色器。具体安装命令、版本号与收费信息暂未提供。