threejs-补间动画Tween应用

一、简介

1.介绍

补间动画是一个概念，允许你以平滑的方式更改对象的属性。更改某些属性，在补间结束运行时当前对象最终的值就是修改后的值。以及需要多长时间完成这个操作

2.属性

// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';

// 实例化tween
const tween = new TWEEN.Tween(sphere1.position)
//设置移动位置 x轴到4,1000表示1秒
tween.to({x:4},1000)
// 设置循环次数
tween.repeat(Infinity) // 循环无数次
tween.repeat(2) // 循环2次
// 设置循环往复
tween.yoyo(true)
// 延迟触发
tween.delay(500) 
// 设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut)  
//缓动函数地址：https://tweenjs.github.io/tween.js/examples/03_graphs.html

const tween2 = new TWEEN.Tween(sphere1.position)
tween2.to({y: -5},1000)
//连接动画
tween.chain(tween2) 
//启动补间动画
tween.start() 
//停止补间动画
tween.stop()  

tween.onStart(()=>{
  console.log('开始时回调')
})
tween.onComplete(()=>{
  console.log('结束时回调')
})
tween.onStop(()=>{
  console.log('停止时回调')
})
tween.onUpdate(()=>{
  console.log('更新时的回调');
}) 

二、展示

1.效果

2.代码

// 导入threejs文件
import * as three from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';
// 创建场景
const scene = new three.Scene()
// 创建相机
const camera = new three.PerspectiveCamera(
  45, //视角 值越多视野越大
  window.innerWidth / window.innerHeight, //宽高比
  0.1, //近平面(相机最近能看到的物体)
  1000 //远平面(相机最远能看到的物体)
)
// 创建渲染器
const renderer = new three.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
// 添加背景颜色
scene.background = new three.Color(0x999999)

// 创建一个球
const sphere1 = new three.Mesh(
  new three.SphereGeometry(0.5, 32, 32),
  new three.MeshBasicMaterial({ color: 0x4444ff })
)
sphere1.position.x = -1
// 加入场景
scene.add(sphere1)

// 实例化tween
const tween = new TWEEN.Tween(sphere1.position)
//设置移动位置 x轴到4,1000表示1秒
tween.to({x:4},1000)

// 设置循环次数
// tween.repeat(Infinity) // 循环无数次
// tween.repeat(2) // 循环2次
// 设置循环往复
// tween.yoyo(true)
// 延迟触发
// tween.delay(500) 
// 设置缓动函数
// tween.easing(TWEEN.Easing.Quadratic.InOut)
const tween2 = new TWEEN.Tween(sphere1.position)
tween2.to({y: -5},1000)
tween.chain(tween2) //连接动画
// tween2.chain(tween)
tween.start() //启动补间动画
// tween.stop()  //停止补间动画
tween.onStart(()=>{
  console.log('开始时回调')
})
tween.onComplete(()=>{
  console.log('结束时回调')
})
tween.onStop(()=>{
  console.log('停止时回调')
})
tween.onUpdate(()=>{
  console.log('更新时的回调');
}) 



// 相机位置
camera.position.z = 15 //设置在z轴位置
camera.position.x = 1 //设置在x轴位置
camera.position.y = 1 //设置在y轴位置
// 看向位置
camera.lookAt(0, 0, 0) //看向原点
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true // 启用阻尼系数：值越大，阻尼越明显
controls.dampingFactor = 0.5 //设置阻尼值
controls.enableZoom = true // 启用缩放：值为false时禁止缩放
// controls.autoRotate = true // 启用自动旋转：值为true时禁止手动旋转
controls.autoRotateSpeed = 0.5 // 自动旋转速度
// 渲染函数
const animate = () => {
  controls.update()
  requestAnimationFrame(animate) //每一帧调用函数
  // 旋转
  // cube.rotation.x += 0.01 // X轴转
  // cube.rotation.y += 0.01 // Y轴转
  renderer.render(scene, camera) // 重新渲染
  // 更新tween
  TWEEN.update()
}
animate()