安装
npm install gsap
使用
<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()
}
})
// 双击控制屏幕进入全屏,退出全屏
// window.addEventListener('dblclick', () => {
// const fullscreenElement = document.fullscreenElement;
// // 判断当前是否有全屏元素
// if (!fullscreenElement) {
// renderer.domElement.requestFullscreen()
// } else {
// document.exitFullscreen()
// }
// })
// 浏览器动画
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>