安装

npm install gsap

使用

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 导入动画库
import gsap from 'gsap'

// 场景
const scene = new THREE.Scene();

// 模型
// 顶点着色器
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// 片元着色器
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);

// 辅助线
const axesHelper = new THREE.AxesHelper(5); // 长度
scene.add(axesHelper);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true // 锯齿模糊
});
// renderer.setClearColor(0x444444, 1); // 设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px)
document.body.appendChild(renderer.domElement);
// renderer.render(scene, camera);

// 相机围绕目标进行轨道运动; 注意OrbitControls会影响 camera.lookAt(x,y,z)失效，需设置controls.target.set(x,y,z)才能生效
const controls = new OrbitControls(camera, renderer.domElement);
// 可设置控制器阻尼，让控制器更有真实效果，必须在你的动画循环里调用.update()
controls.enableDamping = true

// 设置动画   
const animate = gsap.to(cube.position, {
  x: 5,
  duration: 5, // 持续时间
  ease: 'power1.inOut', // 速率
  repeat: 2, // 重复次数, 无限次循环是-1
  yoyo: true, // 往返运动
  delay: 2, // 延迟时间
  onStart: () => {
    console.log('动画开始');
  },
  onComplete: () => {
    console.log('动画完成');
  }
}) // 移动
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5 }) // 旋转
gsap.to(cube.scale, { x: 2, duration: 5 }) // 缩放

// 双击暂停/启动动画
window.addEventListener('dblclick', () => {
  if (animate.isActive()) {
    animate.pause()
  } else {
    animate.resume()
  }
})

// 浏览器动画
const clock = new THREE.Clock()
function render(time) {
  // console.log(time / 1000, 方式1); // 从开始到当前的累计秒时长

  // console.log(clock.getElapsedTime(), 方式2); // 从开始到当前的累计秒时长
  // console.log(clock.getDelta()); // 2帧间隔时间  
  // console.log(1000 / (clock.getDelta() * 1000)); // 帧率FPS

  // cube.position.x = (time / 1000) % 5 // 手动实现动画；比方13 % 5 = 3

  controls.update() // 阻尼控制器更新
  renderer.render(scene, camera);
  requestAnimationFrame(render); // 请求动画帧
}
render()

// 监听画面变化，更新渲染画面
window.addEventListener('resize', () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

// 双击控制屏幕进入全屏，退出全屏
// window.addEventListener('dblclick', () => {
//   const fullscreenElement = document.fullscreenElement;
//   // 判断当前是否有全屏元素
//   if (!fullscreenElement) {
//     renderer.domElement.requestFullscreen()
//   } else {
//     document.exitFullscreen()
//   }
// })
</script>