three Lensflare 镜头光晕

在 Three.js 中，Lensflare 是一种用来模拟镜头光晕效果的类，常用于创建光源周围的光晕或耀斑效果，特别是当镜头朝向强光源（如太阳或强烈的灯光）时。它通过一个或多个纹理贴图来实现这种效果。
Lensflare 是通过在光源位置添加多个叠加图层（通常是半透明的纹理）来实现的，这些图层会在相机视角的变化下产生不同的光晕效果。要使用 Lensflare，首先需要创建一个 Lensflare 对象，然后添加多个光晕纹理，并根据需要调整每个纹理的位置、亮度等属性。

在 Three.js 中，Sky 是一个用于生成逼真天空环境的模块，可以创建类似天空穹顶的效果，通过改变太阳的位置、散射、曝光等参数，可以模拟不同时间和天气条件下的天空效果。Sky 通常用于户外场景，以提高环境的真实感。

Lensflare 没有属性继承基类 Mesh

js 复制代码

    // 添加光源
    const light = new THREE.PointLight(0xffffff, 1.5, 2000);
    light.position.set(0, 200, 0);
    scene.add(light);

    // 加载 Lensflare 纹理
    const textureLoader = new THREE.TextureLoader();
    const textureFlare0 = textureLoader.load(imgPng);
    const textureFlare3 = textureLoader.load(person);

    // 创建 Lensflare 对象
    const lensflare = new Lensflare();
    lensflare.addElement(new LensflareElement(textureFlare0, 300, 0));     // 主光晕
    lensflare.addElement(new LensflareElement(textureFlare3, 10, 0.6));    // 辅助光晕
    lensflare.addElement(new LensflareElement(textureFlare3, 30, 0.7));
    lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.9));
    lensflare.addElement(new LensflareElement(textureFlare3, 30, 1));

    // 将 Lensflare 添加到光源
    light.add(lensflare);

Sky 天空环境有六个属性

js 复制代码

    // 创建 Sky 对象
    const sky = new Sky();
    sky.scale.setScalar(10000);  // 设置天空范围
    scene.add(sky);
    // 设置太阳的参数
    const sun = new THREE.Vector3();
    const effectController = {
        turbidity: 10,      // 大气浑浊度
        rayleigh: 2,        // 瑞利散射强度
        mieCoefficient: 0.005,  // 米氏散射系数
        mieDirectionalG: 0.8,   // 米氏散射方向
        elevation: 2,       // 太阳的仰角
        azimuth: 180,       // 太阳的方位角
        exposure: renderer.toneMappingExposure  // 曝光设置
    };
    // 更新太阳位置和天空
    function updateSun() {
        const phi = THREE.MathUtils.degToRad(90 - effectController.elevation);
        const theta = THREE.MathUtils.degToRad(effectController.azimuth);
        sun.setFromSphericalCoords(1, phi, theta);  // 通过球坐标系设置太阳位置
        sky.material.uniforms['sunPosition'].value.copy(sun);
        renderer.toneMappingExposure = effectController.exposure;  // 设置曝光
    }
    // 初始调用更新太阳位置
    updateSun();
    // 动画控制器
    let timeOfDay = 0;  // 时间变量，从 0 到 1 代表一天
    const dayDuration = 24;  // 一天的时长（小时）
    // 创建 OrbitControls 实例
    const controls = new OrbitControls(camera, renderer.domElement);
    // 设置控制器的目标点
    controls.target.set(0, 0, 0); // 将目标点设置为立方体的中心
    function animate() {
        requestAnimationFrame(animate);
        // 每帧更新时间
        timeOfDay += 1 / (dayDuration * 60);  // 这里的 60 代表每分钟变化一次
        if (timeOfDay > 1) timeOfDay = 0;  // 时间重置，模拟新的一天
        // 计算太阳的方位角和仰角
        effectController.azimuth = timeOfDay * 360;  // 太阳的方位角，模拟全天360度旋转
        effectController.elevation = Math.sin(timeOfDay * Math.PI) * 90;  // 太阳的仰角，从 -90 到 +90
        // 更新太阳的位置和天空
        updateSun();
        controls.update(); // 更新 OrbitControls
        renderer.render(scene, camera);
    }
    animate();

属性

turbidity : Number 在 Three.js 中，turbidity 是一个表示大气浑浊度的参数，通常用于模拟大气中的灰尘、水汽等微粒对阳光的散射效果。它主要用于设置 Sky 对象中的天空模型，使天空呈现不同的清晰或浑浊的效果。

js 复制代码

turbidity 的取值范围和效果
取值范围：一般建议的值在 0 到 20 之间。
    低值：低 turbidity 值（如 0 到 2）表示清澈的天空，类似于干净的高空环境，蓝天更深邃，视野更清晰。
    高值：较高的 turbidity 值（如 10 或以上）表示浑浊的空气环境，适合模拟雾霾、沙尘或湿度较高的天气。随着值增大，天空的颜色会逐渐偏向灰色或黄色，太阳的光线变得更加模糊。

rayleigh : Number 在 Three.js 中，rayleigh 参数用于控制瑞利散射的强度。瑞利散射是指光线在大气中被分子散射的现象，通常用于模拟蓝色的天空效果。rayleigh 值越高，天空的蓝色调会越深，适合模拟晴朗的白天天空。

js 复制代码

rayleigh 的取值范围和效果
  取值范围：一般推荐值在 0 到 4 之间。
    低值：较低的 rayleigh 值（如 0.1 到 0.5）会减少蓝光的散射，使天空偏暗或呈现白色光的效果，适合模拟昏暗或多云天气。
    高值：较高的 rayleigh 值（如 2 到 4）会增强蓝光的散射，天空变得更加清澈湛蓝，适合模拟晴朗无云的环境。

mieCoefficient : Number 在 Three.js 中，mieCoefficient 参数用于控制米氏散射的系数。米氏散射（Mie Scattering）是大气中的较大微粒（如尘埃、雾霾或水滴）对光线的散射，与瑞利散射不同，它更倾向于前向散射，并在场景中生成更强的光晕效果，尤其是靠近光源的区域。

js 复制代码

mieCoefficient 的取值范围和效果
  取值范围：一般建议值在 0 到 0.1 之间。
    低值：较低的 mieCoefficient 值（如 0.001 到 0.01）表示较少的米氏散射，适合模拟清洁的大气环境，这样阳光效果更加清晰，眩光较少。
    高值：较高的 mieCoefficient 值（如 0.05 或更高）则表示更多的米氏散射，适合模拟雾霾或湿度较高的场景，使光源附近的光晕效果更明显，天空的整体亮度会增大，并显得更加柔和。
    米氏散射影响：当 mieCoefficient 增大时，会增加光源附近的光晕效果，适合表现大气中大量微粒的情景，例如雾霾天气、晨雾或多云天气。
    结合其他参数：通常会配合 turbidity 和 rayleigh 参数一起使用，以便生成更真实的天空效果。

mieDirectionalG : Number 在 Three.js 中，mieDirectionalG 是用于控制米氏散射方向性的参数。米氏散射方向性可以影响光在前向（面向光源方向）和后向（背离光源方向）散射的强度。mieDirectionalG 的值决定了散射光的聚焦程度，适用于模拟有光晕的天空或雾霾等大气效果。

js 复制代码

mieDirectionalG 的取值范围和效果
  取值范围：通常在 0 到 1 之间，接近 0 表示各方向散射较均匀，接近 1 表示更强的前向散射。
    低值：较低的 mieDirectionalG 值（如 0.1 到 0.3）表示均匀的散射，光晕效果分散，不集中。
    高值：较高的 mieDirectionalG 值（如 0.8 到 1）则会产生更集中的前向散射，使光源周围出现更明显的光晕效果，适合模拟雾霾较重、光线穿透性强的天气。
    米氏散射方向性影响：随着 mieDirectionalG 值增加，光的散射集中在光源前向区域，产生更强的光晕，适合表现大气中微粒较多的情况。
    结合 mieCoefficient：mieDirectionalG 通常与 mieCoefficient 一起使用，以调整散射光的强度和方向性，从而达到更细腻的天空渲染效果。

sunPosition : Vector3 在 Three.js 中，sunPosition 是一个 Vector3 对象，用于设置天空模型中的太阳位置。它决定了天空中光源的方向和位置，影响太阳光线照射的角度，从而影响整个场景的光照效果。通过调整 sunPosition，可以模拟不同时间和不同气候条件下的阳光照射效果。

js 复制代码

sunPosition 的作用
  影响天空光照：sunPosition 决定了太阳光在天空中的位置，影响从太阳方向照射到场景中的光照效果。
    模拟不同时间的光照效果：通过改变 sunPosition 的坐标，可以模拟一天中的不同时间，例如日出、正午、日落等，产生不同的光照角度。
    影响阴影效果：太阳的位置也会影响场景中的阴影方向和强度。
    
    太阳位置的计算：在上面的例子中，sunPosition.set(Math.sin(effectController.azimuth), Math.sin(effectController.elevation), Math.cos(effectController.azimuth)) 计算了一个基于 azimuth（方位角）和 elevation（高度角）设置的太阳位置。
    azimuth 代表太阳从水平面上（0到360度）旋转的角度，通常用来确定太阳在天空中的方位。
    elevation 代表太阳相对于地平线的高度，通常用来模拟太阳升高或降低。
    动态变化：通过动态修改 sunPosition，你可以模拟太阳的运动，比如一天中的不同时间，甚至是季节变化。

up : Vector3 在 Three.js 中，Sky 对象的 up 属性用于设置天空模型的"上"方向，它决定了天空在场景中的旋转方向。Sky 类是用于创建大气和天空效果的对象，通过设置 up 属性，你可以控制天空的旋转方向，以适应不同的场景需求。

js 复制代码

up 属性
    类型：Vector3
    默认值：(0, 1, 0)，表示 y 轴为"上"方向。
    作用：up 属性用于控制天空中光照方向和大气效果的旋转。例如，在模拟日出或日落等场景时，up 可以通过旋转来调整天空的朝向。
    
    sky.material.uniforms['up'].value.set(0, 1, 0)：在上述代码中，我们设置了天空的 up 属性为 (0, 1, 0)，这意味着天空将以 y 轴为"上"方向。如果需要调整天空的旋转，可以修改这个向量的值，例如：
    sky.material.uniforms['up'].value.set(1, 0, 0)：将"上"方向设置为 x 轴。
    sky.material.uniforms['up'].value.set(0, 0, 1)：将"上"方向设置为 z 轴。
    影响天空效果：up 属性的设置会影响太阳、天空和其他大气效果的方向，因此调整 up 可以在不同的场景中实现不同的光照和气候效果。

three Lensflare 镜头光晕

Lensflare 没有属性 继承基类 Mesh

Sky 天空环境 有六个属性

Lensflare 没有属性继承基类 Mesh

Sky 天空环境有六个属性