AI编程实战：30分钟实现Web 3D船舶航行效果

前言

随着客户对展示效果的要求日益增高，如今不仅需要网页设计美观大方，还需要具有强烈的视觉冲击力以吸引访者的注意。

为了避免大家遇到这样的情况大脑空白，我们今天提前尝试一下 Web 3D 的开发。

大家不要担心无法完成，我和大家一样，Web 3D 的经验几乎为零，我比你们好的一点就是我之前听说过。

但是，我们有 AI 辅助，我感觉我们可以的。

背景及任务

背景

本次分享内容没有太多的业务逻辑。

技术环境：Vue2 + JavaScript。

任务

实现一个船在水面上航行的 Web 3D 效果。

操作过程

本次分享依然采用 Cursor + Claude 3.7 实现，大部分操作都是在 Composer 模式下完成，只有单纯的问答为了避免打乱 Composer 对话历史，我会单开 Chat 进行。

功能分析

简单问了下 AI，大家都在使用 Three.js，我们跟随大众。

生成初稿

由于没有相关基础，我们可以在提示词中说明，这样给出的结果会更加容易上手。

提示词：

复制代码

我现在要实现一个船在水面上航行的3d效果，基于webgl实现，使用three.js框架。
我没有一点three.js基础，请手把手指导我完成这个需求。

结果：

生成过程主要包括以下步骤：

扫描工程文件结构。
安装 three.js。
实现船舶3D代码。
创建谁纹理文件，直接从网上下载。
增加控制逻辑，优化场景。
优化加载状态和嘉爱进度条。

整个过程非常详细，就不说 Compoer 模式直接嵌入开发，就只是看给出的结果，也比网上教程效果好太多了。

效果：

目前，"船"有点简陋，但是整体的场景和控制逻辑真的很赞。

更换船舶模型

针对我们简陋的"船"，优化一下。

本来打算让 Cusor Compose 直接帮我解决，但是，Claude 3.7 知识内的船舶模型都过期了，只能通过 Cursor Chat 模式手动下载模型。

按照 AI 的指导，去 sketchfab.com/feed 下载了船舶的模型放在工程的 public\models\titanic.glb 中。

这文件名要是没认错，应该是"泰坦尼克"。

提示词：

arduino 复制代码

将船舶更换为已下载的glb模型 public\models\titanic.glb

结果：

效果：

先给大家乐呵下，下面的截图是更换船舶模型后第一次生成代码的效果。

我第一反应是，"泰坦尼克"这个名字可能真的有毒，还没开始，就沉了。

不过，不是什么大事，AI 会出手的，小调一下。

优化船舶位置

上下文：

直接截了个图。

提示词：

复制代码

请调整船的高度，现在像沉在水下了。

结果：

直接增加了一个"船高度调整"滑块和"船大小调整"滑块，方便我们调试。

效果：

还不错吧。

静态图，看不出来，船一直在航行中的。

总结

本次分享，我们实现了一个 Web 3D 效果，虽然很简陋，但还是很令人兴奋的。

毕竟，不到30分钟，一个完全不懂相关知识的程序员就能完整实现一个这样的样例，还通过 AI 的交互过程学会了很多知识，真的很不错了。