用 npm + Three.js 做一颗西瓜：把夏天的清凉感放进浏览器

一颗西瓜，为什么值得用 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”。在提示词里补上三件事：第一视觉要是什么，用户能怎么交互，以及哪些视觉错误必须避免。前两项决定作品是否好玩，最后一项往往决定作品像不像成品。