three实现glb三维模型体积大小校准导出代码-html代码-BFW代码库

three实现glb三维模型体积大小校准导出代码

代码语言：html

所属分类：三维

代码描述：three实现glb三维模型体积大小校准导出代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GLB 模型体积/尺寸重新校准导出工具</title>
<style>
  * { box-sizing: border-box; }
  html, body { margin:0; padding:0; height:100%; overflow:hidden;
    font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:#12141c; color:#e6e6e6; }
  #app { display:flex; width:100%; height:100%; }
  #viewport { flex:1; position:relative; background:radial-gradient(circle at 50% 30%, #1c2030, #0c0d13); }
  #viewport canvas { display:block; }
  #dropHint {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    flex-direction:column; gap:10px; color:#8ab4ff; font-size:16px; pointer-events:none;
    background:rgba(10,12,20,0.35); transition:opacity .2s;
  }
  #dropHint.hidden { opacity:0; }
  #dropHint .icon { font-size:46px; }

  #sidebar {
    width:360px; flex-shrink:0; background:#181a24; border-left:1px solid #2a2d3d;
    overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px;
  }
  h1 { font-size:16px; margin:0 0 2px 0; color:#fff; }
  .subtitle { font-size:12px; color:#888; margin-bottom:6px; }

  .card { background:#20222f; border:1px solid #2c2f40; border-radius:10px; padding:12px 14px; }
  .card h2 { font-size:13px; margin:0 0 10px 0; color:#8ab4ff; display:flex; align-items:center; gap:6px; }

  .fileBtn {
    display:block; text-align:center; padding:10px; border:1px dashed #4c6ef5; border-radius:8px;
    color:#8ab4ff; cursor:pointer; font-size:13px; background:#1a1c2b;
  }
  .fileBtn:hover { background:#232538; }
  input[type=file] { display:none; }

  .infoRow { display:flex; justify-content:space-between; font-size:12.5px; padding:3px 0; color:#ccc; }
  .infoRow span:first-child { color:#888; }
  .infoRow b { color:#f0c94a; }

  .modeTabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
  .modeTab {
    flex:1 1 45%; text-align:center; padding:6px 4px; font-size:12px; border-radius:6px;
    background:#2a2d3d; color:#aaa; cursor:pointer; border:1px solid transparent;
  }
  .modeTab.active { background:#33406b; color:#fff; border-color:#4c6ef5; }

  .modePanel { display:none; flex-direction:column; gap:8px; }
  .modePanel.active { display:flex; }

  label.fieldLabel { font-size:12px; color:#aaa; display:flex; flex-direction:column; gap:4px; }
  input[type=number], input[type=text] {
    background:#14151d; border:1px solid #3a3d5.........完整代码请登录后点击上方下载按钮下载查看