three.js 第十节 - 补间动画

// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
// 导入tween
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 15) // 设置相机位置
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
//#endregion

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function animate() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(animate)
  // 渲染
  renderer.render(scence, camera)
  // 更新tween
  TWEEN.update()
}
animate()
//#endregion

// -----------------------------------------------------------------
// -----------------------------------------------------------------

	// 创建1个球
	const sphere_1 = new THREE.Mesh(
	  new THREE.SphereGeometry(1, 32, 32),
	  new THREE.MeshBasicMaterial({
	    color: 0x00ff00
	  })
	)
	sphere_1.position.x = -4
	scence.add(sphere_1)
	
	const tween = new TWEEN.Tween(sphere_1.position)
	tween.to({ x: 4 }, 1000)
	tween.onUpdate(() => {
	  // console.log(sphere_1.position.x)
	})
	// 循环无数次
	// tween.repeat(Infinity)
	// 循环往复
	// tween.yoyo(true)
	// 每次动画执行的延迟时间
	// tween.delay(3000)
	// 设置缓动函数
	tween.easing(TWEEN.Easing.Quadratic.InOut)
	
	const tween_2 = new TWEEN.Tween(sphere_1.position)
	tween_2.to({ x: -4 }, 1000)
	
	tween.chain(tween_2)
	tween_2.chain(tween)
	
	// 启动补间动画
	tween.start()
	
	// 补间动画的函数
	tween.onStart(() => {
	  console.log('开始')
	})
	tween.onComplete(() => {
	  console.log('结束')
	})
	tween.onStop(() => {
	  console.log('停止')
	})
	tween.onUpdate(() => {
	  console.log('更新')
	})
	let obj = {
	  stop: () => {
	    tween.stop()
	  },
	
	  start: () => {
	    tween.start()
	  }
	}
	
	const gui = new GUI()
	gui.add(obj, 'stop')
	gui.add(obj, 'start')

// -----------------------------------------------------------------
// -----------------------------------------------------------------