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

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

news 2025/9/16 23:04:29

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/16 15:51:37

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/9/10 13:55:45

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/9/15 23:13:14

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/9 10:10:28

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/8/21 20:41:27

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/9/3 15:58:14