Jacob's Development Blog

2021.03.12 - [Side-Project] - 얼떨결에 만들어본 CSS 사이드 프로젝트 얼떨결에 만들어본 CSS 사이드 프로젝트 세상에 뭐든 잘하는 괴물 같은 사람이 많다. 왜 난 아니지... 근데 처음부터 괴물이었을까. 늦게 시작했으면 부러워 말고 더 열심히 하자. 넋두리... 사실 이 프로젝트의 첫 시작은 프론트 개발 code-masterjung.tistory.com 위에 있는 첫 번째 사이드 프로젝트를 계속하고 있던 중 사실 몇 가지 마음에 들지 않는 것들이 있었다. 1. 처음에는 깃허브에만 올려두고 누가 보면 좋고 아니면 혼자 볼 것이다!라고 시작했지만, 글도 올리고 내 글에서 쓴 예제를 위 스토리북에서 구현하다 보니, 구조나 스토리북 관련 설정들이 마음에 들지 않았다. 뭐랄까... 스토리..

이 글에 들어가기 앞서, 혹시 화려한 애니메이션만 보고 흥미를 가졌다면, 한 가지를 더 생각하면 좋을 거 같다. 예상했겠지만 수학이다. 결국 3D 그래픽은 세 개의 좌표를 선으로 연결해서 입체적으로 보이게 하고, 다음 좌표를 계산하고 다시 렌더링 해서 움직이는 것처럼 보이게 한다. 물론 이 글을 쓰는 나 또한 수학을 잘하진 못한다. 많이 사용하는 삼각 함수는 잘 기억도 나지 않는게 현실이다(벌써 배운 지 10년이 넘었다). 하지만 잔잔한 일상 속에서 나를 더 성장시켜 줄 수 있을 거라는 근거 없는 확신이 든다. 일단 해보자. WebGL이란? WebGL은 Web Graphics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API이다. OpenGL E..

2021/01/23 - [React] - React로 Threejs 예제 따라 구현하기 React로 Threejs 예제 따라 구현하기 css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 code-masterjung.tistory.com 2번째 구현이다. 처음 예제에서 광원을 줘서 조금 더 3D 다운 개체를 만들었다. 용어가 생소한 부분이 많아 일단 무작정 외울 작정이다. 용어의 이질감을 없애고 이해를 하자(발음도 안되는데 자꾸 이해를 하려고 하니 시간만 낭비했다..) // https://threejsfundamentals.org/threejs/les..

css를 공부하다 보니 자연스레 WebGL에 관심이 생겨 기본 개념을 익힐 겸 공식 문서를 따라 만들어 보았다(openGL은 일단 조금 나중에 다시 보는 걸로..). 사실 문서가 너무 잘 돼있어 예제를 단순히 따라 하면서 react로 구현한 거 이외에는 별다른 게 없기 때문에 이 글에서는 쓸 내용은 많지 않았다. 하지만 시작한 기록을 남기기 위해 조금만 적어본다. Three.js란? Three.js는 웹에 3D 객체를 쉽게 렌더링하도록 WebGL을 근간에 둔 자바스크립트 3D 라이브러리이다. 사실상 WebGL이지만, WebGL의 경우 점, 섬, 삼각형만 그리는 단순한 자바스크립트 API이기 때문에, 3D 객체를 조금 더 편하고 효율적으로 짤 수 있게 도움을 주는 Three.js 같은 라이브러리를 사용한다..