three实现3d可视化智能家居每个房间开灯数字孪生效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：three实现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>交互式户型可视化</title>
  
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            slate: {
              50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1',
              400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155',
              800: '#1e293b', 900: '#0f172a',
            }
          }
        }
      }
    }
  </script><script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@18.2.0",
      "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime",
      "react/jsx-dev-runtime": "https://esm.sh/react@18.2.0/jsx-dev-runtime",
      "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
      "react-dom": "https://esm.sh/react-dom@18.2.0",
      "three": "https://esm.sh/three@0.160.0",
      "@react-three/fiber": "https://esm.sh/@react-three/fiber@8.15.14?external=react,react-dom,three",
      "@react-three/drei": "https://esm.sh/@react-three/drei@9.96.1?external=react,react-dom,three,@react-three/fiber",
      "leva": "https://esm.sh/leva@0.9.35?external=react,react-dom",
      "lucide-react": "https://esm.sh/lucide-react@0.294.0?external=react,react-dom"
    }
  }
  </script>
  
  <!-- Babel: 用于在浏览器中编译 JSX -->
  <script src="https://unpkg.com/@babel/standalone@7.23.9/babel.min.js"></script>

  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body, #root { width: 100%; height: 100%; overflow: hidden; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; }
    .canvas-container { width: 100%; height: 100%; }
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
    ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; }
    .dark ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }
    .dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }
    .loading-spinner { animation: spin 1s linear infinite; }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    .glass { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .transition-theme { transition: all 0.5s ease; }
  </style>
</head>
<body>
  <div id="root"></div>
  
  <!-- 主应用脚本 -->
  <script type="text/babel" data-type="module">
    import React, { useState, useEffect, useRef, useMemo, useCallback, Suspense } from 'react';
    import { createRoot } from 'react-dom/client';
    import * as THREE from 'three';
    import { Canvas, useThree, useFrame } from '@react-three/fiber';
    import { 
      OrbitControls, OrthographicCamera, Environment, ContactShadows,
      useGLTF, Html, Float
    } from '@react-three/drei';
 
    import * as Icons from 'lucide-react';

    // ==================== 主题配置 ====================
    const THEMES = {
      blue: {
        environment: {
          dayBg1: "#9ac8d8", dayBg2: "#619deb", dayAmbientColor: "#619deb", dayAmbientIntensity: 1.35,
          dayFillColor: "#619deb", dayFillIntensity: 7.18,
          nightBg1: "#616161", nightBg2: "#42464f", nightAmbientColor: "#a9a9a9", nightAmbientIntensity: 0,
          nightFillColor: "#000000", nightFillIntensity: 0.2
        },
        roomLight: {
          dayLightColor: "#fef9c7", dayLightIntensity: 20, dayLightDistance: 5, dayLightDecay: 1.58,
          nightLightColor: "#dad199", nightLightIntensity: 19, nightLightDistance: 4, nightLightDecay: 1.6
        },
        walls: {
          dayWallColor: "#e7f5fb", dayWallOpacityBase: 0.1, dayWallOpacityTop: 0.4,
          dayGlassColor: "#000000", dayGlassOpacity: 0,
          nightWallColor: "#b0b0b0", nightWallOpacityBase: 0.3, nightWallOpacityTop: 0.5,
          nightGlassColor: "#000000", nightGlassOpacity: 0
        },
        floor: {
          dayFloorColorDefault: "#ffffff", dayFloorOpacity: 0, dayReflectStrength: 35,
          nightFloorColorDefault: "#797979", nightFloorColorActive: "#5d6476", nightFloorOpacity: 0.25, nightReflectStrength: 85
        },
        robotTrail: { dayTrailColor: "#9abce8", nightTrailColor: "#141414" }
      },
      green: {
        environment: {
          dayBg1: "#aacfc3", dayBg2: "#6fae99", dayAmbientColor: "#6fae99", dayAmbientIntensity: 1.35,
          dayFillColor: "#6fae99", dayFillIntensity: 7.18,
          nightBg1: "#5e615f", nightBg2: "#3f4742", nightAmbientColor: "#a3b0aa", nightAmbientIntensity: 0,
          nightFillColor: "#000000", nightFillIntensity: 0.2
        },
        roomLight: {
          dayLightColor: "#fef9c7", dayLightIntensity: 20, dayLightDistance: 5, dayLightDecay: 1.58,
          nightLightColor: "#dad199", nightLightIntensity: 19, nightLightDistance: 4, nightLightDecay: 1.6
        },
        walls: {
          dayWallColor: "#edf3f1", dayWallOpacityBase: 0.1, dayWallOpacityTop: 0.4,
          dayGlassColor: "#000000", dayGlassOpacity: 0,
          nightWallColor: "#adb2af", nightWallOpacityBase: 0.3, nightWallOpacityTop: 0.5,
          nightGlassColor: "#000000", nightGlassOpacity: 0
        },
        floor: {
          dayFloorColorDefault: "#ffffff", dayFloorOpacity: 0, dayReflectStrength: 35,
          nightFloorColorDefault: "#797979", nightFloorColorActive: "#64736d", nightFloorOpacity: 0.25, nightReflectStrength: 85
        },
        robotTrail: { dayTrailColor: "#9ec5b5", nightTrailColor: "#141414" }
      },
      purple: {
        environment: {
          dayBg1: "#c5b2e8", dayBg2: "#8e61eb", dayAmbientColor: "#8e61eb", dayAmbientIntensity: 1.35,
          dayFillColor: "#8e61eb", dayFillIntensity: 7.18,
          nightBg1: "#5d5966", nightBg2: "#474351", nightAmbientColor: "#b0a7bf", nightAmbientIntensity: 0,
          nightFillColor: "#000000", nightFillIntensity: 0.2
        },
        roomLight: {
          dayLightColor: "#fef9c7", dayLightIntensity: 20, dayLightDistance: 5, dayLightDecay: 1.58,
          nightLightColor: "#dad199", nightLightIntensity: 19, nightLightDistance: 4, nightLightDecay: 1.6
        },
        walls: {
          dayWallColor: "#f2e9fb", dayWallOpacityBase: 0.1, dayWallOpacityTop: 0.4,
          dayGlassColor: "#000000", dayGlassOpacity: 0,
          nightWallColor: "#b6b0c0", nightWallOpacityBase: 0.3, nightWallOpacityTop: 0.5,
          nightGlassColor: "#000000", nightGlassOpacity: 0
        },
        floor: {
          dayFloorColorDefault: "#ffffff", dayFloorOpacity: 0, dayReflectStrength: 35,
          nightFloorColorDefault: "#797979", nightFloorColorActive: "#6d5f7a", nightFloorOpacity: 0.25, nightReflectStrength: 85
        },
        robotTrail: { dayTrailColor: "#c8a7ff", nightTrailColor: "#141414" }
      }
    };

    // ==================== 默认户型数据 ====================
    const DEFAULT_FLOOR_PLAN = {
      rooms:[
        { id: "living-room", name: "Living Room", height: 3, color: "#f9a5cf", polygon:[{ x: 0, y: 0 }, { x: 6, y: 0 }, { x: 6, y: 5 }, { x: 0, y: 5 }] },
        { id: "bedroom", name: "Master Bedroom", height: 3, color: "#f3de87", polygon:[{ x: 6, y: 0 }, { x: 10, y: 0 }, { x: 10, y: 4 }, { x: 6, y: 4 }] },
        { id: "kitchen", name: "Kitchen", height: 3, color: "#ecfccb", polygon:[{ x: 6, y: 4 }, { x: 10, y: 4 }, { x: 10, y: 7 }, { x: 6, y: 7 }] },
        { id: "bathroom", name: "Bathroom", height: 3, color: "#afeef4", polygon:[{ x: 0, y: 5 }, { x: 3, y: 5 }, { x: 3, y: 8 }, { x: 0, y: 8 }] },
        { id: "entry-hall", name: "Entry", height: 3, color: "#afc8fb", polygon:[{ x: 3, y: 5 }, { x: 6, y: 5 }, { x: 6, y: 7 }, { x: 3, y: 8 }] },
        { id: "study", name: "Study", height: 3, color: "#e9d5ff", polygon:[{ x: -4, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 5 }, { x: -4, y: 5 }] },
        { id: "balcony", name: "Balcony", height: 1, color: "#e2e8f0", polygon:[{ x: 0, y: -2 }, { x: 6, y: -2 }, { x: 6, y: 0 }, { x: 0, y: 0 }] }
      ],
      walls:[
        { id: "w1", start: { x: 0, y: 0 }, end: { x: 6, y: 0 }, thickness: 0.08, height: 2.8, openings:[{ id: "door_balcony", type: "door", position: 0.5, width: 1.8, height: 2.2 }] },
        { id: "w2", start: { x: 0, y: 0 }, end: { x: 0, y: 5 }, thickness: 0.08, height: 2.8, openings:[{ id: "door_study", type: "door", position: 0.5, width: 0.9, height: 2.1 }] },
        { id: "w_bath_left", start: { x: 0, y: 5 }, end: { x: 0, y: 8 }, thickness: 0.08, height: 2.8, openings:[{ id: "win_bath", type: "window", position: 0.5, width: 0.8, height: 0.8, sillHeight: 1.4 }] },
        { id: "w3", start: { x: 0, y: 8 }, end: { x: 3, y: 8 }, thickness: 0.08, height: 2.8 },
        { id: "w_entry_top", start: { x: 3, y: 8 }, end: { x: 6, y: 7 }, thickness: 0.08, height: 2.8, openings:[{ id: "door_main", type: "door", position: 0.5, width: 1.2, height: 2.2 }] },
        { id: "w4", start: { x: 6, y: 7 }, end: { x: 10, y: 7 }, thickness: 0.08, height: 2.8, openings:[{ id: "win_kitchen", type: "window", position: 0.5, width: 1.5, height: 1.2, sillHeight: 1.1 }] },
        { id: "w5", start: { x: 10, y: 0 }, end: { x: 10, y: 7 }, thickness: 0.08, height: 2.8, openings:[{ id: "win_bed", type: "window", position: 0.3, width: 2, height: 1.5, sillHeight: 1 }] },
        { id: "w6".........完整代码请登录后点击上方下载按钮下载查看