Three.js | Geometry - CircleGeometry

Geometry - CircleGeometry

0.  생성인자

CircleGeometry는 생성시 다음과 같이 4개의 인자를 받는다

(radius,segments,thetaStart,thetaLenght)

 

1.  원판의 반지름

첫번째 인자는 원판의 반지름 크기이다

기본값은 1이다.

	_setupModel() {
		const geometry = new THREE.CircleGeometry(); //1라디안은 180도/파이 , 즉 파이는 180도
		const fillMaterial = new THREE.MeshPhongMaterial({ color: 0x515151 });
		const cube = new THREE.Mesh(geometry, fillMaterial);

		const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffff00 });
		const line = new THREE.LineSegments(
			new THREE.WireframeGeometry(geometry),
			lineMaterial
		);

		const group = new THREE.Group();
		group.add(cube);
		group.add(line);

		this._scene.add(group);
		this._cube = group;
	}

 

반지름을 줄여보자

const geometry = new THREE.CircleGeometry(0.5);

 

2. 원판의 분할 수

두번째 인자는 원판의 분할 수 이다.

기본값은 32이다.

const geometry = new THREE.CircleGeometry(1);

 

3으로 바꿔보자

const geometry = new THREE.CircleGeometry(1,3);

 

3. 시작각도와 연장각도

세번째와 네번째는 각각 시작각도와 연장각도이다.

이 각도에 대한 단위는 라디안(1라디안 = π = 180도)이다

이 값의 기본값은 0과 2π(360도)이다

0도 부터 시작해서 시계방향으로 360도 채우는 것이다

 

0부터 시작해서 3시방향 까지만 채워보자

0부터  π/2 (90도) 를 하면 된다.

파이는 Math.PI를 사용하면 된다

const geometry = new THREE.CircleGeometry(1, 32, 0, Math.PI / 2);

 

만약 9시부터 12시 를 하고싶다

그러면 시작점을 9시에 맞춰놓고

90도를 연장시키면 된다

const geometry = new THREE.CircleGeometry(1, 32, Math.PI / 2, Math.PI / 2);