FrontEnd/React

[React] Three.js + CSS3d animation

검정색필통 2023. 4. 24. 21:02

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

 

threejs.org

한글 문서도 지원한다.

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

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

 

three.js examples

 

threejs.org

이 유용해 보인다.

별자리 튜토리얼도 있다.

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

 

Constellations - Three.js Tutorials

Special Offer Zabbix Monitoring Course Discount $11.99 https://www.udemy.com/course/zabbix-monitoring/?couponCode=607976806882D016D221 Offer expires in hours. Be quick and share with your friends and colleagues. Constellations BSC5 Branch Description The C

sbcode.net

 

2. react-three-fiber

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

 

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

🇨🇭 A React renderer for Three.js. Contribute to pmndrs/react-three-fiber development by creating an account on GitHub.

github.com

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

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

https://github.com/pmndrs/drei

 

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

🥉 useful helpers for react-three-fiber. Contribute to pmndrs/drei development by creating an account on GitHub.

github.com

와 함께 사용한다.

 

3. tween.js

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

 

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

JavaScript/TypeScript animation engine. Contribute to tweenjs/tween.js development by creating an account on GitHub.

github.com

User Guide

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

 

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

JavaScript/TypeScript animation engine. Contribute to tweenjs/tween.js development by creating an account on GitHub.

github.com

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

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

 

4. gsap

https://github.com/greensock/GSAP

 

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

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

github.com

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

 

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

React components for GSAP. Contribute to bitworking/react-gsap development by creating an account on GitHub.

github.com

https://greensock.com/docs/

 

Docs

Documentation for GreenSock Animation Platform (GSAP)

greensock.com

 

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?

This article serves as a point-by-point walkthrough of how JavaScript-based DOM animation libraries, such as Velocity.js and GSAP, are more performant than jQuery and CSS transitions.

davidwalsh.name

 

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

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

github.com

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

3D utility classes for

kamona-wd.github.io

 

6. 기타 css

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