精灵辉光效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵辉光效果</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #111; }
        #container { width: 100vw; height: 100vh; }
        #info { 
            position: absolute; top: 5px; left: 5px;
            color: white; background: rgba(0, 0, 0, 0);
            padding: 10px; border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="info">点击立方体添加辉光，点击空白处清除辉光</div>

// ========== 初始化 ==========
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 5, 10);
        
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('container').appendChild(renderer.domElement);
        
        const controls = new OrbitControls(camera, renderer.domElement);
        
        // 物体数组用于点击检测
        var objects = [];
        // ========== 创建场景 ==========
        // 光源
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(5, 10, 5);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0xffffff, 0.3));
        
        
        // 网格辅助
        const gridHelper = new THREE.GridHelper(20, 20);
        gridHelper.position.y = -1.99;
        scene.add(gridHelper);
        
        // ========== 创建测试物体 ==========
        // 立方体
        const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
        const textureLoader = new THREE.TextureLoader();
        // 加载木纹纹理 - 使用一个可靠的图片URL
        textureLoader.load(
            'https://threejs.org/examples/textures/water.jpg',//在线图片url路径(在线图片须在加载成功后方可创建材质)
            function(texture) {
                const material = new THREE.MeshStandardMaterial({
                    map: texture,           // 颜色贴图（漫反射贴图）
                });
            
                // 创建立方体
                const cube = new THREE.Mesh(cubeGeometry, material);
                scene.add(cube);
                objects.push(cube);
            },// 加载成功执行的回调函数
        );
        
        // 球体
        const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
        const sphereMaterial = new THREE.MeshStandardMaterial({ 
            color: 0xff4444,
            roughness: 0.2
        });
        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.position.set(4, 0, 0);
        scene.add(sphere);
        objects.push(sphere);
        // 圆柱体
        const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 3, 32);
        const cylinderMaterial = new THREE.MeshStandardMaterial({ 
            color: 0x44ff44,
            roughness: 0.4
        });
        const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
        cylinder.position.set(-4, 0, 0);
        scene.add(cylinder);
        objects.push(cylinder);
        
        
        // ========== 辉光系统 ==========
        let currentGlowSprite = null;  // 当前辉光精灵
        let currentGlowObject = null;  // 当前发光的物体
        
         // 创建辉光精灵
        function createGlowSprite(color = 0x00ffff, size = 3.5) {
            const canvas = document.createElement('canvas');// 创建Canvas元素
            canvas.width = 256;// 纹理分辨率
            canvas.height = 256;
            const ctx = canvas.getContext('2d');
            // 创建径向渐变（中心亮，边缘透明）
            const gradient = ctx.createRadialGradient(128, 128, 0, 128, 128, 128);
            const r = (color >> 16) & 255;
            const g = (color >> 8) & 255;
            const b = color & 255;
             // 设置渐变点
            gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 1.0)`); // 中心完全不透明
            gradient.addColorStop(0.5, `rgba(${r}, ${g}, ${b}, 0.6)`);// 中间半透明
            gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`); // 边缘完全透明
             // 绘制渐变
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, 256, 256);
             // 创建纹理对象
            const texture = new THREE.CanvasTexture(canvas);
            texture.minFilter = THREE.LinearFilter;// 缩小过滤
            texture.magFilter = THREE.LinearFilter;// 放大过滤
            //创建SpriteMaterial（辉光材质）
            const spriteMaterial = new THREE.SpriteMaterial({
                map: texture, // 使用的纹理
                color: new THREE.Color(color), // 基础颜色
                transparent: true,// 启用透明度
                opacity: 0.8, // 整体透明度
                blending: THREE.AdditiveBlending, // 叠加混合模式
                depthWrite: false,// 禁用深度写入
                depthTest: false // 禁用深度测试
            });
            //创建Sprite（精灵对象）
            const sprite = new THREE.Sprite(spriteMaterial);
            sprite.scale.set(size, size, 1); // 设置大小
            
            return sprite;
        }
        
        // 为物体添加辉光
        function addGlowToObject(object, color = 0x00ffff) {
            // 先清除当前辉光
            clearCurrentGlow();
            
            // 创建辉光精灵
            const glowSprite = createGlowSprite(color, 3.5);
            object.add(glowSprite);
            
            // 添加自发光效果
            object.material.emissive = new THREE.Color(color);
            object.material.emissiveIntensity = 0.3;
            
            // 保存引用
            currentGlowSprite = glowSprite;
            currentGlowObject = object;
        }
        
        // 清除当前辉光
        function clearCurrentGlow() {
            if (currentGlowObject && currentGlowSprite) {
                // 从物体上移除精灵
                currentGlowObject.remove(currentGlowSprite);
                
                // 移除自发光效果
                currentGlowObject.material.emissive = new THREE.Color(0x000000);
                currentGlowObject.material.emissiveIntensity = 0;
            }
            
            currentGlowSprite = null;
            currentGlowObject = null;
        }
        
        // ========== 点击交互 ==========
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
        
        renderer.domElement.addEventListener('click', (event) => {
            // 计算鼠标标准化坐标
            const rect = renderer.domElement.getBoundingClientRect();
            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
            
            // 射线检测
            raycaster.setFromCamera(mouse, camera);
            
            // 检测与物体的交点
            const objectIntersects = raycaster.intersectObjects(objects);
            
            if (objectIntersects.length > 0) {
                // 点击了物体
                const clickedObject = objectIntersects[0].object;
                
                // 如果点击的是当前发光的物体，则清除辉光
                if (clickedObject === currentGlowObject) {
                    clearCurrentGlow();
                } else {
                    // 否则为点击的物体添加辉光
                    addGlowToObject(clickedObject, 0x00ffff);
                }
                
            } else 
                clearCurrentGlow();
            
        });
        
        // ========== 渲染循环 ==========
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
        
        // ========== 窗口调整 ==========
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
        
        animate();
    </script>
</body>
</html>