three实现可视化拖拽设计三维户型图代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现可视化拖拽设计三维户型图代码

下面为部分代码预览，完整代码请点击下载或在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: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; overflow: hidden; background: #1a1a2e; }

#app { display: flex; height: 100vh; }

/* 左侧面板 */
#sidebar {
width: 280px;
background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%);
border-right: 1px solid rgba(255,255,255,0.08);
display: flex;
flex-direction: column;
z-index: 10;
}

#sidebar .logo {
padding: 20px;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
#sidebar .logo h1 {
color: #e94560;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
}
#sidebar .logo p {
color: rgba(255,255,255,0.4);
font-size: 11px;
margin-top: 4px;
}

.panel-section {
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.panel-section h3 {
color: rgba(255,255,255,0.6);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 12px;
}

.tool-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}

.tool-btn {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 12px 8px;
color: rgba(255,255,255,0.8);
cursor: pointer;
transition: all 0.2s;
text-align: center;
font-size: 12px;
}
.tool-btn:hover {
background: rgba(233, 69, 96, 0.15);
border-color: rgba(233, 69, 96, 0.4);
transform: translateY(-1px);
}
.tool-btn.active {
background: rgba(233, 69, 96, 0.2);
border-color: #e94560;
color: #fff;
}
.tool-btn .icon {
font-size: 24px;
display: block;
margin-bottom: 4px;
}

/* 家具列表 */
.furniture-list {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 400px;
overflow-y: auto;
padding-right: 5px;
}
.furniture-list::-webkit-scrollbar { width: 4px; }
.furniture-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.furniture-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
cursor: grab;
transition: all 0.2s;
color: rgba(255,255,255,0.8);
font-size: 13px;
}
.furniture-item:hover {
background: rgba(233, 69, 96, 0.1);
border-color: rgba(233, 69, 96, 0.3);
}
.furniture-item:active { cursor: grabbing; }
.furniture-item .fi-icon {
font-size: 22px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
border-radius: 8px;
flex-shrink: 0;
}
.furniture-item .fi-info { flex: 1; }
.furniture-item .fi-info .fi-name { font-weight: 500; }
.furniture-item .fi-info .fi-size { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }

/* 主画布 */
#canvas-container {
flex: 1;
position: relative;
}

/* 顶部工具栏 */
#topbar {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
background: rgba(22, 33, 62, 0.9);
backdrop-filter: blur(20px);
padding: 6px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.08);
z-index: 10;
}
.topbar-btn {
padding: 8px 16px;
background: transparent;
border: none;
color: rgba(255,255,255,0.7);
border-radius: 10px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.topbar-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topbar-btn.active { background: #e94560; color: #fff; }

/* 右侧属性面板 */
#properties {
position: absolute;
top: 70px;
right: 15px;
width: 220px;
background: rgba(22, 33, 62, 0.92);
backdrop-filter: blur(20px);
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.08);
padding: 18px;
z-index: 10;
display: none;
}
#properties h4 {
color: #e94560;
font-size: 13px;
margin-bottom: 15px;
font-weight: 600;
}
.prop-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.prop-row label {
color: rgba(255,255,255,0.5);
font-size: 12px;
}
.prop-row input {
width: 70px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px;
padding: 5px 8px;
color: #fff;
font-size: 12px;
text-align: center;
}
.prop-row input:focus { outline: none; border-color: #e94560; }

.prop-btn {
width: 100%;
padding: 8px;
background: rgba(233, 69, 96, 0.15);
border: 1px solid rgba(233, 69, 96, 0.3);
border-radius: 8px;
color: #e94560;
cursor: pointer;
font-size: 12px;
margin-top: 8px;
transition: all 0.2s;
}
.prop-btn:hover { background: #e94560; color: #fff; }
.prop-btn.danger { background: rgba(255,50,50,0.15); border-color: rgba(255,50,50,0.3); color: #ff5555; }
.prop-btn.danger:hover { background: #ff5555; color: #fff; }

/* 底部状态栏 */
#statusbar {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: rgba(22, 33, 62, 0.85);
backdrop-filter: blur(20px);
padding: 8px 20px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.45);
font-size: 11px;
z-index: 10;
display: flex;
gap: 20px;
}

/* 2D绘制覆盖层 */
#draw-overlay {
position: absolute;
top: 0; left: 0; righ.........完整代码请登录后点击上方下载按钮下载查看