three实现可编辑3d户型图在线绘制设计编辑器代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现可编辑3d户型图在线绘制设计编辑器代码，左侧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; }
body { font-family: 'Microsoft YaHei', sans-serif; overflow: hidden; background: #1a1a2e; color: #fff; }

.container { display: flex; height: 100vh; }

/* 左侧面板 */
.left-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #333;
    background: #16213e;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: #0f3460;
    border-bottom: 1px solid #333;
    align-items: center;
}

.toolbar button, .toolbar select {
    padding: 6px 12px;
    border: 1px solid #555;
    background: #1a1a2e;
    color: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.toolbar button:hover { background: #e94560; border-color: #e94560; }
.toolbar button.active { background: #e94560; border-color: #e94560; color: #fff; }

.toolbar .separator {
    width: 1px;
    height: 28px;
    background: #555;
    margin: 0 4px;
}

.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
}

#canvas2d {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* 右侧面板 */
.right-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    background: #0a0a1a;
}

.right-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: #0f3460;
    border-bottom: 1px solid #333;
    align-items: center;
}

.right-toolbar button {
    padding: 6px 12px;
    border: 1px solid #555;
    background: #1a1a2e;
    color: #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.right-toolbar button:hover { background: #e94560; }
.right-toolbar button.active { background: #e94560; border-color: #e94560; }

.right-toolbar label {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.right-toolbar input[type="range"] {
    width: 80px;
}

#canvas3d {
    flex: 1;
    width: 100%;
}

/* 家具面板 */
.furniture-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    background: #0d1b3e;
    border-bottom: 1px solid #333;
    max-height: 80px;
    overflow-y: auto;
}

.furniture-item {
    padding: 4px 10px;
    background: #1a1a2e;
    border: 1px solid #444;
    border-radius: 4px;
    cursor: grab;
    font-size: 11px;
    color: #ccc;
    transition: all 0.2s;
    user-select: none;
}

.furniture-item:hover { background: #533483; border-color: #533483; }
.furniture-item.selected { background: #e94560; border-color: #e94560; }

/* 状态栏 */
.status-bar {
    padding: 4px 10px;
    background: #0a0a1a;
    border-top: 1px solid #333;
    font-size: 11px;
    color: #888;
    display: flex;
    justify-content: space-between;
}

/* 提示 */
.tooltip {
    position: absolute;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    pointer-events: none;
    display: none;
    z-index: 100;
}

/* 属性面板 */
.property-panel {
    position: absolute;
    right: 10px;
    top: 50px;
    background: rgba(15, 52, 96, 0.95);
    border: 1px solid #555;
    border-radius: 6px;
    padding: 10px;
    min-width: 160px;
    display: none;
    z-index: 50;
    font-size: 12px;
}

.property-panel h4 {
    margin-bottom: 8px;
    color: #e94560;
    font-size: 13px;
}

.property-panel label {
    display: block;
    margin: 4px 0;
    color: #bbb;
}

.property-panel input, .property-panel select {
    width: 100%;
    padding: 3px 6px;
    margin-top: 2px;
    background: #1a1a2e;
    border: 1px solid #555;
    color: #fff;
    border-radius: 3px;
    font-size: 11px;
}

.property-panel button {
    margin-top: 6px;
    padding: 4px 10px;
    width: 100%;
    background: #e94560;
    border: none;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
}

.context-menu {
    position: absolute;
    background: rgba(15, 52, 96, 0.97);
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 0;
    display: none;
    z-index: 200;
    min-width: 140px;
}
.context-menu div {
    padding: 6px 16px;
    cursor: pointer;
    font-size: 12px;
    color: #ddd;
}
.context-menu div:hover {
    background: #e94560;
    color: #fff;
}

.grid-info {
    position: absolute;
    left: 10px;
    bottom: 30px;
    font-size: 10px;
    color: #555;
    pointer-events: none;
}
</style>
</head>
<body>

<div class="container">
    <!-- 左侧2D编辑 -->
    <div class="left-panel">
        <div class="toolbar">
            <button id="btnDraw" class="active" onclick="setTool('draw')" title="绘制墙壁 (W)">🖊️ 画墙</button>
            <button id="btnSelect" onclick="setTool('select')" title="选择 (V)">🔍 选择</button>
            <button id="btnMove" onclick="setTool('move')" title="移动 (M)">✋ 移动</button>
            <div class="separator"></div>
            <button id="btnDoor" onclick="setTool('door')" title="添加门 (D)">🚪 门</button>
            <button id="btnWindow" onclick="setTool('window')" title="添加窗户 (N)">🪟 窗户</button>
            <div class="separator"></div>
            <button onclick="undoAction()" title="撤销 Ctrl+Z">↩️ 撤销</button>
            <button onclick="clearAll()" title="清除全部">🗑️ 清除</button>
            <button onclick="loadDemo()" title="加载示例户型">📐 示例</button>
            <div class="separator"></div>
            <select id="wallThickness" onchange="updateWallThickness()" title="墙壁厚度">
                <option value="8">薄墙 8cm</option>
                <option value="12">标准 12cm</option>
                <option value="24" selected>承重墙 24cm</option>
                <option value="37">厚墙 37cm</option>
            </select>
        </div>
        <div class="furniture-panel" id="furniturePanel">
            <div class="furniture-item" draggable="true" data-type="sofa" ondragstart="dragFurniture(event,'sofa')">🛋️ 沙发</div>
            <div class="furniture-item" draggable="true" data-type="bed" ondragstart="dragFurniture(event,'bed')">🛏️ 床</div>
            <div class="furniture-item" draggable="true" data-type="table" ondragstart="dragFurniture(event,'table')">🪑 餐桌</div>
            <div class="furniture-item" draggable="true" data-type="desk" ondragstart="dragFurniture(event,'desk')">💻 书桌</div>
            <div class="furniture-item" draggable="true" data-type="wardrobe" ondragstart="dragFurniture(event,'wardrobe')">🗄️ 衣柜</div>
            <div class="furniture-item" draggable="true" data-type="toilet" ondragstart="dragFurniture(event,'toilet')">🚽 马桶</div>
            <div class="furniture-item" draggable="true" data-type="bathtub" ondragstart="dragFurniture(event,'bathtub')">🛁 浴缸</div>
            <div class="furniture-item" draggable="true" data-type=".........完整代码请登录后点击上方下载按钮下载查看