"🔪 슬라이싱" 버튼이 k2-app 위에 오버레이를 띄우던 방식을 window.open() 전용 팝업창(slicer-app.html)으로 분리. k2-app(카메라+Fluidd 모니터)과 슬라이서 (3D 편집 도구) 역할 분리 + 오버레이 블랙스크린 원인 해결. - 블랙스크린 원인: 옛 방식은 #slicer-overlay 가 display:none 이다가 .show로 토글되는데, 그 직후 initScene이 실행되면서 뷰포트 clientWidth/Height가 0이라 renderer.setSize가 스킵→캔버스 0size. 전용 팝업은 #slicer-root 가 처음부터 position:fixed;inset:0 이라 크기가 바로 잡힘. - web-ui/html/slicer-app.html 신규: Three.js+슬라이서 모듈만 로드하는 풀뷰포트 팝업 페이지. 인증은 같은 오리진 smallclaw_session 쿠키가 팝업에 자동 상속. - slicer-view.js: openSlicer/closeSlicer 오버레이 토글 → initSlicer 자동 초기화 (DOMContentLoaded). .sv-shell을 #slicer-root에 빌드. 캔버스 CSS width/height 100%로 셀 채우도록 수정. ✕버튼=window.close(). - k2-app.html: #slicer-overlay div·Three.js 스크립트 제거, 버튼→openSlicerPopup(). CAD 모달·카메라·Fluidd iframe은 그대로. Co-Authored-By: Claude Code <noreply@anthropic.com>
27 lines
1.3 KiB
HTML
27 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>🔪 K2 슬라이서</title>
|
|
<link rel="icon" type="image/png" sizes="64x64" href="/homeclaw_logo.png">
|
|
<link rel="stylesheet" href="../css/styles.css">
|
|
<script>try{var _t=localStorage.getItem('homeclaw_theme')||'dark';document.documentElement.setAttribute('data-theme',_t);}catch(e){}</script>
|
|
<style>
|
|
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:var(--bg,#1a1a1a);}
|
|
/* #slicer-root 가 풀뷰포트 — slicer-view.js 가 .sv-shell 을 이 안에 빌드.
|
|
position:fixed;inset:0 이라 페이지 로드 직후부터 크기가 잡혀서 initScene 시점에
|
|
뷰포트 clientWidth/Height 가 0 이 되는 블랙스크린 문제가 안 생김(옛 오버레이 방식의
|
|
display:none → 0size 함정 회피). */
|
|
#slicer-root{position:fixed;inset:0;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="slicer-root"></div>
|
|
<!-- Three.js r128 UMD + 로더 — /vendor/three/ 정적 서빙(전역 THREE 부착) -->
|
|
<script src="/vendor/three/three.min.js"></script>
|
|
<script src="/vendor/three/STLLoader.js"></script>
|
|
<script src="/vendor/three/OrbitControls.js"></script>
|
|
<script type="module" src="/js/k2/slicer-view.js"></script>
|
|
</body>
|
|
</html> |