3줄 요악
1. 남이 만든거 괜찮으면 가져다 쓰는게 좋다.
2. 이해하면 더 좋고.
3. 그래서 css 3d 공부를 쪼끔 해봤다.
three js 의 css 3d object를 이용해 rubick's cube 어플리케이션을 만들었습니다.
근데 이걸 하면서 불만이, three js의 일부 속성만 가져다 css 3d를 구성 하는데, 꼭 three js를 다 갖다가 놔야 한다는게 불만이었습니다.
그래서 그런 라이브러리를 직접 만들 수 있지 않을까? 해서 공부를 해보았습니다.
뭐 이런식으로 나름의(?) 라이브러리를 만들어서 (class로 안하고 뭐하는 짓이냐 라고 생각할 수도 있는데 저는 이게 더 자바스크립트 같고 좋습니다 취향존중 부탁드립니다.)
이런게 되는걸 만들었습니다.
당근 박스도 그릴 수 있습니다.
근데 이거를 만들면서 조사를 해 보니 이미 몇개가 있었습니다
(https://github.com/WoodNeck/css-camera)
(three js)
three js에서는 자료형(vector, matrix )을 뜯어오고
다른데서는 개념을 가져와서 구현을 해나가다 보니
이럴거면 그냥 있는거 쓰지 ..
그래서 그냥 지적 유희로 공부 해봤다 정도로 의의를 두고 있습니다.
이런식으로 제가 만든 라이브러리를 이용해서 모피어스 화면을 만들었습니다.
제가 구구절절 설명하지 않아도 html이 어떻게 구성되는가를 보면 더 명확할 거라고 생각 합니다.
universe 안에 observer 안에 world 안에 object들이 있습니다..
universe는 prespective 속성만 갖고 있습니다.
observer는 world를 관찰 한다는 개념을 갖고 있습니다. 따라서 observer의
rotation, position이 바뀌면 observer 자체의 transform과 observer의 child인 world의 transform에도 영향을 주게끔 되어 있습니다. 이게 css 3d로 화면을 구성하는 원리의 전부 입니다.
이거 three js 는 CSS3DRenderer에서 붙여주고, 기존의 Three js 오브젝트들의 행렬 속성에서
transform을 뽑아 내어 render를 하는 과정으로 되어 있습니다.
저는 처음에는 css 3d니까 행렬 없이 vector와 css로 해결을 많이 할 수 있을줄 알았는데, 만들수록 결국은 Three.js의 접근법이 옳다는 것을 느꼈습니다. 결국 Three.js가 짱입니다.. 여러분..
https://github.com/lab89/css_3d <- 깃 주소 입니다.
많은 것들이 다 만들어져 있다면 나는 과연 뭘 새로 만들어 볼 수 있을까에 대한 고민은 개발자를 시작 하면서부터 고민했던 것인데, 점점 없을 것 같다는 생각이 들곤 합니다..
그럼 이만..
