three实现三维人物骨骼节点自动生成调整蒙皮姿态调整导出代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维人物骨骼节点自动生成调整蒙皮姿态调整导出代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Three.js 自动骨骼 + 蒙皮绑定 + 姿态编辑</title>
  <style>
    :root {
      --bg: #0f172a;
      --panel: rgba(0,0,0,.65);
      --muted: #9aa0a6;
      --accent: #60a5fa;
    }

    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      overflow: hidden;
      background: #10151e;
      color: #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Microsoft YaHei", sans-serif;
    }

    #panel {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 320px;
      max-height: calc(100% - 20px);
      overflow: auto;
      background: var(--panel);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      padding: 12px;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,.4);
    }

    h3 {
      margin: 0 0 8px 0;
      font-size: 16px;
    }

    .section {
      margin: 10px 0 14px 0;
      padding: 10px;
      border-radius: 8px;
      background: rgba(255,255,255,.06);
    }

    .row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 8px 0;
    }

    input[type=file] {
      flex: 1;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 8px;
      border: 0;
      border-radius: 8px;
      background: #334155;
      color: #fff;
      cursor: pointer;
    }

    .btn:hover {
      background: #3b4960;
    }

    .btn.ok {
      background: #16a34a;
    }

    .btn.warn {
      background: #d97706;
    }

    .btn.ghost {
      background: transparent;
      border: 1px solid rgba(255,255,255,.15);
    }

    .btn:disabled {
      opacity: .6;
      cursor: not-allowed;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    label.small {
      font-size: 12px;
      color: #cbd5e1;
    }

    .hint {
      font-size: 12px;
      color: #cbd5e1;
      background: rgba(96,165,250,.12);
      padding: 8px;
      border-radius: 8px;
    }

    #status {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: var(--panel);
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="panel">
  <h3>自动骨骼 + 蒙皮绑定</h3>

  <div class="section">
    <div class="row">
      <b>1) 加载静态角色网格 (GLB/GLTF)</b>
    </div>
    <div class="row">
      <input id="fileModel" type="file" accept=".glb,.gltf"/>
    </div>
    <div class="hint">如果模型没有骨骼，将自动生成人形骨架，拖拽关节进行布置。</div>
  </div>

  <div class="section">
    <div class="row"><b>2) 骨骼操作</b></div>
    <div class="grid-2">
      <button id="modeRig" class="btn warn" disabled>骨架布置(平移)</button>
      <button id="modePose" class="btn" disabled>姿态(旋转)</button>
    </div>
    <div class="grid-2" style="margin-top:8px">
      <button id="rebuildRigBtn" class="btn ghost" disabled>重新生成人形骨架</button>
      <button id="toggleBonesBtn" class="btn ghost" disabled>显示/隐藏骨骼</button>
    </div>
  </div>

  <div class="section">
    <div class="row"><b>3) 蒙皮绑定</b></div>
    <div class="grid-2">
      <button id="bindBtn" class="btn ok" disabled>绑定蒙皮</button>
      <button id="reweightBtn" class="btn" disabled>重算权重</button>
    </div>
    <div class="row" style="gap:10px">
      <label class="small" style="width:90px">衰减指数</label>
      <input id="power" type="range" min="0.8" max="3.0" step="0.1" value="1.6"/>
      <span id="powerVal" class="small" style="width:36px;text-align:right">1.6</span>
    </div>
    <div class="row" style="gap:10px">
      <label class="small" style="width:90px">使用段数</label>
      <input id="neighbors" type="range" min="1" max="3" step="1" value="2"/>
      <span id="neighborsVal" class="small" style="width:36px;text-align:right">2</span>
    </div>
    <div class="hint">算法：按“距离最近的骨段”，对该段的父/子骨按插值权重分配；可选加入次近段，最多 4 骨影响。</div>
  </div>.........完整代码请登录后点击上方下载按钮下载查看