gsap动画库对threejs模型的应用

前言

公司的一个3D编辑器项目，要在three模型上加一些补间动画。做了一些调研，最终选择了gsap，其丰富的缓动函数，强大的动画效果和兼容性，更适合公司的需求。

查看gsap文档，发现所有的例子都是针对dom元素的，按照其方式直接绑定three模型，动画并不生效，也没有找到相关的文章。开发过程中多次尝试，发现需要将动画绑定在模型上的属性上，还有一些特殊的设置，在此简单记录一下。

功能实现

前期准备

 import * as THREE from 'three'// 创建场景、相机和渲染器const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)const renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)// 创建立方体const geometry = new THREE.BoxGeometry(1,1,1)const material = new THREE.MeshBasicMaterial({color: 0x00ff00})const cube = new THREE.Mesh(geometry, material)cube.position.set(0,0,0)scene.add(cube)// 设置相机camera.position.set(4,3,6);camera.lookAt( 0, 0, 0 );// 渲染场景const animate = () => {requestAnimationFrame(animate);renderer.render(scene, camera);}animate()

此时可以看到效果如下

立方体已经显示出来，但是重叠的部分会将边角模糊掉，看起来更像是一个平面的不规则多边形，所以我们补充下细节，使模型更立体一些

细节补充

1. 添加辅助线，显示X、Y、Z轴，可以明显的感受3D空间
2. 添加轨道控制器，可以转动相机进行轨道运动，查看立方体的各个角度
3. 修改立方体材质以及添加环境光和平行光，使立方体看起来棱角分明 更直观

修改立方体材质

修改立方体的材质为标准网格材质，基础网格材质不受光照影响，不会形成阴影面

  // const material = new THREE.MeshBasicMaterial({color: 0x00ff00})const material = new THREE.MeshStandardMaterial({color: 0x00ff00})

其他细节添加

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'// 创建轴辅助线const xAxisHelper = new THREE.AxesHelper(10);scene.add(xAxisHelper);// 添加轨道控制器const controls = new OrbitControls(camera, renderer.domElement)// 设置带阻尼controls.enableDamping = true// 设置带阻尼的系数controls.dampingFactor = 0.1 //数字越小，滑动后的惯性时间越长// 添加环境光const light = new THREE.AmbientLight( 0x404040 );scene.add( light );// 添加平行光const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );directionalLight.position.set(5,10,8)scene.add( directionalLight );

看下效果：

只添加平行光 这个角度的效果是一样的。但是我们转动相机会发现，平行光没有照到的地方，物体不会发光

至此，前期准备全部完成。接下来，就可以进行动画效果设置了

动画实现

位置移动

 import {gsap} from 'gsap'gsap.to(cube.position, {duration: 2, x: 1})

效果：

沿轴旋转

gsap.to(cube.rotation, {duration: 2, z: 90*(Math.PI / 180)})

效果：

缩放

gsap.to(cube.scale, {duration: 2, x: 2, y:2, z:2})

效果：

以上动画，设置到对应的属性上即可生效。颜色和透明度需要特殊处理下

颜色变化

  gsap.to(cube.material, {duration: 2,keyframes: {"0%": {color: 'rgba(0,255,0)'},"100%": {color: 'rgba(255,255,0)'},},onUpdate: () => {cube.material.color = new THREE.Color(cube.material.color)}})

效果：

透明度过渡

three模型需要设置transparent属性值为true 才可以进行透明度设置

gsap.to(cube.material, {duration: 2,opacity: 0.2,transparent: true,onUpdate: () => {cube.material.needsUpdate = true;}})

效果：

gsap动画的简单实现基本完成，项目中还涉及到缓动函数的添加、多个动画的叠加、以及补间动画的控制等等，有机会再记录