Threejs项目实战之二：产品三维爆炸图效果展示

九仞山

发布于 2023-12-11 09:52:31

5041

发布于 2023-12-11 09:52:31

文章被收录于专栏：前端漫步前端漫步

最终效果

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

1. 实现原理

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

2. 创建项目

在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中代码如下

<template>
 <ValveView></ValveView>
</template>

<script setup>
import ValveView from './components/ValveView.vue'; 
</script>
<style scoped>
</style>

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

3. 编写代码

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

<template>
  <div id="scene"> 
  </div>
  <div class="control">
    <button @click="split(true)">分解</button>
    <button @click="split(false)">组合</button>
  </div>  
</template>

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

<style scoped>
.control{
  display: flex;
  position: fixed;
  top:50px;
  right: 50px;
}
.control button {
  width: 100px;
  height: 30px;
  margin: 10px;
}
</style>

在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()方法初始化场景，具体代码如下

// 初始化场景
const initScene = () => {
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0xcccccc)
  scene.environment = new THREE.Color(0xcccccc)
}

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

// 添加相机
const initCamera = () => {
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1)
  camera.position.set(0.08, 0.08, 0.15)
}

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

// 添加灯光
const initLight = () => {
  // 设置环境光
  scene.add(new THREE.AmbientLight(0xffffff, 0.5))

  // 添加球光源
  const hesLight = new THREE.HemisphereLight(0xffffff, 0x444444)
  hesLight.intensity = 0.6
  scene.add(hesLight)
  // 自然光
  const dirLight = new THREE.DirectionalLight()
  dirLight.position.set(0, 0, 15)
  scene.add(dirLight)
  const dirLight2 = new THREE.DirectionalLight()
  dirLight2.position.set(0, 0, -15)
  scene.add(dirLight2)
  const dirLight3 = new THREE.DirectionalLight()
  dirLight3.position.set(15, 0, 0)
  scene.add(dirLight3)
  const dirLight4 = new THREE.DirectionalLight()
  dirLight4.position.set(-15, 0, 0)
  scene.add(dirLight4)
  const dirLight5 = new THREE.DirectionalLight()
  dirLight5.position.set(0, 15, 0)
  scene.add(dirLight5)
  const dirLight6 = new THREE.DirectionalLight()
  dirLight6.position.set(0, -15, 0)
  scene.add(dirLight6)
  const dirLight7 = new THREE.DirectionalLight()
  dirLight7.position.set(5, 15, 5)
  scene.add(dirLight7)
  const dirLight8 = new THREE.DirectionalLight()
  dirLight8.position.set(-5, -15, -5)
  scene.add(dirLight8)
  // 聚光灯
  const sportLight = new THREE.SpotLight(0xffffff, 0.8)
  sportLight.angle = Math.PI / 8; //散射角度，跟水平线的夹角
  sportLight.penumbra = 0.1;  // 聚光锥的半影衰减百分比
  sportLight.decay = 2; // 纵向：沿着光照距离的衰减量。
  sportLight.distance = 10;
  sportLight.shadow.radius = 10;
  // 阴影映射宽度，阴影映射高度 
  sportLight.shadow.mapSize.set(512, 512);
  sportLight.position.set(0, 15, 0);
  // 光照射的方向
  sportLight.target.position.set(0, 0, 0);
  sportLight.castShadow = true;
  scene.add(sportLight);
}

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

// 加载GLTF模型
const initModel = () => {
  loader = new GLTFLoader()
  loader.load('/model/fm.gltf', gltf => {
    model = gltf.scene 
    model.position.set(0, -0.08, 0)
    // 添加模型到场景
    scene.add(model)
  })
}

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

// 创建渲染器
	const initRenderer = () => {
	  renderer = new THREE.WebGLRenderer({ antialias: true })
	  renderer.setSize(window.innerWidth, window.innerHeight)
	  document.getElementById('scene').appendChild(renderer.domElement)
	}

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

// 添加控制器
const initControl = () => {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  controls.dampingFactor = 0.25
  controls.enableZoom = true
}

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

// 渲染循环
const playAnimate = () => {
  const animate = function () {
    requestAnimationFrame(animate) 
    renderer.render(scene, camera)
  }
  animate()
}

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

const init = () => { 
  initScene()
  initCamera()
  initLight()
  initModel()
  initRenderer()
  initControl()
  playAnimate()
}

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

onMounted(() => {
  init()
})

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

const split = (val) => {
  const myModel = model.children[0].children
  if(val) { 
    myModel.forEach(item => {
      if(item.name === "Obj3d66-5355088-2-382") {
        // item.position.y = 0.03
        gsap.to(item.position,{
          duration:1,//动画持续时间
          y:0.03,//目标位置
          ease:'power2.inOut'
        })
      } else if (item.name === "Obj3d66-5355088-2-382_1"){
        // item.position.y = -0.05
        gsap.to(item.position,{
          duration:1,//动画持续时间
          y:-0.05,//目标位置
          ease:'power2.inOut'
        })
      }
    });
  } else {
    myModel.forEach(item => {
      if(item.name === "Obj3d66-5355088-2-382") {
        // item.position.y = 0.03
        gsap.to(item.position,{
          duration:1,//动画持续时间
          y:0,//目标位置
          ease:'line'
        })
      } else if (item.name === "Obj3d66-5355088-2-382_1"){
        // item.position.y = -0.05
        gsap.to(item.position,{
          duration:1,//动画持续时间
          y:0,//目标位置
          ease:'line'
        })
      }
    });
  }
}

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