WEB 3D技术 three.js 雾 基础使用讲解

本文 我们说一下 雾
在three.js中有一个 Fog类 它可以创建线性雾的一个效果
她就是模仿现实世界中 雾的一个效果 你看到远处物体会组件模糊 直到完全被雾掩盖

在 three.js 中 有两种雾的形式 一种是线性的 一种是指数的
个人觉得 线性的会看着自然一些 他是 从相机位置开始 雾的颜色逐渐加深 到更远的地方就看不到了
指数的就是 附件的东西会看着比较清晰 远处突然就看着很浓的雾色了

我们编写代码如下

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";//创建场景
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x999999,0.1,10);
const geometry = new THREE.BoxGeometry( 1, 1, 100 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );//创建相机
const camera = new THREE.PerspectiveCamera(45, //视角 视角越大  能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好0.1,  //近平面  相机能看到最近的距离1000  //远平面  相机能看到最远的距离
);//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);function animate() {controls.update();requestAnimationFrame(animate);/*cube.rotation.x += 0.01;cube.rotation.y += 0.01;*/renderer.render(scene, camera);
}
animate();

创建雾 直接场景.fog 设置 THREE.Fog(颜色,开始距离,结束距离);
然后 我们创建一个立方体 带大家体验一下
开始 需要鼠标拖动一下 不然看不到元素

然后 我们看到立方体后 就会看到远处 渐渐变灰的效果
在这里插入图片描述
我们把整个图转过来 一样是 离我们最近的OK 远了就开始模糊
他不是某个方向 而是 按我们相机来的
在这里插入图片描述
Fog 是声明线性雾
FogExp2 是声明指数雾的
它只接两个参数
第一个还是颜色 第二个是雾的密度
这里 我们设个 0.1
在这里插入图片描述
这是密度 0.1的效果
在这里插入图片描述
然后 我们搞个 0.5、
在这里插入图片描述
效果就是这样的
在这里插入图片描述
我们可以加一段代码

scene.background = new THREE.Color(0x999999);

在这里插入图片描述
将场景的背景色 设置成和我们雾的颜色一至的
在这里插入图片描述
这样 我们就很有这种大雾的感觉了

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

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

相关文章

报错大全(未完待续)

springboot Could not find artifact org.springframework.boot:spring-boot-maven-plugin 报错环境:昨天的springboot项目的pom文件正常,今天再打开就会有些依赖爆红 解决步骤: 去maven的仓库里找你下载的依赖文件,路径是你的…

蓝桥杯C/C++程序设计——特别数的和

题目描述 小明对数位中含有 2、0、1、9 的数字很感兴趣(不包括前导 0),在 1 到 40 中这样的数包括 1、2、9、10 至 32、39 和 40,共 28 个,他们的和是 574。 请问,在 1 到 n 中,所有这样的数的…

S32K312使用ITCM向FLASH代码区写入数据

使用C40_IP的系列方法向FLASH代码区写入数据时,程序会卡死在读取写操作的状态C40_Ip_MainInterfaceWriteStatus()这个方法中。本文主要介绍S32K312通过ITCM的方式,通过C40_IP的方法向FLASH代码区成功写入数据的方法和步骤。 首先,验证一下C4…

使用Android Studio等idea工具开发flutter应用,必备的debug调试技能,非常好用

我们程序员不论开发什么软件,都需要一把锋利的调试工具,这是必不可少的,不然出现问题了,你都不知道问题是啥,出现在哪,就更别说怎么解决了。所以我这里就介绍一下android studio开发flutter必备的调试技能&…

GRNdb:解码不同人类和小鼠条件下的基因调控网络

GRNdb:解码不同人类和小鼠条件下的基因调控网络 摘要introduction数据收集和处理Single-cell and bulk RNA-seq data collection and processing 单细胞和bulk RNA-seq 数据收集和处理Cell cluster identification for scRNA-seq datasets (scRNA-seq 数…

记录汇川:MODBUS TCP-梯形图

H5U的MODBUS通信不需要编写程序,通过组态MODBUS通信配置表,实现数据通信。 Modbus-TCP 主站即Modbus-TCP客户端,通过Modbus-TCP配置,可最多支持同时与31个 Modbus-TCP服务器(从站)进行通讯。 …

12.30_黑马数据结构与算法笔记Java

目录 320 全排列无重复 Leetcode47 321 组合 Leetcode77 分析 322 组合 Leetcode77 实现 323 组合 Leetcode77 剪枝 324 组合之和 Leetcode 39 325 组合之和 Leetcode 40 326 组合之和 Leetcode 216 327 N皇后 Leetcode51-1 328 N皇后 Leetcode51-2 329 解数独 Leetco…

javaweb基础2.0 (持续更新中)

Day 10 : Responbody 将响应的实体类转为json发送给前端。RequestBody将request的json转为实体类给后端 修改未成功的可能是因为根据id 查询的时候,只查询了name字段,因为后面需要根据id 修改,所以还需查询id ,不然前端不知道id也…

JavaWeb乱七八糟的报错及其原因和解决办法(持续更新中。。。)

报错: com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.原因:MySQL服务关闭…

【数据结构】树

一.二叉树的基本概念和性质: 1.二叉树的递归定义: 二叉树或为空树,或是由一个根结点加上两棵分别称为左子树和右子树的、互不相交的二叉树组成 2.二叉树的特点: (1)每个结点最多只有两棵子树&#xff0…

深度学习中Batch/Layer/Instance/Group normalization方法

图片中,N是batch size, c是channel。 BN:在每一个channel内,对H,W,Batch做平均LN:在每一个batch内,对H,W,Channel做平均IN:在每一个channel和bat…

方太厨电,在创新科技中看见烟火人间

人类的历史,就是一部创新的历史。科普作者马特里德利在《创新的起源:一部科学技术进步史》写道:能源是所有创新之源。 火的发明和使用,就是一种创新,人类第一次通过控制热量的转换来做功,依靠火来取暖和烹饪…

[NCTF 2022]calc

[NCTF 2022]calc 考点:python环境变量注入 打开题目,F12有hint 访问一下得到源码 app.route("/calc",methods[GET]) def calc():ip request.remote_addrnum request.values.get("num")log "echo {0} {1} {2}> ./tmp/log…

天擎离线升级工具使用说明

免责声明 本文旨在提供信息和解决问题的建议,观点和建议可能不适用于个人情况,仅供参考!!! 文章中所有敏感信息已经修改,对于因本文中提供的信息而导致的任何直接或间接损失或损害不承担责任。 使用本文中的…

Android14新特性 开启前台service服务

1. Android14新特性 1.1. 场景 在Android14(targetSDK34)系统手机开启前台service服务崩溃 ATAL EXCEPTION: mainProcess: com.inspur.lbrd, PID: 15634java.lang.RuntimeException: Unable to create service com.inspur.lbrd.service.KeepAliveServi…

uniapp Vue3 日历 可签到 跳转

上干货 <template><view class"zong"><view><view class"top"><!-- 上个月 --><view class"sgy" click"sgy">◀</view><view class"nianyue">{{ year }}年{{ month 1 }}…

MySQL 8.0 InnoDB Tablespaces之General Tablespaces(通用表空间/一般表空间)

文章目录 MySQL 8.0 InnoDB Tablespaces之General Tablespaces&#xff08;通用表空间/一般表空间&#xff09;General tablespaces&#xff08;通用表空间/一般表空间&#xff09;通用表空间的功能通用表空间的限制 创建通用表空间&#xff08;一般表空间&#xff09;创建语法…

【map】【滑动窗口】【字典树】C++算法:最长合法子字符串的长度

作者推荐 动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本 本题涉及知识点 滑动窗口字典树 map 离线查询 map map可以分成有序(单调)map和无序(哈希)map。还可分成单键map和多键map&#xff08;允许重复的键&#xff09;。本文用&#xff1a;单键无序map。 …

防弹防线:彻底击败Redis缓存穿透问题【redis问题 一】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 防弹防线&#xff1a;彻底击败Redis缓存穿透问题 前言1. 缓存穿透定义和成因定义&#xff1a;缓存穿透的隐秘入侵成因分析&#xff1a;揭秘缓存穿透的幕后黑手故事描述 2. 缓存穿透的影响对数据库的影…

最优轨迹生成(三)—— 无约束BIVP轨迹优化

本系列文章是学习深蓝学院-移动机器人运动规划课程第五章最优轨迹生成 过程中所记录的笔记&#xff0c;本系列文章共包含四篇文章&#xff0c;依次介绍了微分平坦特性、无约束BVP轨迹优化、无约束BIVP轨迹优、 带约束轨迹优化等内容 本系列文章链接如下&#xff1a; 最优轨迹生…