今天我们来实现如何使用ThreeJS实现产品的三维爆炸图分解与组合的效果，先看下最终项目完成后的效果展示动画

要实现这种爆炸图的分解与组合效果，其实原理很简单，就是找到模型中各个组成部分对应的Mesh，然后通过修改对应Mesh的Position坐标来实现产品的分解与组合效果，为了使分解和组合效果看起来更丝滑，在修改对应Position位置的时候，设置一个动画效果，使其开起来过渡更自然，我这里使用的是GSAP动画库，这个动画库非常强大，感兴趣的小伙伴可以看我之前写的一篇关于GSAP动画库使用的博客，这里只介绍具体的使用，就不讲解各个参数的定义了。

在D盘新建vite-vue-Valve文件夹，鼠标右键点击新建的文件夹，使用vscode打开；

在vscode中使用快捷键Ctrl+Shift+~打开终端，在终端中使用vite构建工具创建项目，输入pnpm create vite bmw-app --template vue创建项目

创建成功后，在终端中输入cd bmw-app进入文件夹

输入pnpm i 安装依赖包

安装完成后，输入pnpm run div 启动项目，打开浏览器，可以看到系统默认的页面，说明项目环境搭建成功

安装ThreeJS库，在终端中输入pnpm i three安装threejs插件

安装GSAP库，在终端中输入 pnpm i gsap安装GSAP库

删除vite构建工具为我们创建的HelloWord.vue文件和style.css中的样式，删除App.vue中的样式

在components文件夹下新建ValveView.vue文件

在App.vue的Template模板中调用 ValveView.vue App.vue中代码如下

style.css中的样式代码如下： *{ margin: 0; padding: 0; list-style: none; }

在ValveView.vue的template模板中添加一个div，id设置为scene，作为承载Threejs的容器；再增加一个div，设置class=“control”，在这个div中添加两个button，并给两个button添加点击事件，用于控制产品模型的分解与组合 template模板中代码如下：

设置ValveView.vue中元素的样式，默认情况想，我们上面设置的id为scene的div和class为control的div是一列排列的，我们需要将control中的两个button设置为页面右上角的位置，在style代码片段中设置类名为control的样式和button的样式代码如下

在script标签中引入threejs import * as THREE from 'three'

这里我们选择的产品模型是gltf格式的文件，因此，我们需要引入threejs为我们提供的GLTFLoader加载器 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

由于我们需要对物体进行鼠标旋转缩放控制,因此我们需要引入threejs为我们提供的OrbitControls控制器 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

引入GSAP库，实现产品分解、组合时的动画效果 import { gsap } from 'gsap'

引入vue的生命周期onMounted import { onMounted } from 'vue'

创建init函数，用于初始化threejs相关设置 const init = () => {}

为了便于后期代码的维护，我这里将创建threejs场景、相机、灯光、渲染器及控制器等各个部分进行了分别的封装，这样便于后期的代码维护与修改。

首先设置全局变量scene, camera, loader, renderer, controls和model let scene, camera, loader, renderer, controls, model

创建初始化场景函数，在初始化场景函数中，调用new THREE.Scene()方法初始化场景，具体代码如下

创建初始化相机函数，在初始化相机函数中，调用 new THREE.PerspectiveCamera()方法创建相机并设置相机的位置，具体代码如下：

创建初始化灯光函数，在初始化灯光函数中，添加环境光、自然光、聚光灯等各种灯光效果，代码如下：

创建加载GLTF模型函数，使用Threejs提供的new GLTFLoader()方法加载gltf模型文件，具体代码如下：

创建初始化渲染器函数，使用Threejs提供的new THREE.WebGLRenderer()方法创建渲染器，并设置相关参数，具体diam如下：

创建初始化控制器函数，添加控制器，使用Threejs提供的new OrbitControls()方法创建一个控制器，并设置相关参数，具体代码如下:

创建循环渲染动画，通过调用requestAnimationFrame(animate) 循环调用该动画，并使用renderer.render(scene, camera)实时渲染场景，具体代码如下：

将上面创建的各个初始化函数添加到init函数中，使其在初始化时分别调用各个函数，init函数具体代码如下：

在vue生命周期onMounted中调用init函数，完成页面渲染，代码如下：

添加分解、组合控制动画，在template模板中，我们已经给两个按钮绑定了鼠标点击事件split(),它接收一个boolean类型的参数，为true时，我们对模型进行分解操作，为false时，我们对模型进行组合操作。我这里实现模型分解与组合的方法是获取模型中的Mesh数组，通过forEach循环遍历获取需要移动位置的Mesh，修改其相关的Position来移动Mesh的位置，这里使用了gsap动画来实现动画效果，具体代码如下：

至此，我们就完成了产品三维爆炸图的分解与组合效果，运行程序，刷新浏览器，通过鼠标点击分解按钮和组合按钮查看动画效果，效果如下：

ok，threejs项目实战的第二个项目就实现了，小伙伴们有疑问的评论区留言，喜欢的小伙伴点赞关注+收藏哦！