three实现二维草图户型图图纸做底片绘制三维户型图代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现二维草图户型图图纸做底片绘制三维户型图代码，可导出glb

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>室内户型编辑器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei',sans-serif;background:#1a1a2e;color:#fff;overflow:hidden;height:100vh}
#toolbar{height:50px;background:#16213e;display:flex;align-items:center;padding:0 10px;gap:6px;border-bottom:2px solid #0f3460;flex-wrap:wrap}
#toolbar button,#toolbar label{padding:5px 12px;background:#0f3460;color:#e94560;border:1px solid #e94560;border-radius:4px;cursor:pointer;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:4px}
#toolbar button:hover,#toolbar label:hover{background:#e94560;color:#fff}
#toolbar button.active{background:#e94560;color:#fff}
#toolbar input[type="file"]{display:none}
#toolbar input[type="range"]{width:70px;accent-color:#e94560}
#toolbar select{padding:4px 6px;background:#0f3460;color:#e94560;border:1px solid #e94560;border-radius:4px;font-size:12px}
#toolbar span.lb{color:#aaa;font-size:11px;margin-left:4px}
#main{display:flex;height:calc(100vh - 50px)}
#editor2d{flex:1;position:relative;background:#1a1a2e;overflow:hidden;border-right:2px solid #0f3460;min-width:350px}
#canvas2d{width:100%;height:100%}
#preview3d{width:42%;min-width:300px;position:relative;background:#0d1117}
#canvas3d{width:100%;height:100%}
#preview3d::before{content:'3D 实时预览';position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#e94560;font-size:13px;background:rgba(0,0,0,.6);padding:3px 14px;border-radius:10px;z-index:10;pointer-events:none}
#statusbar{position:absolute;bottom:0;left:0;right:0;height:26px;background:rgba(15,52,96,.9);display:flex;align-items:center;padding:0 12px;font-size:11px;color:#aaa}
#furniturePanel{display:none;position:absolute;top:0;left:0;background:rgba(22,33,62,.98);border:1px solid #0f3460;padding:8px;z-index:50;width:260px;max-height:100%;overflow-y:auto}
#furniturePanel h3{color:#e94560;margin-bottom:6px;font-size:13px}
.fGrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.fItem{background:#0f3460;border:1px solid #e9456050;border-radius:4px;padding:6px;text-align:center;cursor:pointer;font-size:10px;transition:.2s}
.fItem:hover,.fItem.sel{border-color:#e94560;background:#1a3a6e}
.fItem .ico{font-size:20px;display:block;margin-bottom:2px}
.catLabel{grid-column:1/-1;color:#e94560;font-size:11px;margin-top:4px;border-bottom:1px solid #e9456040;padding-bottom:2px}
.toast{position:fixed;top:58px;left:50%;transform:translateX(-50%);background:#e94560;color:#fff;padding:6px 20px;border-radius:16px;font-size:13px;z-index:999;animation:ft 2s ease forwards;pointer-events:none}
@keyframes ft{0%{opacity:0;top:40px}15%{opacity:1;top:58px}80%{opacity:1}100%{opacity:0;top:40px}}
#ctxMenu{display:none;position:fixed;background:rgba(22,33,62,.98);border:1px solid #e94560;border-radius:6px;padding:4px 0;z-index:200;min-width:110px}
#ctxMenu div{padding:5px 16px;cursor:pointer;font-size:12px}
#ctxMenu div:hover{background:#e94560}
#helpTip{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#e94560;font-size:12px;background:rgba(0,0,0,.5);padding:3px 12px;border-radius:10px;pointer-events:none;z-index:10}
</style>
</head>
<body>
<div id="toolbar">
  <label>📂 底图<input type="file" id="bgUpload" accept="image/*"></label>
  <span class="lb">透明:</span>
  <input type="range" id="bgOpacity" min="0" max="100" value="40">
  <button id="btnWall" class="active">🧱 画墙</button>
  <button id="btnDoor">🚪 门</button>
  <button id="btnWindow">🪟 窗</button>
  <button id="btnFurniture">🪑 家具</button>
  <button id="btnSelect">👆 选择</button>
  <button id="btnMovePoint">📌 调点</button>
  <button id="btnDelete">🗑️</button>
  <button id="btnUndo">↩️</button>
  <button id="btnClear">🧹</button>
  <select id="wallThick">
    <option value=&q.........完整代码请登录后点击上方下载按钮下载查看