Three.js使用动画库（ GSAP 一款基于 JavaScript 的 web动画库）

本文主要是介绍Three.js使用动画库（ GSAP 一款基于 JavaScript 的 web动画库），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装

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);// 设置动画   
const animate = gsap.to(cube.position, {x: 5,duration: 5, // 持续时间ease: 'power1.inOut', // 速率repeat: 2, // 重复次数, 无限次循环是-1yoyo: 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) {renderer.render(scene, camera);requestAnimationFrame(render);
}
render()
</script>

这篇关于Three.js使用动画库（ GSAP 一款基于 JavaScript 的 web动画库）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---