550 lines
42 KiB
HTML
550 lines
42 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="color-scheme" content="light">
|
||
<meta name="description" content="DreamLife-Translucent_Relief 是一款在线图片转3D打印折扇模型工具，支持整扇或单片扇叶配图、缩放旋转、画笔文字编辑、透光厚度与精度调整，可导出STL和3MF模型，适合制作照片浮雕扇、透光摆件和个性化礼物。">
|
||
<meta name="keywords" content="DreamLife-Translucent_Relief,浮雕扇生成器,照片转浮雕,图片转STL,图片转3MF,3D打印折扇,透光浮雕,照片浮雕,3D打印工具,在线建模工具,STL生成器,3MF生成器,扇子模型,个性化3D打印">
|
||
<meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
|
||
<meta name="generator" content="DreamLife-Translucent_Relief">
|
||
<meta name="application-name" content="DreamLife-Translucent_Relief">
|
||
<meta name="copyright" content="© 2026 DreamLife-Translucent_Relief">
|
||
<meta name="theme-color" content="#f3f4f6">
|
||
<meta property="og:locale" content="zh_CN">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="DreamLife">
|
||
<meta property="og:title" content="DreamLife-Translucent_Relief - 图片转3D打印STL/3MF折扇模型">
|
||
<meta property="og:description" content="上传图片在线生成11片透光浮雕折扇，支持逐片独立配图、画笔文字编辑、厚度与精度调整，并可导出STL和3MF模型用于3D打印。">
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="DreamLife-Translucent_Relief - 图片转3D打印折扇模型">
|
||
<meta name="twitter:description" content="上传图片生成可3D打印的透光浮雕折扇，在线编辑并导出STL或3MF。">
|
||
<title>DreamLife-Translucent_Relief - 图片转3D打印STL/3MF折扇模型</title>
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "DreamLife-Translucent_Relief",
|
||
"applicationCategory": "DesignApplication",
|
||
"operatingSystem": "Web Browser",
|
||
"inLanguage": "zh-CN",
|
||
"description": "在线把照片或图片转换为可3D打印的透光浮雕折扇模型，支持扇叶独立配图、画笔文字编辑以及STL和3MF导出。",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "CNY"
|
||
},
|
||
"featureList": [
|
||
"图片转透光浮雕折扇",
|
||
"11片扇叶与逐片独立配图",
|
||
"画笔、橡皮和文字编辑",
|
||
"透光厚度与模型精度调整",
|
||
"STL与3MF模型导出"
|
||
],
|
||
"publisher": {
|
||
"@type": "Organization",
|
||
"name": "DreamLife",
|
||
"url": "https://dreamlife.dev/"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<link rel="stylesheet" href="CSS/variables.css">
|
||
<link rel="stylesheet" href="CSS/base.css">
|
||
<link rel="stylesheet" href="CSS/layout.css">
|
||
<link rel="stylesheet" href="CSS/components.css">
|
||
<link rel="stylesheet" href="CSS/editor.css">
|
||
<link rel="stylesheet" href="CSS/controls.css">
|
||
<link rel="stylesheet" href="CSS/export.css">
|
||
<link rel="stylesheet" href="CSS/stage.css">
|
||
<link rel="stylesheet" href="CSS/responsive.css">
|
||
</head>
|
||
<body>
|
||
<div class="site-frame">
|
||
<header class="site-topbar">
|
||
<a class="site-brand-home" href="#" aria-label="DreamLife">
|
||
<span class="site-brand-text">DreamLife</span>
|
||
</a>
|
||
<div class="site-top-actions">
|
||
<span class="site-status-pill">
|
||
<span class="site-status-dot" aria-hidden="true"></span>
|
||
浏览器本地处理
|
||
</span>
|
||
</div>
|
||
</header>
|
||
<main class="shell">
|
||
<!-- LEFT PANEL: Tools & 2D Editor -->
|
||
<aside class="panel-left" aria-label="工具与编辑">
|
||
<header class="brand">
|
||
<div>
|
||
<p class="eyebrow">Image to Lithophane</p>
|
||
<p class="brand-title">Translucent Relief</p>
|
||
<p class="subtitle">选择甲、乙、丙三种扇形，整扇共用一张图或为11片扇叶逐片独立配图。</p>
|
||
</div>
|
||
<div class="seal" id="variantSeal" aria-hidden="true">乙</div>
|
||
</header>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>扇形</h2>
|
||
<span class="section-note">三套骨架</span>
|
||
</div>
|
||
<div class="fan-variants" id="fanVariants" role="group" aria-label="选择扇形">
|
||
<button class="fan-variant" type="button" data-variant="jia">
|
||
<strong>大型甲</strong>
|
||
<small>圆弧扇头</small>
|
||
</button>
|
||
<button class="fan-variant active" type="button" data-variant="yi">
|
||
<strong>大型乙</strong>
|
||
<small>折线圆头</small>
|
||
</button>
|
||
<button class="fan-variant" type="button" data-variant="bing">
|
||
<strong>大型丙</strong>
|
||
<small>花瓣尖头</small>
|
||
</button>
|
||
</div>
|
||
<div class="blade-count-control" hidden aria-hidden="true" data-release-state="reserved-for-next-update">
|
||
<div class="blade-count-head">
|
||
<strong>扇叶数量</strong>
|
||
<span id="bladeCountSummary">11片 · 展开140°</span>
|
||
</div>
|
||
<div class="blade-count-options" id="bladeCountOptions" role="radiogroup" aria-label="选择扇叶数量">
|
||
<button class="blade-count-option" type="button" data-blade-count="5" role="radio" aria-checked="false"><strong>5片</strong><small>56° · 迷你</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="6" role="radio" aria-checked="false"><strong>6片</strong><small>70° · 紧凑</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="7" role="radio" aria-checked="false"><strong>7片</strong><small>84° · 省料</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="8" role="radio" aria-checked="false"><strong>8片</strong><small>98° · 轻巧</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="9" role="radio" aria-checked="false"><strong>9片</strong><small>112° · 推荐</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="10" role="radio" aria-checked="false"><strong>10片</strong><small>126° · 均衡</small></button>
|
||
<button class="blade-count-option active" type="button" data-blade-count="11" role="radio" aria-checked="true"><strong>11片</strong><small>140° · 完整</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="12" role="radio" aria-checked="false"><strong>12片</strong><small>154° · 宽展</small></button>
|
||
<button class="blade-count-option" type="button" data-blade-count="13" role="radio" aria-checked="false"><strong>13片</strong><small>168° · 最大</small></button>
|
||
</div>
|
||
<p class="blade-count-help">固定14°叶片间距；双数档会相对中轴错开7°，左右仍保持对称，最大168°避免超过半圆。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>图片</h2>
|
||
<span class="section-note">JPG / PNG / WEBP</span>
|
||
</div>
|
||
<div class="segmented image-mode" role="group" aria-label="图片分配模式">
|
||
<button id="wholeModeBtn" class="active" type="button">整扇一张图</button>
|
||
<button id="bladeModeBtn" type="button">单片独立图</button>
|
||
</div>
|
||
<div class="blade-panel" id="bladePanel" hidden>
|
||
<div class="blade-panel-head">
|
||
<strong>选择要编辑的叶片</strong>
|
||
<span id="bladeOrderHint">1 右侧 · 11 左侧</span>
|
||
</div>
|
||
<div class="blade-grid" id="bladeGrid" aria-label="叶片选择"></div>
|
||
<p class="blade-help">可一次选择多张图片，将从当前叶片开始按顺序填入。</p>
|
||
</div>
|
||
<label class="dropzone" id="dropzone">
|
||
<input id="fileInput" type="file" accept="image/*">
|
||
<span>
|
||
<span class="drop-icon">＋</span>
|
||
<span class="drop-title" id="dropTitle">选择或拖入图片</span>
|
||
<span class="drop-hint" id="dropHint">页面全程离线，图片不会上传</span>
|
||
</span>
|
||
</label>
|
||
<div class="file-chip" id="fileChip"></div>
|
||
<div class="mask-backdrop" id="maskBackdrop" hidden></div>
|
||
<div class="mask-wrap" id="maskWrap">
|
||
<canvas id="maskCanvas" width="780" height="464" aria-label="横向扇面裁切预览"></canvas>
|
||
<span class="brush-cursor" id="brushCursor" aria-hidden="true" hidden></span>
|
||
<span class="text-placement-preview" id="textPlacementPreview" aria-hidden="true" hidden>
|
||
<span class="text-preview-glyph" id="textPreviewGlyph">鸡你太美</span>
|
||
<span class="text-preview-anchor"></span>
|
||
</span>
|
||
<button class="mask-expand" id="expandMask" type="button" aria-expanded="false" aria-controls="maskCanvas" title="放大扇面编辑区">⛶ 放大编辑</button>
|
||
<span class="adjust-hint" id="adjustHint">拖动图片 · 滚轮缩放</span>
|
||
<span class="demo-label" id="demoLabel">内置示例</span>
|
||
</div>
|
||
<div class="mask-floating-toolbar" id="maskFloatingToolbar" role="toolbar" aria-label="放大扇面编辑工具" hidden>
|
||
<div class="float-tool-group" role="group" aria-label="扇面工具">
|
||
<button class="float-tool-button active" type="button" data-editor-tool="move" title="拖动图片"><span class="float-tool-icon">↔</span>移图</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="select" title="选择并移动文字或几何"><span class="float-tool-icon">◇</span>选择</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="brush" title="在扇面上绘画"><span class="float-tool-icon">✎</span>画笔</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="eraser" title="擦除手绘和文字"><span class="float-tool-icon">⌫</span>橡皮</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="text" title="在扇面放置文字"><span class="float-tool-icon">文</span>文字</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="line" title="直线">╱ 直线</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="ellipse" title="圆形或椭圆">○ 圆形</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="rect" title="方形或矩形">□ 方形</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="triangle" title="三角形">△ 三角</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="polygon" title="规则多边形">⬡ 多边形</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="star" title="星形">☆ 星形</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="diamond" title="菱形">◇ 菱形</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="arrow" title="箭头">➜ 箭头</button>
|
||
<button class="float-tool-button" type="button" data-editor-tool="spline" title="自由样条曲线">〰 样条</button>
|
||
</div>
|
||
<span class="float-tool-divider" aria-hidden="true"></span>
|
||
<div class="float-tool-group" role="group" aria-label="图片缩放和旋转">
|
||
<button class="float-tool-button" id="floatZoomOut" type="button" title="缩小图片">− 缩小</button>
|
||
<button class="float-tool-button" id="floatZoomIn" type="button" title="放大图片">＋ 放大</button>
|
||
<button class="float-tool-button" id="floatRotateLeft" type="button" title="图片左转 90 度">↶ 左转</button>
|
||
<button class="float-tool-button" id="floatRotateRight" type="button" title="图片右转 90 度">↷ 右转</button>
|
||
<button class="float-tool-button" id="floatResetImage" type="button" title="图片恢复居中">复位</button>
|
||
<span class="float-transform-readout" id="floatTransformValue">100% · 0°</span>
|
||
<label class="float-control" title="任意角度旋转图片">
|
||
<span>角度</span>
|
||
<input id="floatImageRotation" type="range" min="-180" max="180" value="0" step="1">
|
||
<output id="floatImageRotationValue" for="floatImageRotation">0°</output>
|
||
</label>
|
||
</div>
|
||
<span class="float-tool-divider" aria-hidden="true"></span>
|
||
<div class="float-tool-context" id="floatToolContext" hidden>
|
||
<label class="float-control" id="floatBrushControl" hidden>
|
||
<span>笔粗</span>
|
||
<input id="floatBrushSize" type="range" min="2" max="60" value="16" step="1">
|
||
<output id="floatBrushSizeValue" for="floatBrushSize">16</output>
|
||
</label>
|
||
<label class="float-control" id="floatTextControl" hidden>
|
||
<span>文字</span>
|
||
<input class="float-text-input" id="floatTextValue" type="text" value="鸡你太美" maxlength="24">
|
||
</label>
|
||
<label class="float-control" id="floatTextSizeControl" hidden>
|
||
<span>字号</span>
|
||
<input id="floatTextSize" type="range" min="12" max="360" value="48" step="1">
|
||
<output id="floatTextSizeValue" for="floatTextSize">48</output>
|
||
</label>
|
||
<label class="float-control" id="floatTextArcControl" hidden>
|
||
<span>弧度</span>
|
||
<input id="floatTextArc" type="range" min="-100" max="100" value="35" step="1">
|
||
<output id="floatTextArcValue" for="floatTextArc">35%</output>
|
||
</label>
|
||
<label class="float-control" id="floatTextFontControl" hidden>
|
||
<span>字体</span>
|
||
<select class="float-select" id="floatTextFont" aria-label="艺术字体">
|
||
<option value="modern">现代黑体</option>
|
||
<option value="song">雅宋</option>
|
||
<option value="kai">楷书</option>
|
||
<option value="xingkai" selected>行楷</option>
|
||
<option value="lishu">隶书</option>
|
||
<option value="youyuan">圆体</option>
|
||
<option value="shuti">舒体</option>
|
||
<option value="hupo">琥珀</option>
|
||
<option value="xinwei">新魏碑意</option>
|
||
<option value="caiyun">彩云装饰</option>
|
||
<option value="yaoti">姚体古风</option>
|
||
<option value="zhongsong">中宋雅正</option>
|
||
<option value="fangsong">仿宋清雅</option>
|
||
<option value="xihei">细黑简雅</option>
|
||
</select>
|
||
</label>
|
||
<label class="float-control" id="floatTextStyleControl" hidden>
|
||
<span>字形</span>
|
||
<select class="float-select" id="floatTextStyle" aria-label="文字填充方式">
|
||
<option value="fill" selected>实心</option>
|
||
<option value="outline">空心描边</option>
|
||
</select>
|
||
</label>
|
||
<label class="float-control" id="floatPolygonSidesControl" hidden>
|
||
<span>边数</span>
|
||
<input id="floatPolygonSides" type="range" min="3" max="10" value="6" step="1">
|
||
<output id="floatPolygonSidesValue" for="floatPolygonSides">6</output>
|
||
</label>
|
||
<label class="float-control" id="floatSplineTensionControl" hidden>
|
||
<span>平滑</span>
|
||
<input id="floatSplineTension" type="range" min="0" max="100" value="55" step="1">
|
||
<output id="floatSplineTensionValue" for="floatSplineTension">55%</output>
|
||
</label>
|
||
<label class="float-control" id="floatShapeRatioControl" hidden>
|
||
<span>比例</span>
|
||
<select class="float-select" id="floatShapeRatio" aria-label="几何图形比例模式">
|
||
<option value="regular" selected>正图形 · 等比例</option>
|
||
<option value="free">自由比例</option>
|
||
</select>
|
||
</label>
|
||
<label class="float-control" id="floatColorControl" hidden title="画笔和文字颜色">
|
||
<span>颜色</span>
|
||
<input class="float-color-input" id="floatEditorColor" type="color" value="#172c31">
|
||
</label>
|
||
</div>
|
||
<div class="float-tool-group" role="group" aria-label="编辑记录">
|
||
<button class="float-tool-button" id="floatUndoEdit" type="button">撤销</button>
|
||
<button class="float-tool-button" id="floatDeleteSelected" type="button" disabled>删选中</button>
|
||
<button class="float-tool-button" id="floatClearEdit" type="button">清除</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>构图与编辑</h2>
|
||
</div>
|
||
<div class="segmented" role="group" aria-label="图片适配方式">
|
||
<button id="coverBtn" class="active" type="button">铺满扇面</button>
|
||
<button id="containBtn" type="button">完整图片</button>
|
||
</div>
|
||
<div class="image-quick-actions" aria-label="图片快捷调整">
|
||
<button id="zoomOut" type="button">− 缩小</button>
|
||
<button id="resetImage" type="button">居中复位</button>
|
||
<button id="zoomIn" type="button">＋ 放大</button>
|
||
</div>
|
||
<div class="control">
|
||
<label for="imageScale">缩放</label>
|
||
<input id="imageScale" type="range" min="70" max="220" value="100" step="1">
|
||
<output class="value" for="imageScale">100%</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="offsetX">水平</label>
|
||
<input id="offsetX" type="range" min="-50" max="50" value="0" step="1">
|
||
<output class="value" for="offsetX">0%</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="offsetY">垂直</label>
|
||
<input id="offsetY" type="range" min="-50" max="50" value="0" step="1">
|
||
<output class="value" for="offsetY">0%</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="imageRotation">旋转</label>
|
||
<input id="imageRotation" type="range" min="-180" max="180" value="0" step="1">
|
||
<output class="value" for="imageRotation">0°</output>
|
||
</div>
|
||
<div class="row-two">
|
||
<button class="mini-button" id="rotateLeft" type="button">↶ 左转 90°</button>
|
||
<button class="mini-button" id="rotateRight" type="button">↷ 右转 90°</button>
|
||
</div>
|
||
<div class="editor-box">
|
||
<div class="editor-tools" role="group" aria-label="扇面编辑工具">
|
||
<button class="editor-tool active" type="button" data-editor-tool="move"><span class="editor-tool-symbol">↔</span>移动</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="select"><span class="editor-tool-symbol">◇</span>选择</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="brush"><span class="editor-tool-symbol">✎</span>画笔</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="eraser"><span class="editor-tool-symbol">⌫</span>橡皮</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="text"><span class="editor-tool-symbol">文</span>文字</button>
|
||
</div>
|
||
<div class="editor-tool-divider-label">几何与曲线</div>
|
||
<div class="editor-tools editor-shape-tools" role="group" aria-label="几何与曲线工具">
|
||
<button class="editor-tool" type="button" data-editor-tool="line"><span class="editor-tool-symbol">╱</span>直线</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="ellipse"><span class="editor-tool-symbol">○</span>圆形</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="rect"><span class="editor-tool-symbol">□</span>方形</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="triangle"><span class="editor-tool-symbol">△</span>三角</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="polygon"><span class="editor-tool-symbol">⬡</span>多边形</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="star"><span class="editor-tool-symbol">☆</span>星形</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="diamond"><span class="editor-tool-symbol">◇</span>菱形</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="arrow"><span class="editor-tool-symbol">➜</span>箭头</button>
|
||
<button class="editor-tool" type="button" data-editor-tool="spline"><span class="editor-tool-symbol">〰</span>样条</button>
|
||
</div>
|
||
<div class="editor-context" id="brushEditorOptions" hidden>
|
||
<div class="control">
|
||
<label for="brushSize">笔/线粗细</label>
|
||
<input id="brushSize" type="range" min="2" max="60" value="16" step="1">
|
||
<output class="value" for="brushSize">16 px</output>
|
||
</div>
|
||
</div>
|
||
<div class="editor-context" id="shapeEditorOptions" hidden>
|
||
<div class="shape-ratio-control" id="shapeRatioControl" hidden>
|
||
<div class="shape-ratio-head">
|
||
<span>图形比例</span>
|
||
<strong id="shapeRatioHint">正图形 · 等比例</strong>
|
||
</div>
|
||
<div class="shape-ratio-toggle" role="group" aria-label="几何图形比例模式">
|
||
<button class="active" type="button" data-shape-ratio="regular" aria-pressed="true">正图形 · 等比例</button>
|
||
<button type="button" data-shape-ratio="free" aria-pressed="false">自由比例</button>
|
||
</div>
|
||
</div>
|
||
<div class="control" id="polygonSidesControl" hidden>
|
||
<label for="polygonSides">边数</label>
|
||
<input id="polygonSides" type="range" min="3" max="10" value="6" step="1">
|
||
<output class="value" for="polygonSides">6 边</output>
|
||
</div>
|
||
<div class="control" id="splineTensionControl" hidden>
|
||
<label for="splineTension">平滑度</label>
|
||
<input id="splineTension" type="range" min="0" max="100" value="55" step="1">
|
||
<output class="value" for="splineTension">55%</output>
|
||
</div>
|
||
</div>
|
||
<div class="editor-context" id="textEditorOptions" hidden>
|
||
<div class="text-input-row">
|
||
<input id="textValue" type="text" value="鸡你太美" maxlength="24" aria-label="要添加的文字" placeholder="输入文字后移入扇面">
|
||
<select id="textStyle" aria-label="文字填充方式">
|
||
<option value="fill" selected>实心</option>
|
||
<option value="outline">空心描边</option>
|
||
</select>
|
||
</div>
|
||
<div class="font-chip-label">
|
||
<span>14 款艺术字体</span>
|
||
<small>本机字体 · 缺失时自动回退</small>
|
||
</div>
|
||
<div class="font-chip-grid" id="textFontChips" role="group" aria-label="选择艺术字体">
|
||
<button class="font-chip" type="button" data-text-font="modern" data-font-kind="醒目" style="font-family:'Microsoft YaHei UI','Microsoft YaHei',sans-serif">黑体</button>
|
||
<button class="font-chip" type="button" data-text-font="song" data-font-kind="典雅" style="font-family:'STSong','SimSun',serif">雅宋</button>
|
||
<button class="font-chip" type="button" data-text-font="kai" data-font-kind="端庄" style="font-family:'STKaiti','KaiTi',serif">楷书</button>
|
||
<button class="font-chip active" type="button" data-text-font="xingkai" data-font-kind="书法" style="font-family:'STXingkai','KaiTi',serif">行楷</button>
|
||
<button class="font-chip" type="button" data-text-font="lishu" data-font-kind="古朴" style="font-family:'LiSu','STLiti',serif">隶书</button>
|
||
<button class="font-chip" type="button" data-text-font="youyuan" data-font-kind="柔和" style="font-family:'YouYuan','Microsoft YaHei',sans-serif">圆体</button>
|
||
<button class="font-chip" type="button" data-text-font="shuti" data-font-kind="灵动" style="font-family:'FZShuTi','STKaiti','KaiTi',serif">舒体</button>
|
||
<button class="font-chip" type="button" data-text-font="hupo" data-font-kind="厚重" style="font-family:'STHupo','SimHei',sans-serif">琥珀</button>
|
||
<button class="font-chip" type="button" data-text-font="xinwei" data-font-kind="碑刻" style="font-family:'STXinwei','华文新魏','STLiti',serif">新魏</button>
|
||
<button class="font-chip" type="button" data-text-font="caiyun" data-font-kind="装饰" style="font-family:'STCaiyun','华文彩云','SimHei',sans-serif">彩云</button>
|
||
<button class="font-chip" type="button" data-text-font="yaoti" data-font-kind="古风" style="font-family:'FZYaoTi','方正姚体','STKaiti',serif">姚体</button>
|
||
<button class="font-chip" type="button" data-text-font="zhongsong" data-font-kind="雅正" style="font-family:'STZhongsong','华文中宋','SimSun',serif">中宋</button>
|
||
<button class="font-chip" type="button" data-text-font="fangsong" data-font-kind="清雅" style="font-family:'FangSong','仿宋','SimSun',serif">仿宋</button>
|
||
<button class="font-chip" type="button" data-text-font="xihei" data-font-kind="简雅" style="font-family:'STXihei','华文细黑','Microsoft YaHei',sans-serif">细黑</button>
|
||
</div>
|
||
<div class="control" id="textSizeControl">
|
||
<label for="textSize">字号</label>
|
||
<input id="textSize" type="range" min="12" max="360" value="48" step="1">
|
||
<output class="value" for="textSize">48 px</output>
|
||
</div>
|
||
<div class="control" id="textArcControl">
|
||
<label for="textArc">弧度</label>
|
||
<input id="textArc" type="range" min="-100" max="100" value="35" step="1">
|
||
<output class="value" for="textArc">35%</output>
|
||
</div>
|
||
</div>
|
||
<div class="editor-color-row" id="editorColorControl" hidden>
|
||
<span>画笔 / 文字颜色</span>
|
||
<input id="editorColor" type="color" value="#172c31" aria-label="画笔和文字颜色">
|
||
</div>
|
||
<div class="editor-actions">
|
||
<button class="mini-button" id="undoEdit" type="button">撤销上一步</button>
|
||
<button class="mini-button" id="clearEdit" type="button">清除全部编辑</button>
|
||
</div>
|
||
<div class="selection-strip" id="selectionInfo" hidden>
|
||
<span id="selectionLabel">已选中对象，可直接拖动位置</span>
|
||
<button id="deleteSelected" type="button">删除选中</button>
|
||
</div>
|
||
<p class="editor-hint" id="editorHint">移动模式：直接拖动图片，滚轮缩放；上方滑杆或按钮可旋转。</p>
|
||
</div>
|
||
</section>
|
||
</aside>
|
||
|
||
<!-- CENTER: 3D Preview -->
|
||
<section class="stage" aria-label="三维预览">
|
||
<canvas id="glCanvas"></canvas>
|
||
<div class="stage-top">
|
||
<div class="model-tag" id="modelTag">实时预览 · 大型乙 11 骨</div>
|
||
<div class="metric">
|
||
<span>包围尺寸</span>
|
||
<strong id="metricSize">232 × 387</strong>
|
||
<span>mm</span>
|
||
</div>
|
||
</div>
|
||
<div class="stage-bottom">
|
||
<div class="view-help">拖动旋转 · 滚轮缩放</div>
|
||
<div class="view-actions">
|
||
<button id="topView" type="button" title="顶视图">顶</button>
|
||
<button id="isoView" type="button" title="立体视图">斜</button>
|
||
<button id="fitView" type="button" title="适合窗口">◎</button>
|
||
</div>
|
||
</div>
|
||
<div class="busy" id="busy">
|
||
<span id="busyText">正在重建浮雕</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- RIGHT PANEL: Parameters & Export -->
|
||
<aside class="panel-right" aria-label="参数与导出">
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>透光与浮雕</h2>
|
||
<span class="section-note">mm</span>
|
||
</div>
|
||
<div class="control">
|
||
<label for="minThickness" title="最薄处透光厚度">最薄处</label>
|
||
<input id="minThickness" type="range" min="0.35" max="1.20" value="0.60" step="0.05">
|
||
<output class="value" for="minThickness">0.60</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="maxThickness" title="最厚处暗部厚度">最厚处</label>
|
||
<input id="maxThickness" type="range" min="1.10" max="3.20" value="2.20" step="0.05">
|
||
<output class="value" for="maxThickness">2.20</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="reliefMargin" title="数值越小，浮雕越贴近骨架边缘">边缘留量</label>
|
||
<input id="reliefMargin" type="range" min="0.00" max="1.80" value="0.00" step="0.05">
|
||
<output class="value" for="reliefMargin">0 mm</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="contrast">图像对比</label>
|
||
<input id="contrast" type="range" min="60" max="190" value="135" step="5">
|
||
<output class="value" for="contrast">135%</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="reliefGamma">暗部层次</label>
|
||
<input id="reliefGamma" type="range" min="0.55" max="2.20" value="0.95" step="0.05">
|
||
<output class="value" for="reliefGamma">0.95</output>
|
||
</div>
|
||
<div class="control">
|
||
<label for="blur">柔化噪点</label>
|
||
<input id="blur" type="range" min="0" max="4" value="0.5" step="0.5">
|
||
<output class="value" for="blur">0.5 px</output>
|
||
</div>
|
||
<div class="toggle-row">
|
||
<span>反相（适合底片/线稿）</span>
|
||
<label class="switch">
|
||
<input id="invert" type="checkbox">
|
||
<span aria-hidden="true"></span>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>打印输出</h2>
|
||
<span class="section-note">STL / 3MF</span>
|
||
</div>
|
||
<div class="row-two">
|
||
<select id="detail" aria-label="网格精度">
|
||
<option value="draft">快速预览</option>
|
||
<option value="standard">标准打印</option>
|
||
<option value="fine">高精度打印</option>
|
||
<option value="ultra" selected>极致精度（推荐）</option>
|
||
<option value="reference">参考作品级（约 219 万面）</option>
|
||
</select>
|
||
<button class="mini-button" id="resetAll" type="button">恢复推荐值</button>
|
||
</div>
|
||
<div class="precision-guide" id="precisionGuide">
|
||
<span id="precisionHint">采样间距约 0.42 × 0.65 mm</span>
|
||
<strong id="precisionGrid">320 × 64 / 片</strong>
|
||
</div>
|
||
<label class="structure-field" for="threeMFStructure">
|
||
<span class="structure-copy">
|
||
<strong>3MF 拆分方式</strong>
|
||
<small id="threeMFHint">焊接为 1 个完整网格，适合直接切片</small>
|
||
</span>
|
||
<select id="threeMFStructure">
|
||
<option value="merged" selected>整扇单一对象</option>
|
||
<option value="parts">总成内可拆零件</option>
|
||
<option value="objects">独立对象</option>
|
||
</select>
|
||
</label>
|
||
<div class="toggle-row">
|
||
<span id="frameToggleLabel">包含「大型乙」骨架（不含转轴），并将浮雕焊接到扇叶</span>
|
||
<label class="switch">
|
||
<input id="includeFrame" type="checkbox" checked>
|
||
<span aria-hidden="true"></span>
|
||
</label>
|
||
</div>
|
||
<div class="export-actions">
|
||
<button class="export-button" id="exportBtn" type="button">导出 STL</button>
|
||
<button class="export-button secondary" id="export3mfBtn" type="button">导出 3MF</button>
|
||
</div>
|
||
<div class="pivot-download" id="pivotDownload">
|
||
<span class="pivot-mark" aria-hidden="true">轴</span>
|
||
<span class="pivot-copy">
|
||
<strong>转轴不再随模型导出</strong>
|
||
<small>STL / 3MF 均不含转轴，请单独下载配套零件。</small>
|
||
</span>
|
||
<a class="pivot-link" href="https://makerworld.com.cn/zh/models/2755291-tou-guang-fu-diao-zhe-shan-sheng-cheng-qi-1zhang-tu-pian-zhuan-3d-da-yin-zhe-shan#profileId-3201681" target="_blank" rel="noopener noreferrer" aria-label="前往 MakerWorld 下载配套转轴（新窗口打开）">下载转轴 ↗</a>
|
||
</div>
|
||
<div class="status" id="status" role="status" aria-live="polite">正在准备内置骨架（不含转轴）…</div>
|
||
</section>
|
||
</aside>
|
||
</main>
|
||
</div>
|
||
<canvas id="sourceCanvas" width="980" height="580" hidden></canvas>
|
||
|
||
<script src="JavaScript/config.js"></script>
|
||
<script src="JavaScript/geometry.js"></script>
|
||
<script src="JavaScript/image.js"></script>
|
||
<script src="JavaScript/canvas_editor.js"></script>
|
||
<script src="JavaScript/export.js"></script>
|
||
<script src="JavaScript/webgl.js"></script>
|
||
<script src="JavaScript/ui.js"></script>
|
||
<script src="JavaScript/initialize.js"></script>
|
||
</body>
|
||
</html>
|