啥是补间动画呢？其实就是我们在threejs中移动一个物体的时候，不让他是瞬时移动，让他跟css动画的transition一样，有个过度效果，就是补间动画。补间动画如何设置呢？
补间动画实现
1.引入补间动画库
在我们的threejs依赖中，就提供了补间动画库tween，因此可以直接在threejs的依赖中引入，也可以下载tween依赖
//导入补间动画库
import * as TWEEN from "three/examples/jsm/libs/tween.module.js";2.创建一个球放入场景中
// 创建一个球
const sphere1 = new THREE.Mesh(
new THREE.SphereGeometry(1, 32, 32),
new THREE.MeshBasicMaterial({
color: 0x00ff00,
})
);
sphere1.position.x = -4;
scene.add(sphere1);3.给小球添加补间动画 并启动
//补间动画
const tween = new TWEEN.Tween(sphere1.position);
tween.to({ x: 4 }, 1000);
//启动补间动画
tween.start();这时候我们会发现画布中的小球并没有变化，因为在渲染函数中我们没有更新补间动画
4.渲染函数中更新补间动画
//渲染函数
function animate() {
controls.update();
//请求动画帧
requestAnimationFrame(animate);
//渲染
renderer.render(scene, camera);
//更新补间动画
TWEEN.update();
}
5.补间动画相关操作
1.回调函数
我们可以在补间动画添加回调函数，来进行一系列的操作。
tween.to({ x: 4 }, 1000);
tween.onUpdate(() => {
console.log(sphere1.position);
});
// tween.to({ x: 4 }, 1000).onUpdate(()=>{
// console.log(sphere1.position);
// });
//同上 
补间动画的回调函数还有其他的 开始、结束、停止、更新、重复
tween.onStart(() => {
console.log("开始");
});
tween.onComplete(() => {
console.log("结束");
});
tween.onStop(() => {
console.log("停止");
});
tween.onUpdate(() => {
console.log("更新");
});
tween.onRepeat(() => {
console.log("重复");
});2.其他操作
补间动画也有一些其他的相关操作，比如说循环无数次、延迟进行、循环往复
测试一下循环无数次和延迟进行
//重复循环无数次
tween.repeat(Infinity);
// tween.repeat(3);
// 循环往复
// tween.yoyo(true);
//延迟进行
tween.delay(3000);
当然 我们也可以让他像贝塞尔曲线那样，忽快忽慢的运动，更符合现实，我们用缓动函数来解决。下面这个链接中有threejs曲线的名字，用来带入参数。我们正好测一下往返
tweenjs 曲线参数
//设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut);
// 循环往复
tween.yoyo(true); 
3.链式使用
补间动画当然也可以链式使用，两个动画连接使用，我们来创建第二个动画
const tween2 = new TWEEN.Tween(sphere1.position);
tween2.to({ y: -4 }, 1000);
//链接补间动画
tween.chain(tween2);
//启动补间动画
tween.start();
全部代码
//导入 threejs
import * as THREE from "three";
//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
//导入补时动画库
import * as TWEEN from "three/examples/jsm/libs/tween.module.js";
//导入lil.gui
// import * as dat from "dat.gui"; // 旧
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.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);
// 将渲染器的dom元素添加到body中
document.body.appendChild(renderer.domElement);
camera.position.z = 15;
// 为了看到z轴
camera.position.y = 2;
// 设置x轴
camera.position.x = 2;
//设置相机的焦点 (相机看向哪个点)
camera.lookAt(0, 0, 0);
//添加世界坐标辅助器 (红色x轴,绿色y轴,蓝色z轴)一个线段 参数为 线段长度
const axesHelper = new THREE.AxesHelper(5);
//添加到场景之中
scene.add(axesHelper);
// 添加轨道控制器 (修改侦听位置) 一般监听画布的事件 不监听document.body
const controls = new OrbitControls(camera, renderer.domElement);
//渲染函数
function animate() {
controls.update();
//请求动画帧
requestAnimationFrame(animate);
//渲染
renderer.render(scene, camera);
//更新补时动画
TWEEN.update();
}
animate();
//渲染
// 监听窗口的变化 重新设置渲染器的大小 画布自适应窗口
window.addEventListener("resize", () => {
// 重新设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 重新设置相机的宽高比
camera.aspect = window.innerWidth / window.innerHeight;
// 重新计算相机的投影矩阵
camera.updateProjectionMatrix();
});
//创建gui实例
const gui = new GUI();
// 创建一个球
const sphere1 = new THREE.Mesh(
new THREE.SphereGeometry(1, 32, 32),
new THREE.MeshBasicMaterial({
color: 0x00ff00,
})
);
sphere1.position.x = -4;
scene.add(sphere1);
//补时动画
const tween = new TWEEN.Tween(sphere1.position);
// tween.to({ x: 4 }, 1000).onUpdate(()=>{
// console.log(sphere1.position);
// });
//同上
tween.to({ x: 4 }, 1000);
tween.onUpdate(() => {
console.log(sphere1.position);
});
//重复循环无数次
// tween.repeat(Infinity);
// tween.repeat(3);
// 循环往复
// tween.yoyo(true);
//延迟进行
// tween.delay(3000);
//设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.InOut);
//启动补时动画
tween.start();
const tween2 = new TWEEN.Tween(sphere1.position);
tween2.to({ y: -4 }, 1000);
//链接补时动画
tween.chain(tween2);
// 2 链接 1
tween2.chain(tween);
//启动补时动画
tween.start();
tween.onStart(() => {
console.log("开始");
});
tween.onComplete(() => {
console.log("结束");
});
tween.onStop(() => {
console.log("停止");
});
tween.onUpdate(() => {
console.log("更新");
});
tween.onRepeat(() => {
console.log("重复");
});
let params = {
stop: function () {
tween.stop();
}
};
gui.add(params, "stop").name("停止");
