这是一款基于React、Three.js 与 Draco 模型解码技术实现的带悬停起飞和配色切换的无人机展示页。白色舞台中央展示一架四旋翼无人机，指针进入指定区域时，模型升起并改变姿态，移开后回到停放状态。下方三枚缩略图用于切换外观，切换过程中还会播放离场与入场的飞行动作。页面作者信息已替换为 TZW。
无人机展示怎样响应悬停与三色切换
起飞与降落响应指针。旋翼、升降和倾斜配合，让产品展示不只是一段持续旋转。
三种配色独立选择。瓷白、石墨黑与酒红共用同一模型结构，状态切换带过渡过程。
核心资源已可本地加载。程序包、GLB 模型与 Draco 解码文件均随项目保存。
Draco压缩模型如何连接飞行动画
模型使用 Draco 压缩，加载器必须先取到解码器，才能还原网格。动画将旋翼、机体姿态和飞行阶段分开计算，React 负责选择状态与界面。原远程资源下载不稳定，已改成本地路径，避免只显示空白舞台或备用图片。
const [selected, setSelected] = (0, import_react4.useState)(0);
无人机模型、旋翼与镜头从哪里替换
主界面、配色和飞行参数位于 script.js，模型在 assets/drone.glb，渲染依赖与解码器在 vendor；页面布局在 style.css。更换模型时，需要同步确认机体和旋翼节点名称、比例以及相机取景。
无人机三维展示的运行与触屏疑问
只有平面缩略图，没有模型怎么办？
请检查 WebGL 支持，并确认 assets 与 vendor/draco 目录完整。模型需要解码，单独复制 HTML 和脚本不能完整运行。
手机上也能悬停起飞吗？
悬停面向鼠标设备。配色按钮可以触屏操作，但移动端的起飞触发方式需要结合实际浏览器确认，必要时改成明确按钮。
页面可以直接购买无人机吗？
不能。它是产品概念展示，说明弹窗与按钮不包含订单、支付或真实商品库存。
适合产品概念、工业设计和三维配色展示。下载后可查看悬停无人机的完整结构与参数，按自己的内容继续调整。
