Update app.py

app.py

@@ -191,18 +191,19 @@ class LightingControl3D(gr.HTML):
                 // Lighting
                 scene.add(new THREE.AmbientLight(0xffffff, 0.1));
                 
+                // Ground plane for shadows
+                const ground = new THREE.Mesh(
+                    new THREE.PlaneGeometry(10, 10),
+                    new THREE.ShadowMaterial({ opacity: 0.3 })
+                );
+                ground.rotation.x = -Math.PI / 2;
+                ground.position.y = 0;
+                ground.receiveShadow = true;
+                scene.add(ground);
+                
                 // Grid
                 scene.add(new THREE.GridHelper(8, 16, 0x333333, 0x222222));
                 
-                // Floor for shadows
-                const floorGeometry = new THREE.PlaneGeometry(10, 10);
-                const floorMaterial = new THREE.ShadowMaterial({ opacity: 0.3 });
-                const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-                floor.rotation.x = -Math.PI / 2;
-                floor.position.y = 0;
-                floor.receiveShadow = true;
-                scene.add(floor);
-                
                 // Constants
                 const CENTER = new THREE.Vector3(0, 0.75, 0);
                 const BASE_DISTANCE = 2.5;
@@ -315,47 +316,21 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // Light model - Enhanced light bulb
+                // Studio LED light model
                 const lightGroup = new THREE.Group();
-                
-                // Bulb glass
-                const bulbMat = new THREE.MeshStandardMaterial({
-                    color: 0xffffff,
-                    transparent: true,
-                    opacity: 0.3,
-                    emissive: 0xffff00,
-                    emissiveIntensity: 0.5,
-                    roughness: 0.1,
-                    metalness: 0.1
-                });
-                const bulbGeometry = new THREE.SphereGeometry(0.15, 32, 32, 0, Math.PI * 2, 0, Math.PI * 0.8); // Slightly elongated
-                const bulb = new THREE.Mesh(bulbGeometry, bulbMat);
-                lightGroup.add(bulb);
-                
-                // Bulb base
-                const baseMat = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.8, roughness: 0.2 });
-                const baseGeometry = new THREE.CylinderGeometry(0.08, 0.12, 0.1, 32);
-                const base = new THREE.Mesh(baseGeometry, baseMat);
-                base.position.y = -0.15;
-                lightGroup.add(base);
-                
-                // Filament
-                const filamentMat = new THREE.MeshBasicMaterial({ color: 0xffaa00, wireframe: true });
-                const filamentGeometry = new THREE.TorusGeometry(0.05, 0.005, 16, 100);
-                const filament = new THREE.Mesh(filamentGeometry, filamentMat);
-                filament.rotation.x = Math.PI / 2;
-                filament.position.y = 0.05;
-                lightGroup.add(filament);
-                
-                // Point light
-                const pointLight = new THREE.PointLight(0xffffff, 5, 0, 2);
-                pointLight.castShadow = true;
-                pointLight.shadow.mapSize.width = 512;
-                pointLight.shadow.mapSize.height = 512;
-                pointLight.shadow.camera.near = 0.5;
-                pointLight.shadow.camera.far = 500;
-                pointLight.shadow.bias = -0.0001;
-                lightGroup.add(pointLight);
+                const ledMat = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 0.8 });
+                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);
+                spotLight.castShadow = true;
+                spotLight.shadow.mapSize.width = 1024;
+                spotLight.shadow.mapSize.height = 1024;
+                spotLight.shadow.camera.near = 0.5;
+                spotLight.shadow.camera.far = 500;
+                spotLight.shadow.bias = -0.005;
+                lightGroup.add(spotLight);
                 
                 scene.add(lightGroup);
                 
@@ -426,6 +401,8 @@ class LightingControl3D(gr.HTML):
                     const lightZ = distance * Math.cos(azRad) * Math.cos(elRad);
                     
                     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));