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 户型 -> Three.js 3D</title>
<style>
  body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
  .app { display:flex; height:100vh; gap:10px; padding:10px; box-sizing:border-box; }
  .panel { background:#f7f7f7; border-radius:8px; padding:10px; box-shadow:0 2px 6px rgba(0,0,0,0.08); }
  #left { width:420px; display:flex; flex-direction:column; gap:8px; }
  #right { flex:1; position:relative; min-width:400px; }
  canvas#drawCanvas { background:#fff; border:1px solid #ddd; display:block; cursor:crosshair; }
  img#plan { display:block; max-width:100%; border:1px solid #ddd; }
  .controls { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .controls input[type=number]{ width:90px; padding:6px; border-radius:4px; border:1px solid #ccc; }
  .controls button{ padding:6px 10px; border-radius:6px; border:1px solid #bbb; background:#fff; cursor:pointer; }
  .hint { color:#666; font-size:13px; margin-top:6px; }
  #threeContainer { width:100%; height:100%; background:linear-gradient(#cfe9ff,#e9f4ff); border-radius:8px; overflow:hidden; }
  .topbar { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
</style>
</head>
<body>
<div class="app">
  <div id="left" class="panel">
    <div class="topbar">
      <strong>2D 户型（绘制墙线）</strong>
      <div style="font-size:12px;color:#666">单击添加点，双击或“闭合多边形”完成</div>
    </div>

    <input id="file" type="file" accept="image/*" />
    <div style="display:flex; gap:6px; align-items:center;">
      <label style="font-size:13px;color:#444">或使用默认图片（若不可访问请上传）</label>
    </div>

    <div style="display:flex; gap:6px; align-items:center;">
      <button id="loadDefault">载入默认图片</button>
      <button id="clearDraw">清空绘制</button>
      <button id="undo">撤销点</button>
      <button id="closeShape">闭合多边形</button>
    </div>

    <div style="display:flex; gap:6px; align-items:center; margin-top:6px;">
      <div class="controls">
        <label>墙高(m): <input id="wallHeight" type="number" step="0.1" value="2.8"></label>
        <label>墙厚(px): <input id="wallThicknessPx" type="number" step="1" value=&qu.........完整代码请登录后点击上方下载按钮下载查看