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