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

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

news 2026/3/26 16:17:52

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

4步彻底清除Edge浏览器：从系统底层解决Windows默认浏览器卸载难题

4步彻底清除Edge浏览器&#xff1a;从系统底层解决Windows默认浏览器卸载难题 【免费下载链接】EdgeRemover PowerShell script to remove Microsoft Edge in a non-forceful manner. 项目地址: https://gitcode.com/gh_mirrors/ed/EdgeRemover 一、用户痛点场景&#x…...

编程新知 2026/3/26 15:46:27

3步打造个人离线音频库：喜马拉雅VIP内容永久保存全攻略

3步打造个人离线音频库&#xff1a;喜马拉雅VIP内容永久保存全攻略 【免费下载链接】xmly-downloader-qt5 喜马拉雅FM专辑下载器. 支持VIP与付费专辑. 使用GoQt5编写(Not Qt Binding). 项目地址: https://gitcode.com/gh_mirrors/xm/xmly-downloader-qt5 你是否曾因网络…...

编程新知 2026/3/26 15:03:57

cobalt家谱研究者助手：家族历史与档案管理方案

cobalt家谱研究者助手&#xff1a;家族历史与档案管理方案 引言&#xff1a;家谱研究的数字时代痛点与解决方案 你是否还在为散乱的家族史料整理而困扰&#xff1f;是否经历过珍贵的口述历史随时间流逝而湮灭&#xff1f;cobalt家谱研究者助手&#xff08;家族历史与档案管理方…...

编程新知 2026/3/26 14:51:53

1999-2025.4汽车之家、懂车帝汽车配置信息数据库

汽车配置信息数据是连接汽车生产、销售、使用及后市场服务的核心纽带&#xff0c;对不同主体均具有不可替代的价值。对消费者可辅助决策&#xff0c;规避风险&#xff0c;对车企可指导研发&#xff0c;优化生产&#xff0c;对经销商可精准销售&#xff0c;提升转化&#xff0c;…...

编程新知 2026/3/26 14:23:32

Crystals Kyber算法实战：5分钟搞定密钥封装机制（KEM）配置

Crystals Kyber算法实战&#xff1a;5分钟搞定密钥封装机制&#xff08;KEM&#xff09;配置 在当今数字安全领域&#xff0c;后量子密码学正从理论走向工程实践。作为NIST后量子密码标准化项目的优胜算法&#xff0c;Kyber以其高效的格基加密机制&#xff0c;正在重构密钥分发…...

编程新知 2026/3/26 14:03:15

高效安全备份QQ空间历史说说：GetQzonehistory全方位使用指南

高效安全备份QQ空间历史说说&#xff1a;GetQzonehistory全方位使用指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 功能价值&#xff1a;为什么选择GetQzonehistory&#xff1f; …...

编程新知 2026/3/26 14:03:15

游戏资源解密工具：RPG Maker Decrypter零基础使用指南

游戏资源解密工具&#xff1a;RPG Maker Decrypter零基础使用指南 【免费下载链接】RPGMakerDecrypter Tool for extracting RPG Maker XP, VX and VX Ace encrypted archives. 项目地址: https://gitcode.com/gh_mirrors/rp/RPGMakerDecrypter RPG Maker Decrypter 是一…...

编程新知 2026/3/26 13:59:12

OpenClaw+GLM-4.7-Flash：3个提升开发效率的自动化脚本

OpenClawGLM-4.7-Flash&#xff1a;3个提升开发效率的自动化脚本 1. 为什么选择这个技术组合&#xff1f; 作为一名长期在终端里摸爬滚打的开发者&#xff0c;我一直在寻找能够真正融入日常工作的AI助手方案。直到遇到OpenClawGLM-4.7-Flash这个组合&#xff0c;才找到了理想…...

编程新知 2026/3/26 13:53:10

GEO时代的技术突围：Infoseek媒体发布如何改写内容分发规则

最近在技术圈刷到一个新词——GEO&#xff08;生成式引擎优化&#xff09;。和传统SEO不一样&#xff0c;GEO的目标不是让网页排到搜索结果前面&#xff0c;而是让AI在回答用户问题时&#xff0c;把你的内容当成“标准答案”来引用。这个变化挺有意思&#xff0c;意味着内容分发…...

编程新知 2026/3/26 13:43:00

[FLAC无损下载]音乐爱好者与创作者的高效资源获取方案

[FLAC无损下载]音乐爱好者与创作者的高效资源获取方案 【免费下载链接】NeteaseCloudMusicFlac 根据网易云音乐的歌单, 下载flac无损音乐到本地.。 项目地址: https://gitcode.com/gh_mirrors/nete/NeteaseCloudMusicFlac 在数字音乐产业快速发展的今天&#xff0c;无损…...

编程新知 2026/3/26 13:36:58