three实现2d画线绘制户型图自动生成3d户型图代码-html代码-BFW代码库

three实现2d画线绘制户型图自动生成3d户型图代码

代码语言：html

所属分类：三维

代码描述：three实现2d画线绘制户型图自动生成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>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#14161f;color:#dde}
  #app{display:flex;width:100%;height:100%}
  #left{width:480px;min-width:480px;background:#1c1f2b;border-right:1px solid #2c3040;display:flex;flex-direction:column;padding:14px;gap:10px;overflow-y:auto}
  h1{font-size:17px;color:#fff;letter-spacing:1px}
  h1 span{font-size:11px;color:#8a90a8;font-weight:normal;margin-left:6px}
  .section{background:#232738;border:1px solid #2e3348;border-radius:10px;padding:10px 12px}
  .section .title{font-size:12px;color:#8a90a8;margin-bottom:8px}
  .modes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .furns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  #furnBar button{font-size:12px;padding:7px 2px}
  button{cursor:pointer;border:none;border-radius:8px;background:#2e3450;color:#cfd4ea;padding:8px 6px;font-size:13px;transition:.15s}
  button:hover{background:#3a4166}
  button.active{background:#3b82f6;color:#fff}
  .row{display:flex;gap:6px;flex-wrap:wrap}
  #selBar{margin-top:8px;font-size:12px;color:#cfd4ea;display:none;align-items:center;gap:6px;flex-wrap:wrap}
  #selBar button{padding:5px 8px;font-size:12px}
  #selName{color:#ffd54f}
  label.slider{display:block;font-size:12px;color:#aab;margin:6px 0}
  input[type=range]{width:100%;accent-color:#3b82f6}
  label.chk{font-size:12px;color:#aab;margin-right:12px;user-select:none}
  #cvWrap{flex:1;min-height:280px;position:relative;border-radius:10px;overflow:hidden;border:1px solid #2e3348}
  #cv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;display:block;background:#f8f8f4}
  #hint{font-size:11px;line-height:1.7;color:#7d839c}
  #right{flex:1;position:relative}
  #three{position:absolute;inset:0}
  #stats{position:absolute;left:12px;top:12px;background:rgba(20,22,31,.75);border:1px solid #2e3348;color:#cfd4ea;font-size:12px;padding:6px 12px;border-radius:8px;pointer-events:none}
  #viewBtns{position:absolute;right:12px;top:12px;display:flex;gap:6px}
</style>
</head>
<body>
<div id="app">
  <aside id="left">
    <h1>🏠 户型图生成器 <span>平面画线 → 3D（Three.js）</span></h1>
    <div class="section">
      <div class="title">工具</div>
      <div class="modes">
        <button data-mode="wall" class="active">✏️ 画墙</button>
        <button data-mode="door">🚪 门</button>
        <button data-mode="win">🪟 窗</button>
        <button data-mode="move">🖐 选择</button>
        <button data-mode="del">🗑️ 删除</button>
      </div>
    </div>
    <div class="section">
      <div class="title">家具（点击选中，再点平面图放置 · R 旋转朝向）</div>
      <div class="furns" id="furnBar"></div>
      <div id="selBar">已选：<b id="selName"></b>
        <button id="btnRot">↻ 旋转45°</button>
        <button id="btnDup">⧉ 复制</button>
        <button id="btnDelSel">🗑 删除</button>
      </div>
    </div>
    <div class="section">
      <div class="title">参数</div>
      <label class="slider">层高：.........完整代码请登录后点击上方下载按钮下载查看