어떤 Control를 사용할까?

R3F는 3D 뷰를 컨트롤하기 위해 다음과 같은 컨트롤들을 제공한다.

• DragControls
• FirstPersonControls
• FlyControls
• OrbitControls
• PointerLockControls
• TrackballControls
• TransformControls

이를 통해 특정 대상을 포커스하거나 1인칭 3D 시점 등 다양한 카메라 동작이 가능해진다.

별숲은 플라네타리움 기반의 다이어리 서비스이므로 사용자에게 마치 고개를 돌려 밤하늘을 살펴보는 느낌을 주는 것이 중요하다고 생각했다. 따라서 스텔라리움처럼 사용자가 드래그를 통해 화면을 이동할 수 있도록 하기 위해 OrbitControls를 사용하기로 했다.

기본 물체 배치

구(sphereGeometry)를 잘라 반구를 만들어 추가하고 카메라를 원점에 두어 밤하늘 느낌을 내보기로 했다. three.js 문서에 따르면 sphereGeometry는 다음과 같이 인자를 받을 수 있다고 한다.

Segments는 딱 봤을 때 이해하기 힘들었다. 학습한 결과 three.js에서 구(혹은 원형의 물체)는 여러 개의 점을 잇고 색을 채워서 구현된다고 한다. 구성하는 점이 많을 수록, 즉 Segments 값이 클수록 더욱 부드러운 구가 된다. 당장은 기본값인 [32, 16]을 사용하기로 했다. 우리가 원하는 물체는 반구이므로 파이 / 세타 값을 조정해 아래쪽을 잘랐다. 또한 반구 안쪽에서 색깔을 볼 수 있도록 side 값을 지정해주었다.

<Canvas>
	<mesh>
		<sphereGeometry args={[30, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2]} />
		<meshBasicMaterial color={0x000060} side={THREE.BackSide} />
	</mesh>
</Canvas>

마지막으로 카메라 동작을 위해 광원과 OrbitControls, 임의의 별들을 추가했다.

<Canvas>
	<ambientLight />
	<OrbitControls />
	<mesh>
		<sphereGeometry args={[30, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2]} />
		<meshBasicMaterial color={0x000060} side={THREE.BackSide} />
	</mesh>
	<Stars>
</Canvas>

빈 공간에 별 생성하기

별숲 사용자들은 빈 밤하늘에 더블 클릭 이벤트로 원하는 위치에 별(일기)를 생성할 수 있어야 한다. 해당 기능을 구현하기 위해 반구에 더블 클릭 이벤트를 달고 이벤트 객체를 살펴보았다.