Update app.py

app.py

@@ -246,11 +246,14 @@ class LightingControl3D(gr.HTML):
                 const scene = new THREE.Scene();
                 scene.background = new THREE.Color(0x1a1a1a);
                 
+                // Add subtle fog to enhance the volumetric look
+                scene.fog = new THREE.FogExp2(0x1a1a1a, 0.05);
+                
                 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 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;
@@ -258,12 +261,13 @@ class LightingControl3D(gr.HTML):
                 wrapper.insertBefore(renderer.domElement, promptOverlay);
                 
                 // Lighting for the scene
-                scene.add(new THREE.AmbientLight(0xffffff, 0.1));
+                const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
+                scene.add(ambientLight);
                 
                 // Ground plane for shadows
                 const ground = new THREE.Mesh(
                     new THREE.PlaneGeometry(10, 10),
-                    new THREE.ShadowMaterial({ opacity: 0.3 })
+                    new THREE.ShadowMaterial({ opacity: 0.5 }) // Darker shadow for contrast
                 );
                 ground.rotation.x = -Math.PI / 2;
                 ground.position.y = 0;
@@ -385,7 +389,7 @@ class LightingControl3D(gr.HTML):
                     updateTextureFromUrl(props.imageUrl);
                 }
                 
-                // --- NEW LIGHT MODEL: SOFTBOX ---
+                // --- NEW LIGHT MODEL: SOFTBOX WITH VOLUMETRIC RAYS ---
                 const lightGroup = new THREE.Group();
 
                 // 1. Softbox Housing (Red)
@@ -402,7 +406,7 @@ class LightingControl3D(gr.HTML):
                 const diffuserMat = new THREE.MeshStandardMaterial({ 
                     color: 0xffffff,    // WHITE LIGHT
                     emissive: 0xffffff,
-                    emissiveIntensity: 2.0, 
+                    emissiveIntensity: 3.0, // Brighter for ray visibility
                     roughness: 0.2
                 });
                 const diffuser = new THREE.Mesh(diffuserGeo, diffuserMat);
@@ -410,17 +414,37 @@ class LightingControl3D(gr.HTML):
                 
                 // Assemble the softbox
                 housing.add(diffuser);
+                
+                // 3. Volumetric Ray Mesh (Cone)
+                // Creates a visible beam of light
+                const rayLength = 4.0;
+                const rayGeo = new THREE.ConeGeometry(0.8, rayLength, 32, 1, true); // Open ended cone
+                // Rotate cone so it points along Z-axis like the light
+                rayGeo.rotateX(Math.PI / 2); 
+                rayGeo.translate(0, 0, rayLength / 2 + 0.2); // Move it to start at the diffuser
+
+                const rayMat = new THREE.MeshBasicMaterial({
+                    color: 0xffffff,
+                    transparent: true,
+                    opacity: 0.08,     // Subtle transparency
+                    side: THREE.FrontSide,
+                    depthWrite: false, // Don't block other objects
+                    blending: THREE.AdditiveBlending // Glow effect
+                });
+                const rayCone = new THREE.Mesh(rayGeo, rayMat);
+                housing.add(rayCone);
+
                 lightGroup.add(housing);
                 
                 // Actual Light Source
-                const spotLight = new THREE.SpotLight(0xffffff, 10, 10, Math.PI / 3, 1, 1);
-                spotLight.position.set(0, 0, -0.05);
+                const spotLight = new THREE.SpotLight(0xffffff, 20, 10, Math.PI / 4, 0.5, 1);
+                spotLight.position.set(0, 0, 0.1);
                 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.bias = -0.0001;
                 lightGroup.add(spotLight);
                 
                 const lightTarget = new THREE.Object3D();