clock(three.js 自带时间计算插件)
该对象用于跟踪时间
// 重新渲染动画
// 设置时钟
const clock = new THREE.Clock();
function render() {
//获取时钟运行的总时长
let time = clock.getElapsedTime();
console.log("时钟运行的总时长", time);
let deltaTime = clock.getDelta();
console.log("两次获取时间的间隔时间", deltaTime);
renderer.render(scene, camera);
// 渲染下一帧的时候就会调用render函数
requestAnimationFrame(render);
}
render();
gsap(补间动画插件)
官方文档:https://greensock.com/docs/
快速开始文档:Getting Started with GSAP - Learning Center - GreenSock
安装
npm install gsap
导入
import gsap from "gsap"
使用
// 设置动画
let animate = gsap.to(mesh.position, {
x: 5, // x轴移动到5位置
ease: "power2.out", // 动画速率方式
duration: 5, // 花费5秒
repeat: 2, // 重复2次
yoyo: true, // 往返运动
delay: 2, // 延迟2秒运动
onComplete: () => {
console.log("动画完成!")
},
onStart: () => {
console.log("动画开始!")
}
})
// 双击时
window.addEventListener("dblclick", function () {
if (animate.isActive()) {
// 是否运动中
// 停止动画
animate.pause();
} else {
// 继续动画
animate.resume();
}
})
图形用户界面(手动修改变量值,不算动画)
安装
npm install --save dat.gui
导入
import * as dat from "dat.gui";
使用
const gui = new dat.GUI();
// 修改数值
gui.add(mesh.position, "x") // 改变 position 属性的 x 值
.min(0) // 最小值
.max(5) // 最大值
.step(0.01) // 步骤,设置值的间隔
.name("移动x轴") // 名称
.onChange(function (value) {
console.log("值被修改为:", value)
})
.onFinishChange(function (value) {
console.log("完全停下来触发的值被修改为:", value)
});
// 修改颜色
const params = {
color: "#ffff00",
fn: () => {
// 让立方体运动起来
gsap.to(mesh.position, {
x: 5, duration: 2, yoyo: true, repeat: -1 })
}
}
gui.addColor(params, "color")
.onChange(function (value) {
console.log("值被修改为:", value)
mesh.material.color.set(value)
});
// 设置选项框,gui会自动获取属性是否为 boolean ,是,出现选项框
gui.add(mesh, "visible").name("是否显示");
// 点击按钮触发某个事件
gui.add(params, "fn").name("点击立方体运动");
// 设置文件夹
var folder = gui.addFolder("设置立方体");
folder.add(mesh.material, "wireframe");