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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/14777.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

opencv图像处理

opencv图像处理

注释详细 1.图像维度&#xff1a;打印出的结果分别为图片像素的横行、纵列和三原色彩色通道 import cv2 imgcv2.imread(pictures//3.png) print(img.shape) cv2.imshow("img",img)#窗口名、变量名 cv2.waitKey(0) 2.图像彩色通道&#xff1a;1张彩色图片&#xff…
阅读更多...
harmonyOS生命周期详述

harmonyOS生命周期详述

harmonyOS的生命周期分为app(应用)的生命周期和页面的生命周期函数两部分 应用的生命周期-app应用 在app.js中写逻辑,具体有哪些生命周期函数呢,请看下图: onCreated()、onShow()、onHide()、onDestroy()这五部分 页面及组件生命周期 着重说下onShow和onHide,分别代表是不是…
阅读更多...
实验5 配置OSPFv2验证

实验5 配置OSPFv2验证

实验5 配置OSPFv2验证 1.实验目的 &#xff08;1&#xff09;OSPFv2 验证的类型和意义。 &#xff08;2&#xff09;配置基于区域的 OSPFv2 简单口令验证和 MD5 验证的方法。 &#xff08;3&#xff09;配置基于链路的 OSPFv2 简单口令验证和 MD5 验证的方法。 2.实验准备 配置…
阅读更多...
快速上手——.net封装使用DeekSeek-V3 模型

快速上手——.net封装使用DeekSeek-V3 模型

📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！📢本文作者：由webmote 原创📢作者格言：新的征程，用爱发电，去丈量人心，是否能达到人机合一？开工大吉 新的一年就这么水灵灵的开始了，在这里，祝各位读者新春快乐，万事如意！ 新年伊…
阅读更多...
国产化创新 守护开放边界网络安全

国产化创新 守护开放边界网络安全

当今数字化浪潮的席卷下&#xff0c;企业、医院、政府部门等各类机构的信息化建设正以前所未有的速度推进。 在这个数字化转型的关键时期&#xff0c;尤其是在涉及国家核心利益和敏感数据的领域&#xff0c;我们不仅要追求技术的先进性&#xff0c;更要确保安全性和自主可控性…
阅读更多...
基于Java的在线购物系统的设计与实现

基于Java的在线购物系统的设计与实现

引言 课题背景 随着Internet国际互联网的发展&#xff0c;越来越多的企业开始建造自己的网站。基于Internet的信息服务&#xff0c;商务服务已经成为现代企业一项不可缺少的内容。很多企业都已不满足于建立一个简单的仅仅能够发布信息的静态网站。现代企业需要的是一个功能强…
阅读更多...
cefsharp131升级132测试（WinForms.NETCore）

cefsharp131升级132测试（WinForms.NETCore）

一、升级&#xff08;Nuget&#xff09; 版本说明&#xff08;readme&#xff09;:最低.NET Core3.1 (NET5.0) Visual C 2019 Redist 二、试运行、兼容性测试 三、后记说明 支持H264版本推荐版本63,79,84,88,100,111,125&#xff08;支持h264和pdf预览&#xff09; 其他H264版…
阅读更多...
C#中深度解析BinaryFormatter序列化生成的二进制文件

C#中深度解析BinaryFormatter序列化生成的二进制文件

C#中深度解析BinaryFormatter序列化生成的二进制文件 BinaryFormatter序列化时,对象必须有 可序列化特性[Serializable] 一.新建窗体测试程序BinaryDeepAnalysisDemo,将默认的Form1重命名为FormBinaryDeepAnalysis 二.新建测试类Test Test.cs源程序如下: using System; us…
阅读更多...
【实用教程】在 Android Studio 中连接 MuMu 模拟器

【实用教程】在 Android Studio 中连接 MuMu 模拟器

MuMu 模拟器是一个非常流行的安卓模拟器&#xff0c;特别适合开发人员进行应用测试&#xff0c;我使用它的根本原因在于Android Studio自带的AVM实现是太难用了&#xff0c;但是Mumu模拟器启动以后不会自动被Android Studio识别到&#xff0c;但是其他模拟器都是能够正常被Andr…
阅读更多...
LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）

LLAMA-Factory安装教程（解决报错cannot allocate memory in static TLS block的问题）

步骤一&#xff1a; 下载基础镜像 # 配置docker DNS vi /etc/docker/daemon.json # daemon.json文件中 { "insecure-registries": ["https://swr.cn-east-317.qdrgznjszx.com"], "registry-mirrors": ["https://docker.mirrors.ustc.edu.c…
阅读更多...
Ollama 部署 DeepSeek-R1 及Open-WebUI

Ollama 部署 DeepSeek-R1 及Open-WebUI

Ollama 部署 DeepSeek-R1 及Open-WebUI 文章目录 Ollama 部署 DeepSeek-R1 及Open-WebUI〇、说明为什么使用本方案 一、 安装Ollama1、主要特点&#xff1a;2、安装3、验证 二、Ollama 部署 DeepSeek1、部署2、模型选用3、Ollama 常用命令4、Ollama模型默认存储路径 安装open-w…
阅读更多...
基于微信小程序的医院预约挂号系统的设计与实现

基于微信小程序的医院预约挂号系统的设计与实现

hello hello~ &#xff0c;这里是 code袁~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生…
阅读更多...
redis项目

redis项目

短信登录 这一块我们会使用redis共享session来实现 商户查询缓存 通过本章节&#xff0c;我们会理解缓存击穿&#xff0c;缓存穿透&#xff0c;缓存雪崩等问题&#xff0c;让小伙伴的对于这些概念的理解不仅仅是停留在概念上&#xff0c;更是能在代码中看到对应的内容 优惠…
阅读更多...
【嵌入式 Linux 音视频+ AI 实战项目】瑞芯微 Rockchip 系列 RK3588-基于深度学习的人脸门禁+ IPC 智能安防监控系统

【嵌入式 Linux 音视频+ AI 实战项目】瑞芯微 Rockchip 系列 RK3588-基于深度学习的人脸门禁+ IPC 智能安防监控系统

前言 本文主要介绍我最近开发的一个个人实战项目&#xff0c;“基于深度学习的人脸门禁 IPC 智能安防监控系统”&#xff0c;全程满帧流畅运行。这个项目我目前全网搜了一圈&#xff0c;还没发现有相关类型的开源项目。这个项目只要稍微改进下&#xff0c;就可以变成市面上目前…
阅读更多...
RabbitMQ 从入门到精通：从工作模式到集群部署实战（四）

RabbitMQ 从入门到精通：从工作模式到集群部署实战（四）

#作者&#xff1a;闫乾苓 系列前几篇&#xff1a; 《RabbitMQ 从入门到精通&#xff1a;从工作模式到集群部署实战&#xff08;一&#xff09;》&#xff1a;link 《RabbitMQ 从入门到精通&#xff1a;从工作模式到集群部署实战&#xff08;二&#xff09;》&#xff1a; lin…
阅读更多...
RabbitMQ 从入门到精通：从工作模式到集群部署实战（五）

RabbitMQ 从入门到精通：从工作模式到集群部署实战（五）

#作者&#xff1a;闫乾苓 系列前几篇&#xff1a; 《RabbitMQ 从入门到精通&#xff1a;从工作模式到集群部署实战&#xff08;一&#xff09;》&#xff1a;link 《RabbitMQ 从入门到精通&#xff1a;从工作模式到集群部署实战&#xff08;二&#xff09;》&#xff1a; lin…
阅读更多...
mysql 学习11 事务，事务简介，事务操作，事务四大特性，并发事务问题，事务隔离级别

mysql 学习11 事务，事务简介，事务操作，事务四大特性，并发事务问题，事务隔离级别

一 事务简介&#xff0c; 数据库准备&#xff1a; create table account(id int auto_increment primary key comment 主键ID,name varchar(128) not null comment 姓名,backaccountnumber char(18) unique comment 银行账号,money float comment 余额 )comment 银行账号表;…
阅读更多...
C语言的灵魂——指针(3)

C语言的灵魂——指针(3)

前言&#xff1a;上期我们介绍了const修饰指针&#xff0c;saaert断言都是针对指针本身的&#xff0c;文章后面我们用指针与数组建立了联系&#xff0c;这种联系或者是关系就是这篇文章所要介绍的。上一篇文章的传送门&#xff1a;指针2 指针3 一&#xff0c;数组名的含义及理解…
阅读更多...
企业FTP替代升级，实现传输大文件提升100倍！

企业FTP替代升级，实现传输大文件提升100倍！

随着信息技术的飞速发展&#xff0c;网络安全环境也变得越来越复杂。在这种背景下&#xff0c;传统的FTP&#xff08;文件传输协议&#xff09;已经很难满足现代企业对文件传输的需求了。FTP虽然用起来简单&#xff0c;但它的局限性和安全漏洞让它在面对高效、安全的数据交换时…
阅读更多...
树和二叉树_7

树和二叉树_7

树和二叉树_7 一、leetcode-102二、题解1.引库2.代码 一、leetcode-102 二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 样例输入&#xff1a;root [3,9,20,null,nu…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023