This is it. it's IT.

react-three-fiber(리액트로 구현하는 3D...Animation?), codeSandBox 본문

Frontend/React.js

react-three-fiber(리액트로 구현하는 3D...Animation?), codeSandBox

응애개발자 애기 2022. 8. 9. 11:30
728x90
반응형

https://theubermensch.tistory.com/191

 

[React/Three] 처음 만나는 three.js (2)

목표 점검하기 처음 만나는 three.js (1)에서 three.js 에 대한 아주 기초적인 이해를 마쳤다. 이번에는 react-three-fiber 에 대해 아주 간단하게 알아보고( three.js 를 react 에서 어떻게 JSX로 작성하는지 알.

theubermensch.tistory.com

 

 

대단한 걸 찾았다... 

 

요즘 CodeSandbox라는 곳에서 온라인으로 작업환경을 설정할 수 있다는 걸 알고 신나하던 참이다. 

 

여기서 다른 사람들이 만든 리액트 코드들을 구경할 수 있는데 .. . .

디자인적으로 디게 독창적인 코드를 봐서 어떻게 하는 것인지 궁금했다. 

 

https://codesandbox.io/s/youthful-voice-y3j31r13zz?file=/src/index.js 

 

glitch, react-three-fiber + react-spring - CodeSandbox

glitch, react-three-fiber + react-spring by drcmda using react, react-dom, react-scripts, react-spring, react-three-fiber, three

codesandbox.io

 

 

디펜던시를 보니깐 react-three-fiber라는 게 있엇너 구글링 해보았따. 

 

 

https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene

 

React Three Fiber Documentation

React-three-fiber is a React renderer for three.js

docs.pmnd.rs

이것은 react-three-fiber의 공식 문서이다. 

아마도 이것은 three.js를 다루는 방법을 말하고 있는 듯... three.js를 사용하는 데에 원활하도록 도와주는 디펜던시인 듯 하다. 

더 찾아보니 three.js를 리액트 문법으로 다룰 수 있도록 도와준다고 한다. 

 

 

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

 

three.js docs

 

threejs.org

 

three.js의 문서를 보았다... 

 

 

 

 

요런 인터랙티브한 디자인을 예전부터 꿈꾸고 있었다. ..

이것을 위해선 WebGL을 알아야 한다고 한다. 

https://velog.io/@mael1657/React-Three.js%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EC%9E%90

 

[React] Three.js를 적용해보자.

Three.js 리액트를 이용해 포트폴리오 사이트를 만들던 중 문제에 봉착했다. HTML, CSS, JS 만으로 인터랙티브한 웹을 만드는게 너무 어려워! 그래서 Awwwards 사이트를 구경해보니 많은 웹페이지들이 We

velog.io

 

728x90

'Frontend > React.js' 카테고리의 다른 글

typescript 인터페이스를 더 쉽게 만드는 방법ㅇ  (1) 2022.09.26
react-router-dom : a태그 대신 Link 사용  (0) 2022.09.16
react 단축키  (0) 2022.06.09
TypeScript를 리액트 프로젝트에 적용  (0) 2022.04.01
React - Styled component 사용하기  (0) 2022.04.01
'Frontend/React.js' Related Articles more
Comments