three实现三维卧室代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维卧室代码，可切换白天与夜晚

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cozy Isometric Room</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            overflow: hidden; 
            background: #1a1a2e;
            font-family: 'Segoe UI', sans-serif;
        }
        canvas { display: block; }
        #info {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #f0e6d3;
            background: rgba(30, 25, 40, 0.7);
            padding: 10px 24px;
            border-radius: 20px;
            font-size: 13px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(240, 230, 211, 0.15);
            pointer-events: none;
        }
        #toggle {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #f0e6d3;
            background: rgba(30, 25, 40, 0.7);
            padding: 8px 18px;
            border-radius: 16px;
            font-size: 13px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(240, 230, 211, 0.15);
            cursor: pointer;
            transition: all 0.3s;
        }
        #toggle:hover { background: rgba(60, 50, 80, 0.8); }
    </style>
</head>
<body>
    <div id="info">🖱️ Drag to orbit · Scroll to zoom · Click lamp to toggle</div>
    <div id="toggle" onclick="toggleDayNight()">🌙 Night Mode</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script>
        let scene, camera, renderer, controls;
        let clock = new THREE.Clock();
        let isNight = false;
        let lampLight, lampGlow, ambientLight, dirLight;
        let steamParticles = [];
        let floatingParticles = [];
        let candleFlames = [];
        let plantLeaves = [];
        let catTail, catBody;
        let bookPages = [];
        let curtainMeshes = [];
        let raindrops = [];
        let raycaster = new THREE.Raycaster();
        let mouse = new THREE.Vector2();
        let lampClickTarget;

        // Color palette
        const colors = {
            wall: 0xf5e6d3,
            wallAccent: 0xe8d5c0,
            floor: 0xc4956a,
            floorDark: 0xa87d5a,
            wood: 0x8B6914,
            woodDark: 0x654321,
            woodLight: 0xDEB887,
            fabric: 0xc2185b,
            fabricLight: 0xe91e63,
            cushion: 0xff7043,
            cushionAlt: 0x5c6bc0,
            blanket: 0x4db6ac,
            lamp: 0xffd54f,
            lampShade: 0xfff8e1,
            book1: 0x1565c0,
            book2: 0xc62828,
            book3: 0x2e7d32,
            book4: 0x6a1b9a,
            book5: 0xff8f00,
            plant: 0x4caf50,
            plantDark: 0x2e7d32,
            pot: 0xd84315,
            potLight: 0xe64a19,
            rug: 0x7b1fa2,
            rugAccent: 0xce93d8,
            mug: 0xfafafa,
            coffee: 0x3e2723,
            cat: 0xff8a65,
            catDark: 0xbf360c,
            frame: 0x5d4037,
            canvas: 0xfff3e0,
            candle: 0xfff8e1,
            flame: 0xff9800,
            window: 0x87ceeb,
            windowNight: 0x1a237e,
            curtain: 0xe8d5c0,
        };

        init();
        animate();

        function init() {
            // Scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x2d2240);
            scene.fog = new THREE.FogExp2(0x2d2240, 0.015);

            // Camera - Isometric-like perspective
            camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(12, 10, 12);
            camera.lookAt(0, 1, 0);

            // Renderer
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.toneMapping = THREE.ACESFilmicToneMapping;
            renderer.toneMappingExposure = 1.2;
            document.body.appendChild(renderer.domElement);

            // Controls
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            controls.minDistance = 8;
            controls.maxDistance = 25;
            controls.maxPolarAngle = Math.PI / 2.2;
            controls.target.set(0, 1.5, 0);
            controls.update();

            // Lighting
            setupLighting();

            // Build room
            buildRoom();
            buildFloor();
            buildBed();
            buildDesk();
            buildChair();
            buildBookshelf();
            buildWindow();
            buildCurtains();
            buildRug();
            buildLamp();
        .........完整代码请登录后点击上方下载按钮下载查看