Update app.py

app.py

@@ -316,14 +316,41 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
+                // Create LED texture
+                function createLEDTexture() {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = 64;
+                    canvas.height = 64;
+                    const ctx = canvas.getContext('2d');
+                    ctx.fillStyle = '#000000';
+                    ctx.fillRect(0, 0, 64, 64);
+                    for (let i = 0; i < 8; i++) {
+                        for (let j = 0; j < 8; j++) {
+                            ctx.fillStyle = '#ffffff';
+                            ctx.beginPath();
+                            ctx.arc(4 + 8 * i, 4 + 8 * j, 3, 0, Math.PI * 2);
+                            ctx.fill();
+                        }
+                    }
+                    return new THREE.CanvasTexture(canvas);
+                }
+                
                 // Studio LED light model
                 const lightGroup = new THREE.Group();
-                const ledMat = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 0.8 });
+                const ledTexture = createLEDTexture();
+                const ledMat = new THREE.MeshStandardMaterial({
+                    color: 0x111111,
+                    emissive: 0xffffff,
+                    emissiveIntensity: 2,
+                    emissiveMap: ledTexture,
+                    roughness: 0.5,
+                    metalness: 0
+                });
                 const ledPanel = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.1), ledMat);
                 lightGroup.add(ledPanel);
                 
-                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 4, 0.5, 1);
-                spotLight.position.set(0, 0, 0);
+                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
+                spotLight.position.set(0, 0, -0.05);
                 spotLight.castShadow = true;
                 spotLight.shadow.mapSize.width = 1024;
                 spotLight.shadow.mapSize.height = 1024;
@@ -332,6 +359,11 @@ class LightingControl3D(gr.HTML):
                 spotLight.shadow.bias = -0.005;
                 lightGroup.add(spotLight);
                 
+                const lightTarget = new THREE.Object3D();
+                lightTarget.position.copy(CENTER);
+                scene.add(lightTarget);
+                spotLight.target = lightTarget;
+                
                 scene.add(lightGroup);
                 
                 // BLUE: Azimuth ring
@@ -402,7 +434,6 @@ class LightingControl3D(gr.HTML):
                     
                     lightGroup.position.set(lightX, lightY, lightZ);
                     lightGroup.lookAt(CENTER);
-                    spotLight.lookAt(CENTER);
                     
                     azimuthHandle.position.set(AZIMUTH_RADIUS * Math.sin(azRad), 0.05, AZIMUTH_RADIUS * Math.cos(azRad));
                     elevationHandle.position.set(-0.8, ELEVATION_RADIUS * Math.sin(elRad) + CENTER.y, ELEVATION_RADIUS * Math.cos(elRad));