import { api } from '../../../scripts/api.js'
import { app } from '../../../scripts/app.js'
import { createRelightModal, modalStyles } from './config.js'
import { SceneUtils } from './scene_utils.js'

export class LightEditor {
    constructor() {
        const styleElement = document.createElement('style');
        styleElement.textContent = modalStyles;
        document.head.appendChild(styleElement);
        this.modal = createRelightModal();
        this.canvasContainer = this.modal.querySelector('.relight-canvas-container');
        this.lightIndicator = this.modal.querySelector('.light-source-indicator');
        this.isMovingLight = false;
        this.currentNode = null;
        this.isSceneSetup = false;
        this.lightX = 0;
        this.lightY = 0;
        this.lightZ = 1;
        this.zOffset = 0;
        this.lightSources = [];
        this.activeSourceIndex = -1;
        this.bindEvents();
    }

    bindEvents() {
        this.onCanvasMouseDownHandler = this.onCanvasMouseDown.bind(this);
        this.onCanvasMouseMoveHandler = this.onCanvasMouseMove.bind(this);
        this.onCanvasMouseUpHandler = this.onCanvasMouseUp.bind(this);
        this.onSliderChangeHandler = this.onSliderChange.bind(this);
        this.onLightTypeChangeHandler = this.onLightTypeChange.bind(this);
        const cancelBtn = this.modal.querySelector('.relight-btn.cancel');
        cancelBtn.addEventListener('click', () => this.cleanupAndClose(true));
        const applyBtn = this.modal.querySelector('.relight-btn.apply');
        applyBtn.addEventListener('click', () => this.applyChanges());
        this.canvasContainer.addEventListener('mousedown', this.onCanvasMouseDownHandler);
        const sliders = this.modal.querySelectorAll('.relight-slider');
        sliders.forEach(slider => {
            slider.addEventListener('input', this.onSliderChangeHandler);
        });
        
        // 添加光源类型切换事件监听
        const lightTypeSelect = this.modal.querySelector('#lightType');
        if (lightTypeSelect) {
            lightTypeSelect.addEventListener('change', this.onLightTypeChangeHandler);
        }
    }

    onLightTypeChange(event) {
        const lightType = event.target.value;
        const spotlightControls = this.modal.querySelectorAll('.spotlight-controls');
        const pointlightControls = this.modal.querySelectorAll('.pointlight-controls');
        
        // 显示或隐藏聚光灯控制项
        spotlightControls.forEach(control => {
            control.style.display = lightType === 'spot' ? 'block' : 'none';
        });
        
        // 显示或隐藏点光源控制项
        pointlightControls.forEach(control => {
            control.style.display = lightType === 'point' ? 'block' : 'none';
        });
        
        // 如果有活动光源，转换其类型
        if (this.activeSourceIndex !== -1) {
            const activeSource = this.lightSources[this.activeSourceIndex];
            if (activeSource) {
                this.convertLightType(activeSource, lightType);
            }
        }
    }
    
    convertLightType(source, newType) {
        // 保存原始光源的属性
        const position = source.position;
        const intensity = source.intensity;
        const color = source.light.color.getHex();
        const visible = source.light.visible;
        
        // 从场景中移除原始光源
        this.scene.remove(source.light);
        if (source.lightType === 'spot' && source.light.target) {
            this.scene.remove(source.light.target);
        }
        
        // 创建新的光源
        let newLight;
        if (newType === 'spot') {
            const spotlightAngleSlider = this.modal.querySelector('#spotlightAngle');
            const spotlightPenumbraSlider = this.modal.querySelector('#spotlightPenumbra');
            const angle = spotlightAngleSlider ? parseFloat(spotlightAngleSlider.value) * Math.PI : Math.PI / 3;
            const penumbra = spotlightPenumbraSlider ? parseFloat(spotlightPenumbraSlider.value) : 0.2;
            
            newLight = new THREE.SpotLight(color, intensity, 10, angle, penumbra);
            
            // 设置目标点位置
            let targetPosition;
            if (source.targetPosition) {
                targetPosition = source.targetPosition;
            } else {
                // 如果没有现成的目标点，默认设置在光源下方一些位置
                targetPosition = {
                    x: position.x,
                    y: position.y - 1,
                    z: 0
                };
            }
            newLight.target.position.set(targetPosition.x, targetPosition.y, targetPosition.z);
            source.targetPosition = targetPosition;
            
            this.scene.add(newLight.target);
            
            // 为光源添加聚光灯特有属性
            source.spotParams = {
                angle: angle,
                penumbra: penumbra
            };
            
            // 聚光灯指示器样式修改
            if (source.indicator) {
                source.indicator.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
                source.indicator.style.transform = 'translate(-50%, -20%)';
            }
            
            // 创建连接线
            if (!source.connectionLine) {
                source.connectionLine = document.createElement('div');
                source.connectionLine.className = 'spotlight-connection-line';
                this.canvasContainer.appendChild(source.connectionLine);
            }
            
            // 创建目标点指示器
            if (!source.targetIndicator) {
                source.targetIndicator = this.createTargetIndicator(
                    source.lightColor || '#ffffff'
                );
                source.targetIndicator.style.display = 'none'; // 默认隐藏
                this.canvasContainer.appendChild(source.targetIndicator);
            }
            
            // 更新连接线位置
            this.updateSpotlightLine(source);
        } else {
            const pointlightRadiusSlider = this.modal.querySelector('#pointlightRadius');
            const radius = pointlightRadiusSlider ? parseFloat(pointlightRadiusSlider.value) : 10;
            
            newLight = new THREE.PointLight(color, intensity, radius, 2);
            
            // 点光源指示器样式恢复
            if (source.indicator) {
                source.indicator.style.clipPath = '';
                source.indicator.style.borderRadius = '50%';
                source.indicator.style.transform = 'translate(-50%, -50%)';
            }
            
            // 隐藏连接线
            if (source.connectionLine) {
                source.connectionLine.style.display = 'none';
            }
            
            // 隐藏目标点指示器
            if (source.targetIndicator) {
                source.targetIndicator.style.display = 'none';
            }
            
            // 移除聚光灯特有属性
            if (source.spotParams) {
                delete source.spotParams;
            }
            
            // 为点光源添加半径参数
            source.pointParams = {
                radius: radius
            };
        }
        
        // 设置新光源的位置和可见性
        newLight.position.set(position.x, position.y, position.z);
        newLight.visible = visible;
        
        // 更新光源对象
        source.light = newLight;
        source.lightType = newType;
        
        // 将新光源添加到场景
        this.scene.add(newLight);
        
        // 更新渲染
        this.render();
    }

    async cleanupAndClose(cancelled = false) {
        if (cancelled && this.currentNode) {
            try {
                await api.fetchApi("/lg_relight_ultra/cancel", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        node_id: this.currentNode.id
                    })
                });
                console.log('[RelightNode] 已发送取消信号Cancellation signal sent');
            } catch (error) {
                console.error('[RelightNode] 发送取消信号失败Failed to send cancel signal:', error);
            }
        }
        document.removeEventListener('mousemove', this.onCanvasMouseMoveHandler);
        document.removeEventListener('mouseup', this.onCanvasMouseUpHandler);
        this.lightSources.forEach(source => {
            if (source.indicator && source.indicator.parentNode) {
                source.indicator.remove();
            }
            if (source.targetIndicator && source.targetIndicator.parentNode) {
                source.targetIndicator.remove();
            }
            if (source.connectionLine && source.connectionLine.parentNode) {
                source.connectionLine.remove();
            }
        });
        if (this.scene) {
            this.lightSources.forEach(source => {
                this.scene.remove(source.light);
                if (source.lightType === 'spot' && source.light.target) {
                    this.scene.remove(source.light.target);
                }
            });
            this.lightSources = [];
            this.activeSourceIndex = -1;
        }
        this.isMovingLight = false;
        this.modal.close();
    }

    applyChanges() {
        if (this.renderer && this.scene && this.camera && this.currentNode) {
            this.renderer.render(this.scene, this.camera);
            this.uploadCanvasResult(this.renderer.domElement, this.currentNode.id);
            this.saveLightConfiguration(this.currentNode.id);
        }
        this.cleanupAndClose();
    }

    onCanvasMouseDown(event) {
        if (event.target !== this.canvasContainer &&
            event.target !== this.displayRenderer?.domElement) return;
            
        const activeSource = this.activeSourceIndex !== -1 ? this.lightSources[this.activeSourceIndex] : null;
        
        // 鼠标右键，且当前有活动的聚光灯
        if (event.button === 2 && activeSource && activeSource.lightType === 'spot') {
            event.preventDefault();
            event.stopPropagation();
            
            // 切换到目标点编辑模式
            activeSource.editingTarget = true;
            
            // 创建或显示目标点指示器
            if (!activeSource.targetIndicator) {
                activeSource.targetIndicator = this.createTargetIndicator(activeSource.lightColor || '#ffffff');
                this.canvasContainer.appendChild(activeSource.targetIndicator);
            } else {
                activeSource.targetIndicator.style.display = 'block';
            }
            
            // 更新连接线
            if (!activeSource.connectionLine) {
                activeSource.connectionLine = document.createElement('div');
                activeSource.connectionLine.className = 'spotlight-connection-line';
                this.canvasContainer.appendChild(activeSource.connectionLine);
            }
            
            this.isMovingLight = true;
            document.addEventListener('mousemove', this.onCanvasMouseMoveHandler);
            document.addEventListener('mouseup', this.onCanvasMouseUpHandler);
            this.updateLightFromMouseEvent(event);
            
            return;
        }
        
        // 如果之前是在编辑目标点，现在切换回编辑光源位置
        if (activeSource && activeSource.editingTarget) {
            activeSource.editingTarget = false;
        }
        
        this.isMovingLight = true;
        document.addEventListener('mousemove', this.onCanvasMouseMoveHandler);
        document.addEventListener('mouseup', this.onCanvasMouseUpHandler);
        this.updateLightFromMouseEvent(event);
        event.stopPropagation();
    }

    onCanvasMouseMove(event) {
        if (!this.isMovingLight) return;
        this.updateLightFromMouseEvent(event);
        event.stopPropagation();
    }

    onCanvasMouseUp(event) {
        const activeSource = this.activeSourceIndex !== -1 ? this.lightSources[this.activeSourceIndex] : null;
        
        // 如果处于目标点编辑模式，鼠标抬起后完成目标点的放置
        if (activeSource && activeSource.editingTarget) {
            activeSource.editingTarget = false;
            
            // 隐藏目标点指示器，但保留连接线
            if (activeSource.targetIndicator) {
                activeSource.targetIndicator.style.display = 'none';
            }
        }
        
        this.isMovingLight = false;
        document.removeEventListener('mousemove', this.onCanvasMouseMoveHandler);
        document.removeEventListener('mouseup', this.onCanvasMouseUpHandler);
        event.stopPropagation();
    }

    updateLightFromMouseEvent(event) {
        if (!this.displayRenderer || !this.displayRenderer.domElement || this.activeSourceIndex === -1) return;
        const activeSource = this.lightSources[this.activeSourceIndex];
        if (!activeSource) return;
        
        const mouseX = event.clientX;
        const mouseY = event.clientY;
        const rect = this.displayRenderer.domElement.getBoundingClientRect();
        const x = Math.max(0, Math.min(1, (mouseX - rect.left) / rect.width));
        const y = Math.max(0, Math.min(1, (mouseY - rect.top) / rect.height));
        
        this.updateLightIndicatorExact(mouseX, mouseY, activeSource.indicator);
        
        // 移除X轴计算中的负号
        this.lightX = ((x * 2) - 1);
        this.lightY = ((1 - y) * 2) - 1;
        
        // 从深度图获取Z轴高度
        const zValue = SceneUtils.getZValueFromDepthMap(this.depthMapTexture, x, y, this.zOffset);
        
        const xValueEl = this.modal.querySelector('.light-x-value');
        const yValueEl = this.modal.querySelector('.light-y-value');
        const zValueEl = this.modal.querySelector('.light-z-value');
        xValueEl.textContent = this.lightX.toFixed(2);
        yValueEl.textContent = this.lightY.toFixed(2);
        zValueEl.textContent = zValue.toFixed(2);
        
        // 更新光源位置，包括从深度图获取的Z值
        activeSource.position = { x: this.lightX, y: this.lightY, z: zValue };
        activeSource.light.position.set(this.lightX, this.lightY, zValue);
        
        // 如果当前正在编辑目标点而不是光源位置
        if (activeSource.editingTarget && activeSource.lightType === 'spot') {
            // 更新目标点位置
            activeSource.targetPosition = { x: this.lightX, y: this.lightY, z: 0 };
            activeSource.light.target.position.set(this.lightX, this.lightY, 0);
            
            // 更新目标点指示器的位置
            if (activeSource.targetIndicator) {
                this.updateLightIndicatorExact(mouseX, mouseY, activeSource.targetIndicator);
            }
            
            // 更新连接线
            this.updateSpotlightLine(activeSource);
        } else if (activeSource.lightType === 'spot') {
            // 如果没有设置过目标点，默认指向下方
            if (!activeSource.targetPosition) {
                activeSource.targetPosition = { 
                    x: this.lightX, 
                    y: this.lightY - 1, 
                    z: 0 
                };
                activeSource.light.target.position.set(
                    activeSource.targetPosition.x,
                    activeSource.targetPosition.y,
                    activeSource.targetPosition.z
                );
            }
            
            // 更新连接线
            this.updateSpotlightLine(activeSource);
        }
        
        this.render();
    }

    updateLightIndicatorExact(clientX, clientY, indicator) {
        if (!indicator) return;
        const rect = this.canvasContainer.getBoundingClientRect();
        const offsetX = clientX - rect.left;
        const offsetY = clientY - rect.top;
        indicator.style.position = 'absolute';
        indicator.style.left = `${offsetX}px`;
        indicator.style.top = `${offsetY}px`;
        indicator.style.display = 'block';
    }

    onSliderChange(event) {
        const sliderId = event.target.id;
        const value = parseFloat(event.target.value);
        const activeSource = this.lightSources[this.activeSourceIndex];
        if (!activeSource) return;
        switch (sliderId) {
            case 'zOffset':
                this.zOffset = value;
                // 如果有活动光源，需要更新它的z坐标（需要重新从深度图获取基础z值）
                if (activeSource) {
                    // 从深度图获取当前位置的基础Z值
                    const rect = this.displayRenderer.domElement.getBoundingClientRect();
                    const indicator = activeSource.indicator;
                    const indicatorRect = indicator.getBoundingClientRect();
                    const x = Math.max(0, Math.min(1, (indicatorRect.left + indicatorRect.width/2 - rect.left) / rect.width));
                    const y = Math.max(0, Math.min(1, (indicatorRect.top + indicatorRect.height/2 - rect.top) / rect.height));
                    
                    // 重新计算Z值并更新光源位置
                    const zValue = SceneUtils.getZValueFromDepthMap(this.depthMapTexture, x, y, this.zOffset);
                    activeSource.position.z = zValue;
                    activeSource.light.position.set(
                        activeSource.position.x,
                        activeSource.position.y,
                        zValue
                    );
                    
                    // 更新显示的Z值
                    const zValueEl = this.modal.querySelector('.light-z-value');
                    if (zValueEl) {
                        zValueEl.textContent = zValue.toFixed(2);
                    }
                }
                break;
            case 'lightIntensity':
                activeSource.light.intensity = value;
                activeSource.intensity = value;
                break;
            case 'ambientLight':
                if (this.ambientLight) {
                    this.ambientLight.intensity = value;
                }
                break;
            case 'normalStrength':
                if (this.material) {
                    // 将法线强度应用到材质
                    this.material.normalScale.set(value, value);
                    // 如果有必要，可以存储该值以便保存配置
                    this.normalStrength = value;
                }
                break;
            case 'spotlightAngle':
                if (activeSource.lightType === 'spot') {
                    activeSource.light.angle = value * Math.PI;
                    activeSource.spotParams.angle = value * Math.PI;
                }
                break;
            case 'spotlightPenumbra':
                if (activeSource.lightType === 'spot') {
                    activeSource.light.penumbra = value;
                    activeSource.spotParams.penumbra = value;
                }
                break;
            case 'pointlightRadius':
                if (activeSource.lightType === 'point') {
                    activeSource.light.distance = value;
                    if (activeSource.pointParams) {
                        activeSource.pointParams.radius = value;
                    } else {
                        activeSource.pointParams = { radius: value };
                    }
                }
                break;
        }
        this.render();
    }

    async setupScene(texture, depthMap, normalMap, maskTexture = null) {
        try {
            // 存储深度图纹理引用
            this.depthMapTexture = depthMap;
            
            if (!texture.image || !texture.image.complete) {
                console.warn('[RelightNode] 纹理图像未完全加载Texture image not fully loaded');
                await new Promise(resolve => setTimeout(resolve, 100));
            }
            const imageWidth = texture.image.width;
            const imageHeight = texture.image.height;
            const imageAspect = imageWidth / imageHeight;

            const containerRect = this.canvasContainer.getBoundingClientRect();
            const containerWidth = containerRect.width;
            const containerHeight = containerRect.height;
            const containerAspect = containerWidth / containerHeight;
            
            let displayWidth, displayHeight;
            if (imageAspect > containerAspect) {
                displayWidth = containerWidth;
                displayHeight = containerWidth / imageAspect;
            } else {
                displayHeight = containerHeight;
                displayWidth = containerHeight * imageAspect;
            }

            const frustumHeight = 2;
            const frustumWidth = frustumHeight * imageAspect;

            if (!this.isSceneSetup) {
                console.log('[RelightNode] 首次创建场景Creating a scene for the first time');
                this.scene = new THREE.Scene();
                this.camera = new THREE.OrthographicCamera(
                    frustumWidth / -2,
                    frustumWidth / 2,
                    frustumHeight / 2,
                    frustumHeight / -2,
                    0.1,
                    1000
                );
                this.camera.position.z = 5;

                this.displayRenderer = new THREE.WebGLRenderer({
                    antialias: true,
                    alpha: true
                });

                this.renderer = new THREE.WebGLRenderer({
                    antialias: true,
                    preserveDrawingBuffer: true,
                    alpha: true
                });
                
                this.ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
                this.scene.add(this.ambientLight);
                this.isSceneSetup = true;
            } else {
                this.camera.left = frustumWidth / -2;
                this.camera.right = frustumWidth / 2;
                this.camera.top = frustumHeight / 2;
                this.camera.bottom = frustumHeight / -2;
                this.camera.updateProjectionMatrix();
            }

            // 设置显示渲染器的尺寸和样式
            this.displayRenderer.setSize(displayWidth, displayHeight);
            const displayCanvas = this.displayRenderer.domElement;
            displayCanvas.style.maxWidth = '100%';
            displayCanvas.style.maxHeight = '100%';
            displayCanvas.style.margin = 'auto';
            displayCanvas.style.position = 'absolute';
            displayCanvas.style.left = '50%';
            displayCanvas.style.top = '50%';
            displayCanvas.style.transform = 'translate(-50%, -50%)';
            
            if (!this.canvasContainer.contains(displayCanvas)) {
                this.canvasContainer.appendChild(displayCanvas);
            }
            
            // 设置输出渲染器为原始图像尺寸
            this.renderer.setSize(imageWidth, imageHeight);
            
            const geometry = new THREE.PlaneGeometry(2 * imageAspect, 2, 32, 32);
            
            // 获取法线强度值（如果已存在）
            const normalStrengthSlider = this.modal.querySelector('#normalStrength');
            this.normalStrength = normalStrengthSlider ? parseFloat(normalStrengthSlider.value) : 0;
            
            let material;
            if (maskTexture) {
                material = SceneUtils.createMaskedMaterial(texture, depthMap, normalMap, maskTexture, this.normalStrength);
            } else {
                material = SceneUtils.createSimpleMaterial(texture, depthMap, normalMap, this.normalStrength);
            }
            if (this.mesh) {
                this.mesh.geometry.dispose();
                this.mesh.geometry = geometry;
                this.mesh.material.dispose();
                this.mesh.material = material;
            } else {
                this.mesh = new THREE.Mesh(geometry, material);
                this.scene.add(this.mesh);
            }
            this.material = material;
            this.renderer.setClearColor(0x000000, 0);
            const canvas = this.renderer.domElement;
            canvas.style.maxWidth = '100%';
            canvas.style.maxHeight = '100%';
            canvas.style.margin = 'auto';
            canvas.style.position = 'absolute';
            canvas.style.left = '50%';
            canvas.style.top = '50%';
            canvas.style.transform = 'translate(-50%, -50%)';
            this.renderer.render(this.scene, this.camera);
            
            // 更新渲染方法
            this.render();
            
            console.log('[RelightNode] 场景设置完成');
            return true;
        } catch (error) {
            console.error('[RelightNode] 场景设置错误:', error);
            return false;
        }
    }

    uploadCanvasResult(canvas, nodeId) {
        // 使用输出渲染器的画布而不是显示渲染器的画布
        this.renderer.domElement.toBlob(async (blob) => {
            try {
                console.log('[RelightNode] 正在上传渲染结果...');
                const formData = new FormData();
                formData.append('node_id', nodeId);
                formData.append('result_image', blob, 'result.png');
                const response = await api.fetchApi('/lg_relight/upload_result', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                if (result.error) {
                    console.error('[RelightNode] 上传失败:', result.error);
                } else {
                    console.log('[RelightNode] 上传成功');
                }
            } catch (error) {
                console.error('[RelightNode] 上传失败:', error);
            }
        }, 'image/png', 1.0);
    }

    createLightSource() {
        const lightIntensitySlider = this.modal.querySelector('#lightIntensity');
        const lightTypeSelect = this.modal.querySelector('#lightType');
        const lightType = lightTypeSelect ? lightTypeSelect.value : 'point';
        
        let light;
        let indicator;
        const lightIntensity = parseFloat(lightIntensitySlider.value);
        
        // 根据选择的光源类型创建对应的光源
        if (lightType === 'spot') {
            const spotlightAngleSlider = this.modal.querySelector('#spotlightAngle');
            const spotlightPenumbraSlider = this.modal.querySelector('#spotlightPenumbra');
            const angle = spotlightAngleSlider ? parseFloat(spotlightAngleSlider.value) * Math.PI : Math.PI / 3;
            const penumbra = spotlightPenumbraSlider ? parseFloat(spotlightPenumbraSlider.value) : 0.2;
            
            light = new THREE.SpotLight(0xffffff, lightIntensity, 10, angle, penumbra);
            light.target.position.set(0, -1, 0); // 默认向下照射
            this.scene.add(light.target);
            
            indicator = this.createLightIndicator('#ffffff', 'spot');
        } else {
            const pointlightRadiusSlider = this.modal.querySelector('#pointlightRadius');
            const radius = pointlightRadiusSlider ? parseFloat(pointlightRadiusSlider.value) : 10;
            
            light = new THREE.PointLight(0xffffff, lightIntensity, radius, 2);
            indicator = this.createLightIndicator('#ffffff', 'point');
        }
        
        const lightSource = {
            id: Date.now(),
            name: `光源 ${this.lightSources.length + 1}`,
            light: light,
            position: { x: 0, y: 0, z: 1.0 }, // 默认值，会在鼠标点击时更新
            intensity: lightIntensity,
            indicatorColor: '#ffffff',
            lightColor: '#ffffff',
            lightType: lightType,
            indicator: indicator,
            editingTarget: false // 是否正在编辑目标点
        };
        
        // 如果是聚光灯，添加额外的聚光灯参数
        if (lightType === 'spot') {
            lightSource.spotParams = {
                angle: light.angle,
                penumbra: light.penumbra
            };
            lightSource.targetPosition = { x: 0, y: -1, z: 0 };
            
            // 创建连接线元素
            lightSource.connectionLine = document.createElement('div');
            lightSource.connectionLine.className = 'spotlight-connection-line';
            this.canvasContainer.appendChild(lightSource.connectionLine);
            
            // 创建目标点指示器
            lightSource.targetIndicator = this.createTargetIndicator('#ffffff');
            lightSource.targetIndicator.style.display = 'none'; // 默认隐藏
            this.canvasContainer.appendChild(lightSource.targetIndicator);
        } else if (lightType === 'point') {
            // 为点光源添加半径参数
            const pointlightRadiusSlider = this.modal.querySelector('#pointlightRadius');
            const radius = pointlightRadiusSlider ? parseFloat(pointlightRadiusSlider.value) : 10;
            lightSource.pointParams = {
                radius: radius
            };
        }
        
        // 直接设置光源位置
        lightSource.light.position.set(0, 0, 1.0);
        this.scene.add(lightSource.light);
        this.lightSources.push(lightSource);
        this.setActiveLight(this.lightSources.length - 1);
        
        // 更新材质参数 - 固定为0
        if (this.material) {
            this.material.shininess = 0;
            this.material.specular.setRGB(0, 0, 0);
            
            // 从滑条获取法线强度值
            const normalStrengthSlider = this.modal.querySelector('#normalStrength');
            const normalStrength = normalStrengthSlider ? parseFloat(normalStrengthSlider.value) : 0;
            this.material.normalScale.set(normalStrength, normalStrength);
            this.normalStrength = normalStrength;
        }
        
        // 确保环境光强度与UI滑块一致
        if (this.ambientLight) {
            const ambientLightSlider = this.modal.querySelector('#ambientLight');
            if (ambientLightSlider) {
                this.ambientLight.intensity = parseFloat(ambientLightSlider.value);
            }
        }
        
        return lightSource;
    }

    createLightIndicator(color, type = 'point') {
        const indicator = document.createElement('div');
        indicator.className = 'light-source-indicator';
        indicator.style.backgroundColor = color;
        indicator.style.boxShadow = `0 0 15px ${color}`;
        
        // 根据光源类型设置指示器样式
        if (type === 'spot') {
            indicator.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)';
            indicator.style.transform = 'translate(-50%, -20%)';
        }
        
        // 添加选中状态的外圈
        const selectionRing = document.createElement('div');
        selectionRing.className = 'selection-ring';
        selectionRing.style.display = 'none'; // 默认隐藏
        selectionRing.style.borderColor = '#00ff00'; // 使用亮绿色
        indicator.appendChild(selectionRing);
        
        this.canvasContainer.appendChild(indicator);
        return indicator;
    }

    updateLightSourcesList() {
        const listContainer = this.modal.querySelector('.light-sources-list');
        if (!listContainer) return;
        listContainer.innerHTML = '';
        this.lightSources.forEach((source, index) => {
            const item = document.createElement('div');
            item.className = `light-source-item ${index === this.activeSourceIndex ? 'active' : ''}`;
            
            // 根据光源的可见状态选择眼睛图标
            const visibilityIcon = source.light.visible ? '👁️' : '👁️‍🗨️';
            
            // 添加光源类型图标
            const typeIcon = source.lightType === 'spot' ? '🔦' : '💡';
            
            item.innerHTML = `
                <div class="light-source-header">
                    <div class="light-source-color" style="background-color: ${source.indicatorColor}"></div>
                    <span class="light-source-name">${typeIcon} ${source.name}</span>
                    <div class="light-source-controls">
                        <input type="color" class="light-color-picker" value="${source.lightColor || '#ffffff'}" title="选择光源颜色 Select the light source color">
                        <button class="light-source-visibility" title="${source.light.visible ? '隐藏' : '显示'}">${visibilityIcon}</button>
                        <button class="light-source-delete" title="删除 delete">🗑️</button>
                    </div>
                </div>
            `;
            // 添加数据属性以识别索引
            item.dataset.lightIndex = index;
            item.addEventListener('click', (e) => {
                // 添加点击时的日志输出
                console.log(`[RelightNode] 点击了光源项  Click on the light source ${index}, 当前活动光源 Currently active light source: ${this.activeSourceIndex}`);
                this.setActiveLight(index);
            });
            const colorPicker = item.querySelector('.light-color-picker');
            colorPicker.addEventListener('input', (e) => {
                e.stopPropagation();
                this.updateLightColor(index, e.target.value);
            });
            const deleteBtn = item.querySelector('.light-source-delete');
            if (deleteBtn) {
                deleteBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.deleteLight(index);
                });
            }
            const visibilityBtn = item.querySelector('.light-source-visibility');
            if (visibilityBtn) {
                visibilityBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    this.toggleLightVisibility(index);
                    // 更新按钮图标
                    visibilityBtn.textContent = source.light.visible ? '👁️' : '👁️‍🗨️';
                    visibilityBtn.title = source.light.visible ? '隐藏Hide' : '显示Show';
                });
            }
            listContainer.appendChild(item);
        });
    }

    setActiveLight(index) {
        console.log(`[RelightNode] 设置活动光源Set active light source: ${index}, 当前光源数量Current number of light sources: ${this.lightSources.length}`);
        
        // 先清除所有光源的选中状态
        this.lightSources.forEach(source => {
            if (source.indicator) {
                const ring = source.indicator.querySelector('.selection-ring');
                if (ring) {
                    ring.style.display = 'none';
                }
            }
        });

        // 设置新的选中光源
        this.activeSourceIndex = index;
        const source = this.lightSources[index];
        if (source && source.indicator) {
            const ring = source.indicator.querySelector('.selection-ring');
            if (ring) {
                console.log(`[RelightNode] 显示光源Display Light Source ${index} 的选择环Selection ring`);
                ring.style.display = 'block';
            } else {
                console.warn(`[RelightNode] 光源 ${index} 没有选择环元素No ring element selected`);
            }
        } else {
            console.warn(`[RelightNode] 光源light source ${index} 或其指示器不存在or its indicator does not exist`);
        }

        // 更新光源列表UI中的活动项
        const listItems = this.modal.querySelectorAll('.light-source-item');
        listItems.forEach(item => {
            const itemIndex = parseInt(item.dataset.lightIndex);
            if (itemIndex === index) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });

        // 更新控制面板的值
        if (source) {
            const lightIntensitySlider = this.modal.querySelector('#lightIntensity');
            if (lightIntensitySlider) {
                lightIntensitySlider.value = source.light.intensity;
            }
            const xValueEl = this.modal.querySelector('.light-x-value');
            const yValueEl = this.modal.querySelector('.light-y-value');
            const zValueEl = this.modal.querySelector('.light-z-value');
            if (xValueEl && yValueEl && zValueEl) {
                xValueEl.textContent = source.position.x.toFixed(2);
                yValueEl.textContent = source.position.y.toFixed(2);
                zValueEl.textContent = source.position.z.toFixed(2);
            }
            
            // 更新光源类型选择器
            const lightTypeSelect = this.modal.querySelector('#lightType');
            if (lightTypeSelect) {
                lightTypeSelect.value = source.lightType || 'point';
                
                // 显示或隐藏聚光灯控制项
                const spotlightControls = this.modal.querySelectorAll('.spotlight-controls');
                spotlightControls.forEach(control => {
                    control.style.display = source.lightType === 'spot' ? 'block' : 'none';
                });
                
                // 显示或隐藏点光源控制项
                const pointlightControls = this.modal.querySelectorAll('.pointlight-controls');
                pointlightControls.forEach(control => {
                    control.style.display = source.lightType === 'point' ? 'block' : 'none';
                });
                
                // 更新聚光灯参数
                if (source.lightType === 'spot' && source.spotParams) {
                    const spotlightAngleSlider = this.modal.querySelector('#spotlightAngle');
                    const spotlightPenumbraSlider = this.modal.querySelector('#spotlightPenumbra');
                    
                    if (spotlightAngleSlider) {
                        spotlightAngleSlider.value = source.spotParams.angle / Math.PI;
                    }
                    
                    if (spotlightPenumbraSlider) {
                        spotlightPenumbraSlider.value = source.spotParams.penumbra;
                    }
                }
                
                // 更新点光源参数
                if (source.lightType === 'point' && source.pointParams) {
                    const pointlightRadiusSlider = this.modal.querySelector('#pointlightRadius');
                    
                    if (pointlightRadiusSlider) {
                        pointlightRadiusSlider.value = source.pointParams.radius;
                    }
                }
            }
        }
    }

    deleteLight(index) {
        const source = this.lightSources[index];
        if (source) {
            this.scene.remove(source.light);
            if (source.lightType === 'spot' && source.light.target) {
                this.scene.remove(source.light.target);
            }
            if (source.indicator && source.indicator.parentNode) {
                source.indicator.remove();
            }
            if (source.connectionLine && source.connectionLine.parentNode) {
                source.connectionLine.remove();
            }
            if (source.targetIndicator && source.targetIndicator.parentNode) {
                source.targetIndicator.remove();
            }
            this.lightSources.splice(index, 1);
            if (this.activeSourceIndex === index) {
                this.activeSourceIndex = Math.max(-1, this.lightSources.length - 1);
            } else if (this.activeSourceIndex > index) {
                this.activeSourceIndex--;
            }
            if (this.lightSources.length === 0) {
                this.activeSourceIndex = -1;
                if (this.ambientLight) {
                    this.ambientLight.intensity = 1.0;
                }
            }
            this.updateLightSourcesList();
            this.render();
        }
    }

    toggleLightVisibility(index) {
        const source = this.lightSources[index];
        if (source) {
            source.light.visible = !source.light.visible;
            source.indicator.style.opacity = source.light.visible ? '0.7' : '0.2';
            this.render();
        }
    }

    updateLightIntensity(index, value) {
        const source = this.lightSources[index];
        if (source) {
            source.intensity = value;
            source.light.intensity = value;
            this.render();
        }
    }

    render() {
        if (this.displayRenderer && this.renderer && this.scene && this.camera) {
            // 更新显示用的画布
            this.displayRenderer.render(this.scene, this.camera);
            // 同时更新用于输出的画布
            this.renderer.render(this.scene, this.camera);
        }
    }

    async show(nodeId, detail) {
        try {
            this.currentNode = app.graph.getNodeById(nodeId);
            if (!this.currentNode) {
                console.error('[RelightNode] 找不到节点Node not found:', nodeId);
                return;
            }
            console.log('[RelightNode] 开始处理图像Start processing the image...');
            const { bg_image, bg_depth_map, bg_normal_map, has_mask, mask } = detail;
            this.hasMask = has_mask;
            this.modal.showModal();
            
            // 清理之前可能存在的光源
            this.lightSources.forEach(source => {
                if (this.scene) {
                    this.scene.remove(source.light);
                    if (source.lightType === 'spot' && source.light.target) {
                        this.scene.remove(source.light.target);
                    }
                }
                if (source.indicator && source.indicator.parentNode) {
                    source.indicator.remove();
                }
                if (source.targetIndicator && source.targetIndicator.parentNode) {
                    source.targetIndicator.remove();
                }
                if (source.connectionLine && source.connectionLine.parentNode) {
                    source.connectionLine.remove();
                }
            });
            this.lightSources = [];
            this.activeSourceIndex = -1;
            
            const texturePromises = [
                SceneUtils.base64ToTexture(bg_image),
                SceneUtils.base64ToTexture(bg_depth_map),
                SceneUtils.base64ToTexture(bg_normal_map)
            ];
            if (has_mask && mask) {
                texturePromises.push(SceneUtils.base64ToTexture(mask));
                console.log('[RelightNode] 检测到遮罩数据，将加载遮罩纹理Mask data is detected and the mask texture will be loaded');
            }
            const loadedTextures = await Promise.all(texturePromises);
            const texture = loadedTextures[0];
            const depthMap = loadedTextures[1];
            const normalMap = loadedTextures[2];
            const maskTexture = has_mask ? loadedTextures[3] : null;
            console.log('[RelightNode] 纹理加载完成，设置场景Texture loading complete, set up the scene...');
            await this.setupScene(texture, depthMap, normalMap, maskTexture);
            
            // 移除画布上的所有指示器元素
            const existingIndicators = this.canvasContainer.querySelectorAll('.light-source-indicator, .spotlight-target-indicator, .spotlight-connection-line');
            existingIndicators.forEach(indicator => indicator.remove());
            
            const configRestored = await this.restoreLightConfiguration(nodeId);
            if (!configRestored) {
                console.log('[RelightNode] 没有找到已保存的配置，使用空白配置No saved configuration found, using a blank configuration');
                // 没有恢复到配置，保持空白状态
            }
            
            if (this.renderer && this.scene && this.camera) {
                this.renderer.render(this.scene, this.camera);
            }
            
            // 重新绑定添加光源按钮事件
            const addLightBtn = this.modal.querySelector('.relight-btn.add-light');
            if (addLightBtn) {
                // 移除已有的事件监听器，避免重复添加
                const newAddLightBtn = addLightBtn.cloneNode(true);
                addLightBtn.parentNode.replaceChild(newAddLightBtn, addLightBtn);
                
                // 添加新的事件监听器
                newAddLightBtn.addEventListener('click', () => {
                    console.log('[RelightNode] 添加新光源Adding a New Light');
                    if (this.scene) {
                        const newSource = this.createLightSource();
                        console.log('[RelightNode] 新光源已创建New light source created，ID:', newSource.id);
                        this.updateLightSourcesList();
                    } else {
                        console.error('[RelightNode] 场景未初始化，无法添加光源The scene is not initialized, so light sources cannot be added.');
                    }
                });
            }
            
            // 初始化光源列表
            this.updateLightSourcesList();
            
            console.log('[RelightNode] 编辑器显示成功，当前光源数量The editor displays success, the current number of light sources:', this.lightSources.length);
        } catch (error) {
            console.error('[RelightNode] 处理图像时出错Error processing image:', error);
        }
    }

    updateLightColor(index, color) {
        const source = this.lightSources[index];
        if (source) {
            // 更新光源颜色
            source.lightColor = color;
            source.indicatorColor = color; // 同时更新指示器颜色
            const colorObj = new THREE.Color(color);
            source.light.color = colorObj;
    
            // 更新光源列表中的颜色
            const listContainer = this.modal.querySelector('.light-sources-list');
            if (listContainer) {
                const lightItem = listContainer.children[index];
                if (lightItem) {
                    // 更新色板颜色
                    const colorPicker = lightItem.querySelector('.light-color-picker');
                    if (colorPicker) {
                        colorPicker.value = color;
                    }
                    // 更新指示器颜色
                    const indicatorColor = lightItem.querySelector('.light-source-color');
                    if (indicatorColor) {
                        indicatorColor.style.backgroundColor = color;
                    }
                }
            }
    
            // 更新画布中的光源指示器颜色
            if (source.indicator) {
                source.indicator.style.backgroundColor = color;
                source.indicator.style.boxShadow = `0 0 15px ${color}`;
            }
    
            this.render();
        }
    }

    saveLightConfiguration(nodeId) {
        const config = {
            lights: this.lightSources.map(source => ({
                screenX: source.indicator.offsetLeft,
                screenY: source.indicator.offsetTop,
                position: { ...source.position },
                targetPosition: source.targetPosition ? { ...source.targetPosition } : null,
                intensity: source.intensity,
                color: source.lightColor,
                visible: source.light.visible,
                lightType: source.lightType || 'point',
                spotParams: source.spotParams || null,
                pointParams: source.pointParams || null
            })),
            ambientLight: {
                intensity: this.ambientLight.intensity
            },
            material: {
                normalScale: this.normalStrength || 0,
                shininess: this.material.shininess,
                specularStrength: this.material.specular.r
            },
            zOffset: this.zOffset
        };
        if (this.currentNode) {
            this.currentNode.lightConfig = config;
        }
    }

    async restoreLightConfiguration(nodeId) {
        const node = app.graph.getNodeById(nodeId);
        if (!node || !node.lightConfig) return false;
        const config = node.lightConfig;
        this.lightSources.forEach(source => {
            this.scene.remove(source.light);
            if (source.lightType === 'spot' && source.light.target) {
                this.scene.remove(source.light.target);
            }
            if (source.indicator && source.indicator.parentNode) {
                source.indicator.remove();
            }
            if (source.targetIndicator && source.targetIndicator.parentNode) {
                source.targetIndicator.remove();
            }
            if (source.connectionLine && source.connectionLine.parentNode) {
                source.connectionLine.remove();
            }
        });
        this.lightSources = [];
        
        // 设置光源类型选择器为默认值
        const lightTypeSelect = this.modal.querySelector('#lightType');
        if (lightTypeSelect) {
            lightTypeSelect.value = 'point';
        }
        
        for (const lightConfig of config.lights) {
            // 临时设置类型选择器的值，这样创建光源时会使用正确的类型
            if (lightConfig.lightType && lightTypeSelect) {
                lightTypeSelect.value = lightConfig.lightType;
            }
            
            const source = this.createLightSource();
            source.position = { ...lightConfig.position };
            source.light.position.set(
                lightConfig.position.x,
                lightConfig.position.y,
                lightConfig.position.z
            );
            source.intensity = lightConfig.intensity;
            source.light.intensity = lightConfig.intensity;
            source.light.visible = lightConfig.visible;
            source.lightType = lightConfig.lightType || 'point';
            
            // 恢复聚光灯参数
            if (source.lightType === 'spot' && lightConfig.spotParams) {
                source.spotParams = { ...lightConfig.spotParams };
                source.light.angle = lightConfig.spotParams.angle;
                source.light.penumbra = lightConfig.spotParams.penumbra;
                
                // 恢复目标点位置
                if (lightConfig.targetPosition) {
                    source.targetPosition = { ...lightConfig.targetPosition };
                    source.light.target.position.set(
                        lightConfig.targetPosition.x,
                        lightConfig.targetPosition.y,
                        lightConfig.targetPosition.z
                    );
                } else {
                    // 如果没有保存目标点，使用默认位置
                    source.targetPosition = {
                        x: lightConfig.position.x,
                        y: lightConfig.position.y - 1,
                        z: 0
                    };
                    source.light.target.position.set(
                        source.targetPosition.x,
                        source.targetPosition.y,
                        source.targetPosition.z
                    );
                }
            }
            
            // 恢复点光源参数
            if (source.lightType === 'point' && lightConfig.pointParams) {
                source.pointParams = { ...lightConfig.pointParams };
                source.light.distance = lightConfig.pointParams.radius;
            }
            
            if (lightConfig.color) {
                this.updateLightColor(this.lightSources.length - 1, lightConfig.color);
            }
            
            if (this.canvasContainer && source.indicator) {
                source.indicator.style.left = `${lightConfig.screenX}px`;
                source.indicator.style.top = `${lightConfig.screenY}px`;
                source.indicator.style.opacity = lightConfig.visible ? '0.7' : '0.2';
                
                // 立即更新聚光灯连接线
                if (source.lightType === 'spot') {
                    // 确保DOM元素已完全加载并计算好尺寸
                    setTimeout(() => {
                        this.updateSpotlightLine(source);
                        console.log('[RelightNode] 更新聚光灯连接线Update spotlight connector:', source.name);
                    }, 50);
                }
            }
        }
        
        if (config.ambientLight && this.ambientLight) {
            this.ambientLight.intensity = config.ambientLight.intensity;
            const ambientLightSlider = this.modal.querySelector('#ambientLight');
            if (ambientLightSlider) {
                ambientLightSlider.value = config.ambientLight.intensity;
            }
        }
        if (config.material && this.material) {
            // 恢复法线强度
            if (config.material.normalScale !== undefined) {
                this.normalStrength = config.material.normalScale;
                this.material.normalScale.set(this.normalStrength, this.normalStrength);
                
                const normalStrengthSlider = this.modal.querySelector('#normalStrength');
                if (normalStrengthSlider) {
                    normalStrengthSlider.value = this.normalStrength;
                }
            } else {
                // 默认设置为0
                this.material.normalScale.set(0, 0);
                this.normalStrength = 0;
            }
            
            // 恢复其他材质参数，但固定为0
            this.material.shininess = 0;
            this.material.specular.setRGB(0, 0, 0);
        }
        if (config.zOffset !== undefined) {
            this.zOffset = config.zOffset;
            const zOffsetSlider = this.modal.querySelector('#zOffset');
            if (zOffsetSlider) {
                zOffsetSlider.value = config.zOffset;
            }
        }
        
        // 确保所有聚光灯连接线都更新
        setTimeout(() => {
            this.lightSources.forEach(source => {
                if (source.lightType === 'spot') {
                    this.updateSpotlightLine(source);
                }
            });
        }, 100);
        
        this.updateLightSourcesList();
        this.render();
        return true;
    }

    async processWithoutDialog(nodeId, detail) {
        try {
            this.currentNode = app.graph.getNodeById(nodeId);
            if (!this.currentNode) {
                console.error('[RelightNode] 找不到节点Node not found:', nodeId);
                return;
            }
            
            console.log('[RelightNode] 开始无弹窗处理图像Start processing images without pop-up window...');
            const { bg_image, bg_depth_map, bg_normal_map, has_mask, mask } = detail;
            this.hasMask = has_mask;
            
            // 加载纹理
            const texturePromises = [
                SceneUtils.base64ToTexture(bg_image),
                SceneUtils.base64ToTexture(bg_depth_map),
                SceneUtils.base64ToTexture(bg_normal_map)
            ];
            
            if (has_mask && mask) {
                texturePromises.push(SceneUtils.base64ToTexture(mask));
            }
            
            const loadedTextures = await Promise.all(texturePromises);
            const texture = loadedTextures[0];
            const depthMap = loadedTextures[1];
            const normalMap = loadedTextures[2];
            const maskTexture = has_mask ? loadedTextures[3] : null;
            
            // 设置场景但不显示
            if (!this.scene) {
                // 首次创建场景
                this.scene = new THREE.Scene();
                const imageWidth = texture.image.width;
                const imageHeight = texture.image.height;
                const imageAspect = imageWidth / imageHeight;
                
                const frustumHeight = 2;
                const frustumWidth = frustumHeight * imageAspect;
                
                this.camera = new THREE.OrthographicCamera(
                    frustumWidth / -2,
                    frustumWidth / 2,
                    frustumHeight / 2,
                    frustumHeight / -2,
                    0.1,
                    1000
                );
                this.camera.position.z = 5;
                
                this.renderer = new THREE.WebGLRenderer({
                    antialias: true,
                    preserveDrawingBuffer: true,
                    alpha: true
                });
                
                this.ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
                this.scene.add(this.ambientLight);
                this.isSceneSetup = true;
                
                // 隐藏渲染器设置
                this.renderer.setSize(imageWidth, imageHeight);
            }
            
            // 设置临时场景
            await this.setupTemporaryScene(texture, depthMap, normalMap, maskTexture);
            
            // 尝试恢复配置，如果没有则使用默认配置
            const configRestored = await this.restoreLightConfiguration(nodeId);
            if (!configRestored) {
                // 没有现有配置，创建默认配置
                this.createDefaultLight();
            }
            
            // 渲染场景
            this.renderer.render(this.scene, this.camera);
            
            // 上传结果
            this.uploadCanvasResult(this.renderer.domElement, nodeId);
            
            // 保存当前配置以供将来使用
            this.saveLightConfiguration(nodeId);
            
            console.log('[RelightNode] 无弹窗处理完成No pop-up window processing completed');
        } catch (error) {
            console.error('[RelightNode] 无弹窗处理错误No pop-up window processing error:', error);
        }
    }

    async setupTemporaryScene(texture, depthMap, normalMap, maskTexture = null) {
        // 类似setupScene但简化版本，仅用于无弹窗处理
        try {
            const imageWidth = texture.image.width;
            const imageHeight = texture.image.height;
            const imageAspect = imageWidth / imageHeight;
            
            // 更新相机视锥体以匹配新图像的宽高比
            const frustumHeight = 2;
            const frustumWidth = frustumHeight * imageAspect;
            
            this.camera.left = frustumWidth / -2;
            this.camera.right = frustumWidth / 2;
            this.camera.top = frustumHeight / 2;
            this.camera.bottom = frustumHeight / -2;
            this.camera.updateProjectionMatrix();
            
            // 设置渲染器尺寸
            this.renderer.setSize(imageWidth, imageHeight);
            
            // 创建或更新几何体
            const geometry = new THREE.PlaneGeometry(2 * imageAspect, 2, 32, 32);
            
            // 获取法线强度值（如果已存在）
            this.normalStrength = this.normalStrength || 0;
            
            // 创建材质
            let material;
            if (maskTexture) {
                material = SceneUtils.createMaskedMaterial(texture, depthMap, normalMap, maskTexture, this.normalStrength);
            } else {
                material = SceneUtils.createSimpleMaterial(texture, depthMap, normalMap, this.normalStrength);
            }
            
            // 更新或创建网格
            if (this.mesh) {
                this.mesh.geometry.dispose();
                this.mesh.geometry = geometry;
                this.mesh.material.dispose();
                this.mesh.material = material;
            } else {
                this.mesh = new THREE.Mesh(geometry, material);
                this.scene.add(this.mesh);
            }
            
            this.material = material;
            this.renderer.setClearColor(0x000000, 0);
            
            return true;
        } catch (error) {
            console.error('[RelightNode] 临时场景设置错误Temporary scene setting error:', error);
            return false;
        }
    }

    createDefaultLight() {
        this.lightSources.forEach(source => {
            this.scene.remove(source.light);
            if (source.lightType === 'spot' && source.light.target) {
                this.scene.remove(source.light.target);
            }
        });
        this.lightSources = [];
        
        const defaultLight = {
            id: Date.now(),
            name: "默认光源",
            // 创建默认点光源
            light: new THREE.PointLight(0xffffff, 1.0, 10, 2),
            position: { x: 0, y: 0, z: 1.0 },
            intensity: 1.0,
            lightColor: '#ffffff',
            visible: true,
            lightType: 'point',
            pointParams: {
                radius: 10
            }
        };
        
        // 直接设置点光源位置
        defaultLight.light.position.set(0, 0, 1);
        this.scene.add(defaultLight.light);
        this.lightSources.push(defaultLight);
        
        if (this.ambientLight) {
            this.ambientLight.intensity = 0.2;
        }
        
        return defaultLight;
    }

    createTargetIndicator(color) {
        const indicator = document.createElement('div');
        indicator.className = 'spotlight-target-indicator';
        indicator.style.backgroundColor = color;
        return indicator;
    }

    updateSpotlightLine(source) {
        if (!source.connectionLine || !source.indicator || !source.targetPosition) return;
        
        const lightRect = source.indicator.getBoundingClientRect();
        const canvasRect = this.canvasContainer.getBoundingClientRect();
        
        // 计算光源中心点
        const lightX = lightRect.left + lightRect.width/2 - canvasRect.left;
        const lightY = lightRect.top + lightRect.height/2 - canvasRect.top;
        
        // 如果有目标点指示器，使用它的位置
        let targetX, targetY;
        if (source.targetIndicator && source.targetIndicator.style.display !== 'none') {
            const targetRect = source.targetIndicator.getBoundingClientRect();
            targetX = targetRect.left + targetRect.width/2 - canvasRect.left;
            targetY = targetRect.top + targetRect.height/2 - canvasRect.top;
        } else {
            // 否则使用目标点在3D空间中的位置计算屏幕位置
            // 这需要将3D空间点投影到屏幕空间
            // 简化处理：用已有信息估算
            const displayRect = this.displayRenderer.domElement.getBoundingClientRect();
            const targetPosNormalized = {
                x: (source.targetPosition.x + 1) / 2,
                y: (1 - source.targetPosition.y) / 2
            };
            targetX = displayRect.left + displayRect.width * targetPosNormalized.x - canvasRect.left;
            targetY = displayRect.top + displayRect.height * targetPosNormalized.y - canvasRect.top;
        }
        
        // 计算线段长度和角度
        const length = Math.sqrt(Math.pow(targetX - lightX, 2) + Math.pow(targetY - lightY, 2));
        const angle = Math.atan2(targetY - lightY, targetX - lightX) * 180 / Math.PI;
        
        // 设置线段样式
        source.connectionLine.style.width = `${length}px`;
        source.connectionLine.style.left = `${lightX}px`;
        source.connectionLine.style.top = `${lightY}px`;
        source.connectionLine.style.transform = `rotate(${angle}deg)`;
        source.connectionLine.style.transformOrigin = 'left center';
        source.connectionLine.style.display = 'block';
    }
}