「15-汽车3D配置器 THreeJS」汽车3D配置器 THreeJS 开源项目/~e77c3ZsbvP~:/链接https://pan.quark.cn/s/3057d7265895面向 Web 的实时 3D 汽车工作室。React 19 · Three.js · Vite · MIT 许可证 · 在线工作室作者Enes Kaymaz · XTwitter./docs/mustang-studio.pngFormDrive Mustang 工作室所有可动面板处于开启状态项目概述FormDrive 是一个开源的、基于组件的汽车配置器围绕真实的 PBR 车辆资产构建。它将克制的玻璃拟态界面与实时 Three.js 场景、车辆专属可动部件、材质配置、影棚灯光以及确定性相机视角结合在一起。本应用不是“单文件 3D Demo”而是作为面向生产的 React Three Fiber 架构的参考实现。车辆阵容车辆年份独立控制部件外观控制Ford Mustang GT2005左右车门、左右车窗、引擎盖、后备厢车漆、光泽、轮毂Tesla Model 32018四门、四窗、前备厢、后备厢车漆、光泽、轮毂K15 Concept Coupé2021左右车门、左右车窗、引擎盖、后掀背车漆、光泽、轮毂所有可动部件都使用车型专属的枢轴与定义。复合网格如 Mustang 的分层左车窗会被当作单个物理部件进行动画与遮罩处理。核心特性基于WebGPU​ 的实时 PBR 渲染自动回退到 WebGLReact 19 React Three Fiber​ 组件化架构三套独立配置的整车资产每款车型的车门 / 玻璃 / 引擎盖 / 后备厢运动定义5 种车漆质感 3 种轮毂方案Dusk黄昏、Gallery展厅、Noir暗调三种灯光环境投影式头灯与自发光尾灯影棚 / 正面 / 侧面 / 细节动画相机鼠标 / 触摸轨道控制预设可中断PNG 影棚截图导出响应式英文界面键盘焦点态可见电影级首次访问加载器真实资源字节进度 缓存感知跳过针对每辆车、每个可动部件的自动化浏览器校验分段式车辆加载切换车辆时当前车保持可见加载架构FormDrive 首屏只下载 Mustang 模型。选择其他车时在隔离的后台线程加载当前车保持挂载并可交互。仅当目标 GLB 成功解析后才提交切换下载失败绝不会让工作室白屏。已打开过的模型留在内存 glTF 缓存里再次切换秒回但不会在后台渲染。首次成功加载时开场序列报告真实传输的模型字节数从 0 到 100 可见推进后再揭幕工作室。之后访问会写入一个持久化就绪标记跳过开场序列直接进工作室。模型加载阶段文件大小Mustang GT首屏场景7.31 MiBModel 3选中时加载21.62 MiBK15 Concept选中时加载11.23 MiB该策略针对“三车小目录”做了优化。若扩展到大型目录应加有界 LRU 缓存与显式 Three.js 资源销毁。技术栈层技术应用React 19、React DOM3D 组合React Three Fiber、Drei渲染器Three.js WebGPUWebGL 回退状态Zustand构建Vite 7资产GLB/glTF、PBR 材质校验Chrome DevTools Protocol 脚本快速开始环境要求Node.js 22 或以上npm 10 或以上较新的 Chromium 系浏览器 / Safari / Firefox安装与运行git clone https://github.com/nesdesignco/FormDrive.git cd FormDrive npm install npm run dev -- --port 12314生产构建npm run build npm run preview产物输出到dist/。生成产物、本地浏览器截图、编辑器状态均不进版本控制。部署每次推送到main由内置 GitHub Pages 工作流构建发布在线工作室生产环境 Vercel 部署https://form-drive.vercel.appVercel 可用 Vite 预设直接导入仓库构建命令npm run build输出目录distNode.js 锁 22.x。目录结构FormDrive/ ├── docs/ # 仓库媒体资源 ├── public/models/ # 车辆二进制、预览图与署名文件 ├── scripts/ # 浏览器与场景校验脚本 ├── src/ │ ├── components/scene/ # 渲染器、模型、相机、灯光 │ ├── components/ui/ # 玻璃拟态界面组件 │ ├── config/ # 车辆与工作室定义 │ ├── state/ # Zustand 工作室状态 │ ├── App.jsx │ └── style.css ├── tokens.css # 设计变量与玻璃材质系统 ├── vite.config.js └── package.js自动化校验FormDrive 自带确定性校验脚本覆盖场景状态、UI 布局、可动部件完整性。先起服务端口 12314再用远程调试端口 12319 开 Chromeopen -na Google Chrome --args \ --remote-debugging-port12319 \ --user-data-dir/tmp/formdrive-chrome跑完整车辆套件node scripts/verify-studio.mjs mustang 1536 900 --summary node scripts/verify-studio.mjs tesla 1536 900 --summary node scripts/verify-studio.mjs concept 1536 900 --summary node scripts/verify-single-vehicle.mjs校验项包括每种车漆 / 轮毂 / 影棚选项每个车门、车窗、引擎盖、后备厢控制复合车窗网格可见性一键全关行为相机预设与回到自由轨道头灯锚点、投影光束、灯光开关地面接触与“同时只渲染一辆车”冷启动模型请求与分段式不白屏切换收藏标签、预览资源、菜单碰撞配置面板运动与安全滚动桌面 / 笔记本 / 平板 / 手机视口下的响应式几何WebGPU 渲染器激活与控制台报错模型署名模型署名应用源码为 MIT 许可证。车辆二进制及其预览渲染图不按 MIT 再授权各自沿用原始许可证。资产创作者 / 来源许可证2005 Ford Mustang GTRicy / SketchfabCC BY 4.0Tesla 2018 Model 3Ameer Studio / SketchfabCC BY 4.0Car Concept随模型分发的署名文件CC BY 4.0FormDrive 是独立的技术与设计研究项目与 Ford Motor Company、Tesla, Inc. 及各车型原作者无隶属、无背书、无赞助关系。贡献欢迎 Bug 报告与聚焦的改进。开 PR 前先读CONTRIBUTING.md。凡涉及车辆网格、材质匹配、可动部件枢轴的改动必须附上三款车的校验结果。安全请按SECURITY.md报告安全问题不要在公开 Issue 里披露敏感漏洞细节。许可证应用源码基于 MIT License 开放。第三方车辆资产受其同目录署名文件约束。