Update app.py

app.py

@@ -316,19 +316,19 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // Create LED texture
+                // Create LED grid texture
                 function createLEDTexture() {
                     const canvas = document.createElement('canvas');
-                    canvas.width = 64;
-                    canvas.height = 64;
+                    canvas.width = 128;
+                    canvas.height = 128;
                     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.fillRect(0, 0, 128, 128);
+                    for (let i = 0; i < 12; i++) {
+                        for (let j = 0; j < 12; j++) {
                             ctx.fillStyle = '#ffffff';
                             ctx.beginPath();
-                            ctx.arc(4 + 8 * i, 4 + 8 * j, 3, 0, Math.PI * 2);
+                            ctx.arc(6 + 10 * i, 6 + 10 * j, 4, 0, Math.PI * 2);
                             ctx.fill();
                         }
                     }
@@ -337,48 +337,29 @@ class LightingControl3D(gr.HTML):
                 
                 // Studio LED light model
                 const lightGroup = new THREE.Group();
+                
+                // LED panel
                 const ledTexture = createLEDTexture();
                 const ledMat = new THREE.MeshStandardMaterial({
                     color: 0x111111,
                     emissive: 0xffffff,
-                    emissiveIntensity: 2,
+                    emissiveIntensity: 4,
                     emissiveMap: ledTexture,
-                    roughness: 0.5,
-                    metalness: 0
+                    roughness: 0.8,
+                    metalness: 0.2
                 });
                 const ledPanel = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.6, 0.1), ledMat);
                 lightGroup.add(ledPanel);
-
-                // --- NEW CODE START: Add Light Rays ---
-                // Create a cone to simulate the light beam
-                const beamGeometry = new THREE.ConeGeometry(0.45, 4, 32, 1, true); // base radius, height, radialSegments, openEnded
-                // Translate the geometry so the tip of the cone sits at the light source
-                beamGeometry.translate(0, 2, 0); 
-                // Rotate to point along the Z-axis (which looks at the target)
-                beamGeometry.rotateX(Math.PI / 2);
-
-                const beamMaterial = new THREE.MeshBasicMaterial({
-                    color: 0xffffff,
-                    transparent: true,
-                    opacity: 0.15, // Low opacity for "ray" effect
-                    side: THREE.DoubleSide,
-                    depthWrite: false, // Prevents occlusion issues
-                    blending: THREE.AdditiveBlending // Makes it look like light
-                });
-                
-                const lightBeam = new THREE.Mesh(beamGeometry, beamMaterial);
-                lightBeam.position.set(0, 0, 0.1); // Slightly offset in front of panel
-                lightGroup.add(lightBeam);
-                // --- NEW CODE END ---
                 
-                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
+                // Spotlight
+                const spotLight = new THREE.SpotLight(0xffeecc, 15, 10, Math.PI / 3, 0.3, 1);
                 spotLight.position.set(0, 0, -0.05);
                 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;
+                spotLight.shadow.camera.far = 10;
+                spotLight.shadow.bias = -0.0001;
                 lightGroup.add(spotLight);
                 
                 const lightTarget = new THREE.Object3D();
@@ -386,6 +367,37 @@ class LightingControl3D(gr.HTML):
                 scene.add(lightTarget);
                 spotLight.target = lightTarget;
                 
+                // Visible light beam (outer cone - wide, faint)
+                const outerBeam = new THREE.Mesh(
+                    new THREE.ConeGeometry(2.2, 6, 64),
+                    new THREE.MeshBasicMaterial({
+                        color: 0xffeecc,
+                        transparent: true,
+                        opacity: 0.08,
+                        blending: THREE.AdditiveBlending,
+                        depthWrite: false,
+                        side: THREE.DoubleSide
+                    })
+                );
+                outerBeam.rotation.x = -Math.PI / 2;
+                outerBeam.position.z = -0.05;
+                lightGroup.add(outerBeam);
+                
+                // Visible light beam (inner cone - brighter core)
+                const innerBeam = new THREE.Mesh(
+                    new THREE.ConeGeometry(0.9, 5, 32),
+                    new THREE.MeshBasicMaterial({
+                        color: 0xffffff,
+                        transparent: true,
+                        opacity: 0.25,
+                        blending: THREE.AdditiveBlending,
+                        depthWrite: false
+                    })
+                );
+                innerBeam.rotation.x = -Math.PI / 2;
+                innerBeam.position.z = -0.05;
+                lightGroup.add(innerBeam);
+                
                 scene.add(lightGroup);
                 
                 // BLUE: Azimuth ring
@@ -586,7 +598,8 @@ 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];
@@ -672,16 +685,14 @@ class LightingControl3D(gr.HTML):
                 
                 wrapper._updateTexture = updateTextureFromUrl;
                 
-                // Watch for prop changes (imageUrl and value)
+                // Watch for prop changes
                 let lastImageUrl = props.imageUrl;
                 let lastValue = JSON.stringify(props.value);
                 setInterval(() => {
-                    // Check imageUrl changes
                     if (props.imageUrl !== lastImageUrl) {
                         lastImageUrl = props.imageUrl;
                         updateTextureFromUrl(props.imageUrl);
                     }
-                    // Check value changes (from sliders)
                     const currentValue = JSON.stringify(props.value);
                     if (currentValue !== lastValue) {
                         lastValue = currentValue;