使用动画库（GSAP，基于 JavaScript 的网络动画库）的 Three.js

<template> <div></div> </template> <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); // scene.add(camera); // 辅助线 const axesHelper = new THREE.AxesHelper(5); // 长度 scene.add(axesHelper); // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //设置three.js渲染区域的尺寸(像素px) // 动态创建元素 document.body.appendChild(renderer.domElement); renderer.render(scene, camera); // 相机围绕目标进行轨道运动 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() } }) // 浏览器动画 function render(time) { controls.update() renderer.render(scene, camera); // 渲染下一帧的时候会调用 render 函数 requestAnimationFrame(render); } render() // 监听画面变化，更新渲染画面 window.addEventListener('resize', () => { // 更新摄像头 camera.aspect = window.innerWidth / window.innerHeight; // 更新摄像机的投影矩阵 camera.updateProjectionMatrix(); // 更新渲染器 renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的像素比 renderer.setPixelRatio(window.devicePixelRatio) }) </script>