该项目是对标小米 SU7 动态互动演示网页打造的高精度线上 3D 互动展厅,全程由我独立完成建模与开发,是基于 three.js 技术栈的核心实践项目。项目搭建阶段采用 Vue3 结合 Vite 构建高效开发环境,兼顾了模块化开发效率与项目打包性能;核心的 3D 模型渲染环节依托 Three.js 实现,精准还原了展厅场景与展示物件的细节质感;动效交互层面则借助 GSAP 动画库,打造出流畅且贴合用户操作习惯的动态反馈,整体还原了小米 SU7 演示网页的交互逻辑与视觉体验,完整实现了高精度 3D 场景的线上沉浸式互动效果。
1.通过Blender完成隧道、路面、风阻、雷达等场景及动效建模。
2.通过GSAP动画库控制隧道、路面材质后移及轮胎转动实现车辆跑动效果,控制隧道材质透明度实现隧道粒子渐显渐隐,通过控制相机视角属性实现镜头缩放效果。
3.通过RGBELoader加载器加载hdr环境贴图,设置映射方式为环境反射映射,将纹理设置为场景背景,配合WebGLCubeRenderTarget实现动态反射环境。
4.通过贝塞尔圆环创建围绕车身的单圈雷达模型,通过THREE.Group类创建组对象,循环雷达模型,记录每个雷达模型的终点坐标,通过GSAP动画库实现雷达发散效果,并通过动态计算雷达模型和其他车辆的距离改变雷达模型颜色实现雷达检测效果。