본문 바로가기

threejs연습

(2)
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) 회전 등의  부모 객체를 기준으로 한다. 왜 그럴까..