gsap
介绍：
GreenSock Animation Platform (GSAP) 是一个业界知名的动画库，它被1100多万个网站使用，有超过50%的获奖的网站都是用了它。不管是在原生环境中，还是任意的框架中，你可以使用GSAP去让非常多的东西动起来。不管你是想要去让UI界面产生交互动画，还是SVG图形产生动画，甚至是Threejs还是React组件，GSAP都可以轻松搞定！
相关地址：
https://gsap.framer.wiki/stated - 中文翻译说明
https://gsap.com/docs/v3/ - 官方文档说明
安装
npm:
npm install gsapcdn：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>yarn：
yarn add gsap参考地址：https://gsap.com/docs/v3/Installation?tab=yarn&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true
gsap和three.js结合
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import gsap from "gsap";
import {func} from "three/examples/jsm/nodes/code/FunctionNode";
// 函数中添加时间
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
cube.position.set(1,0,0);
cube.scale.set(0.5,0.5,0.5);
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ')
scene.add(cube);
camera.position.z = 5;
const controls = new OrbitControls( camera, renderer.domElement );
// 添加阻尼
controls.enableDamping = true;
const axesHelper = new THREE.AxesHelper( 5 );
const animal1 = gsap.to(cube.position, { x: 4, duration: 5, ease: "power2.inOut", repeat: -1, yoyo: true, })
const animal2 = gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power2.inOut", repeat: -1, yoyo: true, })
document.body.addEventListener('click', function () {
if (animal1.isActive()) {
animal1.pause();
} else {
animal1.resume()
}
})
scene.add( axesHelper );
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
window.addEventListener('resize', function () {
// 更新摄像头
camera.aspect = window.innerWidth / window.innerHeight;
// 更新摄像头的投影矩阵
camera.updateProjectionMatrix();
// 更新渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
});
// 全屏
window.addEventListener("dblclick", function () {
const fullScreen = document.fullscreenElement;
if (!fullScreen) {
renderer.domElement.requestFullscreen();
} else {
document.exitFullscreen();
}
})展示效果：
