Vue+Three.js搭建交互式3D汽车展厅（车内视角、车门动画、轨道控制器）

想搭建一个 3D 汽车在线展厅，又担心引擎太重影响性能？Vue 搭配 Three.js 的组合恰好能解决这个问题。以下方案涵盖了车内视角切换、车门动画控制、轨道控制器等核心功能，工程化程度较高，可直接用于实际项目开发。

基于 Vue 与 Three.js 构建的商用级 3D 汽车在线展示系统，支持一键切换车内第一人称视角、车门开关动画交互、鼠标自由拖拽全方位观察，完整集成了场景光照、模型加载、内存销毁等全套工程化代码。

演示动态图效果如下：

前言

直接说结论：这套基于 Vue + Three.js 的完整实现方案，可直接落地到实际项目中。核心功能包含以下四个方面：

1. 鼠标轨道控制器——支持左键旋转、滚轮缩放，配备平滑阻尼，操作手感顺滑自然。
2. 镜头缓动切换——一键进入 / 退出车内驾驶室第一视角，过渡动画流畅不突兀。
3. GLTF 原生动画播放——点击按钮控制车门打开 / 关闭，动画状态与页面状态双向绑定。
4. 完整工程化封装——资源自动销毁、窗口自适应、多层展厅光源优化，彻底解决内存泄漏问题。

整体功能效果

1. 基础场景环境：半透明网格地面、分层展厅光源、浅灰色雾化背景，模型加载完成后自动显示操作按钮，整体呈现简约展厅风格。
2. 轨道观察交互：采用 OrbitControls 控制器，禁止画布平移，开启拖拽阻尼，鼠标滑动时画面顺滑不卡顿，可全方位查看车身外观、轮毂、内饰结构。
3. 车内第一视角切换：通过 TWEEN 动画实现镜头平滑过渡，点击「进入驾驶室」自动切换至车内主驾驶视角，退出后缓动回到外部展示机位，两种视角互不冲突。
4. 车门动画控制：GLTF 模型内置车门骨骼动画，通过 AnimationMixer 管理动画播放与停止，点击按钮切换车门开合状态，动画逻辑与页面状态双向绑定。
5. 页面资源自动释放：组件销毁时完整遍历场景，释放所有几何体、材质、渲染器、动画帧，彻底解决 Three.js 常见内存泄漏问题，适配后台路由频繁切换场景。

完整代码

1. template 结构：

2. script 代码：

3. css样式代码:

.content {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.three-btn-border {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    justify-content: start;
    align-items: center;
}
.three-btn {
    cursor: pointer;
    margin-left: 10px;
}
.three {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

核心功能拆解讲解

1. GLTF 模型加载与模型内置动画处理
GLTF 是 Web 端最优的三维模型格式，支持嵌入模型内置的动画。本文通过 AnimationMixer 读取模型自带的车门动画片段，点击按钮控制播放与停止，再用页面布尔变量绑定按钮显隐状态，交互逻辑清晰明了。

// 初始化动画混合器
window.mixer = new THREE.AnimationMixer(window.model)
// 获取模型内置动画片段并播放
window.animationAction = window.mixer.clipAction(window.gltf.animations[0])
window.animationAction.play()

渲染循环内通过 clock.getDelta() 更新动画，确保不同设备上车门动画播放速度完全一致。

2. TWEEN 镜头缓动切换车内 / 车外视角
直接修改相机坐标会导致画面生硬跳跃，使用 TWEEN 库进行 1.5 秒缓动插值，实现顺滑镜头过渡：

• 外部展示机位：远距离斜侧 45°，完整展示整车外观
• 车内机位：主驾驶第一视角，可观察内饰、方向盘结构

同时增加状态标识，进入车内后自动隐藏对应按钮，避免逻辑冲突。

3. OrbitControls 轨道控制器精细化配置

window.controls.enablePan = false // 禁用平移，只允许旋转缩放
window.controls.enableDamping = true // 开启阻尼，拖拽后画面缓慢停止

关闭平移功能，更贴合汽车展厅查看需求；开启阻尼后拖拽手感更顺滑。

4. 完整资源销毁，解决内存泄漏
很多 Three.js Demo 只做基础渲染，忽略了资源释放。路由反复切换页面会造成卡顿、显存溢出。在 lea veDestory 方法中：

• 遍历场景释放所有 Mesh 几何体、材质
• 取消全部 requestAnimationFrame 动画帧
• 停止 TWEEN 镜头动画、骨骼动画
• 销毁渲染器、相机、控制器实例

这套方案适合后台管理系统、多路由切换场景长期使用。

模型说明：
本文演示所用的 3D 模型来源于网络，版权归原作者所有。本文仅做 Three.js 前端技术学习演示，并未对模型本身做任何修改。