react-three-fiber, three.js 한번해보자

100개 어플 프로젝트를 하면서 어플의 퀄리티가 너무 낮은 것을 느꼈다.

그래서 어플의 퀄리티를 높여보고 싶어서 unity를 다시 시작할까 했지만,,, 설치하기가 귀찮아서 다른방법을 찾아보았다.

 

그러다가 react-three-fiber 를 발견하였다.

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

React Three Fiber Documentation

 

들어가보면 리액트 프로젝트에서 three.js 를 성능 문제없이 완벽(?)하게 사용할 수 있는 라이브러리라고 소개되어 있다.

리액트 네이티브또한 적용되는 것을 확인하였다. 그래서 바로 처음부터 활용해 보려 했는데

 

첫 페이지부터 three.js 를 좀 알고와라는 내용이 있었다.

 

그래서 three.js 강의 영상을 좀 찾아보고 개념을 익혔다. 약간 유니티와 비슷하게 camera ,scene, light 객체가 있었고 그것들을 조절할 수가 있었다. 이런 있어보이는 것들을 웹에서 이렇게 쉽게 구현할 수 있을지는 몰랐는데 좀 충격먹었다. 진작 해볼걸이라는 생각도 들었다.

 

3d 배경 적용하고 공하나 놔두고 카메라를 이리저리 움직여보는 것을 만들어봤다.

 

소스 코드는 https://github.com/daehwan2/three-js-practice

GitHub - daehwan2/three-js-practice

깃허브에 올려놨다. 커밋으로 어떤걸 추가할때는 어떤걸 써야하는지를 남겨봤으니 나중에 보기 좋을 것 같다.

 

이제 대략적인 개념을 익혔으니 react-three-fiber 를 리액트네이티브에 적용해봐야겠다.

튜토리얼 느낌으로 동전 던지기를 3d 어플로 구현해볼것이다.