CG Tutorial

2022-1학기 컴퓨터그래픽스 201720776 노유현

주제 선정의 이유

그간 배워왔던 geometry들과 다르게 three.js에서 아직 배우지 않은 geometry에 관심이 생겨서 어떤 geometry를 알아보고 알려주는 것을 만들면 좋을까 생각을 하다가 제일 단순한 plane이지만 인터넷에 plane geometry 사용방법을 찾아보면 나오지 않는 것을 확인하고 직접 만들어서 예시를 보여주고자 했다.

프로젝트 개발

three.js에서 plane geometry를 가져와서 wire frame이 활성화 되어 있을때와 안되어있을때로 나누어서 화면을 보여주고자 했다. 특히 plane geometry에서는 다른 geometry와 다르게 width segment와 height segment의 숫자를 바꾸어서 나타낼때 색깔이 있다면 뭐가 바뀌었는지 확인이 힘들기 때문에 wire frame을 활성화 시켜서 실제 어떻게 늘어났는지 확인 시켜주기 위해 wire frame을 활성화 한 것 하나와 활성화 하지 않은것 하나를 보여주고자 했다. 또한 css range slider를 통해서 실제 width, height, widthsegments, heightsegments 를 실시간으로 바꾸었을때 어떻게 화면이 변화하는 가를 보여주려 했다. slider를 사용했기에 oninput 코드를 사용하여 실시간으로 바꾼 값이 화면에 출력이 되도록 코드를 작성했다. 완성된 화면에서는 각 인자값을 변경시키면 변경시킨 그대로 바뀌어서 화면에 출력되는 것을 확인 할 수 있다.

느낀점

실제 배운 다른 geometry와 비교해본다면 그리 어려운 내용은 아니지만 한국어로 plane geometry에 대해서 자세하게 설명이 된 것이 없었고 three.js 사이트를 제외하고는 plane geometry를 실제 연습해볼 사이트가 없던 것 같아서 주제를 선정하고 코드를 작성하게 되었는데 html과 css, javascript에 대해서 많이 배우지 않아서 인터넷을 참고해서 코드를 작성해보았다. 시간이 오래 걸리긴 했지만 코드를 작성하면서 새로 알게된 함수나 기법 등을 통해서 새로운 것을 더 알아가는 느낌을 받았다. 또한 plane geometry 코드를 작성했지만 다른 geometry도 함께 공부해보면서 three.js에서 어떻게 코드를 작성해야하는지 어느정도 감을 잡았던것 같다. 또한 수업시간에 배웠던 rotate box나 다른 코드들을 많이 참고하긴 했지만 처음부터 코드를 작성해보면서 어떻게 구성되어 있는지를 하나하나 찾아 볼 수 있었던 것 같아서 더 공부가 되었던 것 같다.

참조

http://www.tcpschool.com/javascript/js_intro_basic - javascript

https://www.w3schools.com/howto/howto_js_rangeslider.asp - css(range slider),html,javascript

https://threejs.org/docs/index.html#api/en/geometries/PlaneGeometry - three.js(PlaneGeometry)