电蚊拍网页设计开源项目

本项目面向家电、消费电子、智能硬件及工业产品的新品发布与品牌官网场景。传统产品页多依赖静态图片和参数罗列，难以直观呈现产品结构、性能差异与品牌科技感，也难以形成用户停留与传播。项目以智能电蚊拍为样本，将365nm仿生紫光、2700V瞬时高压、三层安全电网、双模式和充电续航等卖点转化为连续可交互的空间叙事，适用于新品发布页、品牌升级、数字展厅、展会大屏和营销活动专题，帮助实体产品从“看参数”升级为“感受技术”。

网站采用七章节一镜到底的产品叙事：首屏在“紫外能量观测舱”中完成品牌与产品亮相；感知章节以紫光场和粒子聚集表现365nm诱蚊原理；能量章节支持点击触发2700V电弧、曝光脉冲、相机震动和放电音效；安全章节将三层电网沿空间拆解，直观说明双侧防护结构；模式章节可切换自动诱捕与手动挥拍；电源章节以0%-100%动态充电读条、内部能量扫描和绿色完成态展示续航；结尾完成结构闭合和品牌定格。页面同时支持滚动控制镜头、鼠标位置感应波纹、空间粒子扰动、背景氛围音乐、静音开关、画质档位、桌面/移动端响应式布局及弱设备动态降级。

我负责项目的创意定位、信息架构、视觉与镜头设计、产品3D结构、交互动效、声音系统、响应式适配、性能优化和最终验收。前端基于Vite与Three.js构建，使用GLTFLoader加载拆分节点的GLB产品模型，并接入DRACO、Meshopt与KTX2资源管线；通过PBR材质、ACES色调映射、软阴影和环境反射建立产品质感。自定义ScrollDirector把七个章节统一映射为0-1连续进度，使用Catmull-Rom曲线插值相机与产品状态，保证滚动可逆且转场连续。GLSL Shader驱动最高65,536个GPU粒子、体积紫光、电弧和鼠标波纹；EffectComposer组合选择性Bloom、景深、色彩分级、色差、胶片颗粒、暗角与FXAA。Web Audio API实时生成低音量BGM、环境嗡鸣、章节转场和放电声，并随滚动、距离和能量状态变化。项目还实现High/Medium/Low三级画质、帧率监测自动降级、减少动态效果模式、页面隐藏暂停、WebGL上下文恢复和静态兜底。