OpenGL이나 이를 기반으로 하는 WebGL에서 3D 그래픽에서 두께를 갖는 라인을 표현하기 위해서는 원하는 만큼의 두께를 표현하기 위한 볼륨을 갖는 매시를 구성해야 합니다. 3D 그래픽에서는 기본적으로 라인 을 오직 1 픽셀만큼의 두께로 표현할 수 있다는 제약이 있기 때문입니다. 사실 이런 제약은 OpenGL의 제약은 아니고 이를 구현하는 쪽에서의 표준을 충족하지 못했다고 보는게 맞습니다. 원래 OpenGL은 라인에 대해서도 두께를 지정할 수 있고 이에 맞게 라인을 표현해야한다라는 표준을 정했지만 이 표준을 구현하는 쪽에서 이를 구현하지 않았기 때문입니다.
three.js에서도 라인을 표현할때 아무리 두께에 대한 값을 설정해줘도 항상 1 pixel로 표현됩니다. 다행히도 three.js는 두께를 갖는 라인을 표현하기 위해 충분히 검증된 기능을 Line2라는 확장 Addon을 제공합니다. 이 Line2를 사용하면 원하는 두께를 갖는 라인을 표현할 수 있습니다.
이 Line2를 이용하기 위해 다음과 같은 import문이 필요합니다.
import { ..., Line2, LineMaterial, LineGeometry, GeometryUtils } from "three/addons/Addons.js"
그리고 원하는 형태의 라인의 좌표와 색상을 통해 라인을 생성합니다.
_setupModel() {
const positions = [];
const colors = [];
const points = GeometryUtils.hilbert3D(
new THREE.Vector3(0, 0, 0), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7);
const spline = new THREE.CatmullRomCurve3(points);
const divisions = Math.round(3 * points.length);
const point = new THREE.Vector3();
const color = new THREE.Color();
for (let i = 0, l = divisions; i < l; i++) {
const t = i / l;
spline.getPoint(t, point);
positions.push(point.x, point.y, point.z);
color.setHSL(t, 1, 0.5, THREE.SRGBColorSpace);
colors.push(color.r, color.g, color.b);
}
const geometry = new LineGeometry();
geometry.setPositions(positions);
geometry.setColors(colors);
const matLine = new LineMaterial({
// wireframe: true,
// color: 0xffffff,
vertexColors: true,
// worldUnits: false,
linewidth: 10, // worldUnits이 false일 경우 pixel 단위
// alphaToCoverage: true,
// dashed: true,
// dashSize: 3,
// gapSize: 1,
// dashScale: 1,
});
const line = new Line2(geometry, matLine);
line.computeLineDistances();
line.scale.set(1, 1, 1);
this._scene.add(line);
}
결과는 다음과 같습니다.
위의 결과는 단순히 선으로 보이지만 사실 매시입니다. 코드 중 LineMaterial에 wireframe을 true로 설정하면 다음처럼 면으로 구성된 매시라는 점과 항상 카메라를 향하도록(빌보드) 설정되어 있다느 것을 알 수 있습니다.
