three.js 之 入门篇 2 之gsap动画的使用

three.js 之 入门篇 2 之gsap动画的使用

• 安装：npm install gsap
• 导入：// 导入动画库 import gsap from "gsap"
• 官网：官网
• 文档：https://greensock.com/docs/
• 入门指南：getting started guide

1：gsap动画基本使用与原理

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是，先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)


// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// gsap 1-2: 设置动画
gsap.to(mesh.position,{x:5,duration:5}) // 设置几何体位置
gsap.to(mesh.rotation,{x:2*Math.PI,duration:5,ease: "power3.out",}) // 设置几何体旋转 ease旋转的速度

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()

2：gsap动画基本使用与原理

• mesh.rotation 几何体的旋转 mesh.XXX 几何体的动画
• x轴执行
• duration 动画的执行时间
• ease 动画的执行速度
• repeat 动画执行次数 -1为无线次
• yoyo: 往返运动
• delay 延迟时间 2s后执行 旋转动画
• onStart 动画开始 调用函数
• onComplete 动画完成后 调用函数

import * as THREE from "three"
// console.log('main.js',THREE);

// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// gsap 1-1:导入动画库
import gsap from "gsap"

// 1：创建场景
const scene = new THREE.Scene()

// 2：创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/ window.innerHeight,0.1,1000)
// 设置相机位置 x y z
camera.position.set(0,0,10) 
// 把相机添加到场景之中
scene.add( camera );

// 添加物体
// 创建几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 盒子的大小
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); // 盒子的材质
// 根据几何体创建物体
const mesh = new THREE.Mesh( geometry, material ); // 几何体 几何体的材质
// 将几何体添加到场景之中
scene.add( mesh );
// 07-2 几何体的旋转
mesh.rotation.set( Math.PI / 4 , 0,0,'XYZ') // 旋转45度 XYZ表示的是，先旋转那个轴

// 初始化渲染器
const renderer = new THREE.WebGL1Renderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight)
// console.log('renderer',renderer);
// 将webgl渲染的canvas内容添加到body上
document.body.appendChild(renderer.domElement)


// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 06-1：添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// gsap 1-2: 设置动画
gsap.to(mesh.position,{x:5,duration:5}) // 设置几何体位置
// 设置几何体旋转 ease旋转的速度
var animate1 =  gsap.to( mesh.rotation, { x:2*Math.PI, duration:5, ease: "power3.out",
  repeat:2, // 动画执行次数 -1为无线次
  yoyo:true, // 往返运动
  delay:2, // 延迟时间 2s后执行 旋转动画
  onComplete:()=>{
    console.log('动画完成');
    },
  onStart:()=>{
    console.log('动画开始')
  }
}) 
// window双击事件的时候 暂停动画
window.addEventListener('dblclick',()=>{
  if ( animate1.isActive() ) { // 双击的时候 判断动画是否在执行
    animate1.pause() // 暂停动画
  } else {
    animate1.resume() // 恢复动画
  }
})

// 渲染函数 - 每一帧渲染一次
function animate() {
  // 渲染下一帧 的时候 会调用 animate 函数
	requestAnimationFrame( animate );
	controls.update();
	renderer.render( scene, camera );
}
animate()