Three.js Getting Started 2 Animation Plugin

clock (three.js comes with time calculation plugin)

This object is used to track time

// 重新渲染动画

// 设置时钟
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 (motion tween plugin)

Official Documentation: https://greensock.com/docs/
Quick Start Documentation: Getting Started with GSAP - Learning Center - GreenSock

Install

npm install gsap

import

import gsap from "gsap"

use

// 设置动画
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();
  }
})

Graphical user interface (manually modifying variable values, not counting animations)

Install

npm install --save dat.gui

import

import * as dat from "dat.gui";

use

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");