three实现可视化拖拽生成3d物体并编辑效果代码-html代码-BFW代码库

three实现可视化拖拽生成3d物体并编辑效果代码

代码语言：html

所属分类：三维

代码描述：three实现可视化拖拽生成3d物体并编辑效果代码

下面为部分代码预览，完整代码请点击下载或在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>3D 立体绘制工具（拖拽绘制 / 面色编辑 / 盒子展开）</title>
  <style>
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
    .app { display: grid; grid-template-columns: 320px 1fr; height: 100%; }
    aside { background: #0f172a; color: #e2e8f0; padding: 16px; overflow: auto; border-right: 1px solid #1f2937; }
    aside h1 { font-size: 18px; margin: 0 0 8px; }
    aside h2 { font-size: 14px; margin: 16px 0 8px; color:#93c5fd; }
    aside .card { background:#111827; border:1px solid #374151; border-radius:14px; padding:12px; margin-bottom:12px; }
    aside label { display:block; font-size: 12px; opacity:.9; margin:6px 0 4px; }
    aside input[type="color"], aside input[type="number"], aside select, aside button, aside input[type="checkbox"] {
      width: 100%; padding: 8px; border-radius: 10px; border: 1px solid #374151; background: #0b0f1a; color: #e5e7eb; outline: none;
    }
    aside button { cursor: pointer; transition: transform .06s ease, background .2s ease; }
    aside button:hover { transform: translateY(-1px); background:#111826; }
    aside .row { display:flex; gap:8px; }
    aside .row > * { flex:1; }
    #viewport { position: relative; background: #0b1020; }
    canvas { display:block; }

    /* 展开视图覆盖层 */
    #unfoldOverlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,.9); }
    #unfoldPanel { background:#0a0f1f; border:1px solid #1f2a44; border-radius:16px; padding:16px; color:#e5e7eb; width:min(90vw,900px); }
    #unfoldPanel h3{ margin:0 0 8px; font-size:16px; }
    #unfoldCanvas { width:100%; height:520px; background:#0b1228; border-radius:12px; border:1px solid #24314f; display:block; }
    #closeUnfold { margin-top:10px; }
    .pill { display:inline-block; padding:4px 8px; border:1px solid #334155; border-radius:999px; font-size:12px; opacity:.85; }
  </style>
</head>
<body>
  <div class="app">
    <aside>
      <h1>🧊 3D 立体绘制工具</h1>
      <div class="card">
        <div class="row">
          <div>
            <label>形状</label>
            <select id="shape">
              <option value="box">立方体 / 长方体</option>
              <option value="cylinder">圆柱</option>
              <option value="ellipsoid">椭球</option>
            </select>
          </div>
          <div>
            <label>模式</label>
            <select id="mode">
              <option value="draw">拖拽绘制</option>
              <option value="select">选择/编辑</option>
            </select>
          </div>
        </div>
        <label>辅助网格</label>
        <input type="checkbox" id="gridToggle" checked />
        <label>吸附步长（单位）</label>
        <input type="number" id="snap" min="0" step="0.1" value="0.5" />
      </div>

      <div class="card">
        <h2>尺寸（选中形状可编辑）</h2>
        <div id="dimsBox">
          <div class="row">
            <div><label>宽 W</label><input type="number" id="dimW" step="0.1" /></div>
            <div><label>高 H</label><input type="number" id="dimH" step="0.1" /></div>
            <div><label>深 D</label><input type="number" id="dimD" step="0.1" /></div>
          </div>
        </div>
        <div id="dimsCyl" style="dis.........完整代码请登录后点击上方下载按钮下载查看