Three.js - 镜头炫光 Lensflare

最新推荐文章于 2023-11-01 16:30:40 发布

「已注销」

最新推荐文章于 2023-11-01 16:30:40 发布

阅读量2.8k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81358069

版权

three.js 中有很多光源，但是对于想要模拟类似，看向太阳时出现的那种光晕效果，需要使用镜头炫光 Lensflare 准确来说它不属于光源的分类，因为它继承自Mesh对象。
创建镜头炫光效果，需要库文件Lensflare.js的支持，它在目录examples/js/objects/下存放着。
**示例：**https://ithanmang.gitee.io/threejs/home/201808/20180802/01-lensflare.html
效果图
这里写图片描述

1、使用步骤

1、使用镜头光晕效果需要加载材质贴图，因为它本身就是一种Mesh对象
例如本示例中加载力两张图片，来模拟眩光效果

let loader = new THREE.TextureLoader();
// 添加镜头炫光
let textFlare0 = loader.load("../../textures/lensflare/lensflare0_alpha.png");
let textFlare3 = loader.load("../../textures/lensflare/lensflare3.png");

示例图片分别在three.js的example文件目录下可以找到。
2、加入一个点光源PointLight

light = new THREE.PointLight(0xffffff, 1, 2000);

3、实例化Lensflare

let lensFlare = new THREE.Lensflare();

4、炫光是一个组合，每个光晕都是一个LensflareElement对象，在这个对象中可以调节光晕的属性值

lensFlare.addElement(new THREE.LensflareElement(textFlare0, 500, 0, light.color));
        lensFlare.addElement(new THREE.LensflareElement(textFlare3, 60, 0.6, light.color));
        lensFlare.addElement(new THREE.LensflareElement(textFlare3, 100, 0.7, light.color));
        lensFlare.addElement(new THREE.LensflareElement(textFlare3, 60, 0.9, light.color));
        lensFlare.addElement(new THREE.LensflareElement(textFlare3, 70, 1, light.color));

上面加入了五个光晕效果，第一个用来模拟太阳，其余的用来模拟光源，其中光晕的大小、距离、颜色、材质，都可以根据需要调节。
5、将光晕添加到聚光灯中，并且将PointLight加入到场景Scene，示例中的阴影效果是平行光DirectionalLight投射的.

light.add(lensFlare);
light.position.set(-100, 50, 0);
scene.add(light);

以上五步就可以实现光晕效果

2、LensflareElement 构造函数

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color, blending : Materials )

2.1、参数

texture - 炫光的材质.
size - (可选) 炫光的尺寸大小，单位是像素
distance - (可选) 光源到相机的距离，为0时在光源处，为1时在相机处，0 - 1取值
color - (可选) 炫光的颜色
blending - (可选) 炫光的混合模式- 默认为 THREE.NormalBlending

3、示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lensflare 镜头炫光</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <s

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js - 镜头炫光 Lensflare

three.js 中有很多光源，但是对于想要模拟类似，看向太阳时出现的那种光晕效果，需要使用镜头炫光 Lensflare 准确来说它不属于光源的分类，因为它继承自Mesh对象。创建镜头炫光效果，需要库文件Lensflare.js的支持，它在目录examples/js/objects/下存放着。示例：http://ithanmang.com/threeJs/home/01-lensflare...
复制链接

扫一扫