[React.js 3D 에니메이션 만들기(1)] generator(제네레이터) 를 활용해 에니메이션 시퀸스 만들기! with react three fiber/ framer-motion / react three rapier
포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하였다. 설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @react-three/rapier framer-motion framer-motion-3d 1. three설명: WebGL 기반 3D 그래픽을 쉽게 구현할 수 있는 JavaScript 라이브러리.용도: 3D 모델링, 애니메이션, 조명, 텍스처 맵핑 등 3D 그래픽의 기본적인 빌딩 블록 제공.2. three-stdlib설명: Three.js의 추가 유틸리티 모음.용도: ..
프론트엔드
2024. 11. 19. 14:39
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- eslint
- vue ref
- react leva
- leva
- react fiber 3d
- next.js import glsl
- Vue.js
- ts glsl
- 394. decode string js
- react glsl
- react 3d text
- 394 decode string
- vue
- webpack glsl
- react three fiber
- vue react
- react 3d 에니메이션
- [leetcode] 394. decode string
- react ref reative
- react vue
- vue reactive
- vue3
- react 3d
- react 3d animation
- 394. decode string javascript
- [leetcode] 394. decode string js
- react three fiber leva
- three.js leva
- typescript gsls
- attempted import error: bvh_struct_definitions' is not exported from './gpu/bvhshaderglsl.js' (imported as 'bvhshaderglsl').
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
글 보관함