時計 (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/
クイックスタートドキュメント: GSAP 入門 - ラーニング センター - 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");