eomsangdonandClaude Opus 5.5
0d1d542421
- 새 공용 재질 ui_template_contour3d(isMajorContour · contourMaterials) — 주곡선 = 5 m 배수(간격 무관) - 색 = --map-contour-major(진하게 0.95) · --map-contour-minor(토큰 알파 0.45 · 깊이 안 씀) - B05 3D 뷰어 · B04 3D 지형 뷰어 둘 다 옛 주황 두 색 · 간격 × 5 갈래 걷음 · B04 높이 글도 5 m 선에만 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Se7ytqbohmBQnfYpwYFnYf
50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_contour3d.ts
|
|
* 3D 등고선 선 재질 — 평면 그림(노선 편집)과 같은 갈래 · 같은 색 토큰(353-3).
|
|
*
|
|
* 주곡선 = 5 m 배수 고정(간격 무관 · 평면 `B05_Profile_UI_RouteEdit_Render` 와 같음) ·
|
|
* 색 `--map-contour-major` 진하게 · 나머지(1 m) = `--map-contour-minor` 옅게 · 낮은 불투명.
|
|
* B05 3D(`B05_Profile_UI_Viewer`) · B04 3D(`B04_PreProcess_UI_TerrainViewer_Contours`) 가 함께 씀.
|
|
* ========================================================================== */
|
|
|
|
import * as THREE from "three";
|
|
import { themeColor } from "./ui_template_palette";
|
|
|
|
/** 주곡선 간격(m) — 평면 그림과 같은 5 m. */
|
|
export const CONTOUR_MAJOR_STEP_M = 5;
|
|
|
|
/** 5 m 배수 높이면 주곡선. */
|
|
export function isMajorContour(level: number): boolean {
|
|
return Math.abs(level - Math.round(level / CONTOUR_MAJOR_STEP_M) * CONTOUR_MAJOR_STEP_M) < 1e-6;
|
|
}
|
|
|
|
/** CSS 색(#rrggbb · rgba(...)) → 색 + 불투명(알파 없으면 1). */
|
|
function parseColor(value: string): { color: THREE.Color; alpha: number } {
|
|
const rgba = value.match(/rgba?\(([^)]+)\)/);
|
|
if (!rgba) return { color: new THREE.Color(value), alpha: 1 };
|
|
const [r, g, b, a] = rgba[1].split(",").map((part) => Number(part.trim()));
|
|
return { color: new THREE.Color(r / 255, g / 255, b / 255), alpha: Number.isFinite(a) ? a : 1 };
|
|
}
|
|
|
|
/** 주곡선 · 1 m 선 재질 — 1 m 는 주곡선보다 옅게. */
|
|
export function contourMaterials(): {
|
|
major: THREE.LineBasicMaterial;
|
|
minor: THREE.LineBasicMaterial;
|
|
} {
|
|
const major = parseColor(themeColor("--map-contour-major", "#818cf8"));
|
|
const minor = parseColor(themeColor("--map-contour-minor", "rgba(165, 180, 252, 0.45)"));
|
|
return {
|
|
major: new THREE.LineBasicMaterial({
|
|
color: major.color,
|
|
transparent: true,
|
|
opacity: 0.95 * major.alpha,
|
|
}),
|
|
minor: new THREE.LineBasicMaterial({
|
|
color: minor.color,
|
|
transparent: true,
|
|
opacity: minor.alpha,
|
|
depthWrite: false,
|
|
}),
|
|
};
|
|
}
|