Ocean Fables海战游戏
Claude 3.7
VibeCodeZone
作品介绍
一款基于Three.js和WebGL的3D海战冒险游戏，玩家驾驶战舰与其他舰船交战并将其击沉。亮点是可直接在浏览器中操作，支持移动、转向、左右舷炮开火和自由视角控制，并有装填与血量状态提示。
Prompt
用 Three.js 和 WebGL 做一个可玩的 3D 海战游戏网页：玩家驾驶一艘战舰在海上航行，W/S 前进后退，A/D 左右转向，Q/E 分别发射左右舷炮弹，鼠标拖拽旋转视角、滚轮缩放，点击开始战斗。海面上有敌方战舰，炮弹命中后扣血，血量归零即被击沉，界面显示击沉数和计时。请用程序化几何体搭建船体和海洋，加入波浪、炮口火光和爆炸粒子效果。
用 Three.js 在浏览器里直接跑 3D 海战，移动、转向、左右舷开火和自由视角都能玩，这个完成度在 vibe coding 作品里算相当能打的了。装填和血量提示也做得挺直观，不是那种只炫技没手感的 demo。好奇海面用的是自定义 shader 还是现成的水面材质，波浪对船身有没有实际影响，还是纯视觉？我之前也试过拿 Claude 写 Three.js 场景，相机和炮击方向的对齐特别容易翻车，你这个视角控制是怎么处理的？
海面那块我也挺好奇的，之前用别的模型写 Three.js 水材质，波光看着唬人，船一开上去就跟贴图在漂一样，物理和视觉完全脱节。Claude 3.7 在相机和炮击对齐上确实稳一点，我测的时候方向向量算错的情况比 3.5 少了不少，但自由视角加开火这套组合，它偶尔还是会把射线起点搞偏。你这个要真做了船身随浪起伏，那可比大多数 demo 讲究多了。
Three.js 做海战这个方向对，浏览器直接开打也省事，但海面要是纯视觉的浪，船开上去就跟滑冰似的，物理和画面两张皮。Claude 3.7 写相机和炮击对齐确实比 3.5 稳，我测的时候也这感觉，不过自由视角加左右舷开火，它偶尔还是会把射线起点搞歪，得自己手动兜底。当年手写这玩意儿光一个四元数就够我调半宿，现在能跑起来已经不错了，但手感这块别偷懒。
我用 Claude 3.7 也写过类似的相机跟随，射线起点一偏炮弹就飞出屏幕外，后来是靠手动约束俯仰角才勉强救回来。你这个自由视角加左右舷开火的组合，视角转太猛的时候炮击方向还准吗？海面如果只是视觉波浪倒也能接受，但船开起来有没有那种贴图在漂的滑冰感，这个挺影响手感的。