[Three.js] Three.js 그리드(grid) 생성 및 예제(gridHelper)

이번 글에서는 Three.js를 사용하여 그리드(grid) 생성 하는 방법 및 예제에 대해 기록한다.

---

Three.js 그리드(grid) 생성 및 예제(gridHelper)

Three.js에서 Scene의 바닥에 그리드 격자 무늬를 그리려고 한다. 일단, 그 전에 Scene 그리는 방법에 이어 그리드 생성이다.

2024.12.13 - [IT/Three.js] - [Three.js] Three.js 장면(Scene) 생성 및 예제

[Three.js] Three.js 장면(Scene) 생성 및 예제

 

 

1. 그리드(Grid) 생성

- size : 크기

- divisions : 나누는 크기

<script>
	var baseX = 25;
    var baseY = 0.5;
    var baseZ = 25;
    
	// grid helper
	const size = 100;
	const divisions = 100;
	const gridHelper = new THREE.GridHelper( size, divisions, 0x444444, 0x888888 );//그리드 중앙선 기준으로 (0,0,0)
	gridHelper.position.set(baseX/2,baseY/2,baseZ/2);
	scene.add(gridHelper);
</script>

 

 

2. gridHelper(size, divisions, colorCenterLine, colorGrid)

1. size : 그리드 총 크기
2. divisions : 그리드 나누는 개수
3. colorCenterLine : 그리드에서 가로, 세로 중간선 색깔
4. colorGrid : 그리드 격자 선 색깔

 

3. Division 차이 예

1) Division이 10일 경우

 

2) Division이 100일 경우

 

---