329 lines
11 KiB
TypeScript
329 lines
11 KiB
TypeScript
import { RENDER_OPTIONS } from "@config/config_frontend";
|
|
import * as THREE from "three";
|
|
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
|
import type { SurfaceBounds, SurfacePointCloudSampleResponse } from "./B04_wf1_Surface_Api_Fetch";
|
|
import {
|
|
bindSurfaceViewerTheme,
|
|
getReferenceCenter,
|
|
getTopFitDistance,
|
|
niceScaleDistance,
|
|
SURFACE_CAMERA_FOV,
|
|
targetPlaneMetersPerPixel,
|
|
type SurfaceCameraState,
|
|
} from "./B04_wf1_Surface_UI_Camera";
|
|
|
|
export type { SurfaceCameraState } from "./B04_wf1_Surface_UI_Camera";
|
|
|
|
export interface SurfacePointCloudViewer {
|
|
root: HTMLElement;
|
|
controlsGroup: HTMLElement;
|
|
optionsGroup: HTMLElement;
|
|
statusSpan: HTMLElement;
|
|
render: (data: SurfacePointCloudSampleResponse | null) => void;
|
|
setAxesVisible: (visible: boolean) => void;
|
|
applyCameraState: (state: SurfaceCameraState) => void;
|
|
onCameraChange: (listener: (state: SurfaceCameraState) => void) => void;
|
|
resetOptions: () => void;
|
|
dispose: () => void;
|
|
}
|
|
|
|
type CameraView = "iso" | "top" | "front" | "side";
|
|
|
|
function makeButton(label: string): HTMLButtonElement {
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.textContent = label;
|
|
return button;
|
|
}
|
|
|
|
export function createSurfacePointCloudViewer(): SurfacePointCloudViewer {
|
|
const root = document.createElement("div");
|
|
root.className = "point-viewer";
|
|
|
|
const statusSpan = document.createElement("span");
|
|
statusSpan.className = "b04-surface__status-info";
|
|
statusSpan.textContent = "포인트 데이터 로딩 중...";
|
|
|
|
const controls = document.createElement("div");
|
|
controls.className = "viewer-controls";
|
|
const viewButtons: Array<[CameraView, HTMLButtonElement]> = [
|
|
["iso", makeButton("사시도")],
|
|
["top", makeButton("상단")],
|
|
["front", makeButton("정면")],
|
|
["side", makeButton("측면")],
|
|
];
|
|
controls.append(...viewButtons.map(([, button]) => button));
|
|
|
|
const controlsGroup = document.createElement("section");
|
|
controlsGroup.className = "b04-surface__group";
|
|
const controlsTitle = document.createElement("h3");
|
|
controlsTitle.className = "b04-surface__panel-title";
|
|
controlsTitle.textContent = "뷰어 시점 제어";
|
|
controlsGroup.append(controlsTitle, controls);
|
|
|
|
const options = document.createElement("div");
|
|
options.className = "viewer-options";
|
|
const sizeLabel = document.createElement("label");
|
|
sizeLabel.textContent = "점 크기";
|
|
const sizeInput = document.createElement("input");
|
|
sizeInput.type = "range";
|
|
sizeInput.min = "0.1";
|
|
sizeInput.max = "2.5";
|
|
sizeInput.step = "0.01";
|
|
sizeInput.value = "0.42";
|
|
sizeLabel.append(sizeInput);
|
|
const densityLabel = document.createElement("label");
|
|
densityLabel.innerHTML = '밀도 <span class="viewer-option-val">100%</span>';
|
|
const densityInput = document.createElement("input");
|
|
densityInput.type = "range";
|
|
densityInput.min = "1";
|
|
densityInput.max = "10";
|
|
densityInput.step = "1";
|
|
densityInput.value = "10";
|
|
densityLabel.append(densityInput);
|
|
options.append(sizeLabel, densityLabel);
|
|
|
|
const optionsGroup = document.createElement("section");
|
|
optionsGroup.className = "b04-surface__group";
|
|
const optionsTitle = document.createElement("h3");
|
|
optionsTitle.className = "b04-surface__panel-title";
|
|
optionsTitle.textContent = "포인트 표시 옵션";
|
|
optionsGroup.append(optionsTitle, options);
|
|
|
|
const viewerArea = document.createElement("div");
|
|
viewerArea.className = "three-viewer";
|
|
const canvas = document.createElement("canvas");
|
|
canvas.className = "b04-surface-viewer__canvas";
|
|
const scaleBar = document.createElement("div");
|
|
scaleBar.className = "b04-surface__scale";
|
|
const scaleText = document.createElement("span");
|
|
scaleBar.append(scaleText);
|
|
viewerArea.append(canvas, scaleBar, statusSpan);
|
|
root.append(viewerArea);
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
canvas,
|
|
antialias: RENDER_OPTIONS.antialias,
|
|
});
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, RENDER_OPTIONS.maxPixelRatio));
|
|
const scene = new THREE.Scene();
|
|
const releaseTheme = bindSurfaceViewerTheme((color) => {
|
|
scene.background = new THREE.Color(color);
|
|
});
|
|
const camera = new THREE.PerspectiveCamera(SURFACE_CAMERA_FOV, 1, 0.1, 22000);
|
|
const orbit = new OrbitControls(camera, canvas);
|
|
orbit.enableDamping = true;
|
|
orbit.dampingFactor = 0.08;
|
|
orbit.screenSpacePanning = true;
|
|
const axes = new THREE.AxesHelper(45);
|
|
axes.visible = false;
|
|
scene.add(axes);
|
|
|
|
let pointsObject: THREE.Points | null = null;
|
|
let currentData: SurfacePointCloudSampleResponse | null = null;
|
|
let animationFrame = 0;
|
|
let hasConnected = false;
|
|
let disposed = false;
|
|
let cameraListener: ((state: SurfaceCameraState) => void) | null = null;
|
|
let suppressCameraEvent = false;
|
|
let referenceBounds: SurfaceBounds | null = null;
|
|
|
|
function resize(): void {
|
|
const rect = viewerArea.getBoundingClientRect();
|
|
const width = Math.max(1, Math.floor(rect.width));
|
|
const height = Math.max(1, Math.floor(rect.height));
|
|
renderer.setSize(width, height, false);
|
|
camera.aspect = width / height;
|
|
camera.updateProjectionMatrix();
|
|
}
|
|
|
|
function clearPoints(): void {
|
|
if (!pointsObject) return;
|
|
pointsObject.geometry.dispose();
|
|
const material = pointsObject.material;
|
|
if (Array.isArray(material)) material.forEach((item) => item.dispose());
|
|
else material.dispose();
|
|
scene.remove(pointsObject);
|
|
pointsObject = null;
|
|
}
|
|
|
|
function setCameraView(view: CameraView): void {
|
|
const directions: Record<CameraView, [number, number, number]> = {
|
|
iso: [120, 95, 135],
|
|
top: [0, 1, 0.00001],
|
|
front: [0, 60, 240],
|
|
side: [240, 60, 0],
|
|
};
|
|
const aspect = viewerArea.clientWidth / Math.max(viewerArea.clientHeight, 1);
|
|
const distance = referenceBounds ? getTopFitDistance(referenceBounds, aspect) : 190;
|
|
orbit.target.set(0, 0, 0);
|
|
camera.position
|
|
.set(...directions[view])
|
|
.normalize()
|
|
.multiplyScalar(distance);
|
|
camera.near = Math.max(distance / 10000, 0.01);
|
|
camera.far = distance * 100;
|
|
camera.updateProjectionMatrix();
|
|
camera.lookAt(orbit.target);
|
|
orbit.update();
|
|
}
|
|
|
|
function emitCameraState(): void {
|
|
if (suppressCameraEvent || !cameraListener) return;
|
|
const offset = camera.position.clone().sub(orbit.target);
|
|
const distance = Math.max(offset.length(), 0.001);
|
|
offset.normalize();
|
|
cameraListener({
|
|
direction: [offset.x, offset.y, offset.z],
|
|
distanceMeters: distance,
|
|
targetMeters: [orbit.target.x, orbit.target.y, orbit.target.z],
|
|
});
|
|
}
|
|
|
|
function applyCameraState(state: SurfaceCameraState): void {
|
|
suppressCameraEvent = true;
|
|
orbit.target.set(...state.targetMeters);
|
|
camera.position
|
|
.set(...state.direction)
|
|
.multiplyScalar(Math.max(state.distanceMeters, 0.001))
|
|
.add(orbit.target);
|
|
camera.lookAt(orbit.target);
|
|
orbit.update();
|
|
suppressCameraEvent = false;
|
|
}
|
|
|
|
function renderPointCloud(data: SurfacePointCloudSampleResponse): void {
|
|
clearPoints();
|
|
const bounds = data.bounds;
|
|
const zMin = bounds.z_min ?? 0;
|
|
const zMax = bounds.z_max ?? 0;
|
|
const [xMid, yMid, zMid] = getReferenceCenter(bounds);
|
|
const zSpan = Math.max(zMax - zMin, 1e-9);
|
|
referenceBounds = bounds;
|
|
const density = Number(densityInput.value);
|
|
const step = Math.max(1, Math.ceil(10 / density));
|
|
const count = Math.ceil(data.points.length / step);
|
|
const positions = new Float32Array(count * 3);
|
|
const colors = new Float32Array(count * 3);
|
|
const hasRgb = Boolean(data.rgb && data.rgb.length === data.points.length);
|
|
let outputIndex = 0;
|
|
for (let index = 0; index < data.points.length; index += step) {
|
|
const [x, y, z] = data.points[index];
|
|
positions[outputIndex * 3] = x - xMid;
|
|
positions[outputIndex * 3 + 1] = z - zMid;
|
|
positions[outputIndex * 3 + 2] = -(y - yMid);
|
|
const rgb = hasRgb ? data.rgb?.[index] : undefined;
|
|
if (rgb) {
|
|
const divisor = Math.max(...rgb) > 255 ? 65535 : 255;
|
|
colors[outputIndex * 3] = rgb[0] / divisor;
|
|
colors[outputIndex * 3 + 1] = rgb[1] / divisor;
|
|
colors[outputIndex * 3 + 2] = rgb[2] / divisor;
|
|
} else {
|
|
const ratio = Math.max(0, Math.min(1, (z - zMin) / zSpan));
|
|
colors[outputIndex * 3] = (36 + ratio * 190) / 255;
|
|
colors[outputIndex * 3 + 1] = (86 + Math.sin(ratio * Math.PI) * 95) / 255;
|
|
colors[outputIndex * 3 + 2] = (128 - ratio * 80) / 255;
|
|
}
|
|
outputIndex += 1;
|
|
}
|
|
const geometry = new THREE.BufferGeometry();
|
|
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
|
|
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
|
|
geometry.computeBoundingSphere();
|
|
const material = new THREE.PointsMaterial({
|
|
size: Number(sizeInput.value),
|
|
vertexColors: true,
|
|
sizeAttenuation: true,
|
|
});
|
|
pointsObject = new THREE.Points(geometry, material);
|
|
scene.add(pointsObject);
|
|
statusSpan.textContent = `${count.toLocaleString()}개 점 표시 중`;
|
|
}
|
|
|
|
function updateScaleBar(): void {
|
|
if (!currentData) {
|
|
scaleBar.hidden = true;
|
|
return;
|
|
}
|
|
const distance = camera.position.distanceTo(orbit.target);
|
|
const metersPerPixel = targetPlaneMetersPerPixel(distance, viewerArea.clientHeight);
|
|
const meters = niceScaleDistance(100 * metersPerPixel);
|
|
scaleBar.hidden = false;
|
|
scaleBar.style.width = `${meters / metersPerPixel}px`;
|
|
scaleText.textContent = meters >= 1000 ? `${meters / 1000} km` : `${meters} m`;
|
|
}
|
|
|
|
function animate(): void {
|
|
if (!root.isConnected) {
|
|
if (!hasConnected) animationFrame = requestAnimationFrame(animate);
|
|
else disposeViewer();
|
|
return;
|
|
}
|
|
hasConnected = true;
|
|
resize();
|
|
orbit.update();
|
|
updateScaleBar();
|
|
renderer.render(scene, camera);
|
|
animationFrame = requestAnimationFrame(animate);
|
|
}
|
|
|
|
function disposeViewer(): void {
|
|
if (disposed) return;
|
|
disposed = true;
|
|
cancelAnimationFrame(animationFrame);
|
|
releaseTheme();
|
|
clearPoints();
|
|
orbit.dispose();
|
|
renderer.dispose();
|
|
}
|
|
|
|
viewButtons.forEach(([view, button]) => {
|
|
button.addEventListener("click", () => setCameraView(view));
|
|
});
|
|
sizeInput.addEventListener("input", () => {
|
|
if (pointsObject)
|
|
(pointsObject.material as THREE.PointsMaterial).size = Number(sizeInput.value);
|
|
});
|
|
densityInput.addEventListener("input", () => {
|
|
const label = densityLabel.querySelector(".viewer-option-val");
|
|
if (label) label.textContent = `${Number(densityInput.value) * 10}%`;
|
|
if (currentData) renderPointCloud(currentData);
|
|
});
|
|
orbit.addEventListener("change", emitCameraState);
|
|
animationFrame = requestAnimationFrame(animate);
|
|
|
|
return {
|
|
root,
|
|
controlsGroup,
|
|
optionsGroup,
|
|
statusSpan,
|
|
render(data) {
|
|
currentData = data;
|
|
clearPoints();
|
|
if (!data) {
|
|
statusSpan.textContent = "데이터가 존재하지 않습니다.";
|
|
return;
|
|
}
|
|
renderPointCloud(data);
|
|
setCameraView("top");
|
|
},
|
|
applyCameraState,
|
|
onCameraChange(listener) {
|
|
cameraListener = listener;
|
|
},
|
|
setAxesVisible(visible) {
|
|
axes.visible = visible;
|
|
},
|
|
resetOptions() {
|
|
axes.visible = false;
|
|
sizeInput.value = "0.42";
|
|
densityInput.value = "10";
|
|
const label = densityLabel.querySelector(".viewer-option-val");
|
|
if (label) label.textContent = "100%";
|
|
if (currentData) renderPointCloud(currentData);
|
|
setCameraView("iso");
|
|
},
|
|
dispose: disposeViewer,
|
|
};
|
|
}
|