一颗西瓜，为什么值得用 3D 来做？
因为它不只是一个红绿配色的图标。切开的果肉、薄薄的白瓤、深浅不一的瓜皮纹、黑色瓜籽和刚从冰箱拿出来的水珠，才是大家对“夏天第一口西瓜”的共同记忆。
这次我用 npm + Three.js 做了一个可交互的西瓜小场景。打开页面，西瓜会缓慢转动；拖动鼠标或手指可以换角度；点击“清凉声场”还能打开轻微的环境音。重点不在堆功能，而是让它看起来更像一颗熟透、冰镇过的西瓜。
可复用提示词（专业版）
下面这版提示词可直接用于同类创意前端项目。它避免只描述“画什么”，而是把交付目标、技术边界与验收标准一次说清。
角色：你是一名兼顾视觉品质与工程实现的创意前端开发者。 任务：使用 npm、Vite 与 Three.js 制作一个响应式 3D 夏日西瓜互动页面，用“冰镇、清甜、多汁”的视觉语言营造清凉感。 交付要求： 1. 首屏直接展示可交互的切开西瓜，不制作营销型落地页； 2. 使用真实 Three.js 几何、光照和材质完成场景，不以静态图片替代主体； 3. 西瓜应包含成熟深红果肉、边缘自然过渡的薄白瓤、不规则深浅瓜皮纹、黑色瓜籽与凝露； 4. 添加克制的薄荷叶、柔和夏日光线与中文信息排版，画面保持干净、留白充足； 5. 支持鼠标和触摸拖拽旋转，桌面端与移动端均应正常显示； 6. 纹路不能等距重复；果肉不能发白或显生；不得使用会让远景灰蒙的雾化效果。 验收标准： - 画面第一眼能辨识为成熟、冰镇的切开西瓜； - 交互不遮挡正文，移动端文本与模型不重叠； - 执行 npm run build 可以成功生成生产版本。从“有个西瓜”到“像颗西瓜”
第一版完成后，画面已经有半颗切开的瓜、果肉、籽和交互，但它并不够真实。后续的几次调整，反而是这次制作最有价值的部分。
先是移除了右侧失真的额外切片。它原本想丰富画面，实际却破坏了视觉重心。然后重做瓜皮：不再用等距、完全相同的几何条纹，而是在 Canvas 上生成宽窄、弯曲、明暗都不同的纵向生长纹，再作为纹理贴到半球瓜皮上。
果肉也经历了几次调色。太浅会像没熟，白瓤过宽会显得生硬，红白之间有硬边又会像塑料模型。最终用径向渐变把深红果肉、浅红过渡、淡黄白瓤和绿皮边缘连接起来，并将红瓤扩大到切面的大部分面积。
还有一个容易被忽略的细节：早期场景开启了雾效。它本意是让背景更有空间层次，实际让远处像蒙了一层白纱。去掉雾效后，西瓜的颜色、对比度和轮廓都干净很多。
这件事提醒我，视觉类生成最重要的不是第一轮“生成完成”，而是根据真实观感持续收敛。用户说“看着没熟”“纹路都一样”“像有雾”，这些反馈都足够具体，能直接对应到材质、纹理和灯光三个技术层面。
关键实现
场景的主体是一颗压扁的半球体：下半部分使用球体几何表现瓜皮，顶面使用圆形切面表现果肉。黑色瓜籽是多个缩放过的球体，凝露使用透明度更高、粗糙度更低的物理材质。
瓜皮和果肉没有依赖外部图片。代码在浏览器中创建 Canvas：
- 瓜皮 Canvas 生成不同宽度、不同弯曲方向的绿色条纹；
- 果肉 Canvas 使用径向渐变，从深红中心平滑过渡到薄白瓤；
- 两张 Canvas 都转换为
THREE.CanvasTexture，再贴到对应网格上。
这样做有两个好处：第一，不需要额外下载贴图，页面启动更轻；第二，纹理的颜色、比例和随机性都可以直接通过代码调整。对这种风格化 3D 小项目来说，它比临时找一张图片更容易控制。
交互部分没有引入额外控制器：监听指针按下和移动事件，把手指或鼠标的位移映射到模型的水平旋转和俯仰角即可。模型在不拖动时保持非常轻微的自动旋转，既能让首屏“活起来”，也不会抢走阅读文本的注意力。
本次使用的技术栈
| 名称 | 用途 |
|---|---|
| npm | 安装与管理three、vite依赖 |
| Vite | 本地开发服务和生产构建 |
| Three.js | 负责相机、光照、半球瓜皮、果肉、籽、凝露与渲染循环 |
| CanvasTexture | 代码生成不规则瓜皮纹理和自然果肉渐变 |
| Web Audio API | 通过按钮打开轻微的环境声 |
西瓜页面的核心视觉完全由 Three.js 几何、光照与 Canvas 纹理生成，不依赖静态素材来替代主体。这样既能保留实时旋转交互，也便于持续调整果肉颜色、瓜皮纹路与水珠质感。
结果与复盘
这个小作品最终只有一个主题：让用户在夏天打开网页时，先看到一口清凉的西瓜。
它没有复杂的剧情，也不需要很重的 UI。成熟红瓤、自然瓜皮、几颗籽、一点水珠，再配上可以亲手转动的 3D 视角，就足够把情绪传达出来。
如果你也想用 AI 或 Three.js 做一个小型网页体验，建议别只写“给我做一个 XX”。在提示词里补上三件事：第一视觉要是什么，用户能怎么交互，以及哪些视觉错误必须避免。前两项决定作品是否好玩，最后一项往往决定作品像不像成品。
