- position: 정점의 3D 좌표
- normal: 정점의 법선 벡터
- uv: 텍스처 좌표
- color: 정점의 색상
- modelMatrix: 모델 변환 행렬
- viewMatrix: 뷰 변환 행렬
- projectionMatrix: 투영 변환 행렬
- normalMatrix: 법선 변환 행렬
- cameraPosition: 카메라의 위치
경로 Mesh를 따라 흐르는 화살표 시각화 (three.js)
공장 생산 설비 시각화나 도로 진행 방향 시각화 등에서 자주 사용되는 기능 중 하나입니다. 아래처럼 간단한 경로를 Mesh로 구성하고 화살표 이미지를 맵핑한 후 원하는 방향으로 화살표가 흘러가도록 합니다.
three.js, 뒤에서 보여지는 물체 감추기
실내와 같은 장면을 3D로 살펴볼때 벽처럼 막힌 부분이 장면의 시인성을 방해하는 경우가 있습니다. 아래가 그러한 경우입니다.
위의 영상에서 보이는 것처럼 실내의 물체를 벽이 가리는 문제가 있습니다. 이런 문제점을 해결하기 위해 뒤에서 보여지는 물체(벽 등)를 잠시 보이지 않도록 해주는 기능이 필요한데요. 아래는 그에 대한 결과입니다.
이에 대한 기능을 컴포넌트로 만든 것이 BackViewHiderControls 입니다. 관련 API는 다음과 같습니다.
먼저 컨트롤러 객체를 생성합니다.
_setupControls() {
...
const backViewHider = new BackViewHiderControls(this._camera);
this._backViewHider = backViewHider;
...
}
그리고 매 프레임마다 호출되는 update 매서드에서 다음 코드를 입력합니다.
update() {
....
this._backViewHider.updateOnFrame();
}
three.js, 선택된 모델에 대한 줌(Zoom)
3D 그래픽 기능 개발에 있어서 선택된 모델을 화면에서 확대하는 기능입니다.
ZoomControls 라는 클래스로 컴포넌트화 해서 재사용성을 높였습니다. 이 기능은 제 유튜브 채널의 강좌에서 설명하고 있는 코드를 거의 그대로 사용하고 있습니다.
ZoomControls에 대한 API 사용은 다음과 같습니다.
먼저 ZoomControls 객체를 생성합니다.
_setupControls() {
this._orbitControls = new OrbitControls(this._camera, this._divContainer);
...
const zoomControls = new ZoomControls(this._orbitControls);
this._zoomControls = zoomControls;
}
그리고 확대하고자 하는 Object3D에 대해 다음처럼 코드를 수행해주면 됩니다.
zoom(zoomTarget, view) {
if (view === "좌측 뷰") this._zoomControls.zoomLeft(zoomTarget);
else if (view === "우측 뷰") this._zoomControls.zoomRight(zoomTarget);
else if (view === "정면 뷰") this._zoomControls.zoomFront(zoomTarget);
else if (view === "후면 뷰") this._zoomControls.zoomBack(zoomTarget);
else if (view === "상단 뷰") this._zoomControls.zoomTop(zoomTarget);
else if (view === "하단 뷰") this._zoomControls.zoomBottom(zoomTarget);
else if (view === "뷰 유지") this._zoomControls.zoom(zoomTarget);
}
선택된 모델에 대한 아웃라인 표시는 SelectionPassWrapper API를 사용하였고 이와 관련된 내용은 다음과 같습니다.
three.js, 3D 모델에 대한 라벨 시각화
3D 모델에 대한 효과적은 라벨 시각화는 그 목 표에 따라 매우 주관적이고 다양하게 접근할 수 있습니다. 이 글에서 제공되는 라벨 시각화 역시 많은 다양한 방법 중에 하나인데요. 목표는 3D 모델을 최대한 가리지 않아야 하며 라벨 사이의 충돌을 최소화 해야 합니다. 이런 목표에 따라 만든 기능은 아래와 같습니다.
위의 기능을 프로젝트에 빠르고 쉽게 적용하기 위해 SmartLabel이라는 이름으로 컴포넌트로 만들었는데요. 이 컴포넌트를 적용할 때 고려해야할 코드를 정리하면 다음과 같습니다.
먼저 SmartLabel 컴포넌트와 라벨 관련 데이터를 생성하고 설정해야 합니다.
_setupLabels() {
const smartLabel = new SmartLabel(this._scene, this._camera);
this._smartLabel = smartLabel;
const labels = {
"Object": {
label: "미할당영역",
textColor: "gray",
},
"Part1": {
label: "정문 계단",
textColor: "white",
},
"Part2": {
label: "정문",
textColor: "white",
},
"Part3": {
label: "파손영역A",
textColor: "red",
},
"Part4": {
label: "파손영역B",
textColor: "red",
},
...
}
this._smartLabel.setLabelData(labels);
}
labels 객체의 key는 Mesh의 이름이고 Value는 표시될 라벨과 텍스트 색상입니다. 라벨이 표시될 Mesh의 지정은 다음과 같습니다.
_setupModel() {
const loader = new GLTFLoader();
loader.load("./model.glb", gltf => {
const object = gltf.scene;
this._scene.add(object);
const meshes = [];
object.traverse(obj => {
if (obj.isMesh) meshes.push(obj);
});
this._smartLabel.setTargetMeshs(meshes);
this._smartLabel.buildLabels();
...
});
}
매 프레임마다 다음과 같은 코드 호출이 필요합니다.
update() {
...
this._smartLabel.updateOnFrame();
}
렌더링 시 다음과 같은 코드 호출이 필요하구요.
render() {
this.update();
...
this._smartLabel.render();
requestAnimationFrame(this.render.bind(this));
}
렌더링 되는 영역의 크기가 변경되면 다음 코드 호출이 필요합니다.
resize() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
...
this._smartLabel.updateSize(width, height);
}
라벨은 DOM 요소입니다. 이에 대한 스타일이 필요할 수 있는데, 위의 예시의 경우 다음과 같습니다.
.label {
font-size: 1em;
border: 2px solid yellow;
padding: 0.3em 0.8em;
border-radius: 0.9em;
background-color: black;
transition: transform 0.2s ease-out, opacity 1s ease;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}