Update app.py

app.py

@@ -131,17 +131,6 @@ def snap_to_nearest(value, options):
     return min(options, key=lambda x: abs(x - value))
 
 def build_lighting_prompt(azimuth: float, elevation: float) -> str:
-    """
-    Build a lighting prompt from azimuth and elevation values.
-    
-    Args:
-        azimuth: Horizontal rotation in degrees (0-360)
-        elevation: Vertical angle in degrees (-90 to 90)
-    
-    Returns:
-        Formatted prompt string for the LoRA
-    """
-    # Snap to nearest valid values
     azimuth_snapped = snap_to_nearest(azimuth, list(AZIMUTH_MAP.keys()))
     elevation_snapped = snap_to_nearest(elevation, list(ELEVATION_MAP.keys()))
     
@@ -162,9 +151,6 @@ def infer_lighting_edit(
     height: int = 1024,
     width: int = 1024,
 ):
-    """
-    Edit the lighting of an image using Qwen Image Edit 2511 with multi-angle lighting LoRA.
-    """
     global loaded
     progress = gr.Progress(track_tqdm=True)
     
@@ -198,7 +184,6 @@ def infer_lighting_edit(
     return result, seed, prompt
 
 def update_dimensions_on_upload(image):
-    """Compute recommended dimensions preserving aspect ratio."""
     if image is None:
         return 1024, 1024
     original_width, original_height = image.size
@@ -217,26 +202,30 @@ def update_dimensions_on_upload(image):
 class LightingControl3D(gr.HTML):
     """
     A 3D lighting control component using Three.js.
-    Outputs: { azimuth: number, elevation: number }
-    Accepts imageUrl prop to display user's uploaded image on the plane.
+    Features a Fresnel Spotlight with Barn Doors design.
     """
     def __init__(self, value=None, imageUrl=None, **kwargs):
         if value is None:
             value = {"azimuth": 0, "elevation": 0}
         
         html_template = """
-        <div id="lighting-control-wrapper" style="width: 100%; height: 450px; position: relative; background: linear-gradient(180deg, #0d1117 0%, #161b22 50%, #21262d 100%); border-radius: 12px; overflow: hidden; border: 1px solid #30363d;">
-            <div id="prompt-overlay" style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); padding: 10px 20px; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 13px; color: #58a6ff; white-space: nowrap; z-index: 10; border: 1px solid #30363d; box-shadow: 0 4px 12px rgba(0,0,0,0.4);"></div>
-            <div id="controls-legend" style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.75); padding: 8px 12px; border-radius: 6px; font-family: sans-serif; font-size: 11px; color: #c9d1d9; z-index: 10; border: 1px solid #30363d;">
-                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
-                    <span style="width: 12px; height: 12px; background: #ffd700; border-radius: 50%; display: inline-block;"></span>
-                    <span>Azimuth (Direction)</span>
+        <div id="lighting-control-wrapper" style="width: 100%; height: 500px; position: relative; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 16px; overflow: hidden; border: 2px solid #e94560;">
+            <div id="info-panel" style="position: absolute; top: 12px; left: 12px; background: rgba(15, 52, 96, 0.9); padding: 12px 16px; border-radius: 10px; font-family: 'Segoe UI', sans-serif; font-size: 12px; color: #eee; z-index: 10; border: 1px solid #e94560; backdrop-filter: blur(10px);">
+                <div style="font-weight: bold; margin-bottom: 8px; color: #e94560; font-size: 13px;">🎬 Studio Controls</div>
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
+                    <span style="width: 14px; height: 14px; background: linear-gradient(135deg, #feca57, #ff9f43); border-radius: 3px; display: inline-block; box-shadow: 0 0 8px #feca57;"></span>
+                    <span>Azimuth Ring</span>
                 </div>
-                <div style="display: flex; align-items: center; gap: 6px;">
-                    <span style="width: 12px; height: 12px; background: #4dabf7; border-radius: 50%; display: inline-block;"></span>
-                    <span>Elevation (Height)</span>
+                <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="width: 14px; height: 14px; background: linear-gradient(135deg, #54a0ff, #2e86de); border-radius: 3px; display: inline-block; box-shadow: 0 0 8px #54a0ff;"></span>
+                    <span>Elevation Arc</span>
                 </div>
             </div>
+            <div id="angle-display" style="position: absolute; top: 12px; right: 70px; background: rgba(15, 52, 96, 0.9); padding: 10px 14px; border-radius: 10px; font-family: 'Courier New', monospace; font-size: 12px; color: #54a0ff; z-index: 10; border: 1px solid #54a0ff; backdrop-filter: blur(10px);">
+                <div>Az: <span id="az-value">0°</span></div>
+                <div>El: <span id="el-value">0°</span></div>
+            </div>
+            <div id="prompt-overlay" style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, rgba(233, 69, 96, 0.9), rgba(15, 52, 96, 0.9)); padding: 12px 24px; border-radius: 25px; font-family: 'Segoe UI', sans-serif; font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; z-index: 10; box-shadow: 0 4px 20px rgba(233, 69, 96, 0.4); backdrop-filter: blur(10px);"></div>
         </div>
         """
         
@@ -244,77 +233,97 @@ class LightingControl3D(gr.HTML):
         (() => {
             const wrapper = element.querySelector('#lighting-control-wrapper');
             const promptOverlay = element.querySelector('#prompt-overlay');
+            const azDisplay = element.querySelector('#az-value');
+            const elDisplay = element.querySelector('#el-value');
             
-            // Wait for THREE to load
             const initScene = () => {
                 if (typeof THREE === 'undefined') {
                     setTimeout(initScene, 100);
                     return;
                 }
                 
-                // Scene setup
+                // Scene setup with studio environment
                 const scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x0d1117);
                 
-                // Add fog for depth
-                scene.fog = new THREE.Fog(0x0d1117, 8, 20);
+                // Gradient background using canvas
+                const canvas = document.createElement('canvas');
+                canvas.width = 512;
+                canvas.height = 512;
+                const ctx = canvas.getContext('2d');
+                const gradient = ctx.createRadialGradient(256, 256, 0, 256, 256, 400);
+                gradient.addColorStop(0, '#1a1a2e');
+                gradient.addColorStop(0.5, '#16213e');
+                gradient.addColorStop(1, '#0f3460');
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, 512, 512);
+                const bgTexture = new THREE.CanvasTexture(canvas);
+                scene.background = bgTexture;
+                
+                scene.fog = new THREE.FogExp2(0x0f3460, 0.08);
                 
-                const camera = new THREE.PerspectiveCamera(50, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
-                camera.position.set(4.5, 3, 4.5);
-                camera.lookAt(0, 0.75, 0);
+                const camera = new THREE.PerspectiveCamera(55, wrapper.clientWidth / wrapper.clientHeight, 0.1, 1000);
+                camera.position.set(5, 3.5, 5);
+                camera.lookAt(0, 0.8, 0);
                 
-                const renderer = new THREE.WebGLRenderer({ antialias: true });
+                const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                 renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                 renderer.shadowMap.enabled = true;
                 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
                 renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1.2;
+                renderer.toneMappingExposure = 1.0;
                 wrapper.insertBefore(renderer.domElement, wrapper.firstChild);
                 
-                // Ambient lighting
-                const ambientLight = new THREE.AmbientLight(0x404050, 0.3);
-                scene.add(ambientLight);
+                // Ambient and fill lights
+                scene.add(new THREE.AmbientLight(0x404060, 0.4));
+                const fillLight = new THREE.DirectionalLight(0x6060ff, 0.2);
+                fillLight.position.set(-5, 3, -5);
+                scene.add(fillLight);
                 
-                // Ground plane with better material
-                const groundGeometry = new THREE.PlaneGeometry(12, 12);
-                const groundMaterial = new THREE.MeshStandardMaterial({ 
+                // Studio floor with reflective material
+                const floorGeometry = new THREE.CircleGeometry(6, 64);
+                const floorMaterial = new THREE.MeshStandardMaterial({ 
                     color: 0x1a1a2e,
-                    roughness: 0.8,
-                    metalness: 0.2
+                    roughness: 0.3,
+                    metalness: 0.7,
+                    envMapIntensity: 0.5
                 });
-                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-                ground.rotation.x = -Math.PI / 2;
-                ground.position.y = 0;
-                ground.receiveShadow = true;
-                scene.add(ground);
+                const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+                floor.rotation.x = -Math.PI / 2;
+                floor.receiveShadow = true;
+                scene.add(floor);
+                
+                // Decorative floor rings
+                for (let i = 1; i <= 4; i++) {
+                    const ring = new THREE.Mesh(
+                        new THREE.RingGeometry(i * 1.2 - 0.02, i * 1.2 + 0.02, 64),
+                        new THREE.MeshBasicMaterial({ color: 0xe94560, transparent: true, opacity: 0.3 })
+                    );
+                    ring.rotation.x = -Math.PI / 2;
+                    ring.position.y = 0.005;
+                    scene.add(ring);
+                }
                 
-                // Shadow-only plane
+                // Shadow plane
                 const shadowPlane = new THREE.Mesh(
-                    new THREE.PlaneGeometry(12, 12),
-                    new THREE.ShadowMaterial({ opacity: 0.4 })
+                    new THREE.CircleGeometry(6, 64),
+                    new THREE.ShadowMaterial({ opacity: 0.5 })
                 );
                 shadowPlane.rotation.x = -Math.PI / 2;
-                shadowPlane.position.y = 0.001;
+                shadowPlane.position.y = 0.002;
                 shadowPlane.receiveShadow = true;
                 scene.add(shadowPlane);
                 
-                // Grid with better styling
-                const gridHelper = new THREE.GridHelper(10, 20, 0x30363d, 0x21262d);
-                gridHelper.position.y = 0.002;
-                scene.add(gridHelper);
-                
                 // Constants
-                const CENTER = new THREE.Vector3(0, 0.75, 0);
-                const BASE_DISTANCE = 2.5;
-                const AZIMUTH_RADIUS = 2.4;
-                const ELEVATION_RADIUS = 1.8;
+                const CENTER = new THREE.Vector3(0, 0.8, 0);
+                const BASE_DISTANCE = 2.8;
+                const AZIMUTH_RADIUS = 2.6;
+                const ELEVATION_RADIUS = 2.0;
                 
                 // State
                 let azimuthAngle = props.value?.azimuth || 0;
                 let elevationAngle = props.value?.elevation || 0;
                 
-                // Mappings
                 const azimuthSteps = [0, 45, 90, 135, 180, 225, 270, 315];
                 const elevationSteps = [-90, 0, 90];
                 const azimuthNames = {
@@ -328,98 +337,109 @@ class LightingControl3D(gr.HTML):
                     return steps.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
                 }
                 
-                // Create placeholder texture (camera icon style)
+                // Placeholder texture
                 function createPlaceholderTexture() {
-                    const canvas = document.createElement('canvas');
-                    canvas.width = 256;
-                    canvas.height = 256;
-                    const ctx = canvas.getContext('2d');
+                    const c = document.createElement('canvas');
+                    c.width = 256;
+                    c.height = 256;
+                    const ctx = c.getContext('2d');
                     
-                    // Background gradient
-                    const gradient = ctx.createLinearGradient(0, 0, 256, 256);
-                    gradient.addColorStop(0, '#2d333b');
-                    gradient.addColorStop(1, '#22272e');
-                    ctx.fillStyle = gradient;
+                    const grad = ctx.createLinearGradient(0, 0, 256, 256);
+                    grad.addColorStop(0, '#16213e');
+                    grad.addColorStop(1, '#0f3460');
+                    ctx.fillStyle = grad;
                     ctx.fillRect(0, 0, 256, 256);
                     
                     // Border
-                    ctx.strokeStyle = '#444c56';
-                    ctx.lineWidth = 4;
-                    ctx.strokeRect(10, 10, 236, 236);
-                    
-                    // Camera icon
-                    ctx.fillStyle = '#58a6ff';
-                    ctx.beginPath();
-                    ctx.roundRect(78, 98, 100, 70, 8);
-                    ctx.fill();
-                    
-                    // Lens
-                    ctx.fillStyle = '#2d333b';
-                    ctx.beginPath();
-                    ctx.arc(128, 133, 25, 0, Math.PI * 2);
-                    ctx.fill();
-                    
-                    ctx.fillStyle = '#58a6ff';
-                    ctx.beginPath();
-                    ctx.arc(128, 133, 18, 0, Math.PI * 2);
-                    ctx.fill();
+                    ctx.strokeStyle = '#e94560';
+                    ctx.lineWidth = 6;
+                    ctx.strokeRect(8, 8, 240, 240);
                     
-                    // Flash
-                    ctx.fillStyle = '#58a6ff';
-                    ctx.beginPath();
-                    ctx.roundRect(138, 88, 30, 15, 3);
-                    ctx.fill();
-                    
-                    // Text
-                    ctx.fillStyle = '#8b949e';
-                    ctx.font = '16px sans-serif';
+                    // Icon
+                    ctx.fillStyle = '#e94560';
+                    ctx.font = 'bold 60px Arial';
                     ctx.textAlign = 'center';
-                    ctx.fillText('Upload Image', 128, 200);
+                    ctx.fillText('📷', 128, 130);
+                    
+                    ctx.fillStyle = '#aaa';
+                    ctx.font = '14px Arial';
+                    ctx.fillText('Drop Image Here', 128, 180);
                     
-                    return new THREE.CanvasTexture(canvas);
+                    return new THREE.CanvasTexture(c);
                 }
                 
-                // Target image plane
+                // Target image with frame
                 let currentTexture = createPlaceholderTexture();
                 const planeMaterial = new THREE.MeshStandardMaterial({ 
                     map: currentTexture, 
                     side: THREE.DoubleSide, 
-                    roughness: 0.4, 
+                    roughness: 0.3, 
                     metalness: 0.1 
                 });
-                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
-                targetPlane.position.copy(CENTER);
+                
+                // Image stand/easel
+                const standGroup = new THREE.Group();
+                
+                let targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.4, 1.4), planeMaterial);
+                targetPlane.position.set(0, 0, 0.02);
                 targetPlane.receiveShadow = true;
                 targetPlane.castShadow = true;
-                scene.add(targetPlane);
+                standGroup.add(targetPlane);
                 
-                // Frame around the image
-                const frameGeometry = new THREE.BoxGeometry(1.3, 1.3, 0.05);
+                // Ornate frame
+                const frameShape = new THREE.Shape();
+                const fw = 0.78, fh = 0.78, ft = 0.08;
+                frameShape.moveTo(-fw, -fh);
+                frameShape.lineTo(fw, -fh);
+                frameShape.lineTo(fw, fh);
+                frameShape.lineTo(-fw, fh);
+                frameShape.lineTo(-fw, -fh);
+                
+                const hole = new THREE.Path();
+                hole.moveTo(-fw + ft, -fh + ft);
+                hole.lineTo(fw - ft, -fh + ft);
+                hole.lineTo(fw - ft, fh - ft);
+                hole.lineTo(-fw + ft, fh - ft);
+                hole.lineTo(-fw + ft, -fh + ft);
+                frameShape.holes.push(hole);
+                
+                const frameGeometry = new THREE.ExtrudeGeometry(frameShape, { depth: 0.06, bevelEnabled: true, bevelThickness: 0.01, bevelSize: 0.01 });
                 const frameMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0x30363d, 
-                    roughness: 0.5, 
-                    metalness: 0.3 
+                    color: 0xc9a227, 
+                    roughness: 0.3, 
+                    metalness: 0.8 
                 });
                 const frame = new THREE.Mesh(frameGeometry, frameMaterial);
-                frame.position.set(CENTER.x, CENTER.y, -0.03);
-                scene.add(frame);
+                frame.rotation.x = 0;
+                frame.position.z = -0.03;
+                standGroup.add(frame);
+                
+                // Easel legs
+                const legMat = new THREE.MeshStandardMaterial({ color: 0x4a3728, roughness: 0.7 });
+                const legGeo = new THREE.CylinderGeometry(0.03, 0.04, 1.6, 8);
+                
+                const leg1 = new THREE.Mesh(legGeo, legMat);
+                leg1.position.set(-0.4, -0.8, -0.15);
+                leg1.rotation.x = 0.15;
+                standGroup.add(leg1);
+                
+                const leg2 = new THREE.Mesh(legGeo, legMat);
+                leg2.position.set(0.4, -0.8, -0.15);
+                leg2.rotation.x = 0.15;
+                standGroup.add(leg2);
+                
+                const leg3 = new THREE.Mesh(legGeo, legMat);
+                leg3.position.set(0, -0.8, 0.25);
+                leg3.rotation.x = -0.2;
+                standGroup.add(leg3);
+                
+                standGroup.position.copy(CENTER);
+                scene.add(standGroup);
                 
-                // Function to update texture from image URL
                 function updateTextureFromUrl(url) {
                     if (!url) {
                         planeMaterial.map = createPlaceholderTexture();
                         planeMaterial.needsUpdate = true;
-                        scene.remove(targetPlane);
-                        scene.remove(frame);
-                        targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 1.2), planeMaterial);
-                        targetPlane.position.copy(CENTER);
-                        targetPlane.receiveShadow = true;
-                        targetPlane.castShadow = true;
-                        scene.add(targetPlane);
-                        
-                        frame.geometry = new THREE.BoxGeometry(1.3, 1.3, 0.05);
-                        frame.position.set(CENTER.x, CENTER.y, -0.03);
-                        scene.add(frame);
                         return;
                     }
                     
@@ -434,153 +454,156 @@ class LightingControl3D(gr.HTML):
                         const img = texture.image;
                         if (img && img.width && img.height) {
                             const aspect = img.width / img.height;
-                            const maxSize = 1.5;
-                            let planeWidth, planeHeight;
-                            if (aspect > 1) {
-                                planeWidth = maxSize;
-                                planeHeight = maxSize / aspect;
-                            } else {
-                                planeHeight = maxSize;
-                                planeWidth = maxSize * aspect;
-                            }
-                            scene.remove(targetPlane);
-                            scene.remove(frame);
+                            const maxSize = 1.4;
+                            let pw, ph;
+                            if (aspect > 1) { pw = maxSize; ph = maxSize / aspect; }
+                            else { ph = maxSize; pw = maxSize * aspect; }
                             
-                            targetPlane = new THREE.Mesh(
-                                new THREE.PlaneGeometry(planeWidth, planeHeight),
-                                planeMaterial
-                            );
-                            targetPlane.position.copy(CENTER);
+                            standGroup.remove(targetPlane);
+                            targetPlane = new THREE.Mesh(new THREE.PlaneGeometry(pw, ph), planeMaterial);
+                            targetPlane.position.set(0, 0, 0.02);
                             targetPlane.receiveShadow = true;
                             targetPlane.castShadow = true;
-                            scene.add(targetPlane);
-                            
-                            frame.geometry = new THREE.BoxGeometry(planeWidth + 0.1, planeHeight + 0.1, 0.05);
-                            frame.position.set(CENTER.x, CENTER.y, -0.03);
-                            scene.add(frame);
+                            standGroup.add(targetPlane);
                         }
-                    }, undefined, (err) => {
-                        console.error('Failed to load texture:', err);
                     });
                 }
                 
-                if (props.imageUrl) {
-                    updateTextureFromUrl(props.imageUrl);
-                }
+                if (props.imageUrl) updateTextureFromUrl(props.imageUrl);
                 
                 // =============================================
-                // SOFTBOX LIGHT - Red box with white diffuser
+                // FRESNEL SPOTLIGHT WITH BARN DOORS
                 // =============================================
                 const lightGroup = new THREE.Group();
                 
-                // Main softbox frame (red)
-                const softboxDepth = 0.4;
-                const softboxWidth = 0.7;
-                const softboxHeight = 0.7;
+                // Main housing (cylindrical body)
+                const housingMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x2d2d2d, 
+                    roughness: 0.4, 
+                    metalness: 0.8 
+                });
                 
-                // Back panel (red)
-                const backPanel = new THREE.Mesh(
-                    new THREE.BoxGeometry(softboxWidth, softboxHeight, 0.05),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xcc2222, 
-                        roughness: 0.7, 
-                        metalness: 0.3 
-                    })
+                // Body
+                const body = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.25, 0.3, 0.5, 32),
+                    housingMat
                 );
-                backPanel.position.z = softboxDepth / 2;
-                lightGroup.add(backPanel);
+                body.rotation.x = Math.PI / 2;
+                lightGroup.add(body);
                 
-                // Side panels (red, tapered)
-                const sideGeometry = new THREE.BoxGeometry(0.04, softboxHeight, softboxDepth);
-                const sideMaterial = new THREE.MeshStandardMaterial({ 
-                    color: 0xaa1111, 
-                    roughness: 0.6, 
-                    metalness: 0.2 
+                // Front ring (chrome)
+                const ringMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xcccccc, 
+                    roughness: 0.2, 
+                    metalness: 0.9 
                 });
+                const frontRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(0.28, 0.025, 16, 32),
+                    ringMat
+                );
+                frontRing.position.z = -0.25;
+                lightGroup.add(frontRing);
                 
-                const leftSide = new THREE.Mesh(sideGeometry, sideMaterial);
-                leftSide.position.set(-softboxWidth/2 + 0.02, 0, 0);
-                lightGroup.add(leftSide);
+                // Fresnel lens (glass-like)
+                const lensMat = new THREE.MeshStandardMaterial({
+                    color: 0xffffff,
+                    emissive: 0xffffee,
+                    emissiveIntensity: 3.0,
+                    roughness: 0.1,
+                    metalness: 0,
+                    transparent: true,
+                    opacity: 0.9
+                });
+                const lens = new THREE.Mesh(
+                    new THREE.CircleGeometry(0.22, 32),
+                    lensMat
+                );
+                lens.position.z = -0.26;
+                lightGroup.add(lens);
                 
-                const rightSide = new THREE.Mesh(sideGeometry, sideMaterial);
-                rightSide.position.set(softboxWidth/2 - 0.02, 0, 0);
-                lightGroup.add(rightSide);
+                // Fresnel rings on lens
+                for (let i = 1; i <= 4; i++) {
+                    const fresnelRing = new THREE.Mesh(
+                        new THREE.RingGeometry(i * 0.045, i * 0.045 + 0.008, 32),
+                        new THREE.MeshBasicMaterial({ color: 0xffffcc, transparent: true, opacity: 0.5 })
+                    );
+                    fresnelRing.position.z = -0.261;
+                    lightGroup.add(fresnelRing);
+                }
                 
-                // Top and bottom panels (red)
-                const tbGeometry = new THREE.BoxGeometry(softboxWidth, 0.04, softboxDepth);
+                // Barn doors (4 flaps)
+                const barnDoorMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x1a1a1a, 
+                    roughness: 0.6, 
+                    metalness: 0.5,
+                    side: THREE.DoubleSide
+                });
                 
-                const topPanel = new THREE.Mesh(tbGeometry, sideMaterial);
-                topPanel.position.set(0, softboxHeight/2 - 0.02, 0);
-                lightGroup.add(topPanel);
+                const doorWidth = 0.35, doorHeight = 0.25;
+                const doorPositions = [
+                    { pos: [0, 0.32, -0.15], rot: [-0.4, 0, 0] },  // Top
+                    { pos: [0, -0.32, -0.15], rot: [0.4, 0, 0] },  // Bottom
+                    { pos: [0.32, 0, -0.15], rot: [0, 0, 0.4] },   // Right
+                    { pos: [-0.32, 0, -0.15], rot: [0, 0, -0.4] }  // Left
+                ];
                 
-                const bottomPanel = new THREE.Mesh(tbGeometry, sideMaterial);
-                bottomPanel.position.set(0, -softboxHeight/2 + 0.02, 0);
-                lightGroup.add(bottomPanel);
+                doorPositions.forEach((d, i) => {
+                    const isVertical = i < 2;
+                    const door = new THREE.Mesh(
+                        new THREE.BoxGeometry(isVertical ? doorWidth : 0.02, isVertical ? 0.02 : doorHeight, 0.2),
+                        barnDoorMat
+                    );
+                    door.position.set(...d.pos);
+                    door.rotation.set(...d.rot);
+                    door.castShadow = true;
+                    lightGroup.add(door);
+                });
                 
-                // White diffuser front (emissive white)
-                const diffuserMaterial = new THREE.MeshStandardMaterial({
-                    color: 0xffffff,
-                    emissive: 0xffffff,
-                    emissiveIntensity: 2.0,
-                    roughness: 0.2,
-                    metalness: 0,
-                    transparent: true,
-                    opacity: 0.95
+                // Yoke mount
+                const yokeMat = new THREE.MeshStandardMaterial({ 
+                    color: 0x444444, 
+                    roughness: 0.5, 
+                    metalness: 0.7 
                 });
                 
-                const diffuser = new THREE.Mesh(
-                    new THREE.PlaneGeometry(softboxWidth - 0.08, softboxHeight - 0.08),
-                    diffuserMaterial
+                const yokeArm1 = new THREE.Mesh(
+                    new THREE.BoxGeometry(0.04, 0.5, 0.04),
+                    yokeMat
                 );
-                diffuser.position.z = -softboxDepth / 2 + 0.02;
-                lightGroup.add(diffuser);
-                
-                // Inner glow effect
-                const innerGlow = new THREE.Mesh(
-                    new THREE.PlaneGeometry(softboxWidth - 0.15, softboxHeight - 0.15),
-                    new THREE.MeshBasicMaterial({
-                        color: 0xffffff,
-                        transparent: true,
-                        opacity: 0.8
-                    })
+                yokeArm1.position.set(-0.35, 0, 0.1);
+                lightGroup.add(yokeArm1);
+                
+                const yokeArm2 = new THREE.Mesh(
+                    new THREE.BoxGeometry(0.04, 0.5, 0.04),
+                    yokeMat
                 );
-                innerGlow.position.z = -softboxDepth / 2 + 0.01;
-                lightGroup.add(innerGlow);
+                yokeArm2.position.set(0.35, 0, 0.1);
+                lightGroup.add(yokeArm2);
                 
-                // Mounting bracket
-                const bracket = new THREE.Mesh(
-                    new THREE.CylinderGeometry(0.03, 0.03, 0.15, 8),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x333333, 
-                        roughness: 0.5, 
-                        metalness: 0.8 
-                    })
+                const yokeTop = new THREE.Mesh(
+                    new THREE.BoxGeometry(0.74, 0.04, 0.04),
+                    yokeMat
                 );
-                bracket.rotation.x = Math.PI / 2;
-                bracket.position.z = softboxDepth / 2 + 0.075;
-                lightGroup.add(bracket);
+                yokeTop.position.set(0, 0.25, 0.1);
+                lightGroup.add(yokeTop);
                 
-                // Ball joint
-                const ballJoint = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.05, 16, 16),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0x222222, 
-                        roughness: 0.4, 
-                        metalness: 0.9 
-                    })
+                // Hanging mount
+                const mountPole = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.02, 0.02, 0.3, 8),
+                    yokeMat
                 );
-                ballJoint.position.z = softboxDepth / 2 + 0.15;
-                lightGroup.add(ballJoint);
+                mountPole.position.set(0, 0.4, 0.1);
+                lightGroup.add(mountPole);
                 
-                // SpotLight for actual lighting
-                const spotLight = new THREE.SpotLight(0xffffff, 15, 12, Math.PI / 4, 0.5, 1);
-                spotLight.position.set(0, 0, -softboxDepth / 2);
+                // SpotLight
+                const spotLight = new THREE.SpotLight(0xffffee, 20, 15, Math.PI / 5, 0.3, 1);
+                spotLight.position.set(0, 0, -0.3);
                 spotLight.castShadow = true;
-                spotLight.shadow.mapSize.width = 1024;
-                spotLight.shadow.mapSize.height = 1024;
+                spotLight.shadow.mapSize.width = 2048;
+                spotLight.shadow.mapSize.height = 2048;
                 spotLight.shadow.camera.near = 0.5;
-                spotLight.shadow.camera.far = 15;
-                spotLight.shadow.bias = -0.002;
+                spotLight.shadow.camera.far = 20;
+                spotLight.shadow.bias = -0.001;
                 lightGroup.add(spotLight);
                 
                 const lightTarget = new THREE.Object3D();
@@ -588,163 +611,241 @@ class LightingControl3D(gr.HTML):
                 scene.add(lightTarget);
                 spotLight.target = lightTarget;
                 
-                // Point light for softer fill
-                const pointLight = new THREE.PointLight(0xffffff, 3, 8);
-                pointLight.position.set(0, 0, -softboxDepth / 2 - 0.1);
-                lightGroup.add(pointLight);
-                
                 scene.add(lightGroup);
                 
                 // =============================================
-                // YELLOW: Azimuth ring and handle
+                // AZIMUTH CONTROL - Golden compass ring
                 // =============================================
+                const azimuthGroup = new THREE.Group();
+                
+                // Main ring with glow
+                const azRingMat = new THREE.MeshStandardMaterial({ 
+                    color: 0xfeca57, 
+                    emissive: 0xff9f43, 
+                    emissiveIntensity: 0.5,
+                    roughness: 0.2,
+                    metalness: 0.8
+                });
+                
                 const azimuthRing = new THREE.Mesh(
-                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.035, 16, 64),
-                    new THREE.MeshStandardMaterial({ 
-                        color: 0xffd700, 
-                        emissive: 0xffd700, 
-                        emissiveIntensity: 0.4,
-                        roughness: 0.3,
-                        metalness: 0.6
-                    })
+                    new THREE.TorusGeometry(AZIMUTH_RADIUS, 0.045, 24, 128),
+                    azRingMat
                 );
-                azimuthRing.rotation.x = Math.PI / 2;
-                azimuthRing.position.y = 0.05;
-                scene.add(azimuthRing);
+                azimuthGroup.add(azimuthRing);
                 
-                // Azimuth direction markers
-                azimuthSteps.forEach(angle => {
+                // Direction markers with labels
+                azimuthSteps.forEach((angle, idx) => {
                     const rad = THREE.MathUtils.degToRad(angle);
+                    const x = AZIMUTH_RADIUS * Math.sin(rad);
+                    const z = AZIMUTH_RADIUS * Math.cos(rad);
+                    
+                    // Diamond marker
                     const marker = new THREE.Mesh(
-                        new THREE.SphereGeometry(0.06, 8, 8),
+                        new THREE.OctahedronGeometry(0.08, 0),
                         new THREE.MeshStandardMaterial({ 
-                            color: 0xffd700, 
-                            emissive: 0xffd700, 
-                            emissiveIntensity: 0.2 
+                            color: 0xfeca57, 
+                            emissive: 0xff9f43, 
+                            emissiveIntensity: 0.3,
+                            roughness: 0.2,
+                            metalness: 0.8
                         })
                     );
-                    marker.position.set(
-                        AZIMUTH_RADIUS * Math.sin(rad),
-                        0.05,
-                        AZIMUTH_RADIUS * Math.cos(rad)
-                    );
-                    scene.add(marker);
+                    marker.position.set(x, 0, z);
+                    marker.rotation.y = -rad;
+                    azimuthGroup.add(marker);
+                    
+                    // Tick lines pointing to center
+                    const tickGeo = new THREE.BufferGeometry().setFromPoints([
+                        new THREE.Vector3(x * 0.92, 0, z * 0.92),
+                        new THREE.Vector3(x * 0.85, 0, z * 0.85)
+                    ]);
+                    const tick = new THREE.Line(tickGeo, new THREE.LineBasicMaterial({ color: 0xfeca57, transparent: true, opacity: 0.6 }));
+                    azimuthGroup.add(tick);
                 });
                 
-                const azimuthHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.16, 24, 24),
+                azimuthGroup.rotation.x = Math.PI / 2;
+                azimuthGroup.position.y = 0.08;
+                scene.add(azimuthGroup);
+                
+                // Azimuth handle - Arrow/pointer shape
+                const azHandleGroup = new THREE.Group();
+                
+                const azPointer = new THREE.Mesh(
+                    new THREE.ConeGeometry(0.12, 0.25, 4),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0xffd700, 
-                        emissive: 0xffd700, 
-                        emissiveIntensity: 0.6,
-                        roughness: 0.2,
-                        metalness: 0.7
+                        color: 0xfeca57, 
+                        emissive: 0xff9f43, 
+                        emissiveIntensity: 0.7,
+                        roughness: 0.15,
+                        metalness: 0.9
+                    })
+                );
+                azPointer.rotation.x = Math.PI / 2;
+                azPointer.rotation.z = Math.PI / 4;
+                azHandleGroup.add(azPointer);
+                
+                const azSphere = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.1, 16, 16),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0xffffff, 
+                        emissive: 0xfeca57, 
+                        emissiveIntensity: 0.5,
+                        roughness: 0.1,
+                        metalness: 0.9
                     })
                 );
-                azimuthHandle.userData.type = 'azimuth';
-                scene.add(azimuthHandle);
+                azSphere.position.z = 0.15;
+                azHandleGroup.add(azSphere);
+                
+                azHandleGroup.userData.type = 'azimuth';
+                scene.add(azHandleGroup);
                 
                 // =============================================
-                // BLUE: Elevation arc and handle
+                // ELEVATION CONTROL - Blue arc with slider
                 // =============================================
+                const elevationGroup = new THREE.Group();
+                
+                // Main arc
                 const arcPoints = [];
-                for (let i = 0; i <= 48; i++) {
-                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 48));
+                for (let i = 0; i <= 64; i++) {
+                    const angle = THREE.MathUtils.degToRad(-90 + (180 * i / 64));
                     arcPoints.push(new THREE.Vector3(
-                        -0.8, 
-                        ELEVATION_RADIUS * Math.sin(angle) + CENTER.y, 
+                        0, 
+                        ELEVATION_RADIUS * Math.sin(angle), 
                         ELEVATION_RADIUS * Math.cos(angle)
                     ));
                 }
                 const arcCurve = new THREE.CatmullRomCurve3(arcPoints);
                 const elevationArc = new THREE.Mesh(
-                    new THREE.TubeGeometry(arcCurve, 48, 0.035, 12, false),
+                    new THREE.TubeGeometry(arcCurve, 64, 0.04, 16, false),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0x4dabf7, 
-                        emissive: 0x4dabf7, 
-                        emissiveIntensity: 0.4,
-                        roughness: 0.3,
-                        metalness: 0.6
+                        color: 0x54a0ff, 
+                        emissive: 0x2e86de, 
+                        emissiveIntensity: 0.5,
+                        roughness: 0.2,
+                        metalness: 0.8
                     })
                 );
-                scene.add(elevationArc);
+                elevationGroup.add(elevationArc);
                 
-                // Elevation markers
+                // Tick marks and labels
                 elevationSteps.forEach(angle => {
                     const rad = THREE.MathUtils.degToRad(angle);
+                    const y = ELEVATION_RADIUS * Math.sin(rad);
+                    const z = ELEVATION_RADIUS * Math.cos(rad);
+                    
+                    // Cube marker
                     const marker = new THREE.Mesh(
-                        new THREE.SphereGeometry(0.06, 8, 8),
+                        new THREE.BoxGeometry(0.12, 0.12, 0.12),
                         new THREE.MeshStandardMaterial({ 
-                            color: 0x4dabf7, 
-                            emissive: 0x4dabf7, 
-                            emissiveIntensity: 0.2 
+                            color: 0x54a0ff, 
+                            emissive: 0x2e86de, 
+                            emissiveIntensity: 0.4,
+                            roughness: 0.2,
+                            metalness: 0.8
                         })
                     );
-                    marker.position.set(
-                        -0.8,
-                        ELEVATION_RADIUS * Math.sin(rad) + CENTER.y,
-                        ELEVATION_RADIUS * Math.cos(rad)
-                    );
-                    scene.add(marker);
+                    marker.position.set(0, y, z);
+                    marker.rotation.x = rad;
+                    marker.rotation.y = Math.PI / 4;
+                    elevationGroup.add(marker);
                 });
                 
-                const elevationHandle = new THREE.Mesh(
-                    new THREE.SphereGeometry(0.16, 24, 24),
+                // Support pole
+                const supportPole = new THREE.Mesh(
+                    new THREE.CylinderGeometry(0.025, 0.025, ELEVATION_RADIUS * 2.2, 8),
+                    new THREE.MeshStandardMaterial({ color: 0x333344, roughness: 0.5, metalness: 0.6 })
+                );
+                supportPole.position.set(0, CENTER.y, 0);
+                elevationGroup.add(supportPole);
+                
+                elevationGroup.position.set(-1.0, CENTER.y, 0);
+                scene.add(elevationGroup);
+                
+                // Elevation handle - Spherical slider
+                const elHandleGroup = new THREE.Group();
+                
+                const elSphere = new THREE.Mesh(
+                    new THREE.SphereGeometry(0.14, 24, 24),
                     new THREE.MeshStandardMaterial({ 
-                        color: 0x4dabf7, 
-                        emissive: 0x4dabf7, 
-                        emissiveIntensity: 0.6,
-                        roughness: 0.2,
-                        metalness: 0.7
+                        color: 0x54a0ff, 
+                        emissive: 0x2e86de, 
+                        emissiveIntensity: 0.7,
+                        roughness: 0.15,
+                        metalness: 0.9
+                    })
+                );
+                elHandleGroup.add(elSphere);
+                
+                const elRing = new THREE.Mesh(
+                    new THREE.TorusGeometry(0.18, 0.025, 16, 32),
+                    new THREE.MeshStandardMaterial({ 
+                        color: 0xffffff, 
+                        emissive: 0x54a0ff, 
+                        emissiveIntensity: 0.4,
+                        roughness: 0.1,
+                        metalness: 0.9
                     })
                 );
-                elevationHandle.userData.type = 'elevation';
-                scene.add(elevationHandle);
+                elRing.rotation.x = Math.PI / 2;
+                elHandleGroup.add(elRing);
+                
+                elHandleGroup.userData.type = 'elevation';
+                scene.add(elHandleGroup);
                 
                 // =============================================
-                // REFRESH BUTTON (styled button, not symbol)
+                // RESET BUTTON - Styled button
                 // =============================================
-                const refreshBtn = document.createElement('button');
-                refreshBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg><span style="margin-left: 6px;">Reset</span>';
-                refreshBtn.style.cssText = `
+                const resetBtn = document.createElement('button');
+                resetBtn.innerHTML = `
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+                        <path d="M21 3v5h-5"/>
+                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+                        <path d="M3 21v-5h5"/>
+                    </svg>
+                    <span>Reset Position</span>
+                `;
+                resetBtn.style.cssText = `
                     position: absolute;
-                    top: 10px;
-                    right: 10px;
-                    background: linear-gradient(135deg, #238636 0%, #2ea043 100%);
+                    top: 12px;
+                    right: 12px;
+                    background: linear-gradient(135deg, #e94560 0%, #c62a47 100%);
                     color: white;
                     border: none;
-                    padding: 8px 14px;
-                    border-radius: 6px;
+                    padding: 10px 16px;
+                    border-radius: 8px;
                     cursor: pointer;
                     z-index: 10;
                     font-size: 13px;
-                    font-weight: 500;
-                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                    font-weight: 600;
+                    font-family: 'Segoe UI', sans-serif;
                     display: flex;
                     align-items: center;
-                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-                    transition: all 0.2s ease;
+                    gap: 8px;
+                    box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
+                    transition: all 0.25s ease;
+                    border: 1px solid rgba(255,255,255,0.1);
                 `;
-                refreshBtn.onmouseenter = () => {
-                    refreshBtn.style.background = 'linear-gradient(135deg, #2ea043 0%, #3fb950 100%)';
-                    refreshBtn.style.transform = 'translateY(-1px)';
-                    refreshBtn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.4)';
+                resetBtn.onmouseenter = () => {
+                    resetBtn.style.background = 'linear-gradient(135deg, #ff6b6b 0%, #e94560 100%)';
+                    resetBtn.style.transform = 'translateY(-2px) scale(1.02)';
+                    resetBtn.style.boxShadow = '0 6px 20px rgba(233, 69, 96, 0.5)';
                 };
-                refreshBtn.onmouseleave = () => {
-                    refreshBtn.style.background = 'linear-gradient(135deg, #238636 0%, #2ea043 100%)';
-                    refreshBtn.style.transform = 'translateY(0)';
-                    refreshBtn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.3)';
+                resetBtn.onmouseleave = () => {
+                    resetBtn.style.background = 'linear-gradient(135deg, #e94560 0%, #c62a47 100%)';
+                    resetBtn.style.transform = 'translateY(0) scale(1)';
+                    resetBtn.style.boxShadow = '0 4px 15px rgba(233, 69, 96, 0.4)';
                 };
-                wrapper.appendChild(refreshBtn);
+                wrapper.appendChild(resetBtn);
                 
-                refreshBtn.addEventListener('click', () => {
-                    // Animate reset
+                resetBtn.addEventListener('click', () => {
                     const startAz = azimuthAngle;
                     const startEl = elevationAngle;
                     const startTime = Date.now();
                     
                     function animateReset() {
-                        const t = Math.min((Date.now() - startTime) / 400, 1);
+                        const t = Math.min((Date.now() - startTime) / 500, 1);
                         const ease = 1 - Math.pow(1 - t, 4);
                         
                         let azDiff = 0 - startAz;
@@ -782,21 +883,29 @@ class LightingControl3D(gr.HTML):
                     lightGroup.position.set(lightX, lightY, lightZ);
                     lightGroup.lookAt(CENTER);
                     
-                    azimuthHandle.position.set(
+                    // Update azimuth handle
+                    azHandleGroup.position.set(
                         AZIMUTH_RADIUS * Math.sin(azRad), 
-                        0.05, 
+                        0.08, 
                         AZIMUTH_RADIUS * Math.cos(azRad)
                     );
-                    elevationHandle.position.set(
-                        -0.8, 
+                    azHandleGroup.rotation.y = -azRad;
+                    
+                    // Update elevation handle
+                    elHandleGroup.position.set(
+                        -1.0, 
                         ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, 
                         ELEVATION_RADIUS * Math.cos(elRad)
                     );
                     
-                    // Update prompt
+                    // Update displays
                     const azSnap = snapToNearest(azimuthAngle, azimuthSteps);
                     const elSnap = snapToNearest(elevationAngle, elevationSteps);
-                    let prompt = '💡 Light source from';
+                    
+                    azDisplay.textContent = Math.round(azimuthAngle) + '°';
+                    elDisplay.textContent = Math.round(elevationAngle) + '°';
+                    
+                    let prompt = '🎬 Light from';
                     if (elSnap !== 0) {
                         prompt += ' ' + elevationNames[String(elSnap)];
                     } else {
@@ -818,25 +927,39 @@ class LightingControl3D(gr.HTML):
                 const mouse = new THREE.Vector2();
                 let isDragging = false;
                 let dragTarget = null;
-                let dragStartMouse = new THREE.Vector2();
                 const intersection = new THREE.Vector3();
                 
                 const canvas = renderer.domElement;
                 
-                canvas.addEventListener('mousedown', (e) => {
+                function getIntersectedHandle(e) {
                     const rect = canvas.getBoundingClientRect();
                     mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
                     mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
                     
                     raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
+                    const intersects = raycaster.intersectObjects([azHandleGroup, elHandleGroup], true);
                     
                     if (intersects.length > 0) {
+                        let obj = intersects[0].object;
+                        while (obj.parent && !obj.userData.type) obj = obj.parent;
+                        return obj;
+                    }
+                    return null;
+                }
+                
+                canvas.addEventListener('mousedown', (e) => {
+                    const handle = getIntersectedHandle(e);
+                    if (handle && handle.userData.type) {
                         isDragging = true;
-                        dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.2;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget = handle;
+                        
+                        // Highlight effect
+                        dragTarget.children.forEach(child => {
+                            if (child.material) {
+                                child.material.emissiveIntensity = 1.5;
+                            }
+                        });
+                        dragTarget.scale.setScalar(1.25);
                         canvas.style.cursor = 'grabbing';
                     }
                 });
@@ -850,13 +973,13 @@ class LightingControl3D(gr.HTML):
                         raycaster.setFromCamera(mouse, camera);
                         
                         if (dragTarget.userData.type === 'azimuth') {
-                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.05);
+                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.08);
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
                                 azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
                                 if (azimuthAngle < 0) azimuthAngle += 360;
                             }
                         } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0.8);
+                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 1.0);
                             if (raycaster.ray.intersectPlane(plane, intersection)) {
                                 const relY = intersection.y - CENTER.y;
                                 const relZ = intersection.z;
@@ -869,15 +992,20 @@ class LightingControl3D(gr.HTML):
                         }
                         updatePositions();
                     } else {
-                        raycaster.setFromCamera(mouse, camera);
-                        const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                        [azimuthHandle, elevationHandle].forEach(h => {
-                            h.material.emissiveIntensity = 0.6;
+                        // Hover effects
+                        const handle = getIntersectedHandle(e);
+                        [azHandleGroup, elHandleGroup].forEach(h => {
+                            h.children.forEach(child => {
+                                if (child.material) child.material.emissiveIntensity = 0.5;
+                            });
                             h.scale.setScalar(1);
                         });
-                        if (intersects.length > 0) {
-                            intersects[0].object.material.emissiveIntensity = 0.9;
-                            intersects[0].object.scale.setScalar(1.15);
+                        
+                        if (handle && handle.userData.type) {
+                            handle.children.forEach(child => {
+                                if (child.material) child.material.emissiveIntensity = 0.9;
+                            });
+                            handle.scale.setScalar(1.1);
                             canvas.style.cursor = 'grab';
                         } else {
                             canvas.style.cursor = 'default';
@@ -887,10 +1015,12 @@ class LightingControl3D(gr.HTML):
                 
                 const onMouseUp = () => {
                     if (dragTarget) {
-                        dragTarget.material.emissiveIntensity = 0.6;
+                        dragTarget.children.forEach(child => {
+                            if (child.material) child.material.emissiveIntensity = 0.5;
+                        });
                         dragTarget.scale.setScalar(1);
                         
-                        // Snap and animate
+                        // Snap animation
                         const targetAz = snapToNearest(azimuthAngle, azimuthSteps);
                         const targetEl = snapToNearest(elevationAngle, elevationSteps);
                         
@@ -898,7 +1028,7 @@ class LightingControl3D(gr.HTML):
                         const startTime = Date.now();
                         
                         function animateSnap() {
-                            const t = Math.min((Date.now() - startTime) / 200, 1);
+                            const t = Math.min((Date.now() - startTime) / 250, 1);
                             const ease = 1 - Math.pow(1 - t, 3);
                             
                             let azDiff = targetAz - startAz;
@@ -924,74 +1054,73 @@ class LightingControl3D(gr.HTML):
                 canvas.addEventListener('mouseup', onMouseUp);
                 canvas.addEventListener('mouseleave', onMouseUp);
                 
-                // Touch support for mobile
+                // Touch support
                 canvas.addEventListener('touchstart', (e) => {
                     e.preventDefault();
                     const touch = e.touches[0];
-                    const rect = canvas.getBoundingClientRect();
-                    mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
-                    mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
-                    
-                    raycaster.setFromCamera(mouse, camera);
-                    const intersects = raycaster.intersectObjects([azimuthHandle, elevationHandle]);
-                    
-                    if (intersects.length > 0) {
+                    const fakeEvent = { clientX: touch.clientX, clientY: touch.clientY };
+                    const handle = getIntersectedHandle(fakeEvent);
+                    if (handle && handle.userData.type) {
                         isDragging = true;
-                        dragTarget = intersects[0].object;
-                        dragTarget.material.emissiveIntensity = 1.2;
-                        dragTarget.scale.setScalar(1.3);
-                        dragStartMouse.copy(mouse);
+                        dragTarget = handle;
+                        dragTarget.children.forEach(child => {
+                            if (child.material) child.material.emissiveIntensity = 1.5;
+                        });
+                        dragTarget.scale.setScalar(1.25);
                     }
                 }, { passive: false });
                 
                 canvas.addEventListener('touchmove', (e) => {
                     e.preventDefault();
+                    if (!isDragging || !dragTarget) return;
+                    
                     const touch = e.touches[0];
                     const rect = canvas.getBoundingClientRect();
                     mouse.x = ((touch.clientX - rect.left) / rect.width) * 2 - 1;
                     mouse.y = -((touch.clientY - rect.top) / rect.height) * 2 + 1;
                     
-                    if (isDragging && dragTarget) {
-                        raycaster.setFromCamera(mouse, camera);
-                        
-                        if (dragTarget.userData.type === 'azimuth') {
-                            const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.05);
-                            if (raycaster.ray.intersectPlane(plane, intersection)) {
-                                azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
-                                if (azimuthAngle < 0) azimuthAngle += 360;
-                            }
-                        } else if (dragTarget.userData.type === 'elevation') {
-                            const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0.8);
-                            if (raycaster.ray.intersectPlane(plane, intersection)) {
-                                const relY = intersection.y - CENTER.y;
-                                const relZ = intersection.z;
-                                elevationAngle = THREE.MathUtils.clamp(
-                                    THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), 
-                                    -90, 
-                                    90
-                                );
-                            }
+                    raycaster.setFromCamera(mouse, camera);
+                    
+                    if (dragTarget.userData.type === 'azimuth') {
+                        const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.08);
+                        if (raycaster.ray.intersectPlane(plane, intersection)) {
+                            azimuthAngle = THREE.MathUtils.radToDeg(Math.atan2(intersection.x, intersection.z));
+                            if (azimuthAngle < 0) azimuthAngle += 360;
+                        }
+                    } else if (dragTarget.userData.type === 'elevation') {
+                        const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 1.0);
+                        if (raycaster.ray.intersectPlane(plane, intersection)) {
+                            const relY = intersection.y - CENTER.y;
+                            const relZ = intersection.z;
+                            elevationAngle = THREE.MathUtils.clamp(
+                                THREE.MathUtils.radToDeg(Math.atan2(relY, relZ)), 
+                                -90, 
+                                90
+                            );
                         }
-                        updatePositions();
                     }
+                    updatePositions();
                 }, { passive: false });
                 
-                canvas.addEventListener('touchend', (e) => {
-                    e.preventDefault();
-                    onMouseUp();
-                }, { passive: false });
-                
-                canvas.addEventListener('touchcancel', (e) => {
-                    e.preventDefault();
-                    onMouseUp();
-                }, { passive: false });
+                canvas.addEventListener('touchend', (e) => { e.preventDefault(); onMouseUp(); }, { passive: false });
+                canvas.addEventListener('touchcancel', (e) => { e.preventDefault(); onMouseUp(); }, { passive: false });
                 
                 // Initial update
                 updatePositions();
                 
-                // Render loop
+                // Animation variables
+                let time = 0;
+                
+                // Render loop with subtle animations
                 function render() {
                     requestAnimationFrame(render);
+                    time += 0.01;
+                    
+                    // Subtle lens pulse
+                    if (lens) {
+                        lens.material.emissiveIntensity = 2.5 + Math.sin(time * 2) * 0.5;
+                    }
+                    
                     renderer.render(scene, camera);
                 }
                 render();
@@ -1003,17 +1132,6 @@ class LightingControl3D(gr.HTML):
                     renderer.setSize(wrapper.clientWidth, wrapper.clientHeight);
                 }).observe(wrapper);
                 
-                // Store update functions for external calls
-                wrapper._updateFromProps = (newVal) => {
-                    if (newVal && typeof newVal === 'object') {
-                        azimuthAngle = newVal.azimuth ?? azimuthAngle;
-                        elevationAngle = newVal.elevation ?? elevationAngle;
-                        updatePositions();
-                    }
-                };
-                
-                wrapper._updateTexture = updateTextureFromUrl;
-                
                 // Watch for prop changes
                 let lastImageUrl = props.imageUrl;
                 let lastValue = JSON.stringify(props.value);
@@ -1049,7 +1167,7 @@ class LightingControl3D(gr.HTML):
 css = '''
 #col-container { max-width: 1200px; margin: 0 auto; }
 .dark .progress-text { color: white !important; }
-#lighting-3d-control { min-height: 450px; }
+#lighting-3d-control { min-height: 500px; }
 .slider-row { display: flex; gap: 10px; align-items: center; }
 #main-title h1 {font-size: 2.4em !important;}
 '''
@@ -1062,19 +1180,19 @@ with gr.Blocks(css=css) as demo:
         with gr.Column(scale=1):
             image = gr.Image(label="Input Image", type="pil", height=300)
             
-            gr.Markdown("### 3D Lighting Control")
-            gr.Markdown("*Drag the colored handles: 🟡 Azimuth (Direction), 🔵 Elevation (Height)*")
+            gr.Markdown("### 🎬 Studio Lighting Control")
+            gr.Markdown("*Drag handles: 🟡 **Azimuth** (compass ring) • 🔵 **Elevation** (vertical arc)*")
             
             lighting_3d = LightingControl3D(
                 value={"azimuth": 0, "elevation": 0},
                 elem_id="lighting-3d-control"
             )
-            run_btn = gr.Button("Generate Image", variant="primary", size="lg")
+            run_btn = gr.Button("🎬 Generate Image", variant="primary", size="lg")
             
             gr.Markdown("### Slider Controls")
             
             azimuth_slider = gr.Slider(
-                label="Azimuth (Horizontal Rotation)",
+                label="🟡 Azimuth (Horizontal Rotation)",
                 minimum=0,
                 maximum=315,
                 step=45,
@@ -1083,7 +1201,7 @@ with gr.Blocks(css=css) as demo:
             )
             
             elevation_slider = gr.Slider(
-                label="Elevation (Vertical Angle)",
+                label="🔵 Elevation (Vertical Angle)",
                 minimum=-90,
                 maximum=90,
                 step=90,
@@ -1111,12 +1229,10 @@ with gr.Blocks(css=css) as demo:
                 width = gr.Slider(label="Width", minimum=256, maximum=2048, step=8, value=1024)
     
     def update_prompt_from_sliders(azimuth, elevation):
-        """Update prompt preview when sliders change."""
         prompt = build_lighting_prompt(azimuth, elevation)
         return prompt
     
     def sync_3d_to_sliders(lighting_value):
-        """Sync 3D control changes to sliders."""
         if lighting_value and isinstance(lighting_value, dict):
             az = lighting_value.get('azimuth', 0)
             el = lighting_value.get('elevation', 0)
@@ -1125,11 +1241,9 @@ with gr.Blocks(css=css) as demo:
         return gr.update(), gr.update(), gr.update()
     
     def sync_sliders_to_3d(azimuth, elevation):
-        """Sync slider changes to 3D control."""
         return {"azimuth": azimuth, "elevation": elevation}
     
     def update_3d_image(image):
-        """Update the 3D component with the uploaded image."""
         if image is None:
             return gr.update(imageUrl=None)