three实现给三维glb模型选择本地图片贴图材质合并生成新的glb下载代码-html代码-BFW代码库

three实现给三维glb模型选择本地图片贴图材质合并生成新的glb下载代码

代码语言：html

所属分类：三维

代码描述：three实现给三维glb模型选择本地图片贴图材质合并生成新的glb下载代码，给三维模型选择新的图片左侧贴图材质生成新的带贴图三维模型。

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

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <title>本地模型+贴图 合并导出 GLB（Three.js）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    html, body { margin:0; height:100%; background:#0e0f12; color:#eee; font:14px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial; }
    #ui {
      position: absolute; top: 12px; left: 12px; z-index: 10;
      background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.08);
      padding: 12px; border-radius: 10px; width: 360px; backdrop-filter: blur(4px);
    }
    #ui h3 { margin: 0 0 8px; font-size: 16px; color: #91caff; }
    #ui .row { margin-bottom: 10px; }
    #ui label { display:block; font-size: 12px; opacity: 0.9; margin-bottom: 4px; }
    #ui input[type="file"] { width: 100%; }
    #ui .cols { display:flex; gap:8px; }
    #ui .cols > div { flex:1; }
    #ui input[type="number"], #ui input[type="range"] { width: 100%; }
    #ui button {
      background: #2563eb; color: #fff; border: 0; padding: 8px 10px; border-radius: 8px;
      cursor: pointer; font-weight: 600;
    }
    #ui button:disabled { opacity: 0.5; cursor: not-allowed; }
    #ui .muted { font-size: 12px; opacity: 0.8; }
    #log { margin-top: 6px; font-size: 12px; color: #bfefff; max-height: 80px; overflow: auto; }
    canvas { display:block; }
  </style>
</head>
<body>
  <div id="ui">
    <h3>本地模型 + 贴图 合并导出 GLB</h3>

    <div class="row">
      <label>模型文件（支持：.glb / .gltf / .obj / .fbx）如为 .gltf 带外链，请多选所有相关文件：</label>
      <input id="modelFiles" type="file" multiple accept=".glb,.gltf,.bin,.obj,.fbx,.png,.jpg,.jpeg,.webp,.ktx2" />
    </div>

    <div class="row">
      <label>贴图文件（BaseColor / Diffuse 图）：</label>
      <input id="texFile" type="file" accept="image/*" />
    </div>

    <div class="row cols">
      <div>
        <label>金属度 metalness: <span id="mVal">0.1</span></label>
        <input id="metalness" type="range" min="0" max="1" step="0.01" value="0.1" />
      </div>
      <div>
        <label>粗糙度 roughness: <span id="rVal">0.9</span></label>
        <input id="roughness" type="range" min="0" max="1" step="0.01" value="0.9" />
      </div>
    </div>

    <div class="row cols">
      <div>
        <label>U 重复 repeatU</label>
        <input id="repU" type="number" value="1" min="0.01" step="0.1" />
      </div>
      <div>
        <label>V 重复 repeatV</label>
        <input id="repV" type="number" value="1" min.........完整代码请登录后点击上方下载按钮下载查看