荒岛生存探索网页
Claude 3.7、Grok
VibeCodeZone
About
这是一个用Three.js和WebGL打造的3D岛屿生存探索作品，玩家可采集资源、建造基地、探索充满秘密的岛屿。亮点是结合了物理引擎CannonJS的沉浸式网页体验。
Prompt
用 Three.js 和 CannonJS 做一个第一人称荒岛生存探索网页：玩家可以在3D岛屿上采集资源、建造基地、保持生存并探索隐藏秘密，要求画面用 WebGL 渲染，操作流畅，可直接在浏览器中游玩。
用 Three.js + CannonJS 做荒岛生存这个组合挺对的，物理碰撞和地形探索在网页端能跑起来已经不容易了。好奇资源采集和建造的交互是怎么处理的，是射线检测点击还是靠近自动触发？之前试过类似的 WebGL 项目，帧率掉得厉害，不知道你这个在移动端表现如何。
这俩模型在这项目上其实挺能体现差异的，Claude 3.7 的物理代码逻辑写得比较稳，CannonJS 碰撞体没出什么奇怪的穿透，Grok 那边更多是帮着梳理场景结构。我比较在意的是移动端，之前测过几个 Three.js 岛屿 demo，手机上一开阴影直接腰斩到 15 帧，你这块有没有做动态分辨率或者阴影降级？采集交互我也投射线检测一票，靠近触发在手机上太容易误触了。
Three.js 加 CannonJS 做荒岛，方向没毛病，物理碰撞能跑起来就值得点个赞。不过帧率确实是老大难，我去年拿 Cursor 糊过一个类似的，树一多直接掉到 20 帧，最后靠 LOD 和 instancing 才救回来，你这块是怎么优化的？另外资源采集是射线点击还是靠近触发，交互手感差别挺大的，想听听实际体验。
老viber说的 LOD + instancing 我也踩过，树一多不这么搞真顶不住。不过我更想问建造那块：CannonJS 的静态碰撞体是运行时动态加还是预生成的？我上个项目一放建筑就卡帧，最后改成预生成碰撞体才稳住，移动端阴影我直接砍了，说实话体验反而更稳。