当前位置：首页 > news >正文

学习threejs，使用Lensflare模拟镜头眩光

news 2026/2/8 15:05:22

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.Lensflare
二、🍀使用Lensflare模拟镜头眩光
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用Lensflare模拟镜头眩光，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Lensflare

THREE.Lensflare 是一种用来模拟镜头光晕效果的类，常用于创建光源周围的光晕或耀斑效果，特别是当镜头朝向强光源（如太阳或强烈的灯光）时。它通过一个或多个纹理贴图来实现这种效果。

构造函数：
THREE.Lensflare(texture, size, distance, blending, color )

texture：镜头炫光的纹理，决定炫光的样子
size：镜头炫光的大小，单位是像素
distance：设值炫光与当前位置的距离。
lending：融合模式决定他们将如何融合在一起,默认的融合模式是THREE.AdditiveBlending,提供半透明的炫光
color：镜头炫光显示的颜色

方法：

add(element) 向镜头眩光效果中添加一个元素。 element：一个包含 texture、color、distance、size 和 lending 属性的对象。
remove(element) 从镜头眩光效果中移除一个元素。 element：要移除的眩光元素对象。
dispose() 释放镜头眩光使用的资源。当不再需要镜头眩光效果时可以调用此方法来释放相关资源。

二、🍀使用Lensflare模拟镜头眩光

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene
3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
4、创建THREE.AmbientLight环境光源ambiLight，scene场景加入环境光源ambiLight。创建THREE.SpotLight聚光灯光源spotLight0，设置光源位置和方向，scene场景加入spotLight0。创建THREE.DirectionalLight平行光源spotLight，设置平行光源位置、投影信息，scene添加平行光源spotLight。
5、加载几何模型：创建二维平面网格对象plane，plane使用‘grasslight-big.jpg’草地贴图，设置plane的旋转角度，scene场景加入plane。创建立方体网格对象cube，设置cube的位置和投影，scene场景加入cube。创建球体网格对象sphere，设置sphere的位置和投影，scene场景加入sphere。创建THREE.LensFlare镜头炫光控件lensFlare，lensFlare添加5种炫光要素，scene场景加入lensFlare。定义render方法，实现立方体cube旋转，球体sphere跳动的方法。具体代码参考下面代码样例。
6、加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>学习threejs，使用Lensflare模拟镜头眩光</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- js 代码 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建场景，设置场景云雾效果var scene = new THREE.Scene();scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);// 创建投影相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器，并设置大小var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});renderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;// 创建草地地面var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");textureGrass.wrapS = THREE.RepeatWrapping;textureGrass.wrapT = THREE.RepeatWrapping;textureGrass.repeat.set(4, 4);var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.receiveShadow = true;// 旋转草地平面角度plane.rotation.x = -0.5 * Math.PI;plane.position.x = 15;plane.position.y = 0;plane.position.z = 0;// 场景中添加草地平面scene.add(plane);// 创建立方体几何体var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.castShadow = true;// 设置立方体位置cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;// 三维场景中添加立方体scene.add(cube);// 创建球体几何体var sphereGeometry = new THREE.SphereGeometry(4, 25, 25);var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);// 设置球体位置和投影sphere.position.x = 10;sphere.position.y = 5;sphere.position.z = 10;sphere.castShadow = true;// 三维场景中添加球体scene.add(sphere);// 设置相机位置和方向camera.position.x = -20;camera.position.y = 15;camera.position.z = 45;camera.lookAt(new THREE.Vector3(10, 0, 0));// 创建并添加环境光var ambiColor = "#1c1c1c";var ambientLight = new THREE.AmbientLight(ambiColor);scene.add(ambientLight);// 创建并添加聚光灯光源var spotLight0 = new THREE.SpotLight(0xcccccc);spotLight0.position.set(-40, 60, -10);spotLight0.lookAt(plane);scene.add(spotLight0);var target = new THREE.Object3D();target.position = new THREE.Vector3(5, 0, 0);var pointColor = "#ffffff";
//    var spotLight = new THREE.SpotLight( pointColor);// 创建平行光源var spotLight = new THREE.DirectionalLight(pointColor);spotLight.position.set(30, 10, -50);spotLight.castShadow = true;spotLight.shadowCameraNear = 0.1;spotLight.shadowCameraFar = 100;spotLight.shadowCameraFov = 50;spotLight.target = plane;spotLight.distance = 0;spotLight.shadowCameraNear = 2;spotLight.shadowCameraFar = 200;spotLight.shadowCameraLeft = -100;spotLight.shadowCameraRight = 100;spotLight.shadowCameraTop = 100;spotLight.shadowCameraBottom = -100;spotLight.shadowMapWidth = 2048;spotLight.shadowMapHeight = 2048;scene.add(spotLight);// renderer渲染器绑定页面要素document.getElementById("WebGL-output").appendChild(renderer.domElement);// call the render functionvar step = 0;// used to determine the switch point for the light animationvar invert = 1;var phase = 0;var controls = new function () {this.rotationSpeed = 0.03;this.bouncingSpeed = 0.03;this.ambientColor = ambiColor;this.pointColor = pointColor;this.intensity = 0.1;this.distance = 0;this.exponent = 30;this.angle = 0.1;this.debug = false;this.castShadow = true;this.onlyShadow = false;this.target = "Plane";};var gui = new dat.GUI();gui.addColor(controls, 'ambientColor').onChange(function (e) {ambientLight.color = new THREE.Color(e);});gui.addColor(controls, 'pointColor').onChange(function (e) {spotLight.color = new THREE.Color(e);});gui.add(controls, 'intensity', 0, 5).onChange(function (e) {spotLight.intensity = e;});var textureFlare0 = THREE.ImageUtils.loadTexture("../assets/textures/lensflare/lensflare0.png");var textureFlare3 = THREE.ImageUtils.loadTexture("../assets/textures/lensflare/lensflare3.png");var flareColor = new THREE.Color(0xffaacc);var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);lensFlare.position.copy(spotLight.position);scene.add(lensFlare);render();function render() {stats.update();// 动画旋转立方体cube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;// 动画实现球体跳动step += controls.bouncingSpeed;sphere.position.x = 20 + ( 10 * (Math.cos(step)));sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));requestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}};window.onload = init;</script>
</body>
</html>

效果如下：
在这里插入图片描述

学习threejs，使用Lensflare模拟镜头眩光

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.Lensflare 二、&…...

编程日记 2025/2/10 0:19:55

redis高级数据结构布隆过滤器

文章目录背景什么是布隆过滤器Redis 中的布隆过滤器布隆过滤器使用注意事项实现原理空间占用估计背景我们在使用新闻客户端看新闻时，它会给我们不停地推荐新的内容，它每次推荐时要去重，去掉那些已经看过的内容。问题来了，新闻…...

编程日记 2025/2/10 0:09:43

基础环境：centos7.9 创建日志存放目录 mkdir -p /opt/supervisor/log安装相关工具 yum install -y perl net-tools numactl gcc python-devel配置yum源 sudo vim /etc/yum.repos.d/mysql-community.repo [mysql-connectors-community] nameMySQL Connectors Com…...

编程日记 2025/2/10 0:07:40

Golang：精通sync/atomic 包的Atomic 操作

在本指南中，我们将探索sync/atomic包的细节，展示如何编写更安全、更高效的并发代码。无论你是经验丰富的Gopher还是刚刚起步，你都会发现有价值的见解来提升Go编程技能。让我们一起开启原子运算的力量吧！ 理解Go中的原子操作在快…...

编程日记 2025/2/10 0:04:37

微信小程序如何使用decimal计算金额

第三方库地址：GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript 之前都是api接口走后端计算，偶尔发现这个库也不错，计算简单，目前发现比较准确上代码导入js import Decimal from ../../uti…...

编程日记 2025/2/10 0:03:36

Redis数据库篇 -- Pipeline

一. 什么是Pipeline 在传统的请求-响应模式中，客户端与服务器之间的通信流程如下： 客户端发送一个命令到服务器。服务器接收命令并执行。服务器将执行结果返回给客户端。客户端接收结果后，发送下一个命令在这种传统的模式下，…...

编程日记 2025/2/10 0:01:31

爬虫自动化（DrissionPage）

目录 ?一.介绍: 下载DrissionPage,还是我们熟悉的pip： 环境准备： ?二.基本代码： 它对于的导包和类使用： 窗口的设置： 和获取的页面的滑动： 3.进一步认识DrissionPage： 浏览器可以多开…...

编程日记 2025/2/9 23:56:25

常见string库中的函数(C语言超详细)

文章目录 strcspnstrcpystrncpystrcatstrncatstrcmpstrncmpstrchrstrrchrstrstrstrtokstrlenstrnlen strcspn 原型: size_t strcspn(const char *str1, const char *str2);功能： strcspn 会扫描 str1，并返回一个整数，表示 str1 中第一个匹配…...

编程日记 2025/2/9 23:50:18

单例模式几种实现

静态内部类holder实现（推荐） public class UniqueIdGenerator {public static final UniqueIdGenerator INSTANCE Holder.INSTANCE;// Private holder class for lazy initializationprivate static class Holder {static final UniqueIdGenerator INS…...

编程日记 2025/2/9 23:46:14

android中关于CheckBox自定义选中图片选中无效问题

在android xml 布局中，使用CheckBox控件设置选中背景图代码如下 <CheckBoxandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:button"drawable/dfrd_common_selecotr_check"android:paddingStart&q…...

编程日记 2025/2/9 23:42:10

虚拟局域网之详解（Detailed Explanation of Virtual Local Area Network）

虚拟局域网之详解 VLAN (virtual localArea network)是一种虚拟局域网技术，它可以将一个物理局域网划分为多个逻辑上的虚拟局域网。基于交换式以太网的虚拟局域网在交换式以太网中，利用VLAN技术，可以将由交换机连接成的物理网络划分成多个…...

编程日记 2025/2/9 23:37:06

双亲委派（JVM）

1.双亲委派在 Java 中，双薪委派通常是指双亲委派模型，它是 Java 类加载器的一种工作模式，用于确保类加载的安全性和一致性。以下是其相关介绍： 定义与作用定义：双亲委派模型要求除了顶层的启动类加载器外&#xf…...

编程日记 2025/2/9 23:32:00

第二十一章：考研的艰难抉择与放弃入学的转折

深秋时节，校园宛如被大自然精心雕琢的艺术殿堂。金黄的银杏叶在阳光的轻抚下，闪烁着细碎的光芒，微风拂过，叶片相互摩挲，发出沙沙的轻响，仿佛在低声诉说着岁月的故事。一片片银杏叶悠悠然飘落，宛…...

编程日记 2025/2/9 23:29:58

webpack配置之---output.chunkLoading

output.chunkLoading webpack.output.chunkLoading 配置项用于指定 Webpack 如何加载异步 chunk（即按需加载的代码块）。在现代 Webpack 版本中，异步代码分割成为了非常常见的功能，chunkLoading 配置项就用于控制 Webpack 加载这些…...

编程日记 2025/2/9 23:28:57

升级RAG应用程序与Redis向量库

Redis Vector Library (RedisVL) 简化AI应用开发几个月前，Redis推出了Redis向量库（RedisVL），以简化人工智能（AI）应用的开发。自那时起，我们引入了强大的新功能，支持大规模的语言模…...

编程日记 2025/2/9 23:25:54

【starrocks学习】之将starrocks表同步到hive

目录方法 1：通过HDFS导出数据 1. 将StarRocks表数据导出到HDFS 2. 在Hive中创建外部表 3. 验证数据方法 2：使用Apache Spark同步 1. 添加StarRocks和Hive的依赖 2. 使用Spark读取StarRocks数据并写入Hive 3. 验证数据方法 3：通过…...

编程日记 2025/2/9 23:24:53

HTML应用指南：利用GET请求获取全国盒马门店位置信息

随着新零售业态的发展，门店位置信息的获取变得至关重要。作为新零售领域的先锋，盒马鲜生不仅在商业模式创新上持续领先，还积极构建广泛的门店网络，以支持其不断增长的用户群体。本篇文章，我们将继续探究GET请求的实际应用，我们使用Python的requests库通过GET请求，从盒马…...

编程日记 2025/2/9 23:22:49

openEuler部署 sysstat工具

查看环境 [rootlocalhost lxm]# cat /etc/os-release NAME"openEuler" VERSION"23.09" ID"openEuler" VERSION_ID"23.09" PRETTY_NAME"openEuler 23.09" ANSI_COLOR"0;31"查看 yum 源 [rootlocalhost lxm]# he…...

编程日记 2025/2/9 23:19:46