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

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

news 2025/11/6 1:02:05

👨‍⚕️ 主页： 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 )

  1. texture：镜头炫光的纹理，决定炫光的样子
  2. size：镜头炫光的大小，单位是像素
  3. distance：设值炫光与当前位置的距离。
  4. lending：融合模式决定他们将如何融合在一起,默认的融合模式是THREE.AdditiveBlending,提供半透明的炫光
  5. 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模拟镜头眩光

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

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

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

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

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

mysql 5.7安装

基础环境&#xff1a;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 操作

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

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

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

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

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

最新Modular公司之MAX和Mojo作者 克里斯·拉特纳简介

Chris Lattner&#xff08;克里斯拉特纳&#xff09; 是一位著名的计算机科学家和软件工程师&#xff0c;以其在编程语言、编译器技术和软件开发工具领域的贡献而闻名。以下是关于他的详细介绍&#xff1a; 1. 主要成就 &#xff08;1&#xff09;LLVM 项目的创始人 Chris La…...

编程日记 2025/2/10 0:02:34

Redis数据库篇 -- Pipeline

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

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

爬虫自动化（DrissionPage）

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

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

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

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

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

单例模式几种实现

静态内部类holder实现&#xff08;推荐&#xff09; 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 布局中&#xff0c;使用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)是一种虚拟局域网技术&#xff0c;它可以将一个物理局域网划分为多个逻辑上的虚拟局域网。 基于交换式以太网的虚拟局域网在交换式以太网中&#xff0c;利用VLAN技术&#xff0c;可以将由交换机连接成的物理网络划分成多个…...

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

双亲委派（JVM）

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

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

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

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

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

webpack配置之---output.chunkLoading

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

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

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

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

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

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

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

编程日记 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

使用 Three.js 实现炫酷的除夕烟花特效

1&#xff0c;前言 在除夕夜&#xff0c;璀璨的烟花点亮夜空&#xff0c;为节日增添了浓厚的喜庆氛围。在 Web 端&#xff0c;我们可以使用 Three.js 来模拟这种美轮美奂的烟花特效&#xff0c;让网页也能展现绚丽的节日气息。本文将介绍如何利用 Three.js 及其着色器技术&…...

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

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2025/11/5 1:10:58

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/10/30 5:56:22

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/11/5 16:59:33

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24

python打卡第47天

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 def visualize_attention_map(model, test_loader, device, class_names, num_samples3):"""可视化模型的注意力热力图&#xff0c;展示模…...

编程新知 2025/9/29 9:08:30

简单介绍C++中 string与wstring

在C中&#xff0c;string和wstring是两种用于处理不同字符编码的字符串类型&#xff0c;分别基于char和wchar_t字符类型。以下是它们的详细说明和对比&#xff1a; 1. 基础定义 string 类型&#xff1a;std::string 字符类型&#xff1a;char&#xff08;通常为8位&#xff09…...

编程新知 2025/10/7 3:17:39

java 局域网 rtsp 取流 WebSocket 推送到前端显示 低延迟

众所周知 摄像头取流推流显示前端延迟大 传统方法是服务器取摄像头的rtsp流 然后客户端连服务器 中转多了&#xff0c;延迟一定不小。 假设相机没有专网 公网 1相机自带推流 直接推送到云服务器 然后客户端拉去 2相机只有rtsp &#xff0c;边缘服务器拉流推送到云服务器 …...

编程新知 2025/10/20 21:20:05