提示词:帮我构建一个塔式风扇的高质量 3D 产品展示网页,并在完成后部署上线,返回可访问的线上地址。参考图:工作目录下的 风扇.png 是本次需要还原的塔式风扇。请先读取并仔细分析参考图,严格按照图片中的产品外观进行建模,包括整体配色、结构比例、材质质感、塔身轮廓、顶部双旋钮、正面纵向格栅、出风格栅后方的隐藏式贯流风轮、宽扁椭圆底座以及其他可见细节。请先读这张图,严格按它的配色、比例和细节还原。特别注意:这款产品没有传统圆形扇叶和圆形防护网,但正面纵向出风格栅后方具有隐藏式贯流风轮。必须制作贯流风轮及其旋转动画,不得将产品做成完全没有内部动力结构的空心风道,也不得添加外露的圆形扇叶。构建要求(Build Requirements)
- 支持鼠标和触屏旋转、缩放及查看模型,可使用 OrbitControls。
- 页面在桌面端和移动端均应正常显示和操作。
1. 主体模型优先核心目标是准确还原塔式风扇的形状、比例、结构和材质,并符合真实产品的物理规律。2. 丰富场景细节除风扇主体外,设计一个能够衬托产品的高品质展示环境,例如极简客厅。3. 交互组件与动画根据塔式风扇的真实功能,为页面增加丰富但直观的交互。比如:可动部件动画、旋转展示、预设视角切换、开机和关机、三档风速调节、左右摇头功能开关、定时调节、显示或隐藏气流效果所有动画都要平滑自然。4. 测试与截图迭代你必须对最终作品保持极高的质量要求。完成初版后,应在浏览器中实际运行并测试,从正面、侧面、背面、俯视、近景和移动端等不同视角持续截图检查,逐步修复:模型比例错误摇头机构运动不合理材质透明度或反射异常阴影悬空操作面板遮挡模型移动端布局溢出页面加载错误动画卡顿控制按钮失效反复对照 风扇.png 核对产品的配色、结构和关键外观特征,持续迭代,直到作品达到高质量商业产品展示页面的标准。5. 技术选择根据实现效果选择合适的技术栈,例如:Three.js 或 React Three FiberWebGL / WebGPUHTML、CSS、JavaScript 或 TypeScriptGSAP 或其他动画方案Web Audio API程序化几何体、SVG、CSS 特效或 GLSL Shader可以组合使用多种技术,但需要保证项目结构清晰、运行稳定、加载速度合理。本次额外硬性要求1. 真实的风速档位风扇至少支持关闭、低速、中速和高速四种状态。不同档位必须明显改变内部贯流风轮的转速,并使用平滑的加速和减速过程。关闭风扇后,贯流风轮应受惯性影响逐渐停止,不能瞬间静止。2. 左右摇头功能风速与摇头旋钮具有 8 个物理档位,依次为:关闭 A、低速不摇头、中速不摇头、高速不摇头、关闭 B、低速摇头、中速摇头、高速摇头。两个关闭档位均停止送风和摇头。开启摇头后,上方塔身应相对底座,围绕底座中心的垂直轴左右往复旋转。底座始终保持固定,不能跟随塔身一起转动。3. 顶部双旋钮可以交互调节顶部两个机械旋钮需要支持鼠标拖动、触屏滑动或点击旋转:定时旋钮:调节关闭、30 分钟、60 分钟、90 分钟和120 分钟功能旋钮:调节关闭、低速、中速、高速以及对应的摇头模式旋钮应具有档位吸附、合理的角度限制、阻尼感和逐档“咔哒”音效。网页控制面板与实体旋钮状态必须双向同步。4. 动态气流可视化风扇启动后,在正面纵向出风格栅前方显示克制、半透明的宽幅动态气流效果。气流的运动速度和强度需要随风速档位变化,并可以由用户单独关闭。气流不能遮挡产品主体,也不能做成夸张的实体圆柱。5. 风扇运行音效使用 Web Audio API 合成轻微的电机和风噪,无需外部音频文件。音量和音调应随风速变化。音效默认保持静音或在用户首次主动点击开机后播放,以符合浏览器的自动播放限制,并提供清晰的静音按钮。6. 部署交付完成开发与测试后:
- 创建生产构建
- 确认线上环境可以正常加载 3D 模型、材质和全部交互
- 将网页部署到合适的托管平台
- 返回最终可公开访问的线上地址
- 同时说明项目的运行命令、构建命令和主要文件位置
不要只提供代码或本地预览,必须实际完成部署并验证线上页面可以访问。