라이브러리를 이용한 애니메이션

 

라이브러리를 이용한 애니메이션

애니메이션 라이브러리 사이트 : Green Sock

 

Green Sock NPM 설치 [깃허브 바로가기]

> npm install gsap

 

 

import gsap from "gsap";
 
const scene = new THREE.Scene();
 
const camera = new THREE.PerspectiveCamera(
75, // 시야각 (field of view)
window.innerWidth / window.innerHeight, // 종횡비(aspect)
0.1, // near
1000 // far
); 
scene.add(camera);
 
const geometry = new THREE.BoxGeometry(1, 1, 1);
 
const material = new THREE.MeshStandardMaterial({
color: "red"
});
 
 const mesh = new THREE.Mesh(geometry, material);
 
 scene.add(mesh);
 
function draw() {
	renderer.render(scene, camera);
	renderer.setAnimationLoop(draw);
}
 
  // GASP 라이브러리 애니메이션 추가
  gsap.to(mesh.position, {
    duration: 1,
    y: 2,
    z: 3
  });

애니메이션 문서 : https://gsap.com/docs/v3/GSAP/gsap.to()