【Three.js】知识梳理十九:线性雾(Fog)、指数雾(FogExp2)和范围雾(RangeFog)

雾是3D图形中创建深度和氛围的重要工具。Three.js提供了多种类型的雾:线性雾(THREE.Fog),指数雾(THREE.FogExp2)和范围雾(RangeFog)。本文将探讨这三种类型的雾,通过代码示例进行的实践应用。

雾模拟了大气的效果,使远处的物体看起来更模糊。它有助于创建深度感,并能增强场景的氛围。在Three.js中,只需几行代码即可轻松添加雾效果。

1.线性雾(THREE.Fog)

线性雾从起始距离到终止距离线性地淡化。它由三个主要参数定义:颜色、近处和远处。

属性

  • color(颜色) : 雾的颜色。
  • near(近处) : 雾开始的距离。
  • far(远处) : 雾结束的距离。

示例代码

// 创建一个场景
const scene = new THREE.Scene();
​
// 向场景中添加线性雾
const color = 0xffffff; // 白色雾
const near = 10;
const far = 50;
scene.fog = new THREE.Fog(color, near, far);
​
// 向场景中添加物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
for (let i = 0; i < 100; i++) {const cube = new THREE.Mesh(geometry, material);cube.position.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50);scene.add(cube);
}
​
// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
​
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 渲染场景
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

官方案例:three.js examples (threejs.org)

image.png

2.指数雾(THREE.FogExp2)

指数雾通过距离指数增加雾的密度,提供了更为真实的雾效果。

属性

  • color(颜色) : 雾的颜色。
  • density(密度) : 雾的密度。

示例代码:

// 创建一个场景
const scene = new THREE.Scene();
​
// 向场景中添加指数雾
const color = 0xffffff; // 白色雾
const density = 0.01;
scene.fog = new THREE.FogExp2(color, density);
​
// 向场景中添加物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
for (let i = 0; i < 100; i++) {const cube = new THREE.Mesh(geometry, material);cube.position.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50);scene.add(cube);
}
​
// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
​
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
​
// 渲染场景
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

官方案例: three.js examples (threejs.org)

image.png

3.范围雾(RangeFog)

范围雾根据距离在一定范围内增加雾的密度,超出范围后雾的密度不再变化。

属性

  • color(颜色) : 雾的颜色。
  • near(近处) : 雾开始的距离。
  • far(远处) : 雾结束的距离。
  • density(密度) : 雾的密度。

示例代码:

// 创建一个场景
const scene = new THREE.Scene();// 向场景中添加范围雾
const color = 0xffffff; // 白色雾
const near = 10;
const far = 50;
const density = 0.02;
scene.fog = new RangeFog(color, near, far, density);// 向场景中添加物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
for (let i = 0; i < 100; i++) {const cube = new THREE.Mesh(geometry, material);cube.position.set(Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50);scene.add(cube);
}// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 渲染场景
function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);
}
animate();

官方案例:three.js examples (threejs.org)

image.png

4.线性雾,指数雾和范围雾的比较

  • 线性雾: 提供了一个简单且可预测的雾效果,从指定的距离开始并结束。
  • 指数雾: 提供了更自然的雾效果,雾的密度随着距离的增加而指数增加,使其更适合于现实场景。
  • 范围雾: 在一定范围内增加雾的密度,超出范围后雾的密度不再变化,适用于需要特定范围内雾效果的场景。

image.png

5.实际应用

  • 增强深度: 三种类型的雾都可以增强场景中的深度感,使其看起来更具沉浸感。
  • 大气效果: 使用雾来创建如薄雾、烟霾或污染等大气效果。
  • 引导观众: 通过战略性地放置雾,可以引导观众的注意力到场景的特定部分。

雾是Three.js中一个强大的工具,可以显著提升3D场景的视觉效果。无论你选择线性雾的简单性、指数雾的真实性还是范围雾的特定范围效果,理解如何实现和操作雾效果可以帮助你创建更具吸引力和沉浸感的体验。

附送250套精选项目源码

源码截图

 源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

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

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

相关文章

MATLAB神经网络---序列输入层sequenceInputLayer

序列输入层sequenceInputLayer 描述一&#xff1a; sequenceinputlayer是Matlab深度学习工具箱中的一个层&#xff0c;用于处理序列数据输入。它可以将输入数据转换为序列格式,并将其传递给下一层进行处理。该层通常用于处理文本、语音、时间序列等类型的数据。在使用该层时&…

【大数据】Spark使用大全:下载安装、RDD操作、JAVA编程、SQL

目录 前言 1.下载安装 2.RDD操作 3.JAVA编程示例 4.Spark SQL 前言 本文是作者大数据系列中的一文&#xff0c;专栏地址&#xff1a; https://blog.csdn.net/joker_zjn/category_12631789.html?spm1001.2014.3001.5482 该系列会成体系的聊一聊整个大数据的技术栈&…

stable-diffusion 3 体验部署流程(ComfyUI)

环境准备 下载及简介 git clone https://huggingface.co/stabilityai/stable-diffusion-3-medium SD3 checkpoints&#xff1a; sd3_medium_incl_clips.safetensors (5.5GB)sd3_medium_incl_clips_t5xxlfp8.safetensors (10.1GB)sd3_medium.safetensors (4.3GB) 前两个可以…

文本相似度的三种算法

​为了实现基于嵌入向量相似度来查找输入文本与给定列表中最相似的元素&#xff0c;你可以使用预训练的文本嵌入模型&#xff08;例如&#xff0c;sentence-transformers&#xff09;&#xff0c;并计算输入文本与列表元素之间的余弦相似度。如果想避免依赖外部库或模型&#x…

SAP OB52 财务账期月结月底月初开关

公告&#xff1a;周一至周五每日一更&#xff0c;周六日存稿&#xff0c;请您点“关注”和“在看”&#xff0c;后续推送的时候不至于看不到每日更新内容&#xff0c;感谢。 这是一条刮刮乐&#xff0c;按住全部选中&#xff1a;点关注的人最帅最美&#xff0c;欢迎&#xff1…

roles安装wordpress

debug模块 1.如何查看ansible-playbook执行过程中产生的具体信息 vim test3.yaml --- - hosts: allremote_user: roottasks:- name: lsshell: ls /rootregister: var_stdout # register:将var_stdout注册为变量- name: debugdebug:var: var_stdout # 查看所有的输出信息#var…

vuInhub靶场实战系列--Kioptrix Level #4

免责声明 本文档仅供学习和研究使用,请勿使用文中的技术源码用于非法用途,任何人造成的任何负面影响,与本人无关。 目录 免责声明前言一、环境配置1.1 靶场信息1.2 靶场配置 二、信息收集2.1 主机发现2.1.1 netdiscover2.1.2 arp-scan主机扫描 2.2 端口扫描2.3 指纹识别2.4 目…

开源大模型GLM-4,超越Gemini、Qwen-VL-Max!附推理代码

简介 GLM-4-9B 是智谱AI推出的最新一代预训练模型GLM-4 系列中的开源版本。在语义、数学、推理、代码和知识等多方面的数据集测评中, GLM-4-9B及其人类偏好坐标的版本GLM-4-9B-Chat表现出超越Llama-3-8B的卓越性能。 除了能进行多轮对话,GLM-4-9B-Chat还提供了网页浏览、代码…

nodejs——原型链污染

一、引用类型皆为对象 原型和原型链都是来源于对象而服务于对象的概念&#xff0c;所以我们要先明确一点&#xff1a; JavaScript中一切引用类型都是对象&#xff0c;对象就是属性的集合。 Array类型、Function类型、Object类型、Date类型、RegExp类型等都是引用类型。 也就…

Unity创建简单的Http服务器/客户端测试

服务器部分&#xff1a; using System; using System.Collections; using System.Collections.Generic; using System.Net; using System.Threading.Tasks; using UnityEngine;/// <summary> /// 服务器部分 /// </summary> public class Sever_Yang : MonoBehavi…

Vue22-v-model收集表单数据

一、效果图 二、代码 2-1、HTML代码 2-2、vue代码 1、v-model单选框的收集信息 v-model&#xff1a;默认收集的就是元素中的value值。 单选框添加默认值&#xff1a; 2、v-model多选框的收集信息 ①、多个选择的多选 注意&#xff1a; 此处的hobby要是数组&#xff01;&…

【深度学习基础】激活函数:Tanh、Sigmoid 和 Softmax

激活函数是深度学习模型中不可或缺的一部分&#xff0c;它们赋予神经网络强大的非线性变换能力&#xff0c;使其能够拟合复杂的函数关系。在这篇博文中&#xff0c;我们将探讨三种常见的激活函数&#xff1a;Tanh、Sigmoid 和 Softmax&#xff0c;并提供一些记忆它们的技巧。 1…

海豚调度器自动监测每日报表及自动重跑异常工作流(综合应用可用代码

如何在海豚调度器自动监测报表是否跑出数据 海豚调度器调用api接口启动工作流(亲试可用) 海豚调度器调用api接口来获取工作流信息(获取processDefinitionId) 在前面的3篇文章,介绍了海豚调度器如何检测报表是否跑出数据,如果获取工作流信息和启动工作流。通过这3个步…

C++基础知识(八:STL标准库 deque )

deque在C的STL(Standard Template Library)中是一个非常强大的容器&#xff0c;它的全称是“Double-Ended Queue”&#xff0c;即双端队列。deque结合了数组和链表的优点&#xff0c;提供了在两端进行高效插入和删除操作的能力&#xff0c;同时保持了随机访问的特性。 双端队列…

#慧眼识模每日PK[话题]##用五种语言说爸爸我爱你[话题]#

#慧眼识模每日PK #用五种语言说爸爸我爱你 你觉得哪个模型回答得更好&#xff1f;欢迎留言 A.蓝 B.紫 更多问题&#xff0c;扫码体验吧&#xff5e; by 国家&#xff08;杭州&#xff09;新型交换中心

养猫发现猫毛过敏?宠物空气净化器真的能拯救猫毛过敏吗?

广东省 猫咪是许多人梦寐以求的伴侣&#xff0c;但对于轻度猫毛过敏和鼻炎患者来说&#xff0c;养猫似乎是个遥不可及的梦想。我常在社交媒体上羡慕地观看朋友们的吸猫日常&#xff0c;却因过敏无法亲自养猫。这种遗憾驱使我寻找解决方案&#xff0c;从研究低过敏猫种到尝试空气…

d3.js获取流程图不同的节点

在D3.js中&#xff0c;获取流程图中不同的节点通常是通过选择SVG元素并使用数据绑定来实现的。流程图的节点可以通过BPMN、JSON或其他数据格式定义&#xff0c;然后在D3.js中根据这些数据动态生成和选择节点。 以下是一个基本的示例&#xff0c;展示如何使用D3.js选择和操作流…

2024/06/13--代码随想录算法3/17|01背包问题 二维、01背包问题 一维、416. 分割等和子集

01背包问题 二维 卡码网链接 动态规划5步曲 确定dp数组&#xff08;dp table&#xff09;以及下标的含义&#xff1a;dp[i][j] &#xff1a;从下标为[0,i-1]个物品中任取&#xff0c;放进容量为j的背包&#xff0c;价值总和最大为多少。确定递推公式&#xff0c; 有两个方向可…

算法专题总结链接地址

刷力扣的时候会遇到一些总结类型的题解&#xff0c;在此记录&#xff0c;方便自己以后找 前缀和 前缀和https://leetcode.cn/problems/unique-substrings-in-wraparound-string/solutions/432752/xi-fa-dai-ni-xue-suan-fa-yi-ci-gao-ding-qian-zhui-/ 单调栈 单调栈https:…

Javaweb04-Servlet技术2(HttpServletResponse, HttpServletRequest)

Servlet技术基础 HttpServletResponse对象 HttpServletResponce对象是继承ServletResponse接口&#xff0c;专门用于封装Http请求 HttpServletResponce有关响应行的方法 方法说明功能描述void setStatus(int stauts)用于设置HTTP响应消息的状态码&#xff0c;并生成响应状态…