THREE.LineSegments로 격자 그리기

3D에서 개발하다 보면 위치 확인차 바닥면을 기준으로 볼 수 있는 그리드가 필요해서 만들어 보았다.

코드 예제

var size = 100; // 격자 가로 세로 크기
var step = 10; // 격자 간격

var halfSize = Math.floor(size / 2);
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ color: 0x333333, opacity: 0.3, transparent: true });

for (var i = -halfSize; i <= halfSize; i += step) {
  geometry.vertices.push(new THREE.Vector3(-halfSize, 0, i));
  geometry.vertices.push(new THREE.Vector3(halfSize, 0, i));
  geometry.vertices.push(new THREE.Vector3(i, 0, -halfSize));
  geometry.vertices.push(new THREE.Vector3(i, 0, halfSize));
}

var line = new THREE.LineSegments(geometry, material);
scene.add(line);

위 코드를 실행하면 바닥면에 격자가 생성되어 3D 공간에서 위치를 확인하기 편리해진다.

https://302chanwoo.com/lab/three/grid.html