three实现在线glb三维模型压缩大小降低精度Draco 压缩代码
代码语言:html
所属分类:三维
代码描述:three实现在线glb三维模型压缩大小降低精度Draco 压缩代码
代码标签: three 在线 glb 三维 模型 压缩 大小 降低 精度 Draco 压缩 代码
下面为部分代码预览,完整代码请点击下载或在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 模型压缩工具 (Three.js)</title> <style> :root { --panel-bg: #2a2a33; --text-color: #f0f0f0; --primary-color: #4a90e2; --border-color: #444; --input-bg: #3a3a44; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0; background-color: #1e1e24; color: var(--text-color); display: flex; height: 100vh; width: 100vw; overflow: hidden; } #controls-panel { width: 320px; padding: 20px; background-color: var(--panel-bg); box-shadow: 2px 0 10px rgba(0,0,0,0.3); overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } #viewer-container { flex-grow: 1; position: relative; } canvas { display: block; } h2, h3 { margin: 0 0 10px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; color: #b0c4de; } .control-group { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; } label { display: block; margin-bottom: 8px; font-weight: bold; font-size: 14px; } .slider-group { display: flex; align-items: center; gap: 10px; } input[type="range"] { flex-grow: 1; cursor: pointer; } .slider-value { min-width: 45px; text-align: right; font-family: 'Courier New', Courier, monospace; background: #1e1e24; padding: 2px 6px; border-radius: 4px; } select, input[type="number"] { width: 100%; padding: 8px; background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-color); border-radius: 4px; box-sizing: border-box; } #upload-btn, #compress-btn { width: 100%; padding: 12px; background-color: var(--primary-color); color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.2s; } #upload-btn { background-color: #5a67d8; } #upload-btn:hover { background-color: #4c58b8; } #compress-btn:hover:not(:disabled) { background-color: #3a7bc8; } #compress-btn:disabled { background-color: #555; cursor: not-allowed; } #file-input { display: none; } #info-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; } #info-panel div { padding: 10px; background-color: var(--input-bg); border-radius: 5px; } #info-panel h4 { margin: 0 0 8px 0; font-size: 14px; color: #99aaff; } #info-panel p { margin: 4px 0; font-family: 'Courier New', Courier, monospace; } #drop-zone { position: absolute; to.........完整代码请登录后点击上方下载按钮下载查看
网友评论0