본문 바로가기

threejs튜토리얼

(3)
threejs 스터디 5주차) 두근두근 메탈릭 하트 어느새 threejs 이론 편 마지막 주차이다. 이번 주차는 그림자, 안개, 렌더타겟, 사용자 지정 BufferGeometry를 다뤄야 했지만, BufferGeometry 편에서 약간 응용 편 같이 구현된 예시가 너무 마음에 들어서 비슷한 걸 만들어보고 그 경험을 공유하는 식으로 스터디를 준비해 보았다. 예시에서는 구체를 가로방향으로 24조각, 세로방향으로 16조각 낸다고 했을 때의 꼭짓점의 위치 값을 직접 계산해서 BufferGeometry를 만든다. 이후 시간의 흐름에 따라 BufferGeometry의 모든 꼭짓점들을 일정하게 움직이도록 만든다.홀린 듯이 예시를 보다가, 하트가 박동하며 산산조각 났다가 다시 합쳐지면 예쁘겠단 생각이 들어 구현해 보기로 했다.// 예시코드 https://threejs...
three.js 스터디 4주차) 카메라 컨트롤, 여러가지 재질과 텍스처를 곁들인 4주차는 다뤄야할 내용이 많았다. 재질과 텍스쳐, OrbitControls를 사용한 카메라 이동 및 회전 구현, 마우스와 키보드 입력처리, 불필요한 렌더링 방지였는 데, 공식 문서의 설명과 예제 코드를 다 보다보니 카메라 파트에 다른 파트의 코드들을 얹어보면 될 것 같아, 그렇게 정리해보았다. 마우스와 키보드 입력처리는 녹여내기엔 애매하기도 하고, 다른 주차나 프로젝트에서 한번쯤 다루게 될 것 같아 제외했다.OrbitControls 따로 모듈을 불러와야한다. 특정 좌표(controls.target)를 중심으로 공전하는 것처럼 카메라를 이동해준다. 마우스를 드래그하면 공전하는 움직임을 확인할 수 있다. 휠을 올리거나 내리면 좌표로부터의 거리가 가까워지거나 멀어진다. enableDamping 을 true 로..
three.js 스터디 3주차) 씬 그래프 탐구 feat.태양계 이번 주차에서는 간단한 태양계를 구현해 보며 씬 그래프를 이해해 보는 게 목표이다. 씬 그래프에서 부모가 자식에게 미치는 영향 우선 씬 그래프는 '요소(node)의 계층 구조를 그림으로 나타낸 것으로, 여기서 각 요소는 각각의 "지역 공간(local space)"을 가리'킨다.지역 공간이 낯설긴 한데, 부모 자식관계를 설정해 부모의 위치, 크기, 회전을 조정하다 보면 어떤 개념인지 와닿는다. 부모 객체의 스케일이 확대되면, 자식 객체의 스케일도 따라 커지고, 자식 객체의 좌표평면에서 x, y, z 단위도 그만큼 확대된다. 부모객체가 x 축으로 90도 회전한다면, 자식도 마찬가지로 x 축으로 90도 회전된다. 즉 자식 객체의 1) 위치, 2) 크기, 3) 회전 등의  부모 객체를 기준으로 한다. 왜 그럴까..