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

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

代码语言：html

所属分类：三维

代码描述：three实现可编辑3d户型图在线绘制设计编辑器代码，左侧2d二维平面绘制户型、添加家居、编辑移动，右侧实时渲染3d户型图。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>3D户型可视化编辑器 (支持撤销与多家具)</title>
    <style>
        body { margin: 0; overflow: hidden; display: flex; height: 100vh; font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #f0f0f0; }
        #toolbar {
            position: absolute; top: 10px; left: 10px; z-index: 10; background: white; padding: 10px; 
            border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 50vw;
        }
        button, select {
            padding: 8px 12px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.2s;
        }
        button:hover, select:hover { background: #e0e0e0; }
        button.active { background: #4CAF50; color: white; border-color: #4CAF50; }
        .divider { width: 1px; height: 24px; background: #ccc; margin: 0 5px; }
        #left-panel { flex: 1; position: relative; border-right: 2px solid #ccc; background-color: #fff; }
        #right-panel { flex: 1; position: relative; }
        canvas { display: block; }
        .instructions { position: absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,0.9); padding: 8px 12px; border-radius: 4px; font-size: 13px; color: #333; pointer-events: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    </style>
    <!-- 引入 Three.js 和 OrbitControls -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
            }
        }
    </script>
</head>
<body>

    <div id="toolbar">
        <button id="btn-draw" class="active">✏️ 画墙</button>
        <button id="btn-door">🚪 门</button>
        <button id="btn-window">🪟 窗户</button>
        <div class="divider"></div>
        
        <select id="furniture-type">
            <option value="bed">🛏️ 床 (150x200)</option>
            <option value="sofa">🛋️ 沙发 (200x80)</option>
            <option value="table">🫖 茶几.........完整代码请登录后点击上方下载按钮下载查看