threejs尝试开发一个RPG游戏

最近尝试用 Threejs 开发一个 RPG 游戏Demo。没有特别宏大的目标,就希望实现角色在地图上的路线规划 和 简单的战斗打怪。基于此仍然遇到了不小的技术挑战和性能瓶颈

Live: knight-adventure.vercel.app/

Code: github.com/luosijie/kn...

场景构建

这次场景和角色使用了开源的设计素材

最终在 Blender 创建了一个小场景

导出了的素材包括了

  • 场景的 glb 文件
  • 渐变贴图
  • 用于路线规划的navmesh

角色处理

从网上下载的角色一般不会直接拿来使用

  • 需要自己添加或修改一下模型,比如添加希望出现的道具
  • 还要删除多余的动画预设,最大限度减少资源的体积

路径规划

刚开始用的是比较常用的库 three-pathfinding,发现在处理动态路障方面比较麻烦。

后来发现了 recast-navigation-js 可以比较顺利的处理当前的场景

问题与挑战

用 Threejs 开发类似的项目,遇到的主要挑战还是 性能问题 。

即便是在这样简单的场景下,在去除阴影效果的前提下,也无法同时容纳很多 动画绑定的角色。

如何在有限的资源和性能约束下,做出流畅又丰富的游戏体验。将是 游戏设计者 和 开发者 面对的问题

相关推荐
魂断蓝桥66616 小时前
如何用 three.js 把 3D 消防演练落到一栋楼里——第一课:场景搭建与火情定位
webgl·three.js·3d建筑·物联网3d·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·3d定位、三维室内定位、3d建筑·3d消防
莪_幻尘1 天前
4 个 3D 游戏,总体积 3.82MB:拆解 Claude 的 one-shot 工程链路
前端·ai编程·three.js
总要学点什么2 天前
第96篇:三维数据加载-城市建筑白模样式+着色器——让色带按体量上色,最白的那档却涂不上去
前端·gis·webgl·cesium·着色器·空间分析·白模
誰在花里胡哨3 天前
Qoder + Blender MCP:对话建模到网页渲染
ai编程·three.js·mcp
总要学点什么3 天前
第97篇:三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去,快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
总要学点什么4 天前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
Chen7327 天前
WebGPU 性能优化:Three.js 千万级点云调度与渲染实践
性能优化·three.js
柳杉7 天前
没有写一行代码:我用 Codex 制作 了一个 3D 智慧展厅可视化大屏
前端·ai编程·three.js
只睡四小时8 天前
Three.js Sub-tick:漏判 60.7%→0
开发语言·javascript·性能优化·ecmascript·游戏开发·three.js·碰撞检测
小和尚同志11 天前
54.6k star 的 Multica: 集多 Agent 和看板于一体的 AI 平台
人工智能·aigc·three.js