3D Isometric Smart Room & RGB Studio Configurator

<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Isometric Smart Room & RGB Studio Configurator - Three.js</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; background: #070a12; overflow: hidden; font-family: 'Inter', sans-serif; }
        #roomCanvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
    </style>
</head>
<body class="h-screen text-white flex flex-col select-none">

    <!-- Top Configurator Bar -->
    <header class="h-14 bg-slate-900/90 backdrop-blur-md border-b border-slate-800 px-4 sm:px-6 flex items-center justify-between z-20">
        <div class="flex items-center gap-3">
            <span class="w-9 h-9 rounded-xl bg-gradient-to-tr from-indigo-500 to-cyan-500 flex items-center justify-center text-lg shadow-lg">🏠</span>
            <div>
                <h1 class="font-bold text-sm sm:text-base text-white">3D Isometric Smart Room & Developer Studio Configurator</h1>
                <p class="text-[10px] text-cyan-400 font-mono">Three.js Isometric Architecture • Ambient RGB & Material Customizer</p>
            </div>
        </div>
        <div class="text-xs font-mono text-emerald-400">
            <span>ISOMETRIC 3D SCENE</span>
        </div>
    </header>

    <div class="flex-1 flex flex-col md:flex-row relative overflow-hidden">
        <!-- 3D Isometric Viewport -->
        <div class="flex-1 relative">
            <canvas id="roomCanvas"></canvas>
            <div class="absolute bottom-4 left-4 bg-slate-900/85 backdrop-blur-md border border-slate-800 px-4 py-2 rounded-2xl text-xs text-slate-300 pointer-events-none">
                🔄 Drag to Rotate 3D Studio Room • Customize RGB Mood & Materials on the right
            </div>
        </div>

        <!-- Room Studio Sidebar -->
        <div class="w-full md:w-80 bg-slate-900/95 border-t md:border-t-0 md:border-l border-slate-800 p-5 space-y-6 z-20">
            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-cyan-400 block mb-2.5">💡 Ambient RGB Lighting Mood</label>
                <div class="grid grid-cols-3 gap-2">
                    <button onclick="setMood(0x22d3ee, 0xa855f7, 0.35)" class="py-2 rounded-xl bg-cyan-500/20 border border-cyan-500/40 text-cyan-300 text-xs font-bold">Cyberpunk</button>
                    <button onclick="setMood(0xf97316, 0xf43f5e, 0.45)" class="py-2 rounded-xl bg-amber-500/20 border border-amber-500/40 text-amber-300 text-xs font-bold">Sunset LoFi</button>
                    <button onclick="setMood(0xf8fafc, 0x38bdf8, 0.95)" class="py-2 rounded-xl bg-slate-800 border border-slate-600 text-white text-xs font-bold">Daylight</button>
                </div>
            </div>

            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-amber-400 block mb-2.5">🪵 Desk & Floor Finish</label>
                <div class="grid grid-cols-3 gap-2">
                    <button onclick="setWood(0x78350f, 0x1e293b)" class="py-2 rounded-xl bg-slate-800 text-amber-300 text-xs font-bold">Walnut</button>
                    <button onclick="setWood(0x0f172a, 0x090d16)" class="py-2 rounded-xl bg-slate-800 text-slate-300 text-xs font-bold">Matte Carbon</button>
                    <button onclick="setWood(0xd97706, 0x334155)" class="py-2 rounded-xl bg-slate-800 text-yellow-300 text-xs font-bold">Nordic Oak</button>
                </div>
            </div>

            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-emerald-400 block mb-2.5">🖥️ Dual Monitor OS Theme</label>
                <div class="grid grid-cols-3 gap-2">
                    <button onclick="setScreen(0x06b6d4)" class="py-2 rounded-xl bg-slate-800 text-cyan-400 text-xs font-bold">Terminal</button>
                    <button onclick="setScreen(0x10b981)" class="py-2 rounded-xl bg-slate-800 text-emerald-400 text-xs font-bold">Matrix</button>
                    <button onclick="setScreen(0xf43f5e)" class="py-2 rounded-xl bg-slate-800 text-rose-400 text-xs font-bold">Synthwave</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('roomCanvas');
        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x070a12);

        const camera = new THREE.PerspectiveCamera(38, 1, 0.1, 100);
        camera.position.set(9.5, 8.2, 9.5);
        camera.lookAt(0, 1.2, 0);

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambientLight);

        const ledLight1 = new THREE.PointLight(0x22d3ee, 2.4, 15);
        ledLight1.position.set(-2.2, 3.2, -2.2);
        scene.add(ledLight1);

        const ledLight2 = new THREE.PointLight(0xa855f7, 2.0, 15);
        ledLight2.position.set(2.2, 2.5, -1.8);
        scene.add(ledLight2);

        const room = new THREE.Group();
        scene.add(room);

        // Floor & Two Isometric Walls
        const floorMat = new THREE.MeshStandardMaterial({ color: 0x1e293b, roughness: 0.6 });
        const wallMat = new THREE.MeshStandardMaterial({ color: 0x0f172a, roughness: 0.7 });

        const floor = new THREE.Mesh(new THREE.BoxGeometry(6.4, 0.3, 6.4), floorMat);
        floor.position.set(0, -0.15, 0);
        room.add(floor);

        const backWall = new THREE.Mesh(new THREE.BoxGeometry(6.4, 4.5, 0.3), wallMat);
        backWall.position.set(0, 2.25, -3.05);
        room.add(backWall);

        const leftWall = new THREE.Mesh(new THREE.BoxGeometry(0.3, 4.5, 6.4), wallMat);
        leftWall.position.set(-3.05, 2.25, 0);
        room.add(leftWall);

        // Neon Wall LED Strip
        const stripMat = new THREE.MeshBasicMaterial({ color: 0x22d3ee });
        const ledStrip = new THREE.Mesh(new THREE.BoxGeometry(5.2, 0.08, 0.08), stripMat);
        ledStrip.position.set(0.2, 3.6, -2.85);
        room.add(ledStrip);

        // Standing Developer Desk
        const deskMat = new THREE.MeshStandardMaterial({ color: 0x78350f, roughness: 0.45 });
        const deskTop = new THREE.Mesh(new THREE.BoxGeometry(3.8, 0.14, 1.7), deskMat);
        deskTop.position.set(0.2, 1.35, -1.9);
        room.add(deskTop);

        // Dual Ultrawide Monitors
        const screenMat = new THREE.MeshBasicMaterial({ color: 0x06b6d4 });
        const mon1 = new THREE.Mesh(new THREE.BoxGeometry(1.45, 0.82, 0.08), screenMat);
        mon1.position.set(-0.55, 2.05, -2.35);
        mon1.rotation.y = 0.15;
        room.add(mon1);

        const mon2 = new THREE.Mesh(new THREE.BoxGeometry(1.45, 0.82, 0.08), screenMat);
        mon2.position.set(0.95, 2.05, -2.35);
        mon2.rotation.y = -0.15;
        room.add(mon2);

        // Custom Watercooled PC Tower on Desk
        const pcCase = new THREE.Mesh(
            new THREE.BoxGeometry(0.55, 1.05, 0.95),
            new THREE.MeshStandardMaterial({ color: 0x090d16, metalness: 0.8, roughness: 0.2 })
        );
        pcCase.position.set(1.7, 1.95, -1.85);
        room.add(pcCase);

        // Acoustic Hexagon Wall Panels
        for (let i = 0; i < 3; i++) {
            const panel = new THREE.Mesh(
                new THREE.CylinderGeometry(0.42, 0.42, 0.08, 6),
                new THREE.MeshStandardMaterial({ color: i % 2 === 0 ? 0x334155 : 0x06b6d4, roughness: 0.4 })
            );
            panel.rotation.x = Math.PI / 2;
            panel.position.set(-0.8 + i * 0.9, 3.05 + (i % 2) * 0.35, -2.85);
            room.add(panel);
        }

        // Cozy Rug
        const rug = new THREE.Mesh(
            new THREE.CylinderGeometry(1.8, 1.8, 0.04, 32),
            new THREE.MeshStandardMaterial({ color: 0x312e81, roughness: 0.9 })
        );
        rug.position.set(0.3, 0.02, 0.7);
        room.add(rug);

        function setMood(c1, c2, amb) {
            ledLight1.color.setHex(c1);
            ledLight2.color.setHex(c2);
            stripMat.color.setHex(c1);
            ambientLight.intensity = amb;
        }

        function setWood(deskHex, floorHex) {
            deskMat.color.setHex(deskHex);
            floorMat.color.setHex(floorHex);
        }

        function setScreen(hex) {
            screenMat.color.setHex(hex);
        }

        let isDragging = false, prevX = 0;
        canvas.addEventListener('pointerdown', (e) => { isDragging = true; prevX = e.clientX; });
        window.addEventListener('pointermove', (e) => {
            if (!isDragging) return;
            room.rotation.y = Math.max(-0.8, Math.min(0.8, room.rotation.y + (e.clientX - prevX) * 0.007));
            prevX = e.clientX;
        });
        window.addEventListener('pointerup', () => isDragging = false);

        function resize() {
            const w = canvas.parentElement.clientWidth;
            const h = canvas.parentElement.clientHeight;
            renderer.setSize(w, h);
            camera.aspect = w / h;
            camera.updateProjectionMatrix();
        }
        window.addEventListener('resize', resize);
        resize();

        function animate() {
            requestAnimationFrame(animate);
            if (!isDragging) {
                room.rotation.y = Math.sin(performance.now() * 0.0005) * 0.22;
            }
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

/* Built-in 3D WebGL & Glassmorphic Shaders included in index.html */

// Complete Three.js 3D scene, camera, lighting, and pointer controls included