[React] Three.js + CSS3d animation

1. Three.js

Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리이다. WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다.

https://threejs.org/docs/index.html#manual/ko/introduction/Creating-a-scene

three.js docs

한글 문서도 지원한다.

다양한 example이 있지만 이번 프로젝트에서는

https://threejs.org/examples/#css3d_periodictable

three.js examples

이 유용해 보인다.

별자리 튜토리얼도 있다.

https://sbcode.net/threejs/constellations/

Constellations - Three.js Tutorials

 

2. react-three-fiber

https://github.com/pmndrs/react-three-fiber

GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js

react에서 three.js를 편리하게 쓸 수 있게 도와주는 라이브러리이다.

추가적으로 많은 라이브러리가 있지만 보통

https://github.com/pmndrs/drei

GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

와 함께 사용한다.

 

3. tween.js

https://github.com/tweenjs/tween.js/

GitHub - tweenjs/tween.js: JavaScript/TypeScript animation engine

User Guide

https://github.com/tweenjs/tween.js/blob/main/docs/user_guide.md

GitHub - tweenjs/tween.js: JavaScript/TypeScript animation engine

three.js의 example에서 tween.js를 보게 되었다.

animation을 자바스크립트 상에서 조작할 수 있게 만드는 라이브러리이다.

 

4. gsap

https://github.com/greensock/GSAP

GitHub - greensock/GSAP: GreenSock's GSAP JavaScript animation library (including Draggable).

https://github.com/bitworking/react-gsap

GitHub - bitworking/react-gsap: React components for GSAP

https://greensock.com/docs/

Docs

 

gsap을 사용한 js animation을 선택한 이유는 일단 docs가 제일 잘 되어있다!

js animation를 사용하면 좋은 이유를 살펴보면(css animation과 비교하여)

1. css animation의 Transitions의 강제 하드웨어 가속은 GPU에 부담을 주므로 스트레스가 높은 상황에서 끊김 현상이 발생할 수 있다.

2. javascript로 조작이 가능하므로 다른 object들과의 상호작용이 쉽다. 

3. JavaScript 기반 애니메이션 라이브러리는 하드웨어 가속을 활성화할 시기를 스스로 결정할 수 있다.

• 레이아웃 스래싱을 ​​최소화하기 위해 전체 애니메이션 체인에서 DOM → 트윈 스택을 동기화합니다.
• DOM 쿼리(성능 DOM 애니메이션의 아킬레스건)의 발생을 최소화하기 위해 연결된 호출 전체에서 속성 값을 캐싱합니다.
• 동일한 호출에서 형제 요소 간의 캐싱 단위 변환 비율(예: px에서 %, em 등).
• 업데이트가 시각적으로 감지되지 않는 경우 스타일 업데이트를 건너뜁니다.

https://davidwalsh.name/css-js-animation

CSS vs. JS Animation: Which is Faster?

 

5. tailwindcss-perspective

https://github.com/Kamona-WD/tailwindcss-perspective?ref=morioh.com&utm_source=morioh.com 

GitHub - Kamona-WD/tailwindcss-perspective: A little bit of utility classes related to css 3d transform

tailwindcss에서는 3d animation을 쓰기 까다롭다. 이를 도와주는 라이브러리이다.

- perspective는 children을 3d 공간에서 변형시키기 위해 parent div에 설정해준다. perspective-*의 * 숫자에 따라 어느 거리에서 children을 바라보는지 value가 변경된다.

- x, y, z 3차원 좌표계를 지원하며 시점 또한 변경가능하다. x는 위아래, y는 좌우, z는 앞뒤로 생각하면 편하다.

- example을 참고하면 보다 이해가 쉬울 것이다.

https://kamona-wd.github.io/tailwindcss-perspective/

@kamona/tailwindcss-perspective

 

6. 기타 css

• backface-visibility
  3d에서 요소의 뒷쪽에서 앞면이 보이게 할지를 결정하는 속성
  기본값 backface-visible 가리고 싶으면 backface-hidden)