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" />
  <title>2D 户型绘制 → 3D 三维展示（Three.js CDN）</title>
  <style>
    html,body { height:100%; margin:0; font-family:system-ui, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB"; }
    .app {
      display:flex;
      height:100vh;
      gap:12px;
      padding:12px;
      box-sizing:border-box;
      background: #f4f6f8;
    }
    .panel {
      background:white;
      border-radius:8px;
      box-shadow: 0 6px 18px rgba(20,30,50,.08);
      padding:12px;
      box-sizing:border-box;
    }
    .left {
      width:420px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .right {
      flex:1;
      position:relative;
      min-width:360px;
      display:flex;
      flex-direction:column;
    }
    canvas#planCanvas {
      width:100%;
      height: 480px; /* Adjusted height */
      border:1px solid #e6e9ee;
      border-radius:6px;
      touch-action: none;
      background: repeating-linear-gradient(0deg,#fff,#fff 24px, #f8f9fb 24px, #f8f9fb 48px);
    }
    .controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
    button {
      padding:8px 12px;
      border-radius:6px;
      border:1px solid #d0d6df;
      background:#fff;
      cursor:pointer;
      transition: all 0.2s;
    }
    button:hover { background-color: #f8f9fb; }
    button.primary {
      background:#2563eb;color:#fff;border-color:#1e4ed8;
    }
    button.primary:hover { background-color: #1d4ed8; }
    label { font-size:13px; color:#233; }
    input[type=number] { width:64px; padding:6px; border-radius:6px; border:1px solid #d0d6df; }
    .hint { font-size:12px; color:#666; margin-top:4px; line-height: 1.5; }
    #threeContainer { flex:1; border-radius:8px; overflow:hidden; border:1px solid #e6e9ee; background:#eef3fb; }
    .toolbar { display:flex; gap:8px; align-items:center; margin-bottom: 8px; }
    .toolbar button.active {
        background: #e0e7ff;
        border-color: #4f46e5;
        color: #4f46e5;
        font-weight: 500;
    }
    .footerHint { font-size:12px; color:#666; padding-top:6px; }
    .coords { font-size:12px; color:#444; margin-left:auto; }
    .input-group { display:flex; flex-wrap: wrap; gap:8px; margin-top:6px; align-items:center;}
  </style>
</head>
<body>
  <div class="app">
    <div class="left panel">
      <h3>2D 户型绘制</h3>
      <div>
        <canvas id="planCanvas" width="800" height="960"></canvas>
      </div>
       <div class="toolbar">
        <button id="btnDrawWall" class="active">绘制墙体</button>
        <button id="btnAddWindow">添加窗户</button>
        <button id="btnAddDoor">添加门</button>
      </div>
      <div class="controls">
        <button id="btnUndo">撤销</button>
        <button id="btnClear">清空</button>
        <button id="btnFinish">完成阶段</button>
        <button class="primary" id="btnGenerate">生成 3D</button>
        <div class="coords" id="cursorPos">坐标: -</div>
      </div>
      <div class="input-group">
        <label>墙高(m)</label> <input id="wallHeight" type="number" value="2.8" step="0.1" min="0.5">
        <label>墙厚(m)</label> <input id="wallThickness" type="number" value="0.2" step="0.01" min="0.01">
        <label>缩放(px→m)</label> <input id="scale" type="number" value="50" step="1" min="1">
      </div>
       <div class="input-group">
        <label>窗宽(m)</label> <input id="windowWidth" type="number" value="1.5" step="0.1">
        <label>窗高(m)</label> <input id="windowHeight" type="number" value="1.2" step="0.1">
        <label>离地(m)</label> <input id="windowSill" type="number" value="0.9" step="0.1">
    .........完整代码请登录后点击上方下载按钮下载查看