19 Three.js实现雾化效果

最新推荐文章于 2024-05-29 16:35:44 发布
最新推荐文章于 2024-05-29 16:35:44 发布
阅读量7.4k 收藏 2
点赞数
分类专栏： Three.js笔记 文章标签： canvas three.js webgl 雾化效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/76709629
版权

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/21.html

如果使用three.js实现雾化效果很简单，只需要在给场景scene对象的fog属性添加值就好了，比如：

        scene.fog = new THREE.Fog(0xffffff,100,120);
这样就给场景添加了雾化的效果，在实例化雾化的对象的时候，需要传三个值（雾的颜色，雾化开始的距离相机的位置，全雾化距离相机的位置）。



添加上了就会显示以上的效果，设置雾化的过程比较短，所以雾化的效果比较明显。


还有一个种是随着距离呈指数增长的雾化效果，只需要设置雾的颜色和浓度即可。如：

scene.fog = new THREE.FogExp2(0xffffff,0.02);
效果如下：



暮志未晚NAN
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+Three.js酷炫烟雾文字背景动画特效
06-11
HTML5+Three.js酷炫烟雾文字背景动画特效，HTML5 Canvas基于webgl制作的烟雾弥漫网页背景动画特效。
Three.js烟雾文字背景动画特效.zip
07-05
Three.js烟雾文字背景动画特效是一款canvas基于webgl酷炫的烟雾弥漫背景动画特效。
基于Threejs的火焰烟雾动画效果代码
09-12
基于Threejs的火焰烟雾动画效果代码
Three.js 入门介绍与环境搭建
最新发布
aisivisual的博客
05-29 463
通过以上步骤，艾斯视觉作为ui设计和前端开发服务商在这里很高兴能与你共同探讨学习：我们成功地搭建了 Three.js 的基本开发环境，并创建了一个简单的场景。Three.js 是一个强大的用于在网页上创建和展示 3D 图形的 JavaScript 库。在这篇文章中，我们将对 Three.js 进行入门介绍，并详细讲解环境搭建的步骤。它具有良好的文档和活跃的社区，为开发者提供了丰富的资源和支持。请注意，这只是一个简单的入门介绍，Three.js 还有许多其他的特性和用法等待你去发现和学习。
threejs(12)-着色器打造烟雾水云效果
woyebuzhidao321的博客
11-12 903
【代码】threejs(12)-着色器打造烟雾水云效果。
three.js云雾动画canvasjs特效
ICode联盟
10-27 692
基于three.js实现的云雾动画canvas特效。
Three.js 基础之雾
weixin_55696461的博客
12-10 912
雾的特点：越靠近镜头，雾气越小。 越远离镜头，雾气越大。雾气本身只会影响物体的渲染效果，但雾气本身并不会流动。默认所有材质都可以被雾影响，若某物体不想被雾影响，可以将该物体材质的 fog 属性设置为 false 雾的类型：Three.js中一共有 2种雾的类型 Fog： 雾 雾的密度随着距离 线性增大 FogExp2 指数雾 雾的密度随着距离 指数增大 Fog 构造参数 Fog...
Three.js如何实现雾化效果示例代码
10-19
雾化效果是3D的比较常见的特性，在游戏中见到的烟雾、爆炸火焰以及白云等效果都是雾化的结果，下面这篇文章主要给大家介绍了关于Three.js如何实现雾化效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
Three.js + Mapbox 实现泛光效果
04-13
Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + Mapbox 实现泛光效果 Three.js + ...
Three.js 实现年会3D抽奖页面
03-12
Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建丰富的3D图形和交互式体验。 首先，我们需要理解Three.js的核心概念。WebGL是一种在浏览器中渲染3D图形的API，而Three.js则是对WebGL的一层封装...
three.js实现3D视野缩放效果
10-19
在3D图形编程中，创建逼真的视觉效果是至关重要的，而three.js作为一个流行的JavaScript库，使得在Web浏览器中创建3D场景变得简单易行。本篇文章将详细讲解如何使用three.js实现3D视野的缩放效果。 首先，我们要...
烟雾效果的实现
05-15
关于DirectX3D 9中粒子系统之烟雾的实现，代码很规范，内有详细注释，可供大家学习和借鉴
WebGL/ThreeJS场景雾化demo.zip
11-28
WebGL/Three场景雾化简易demo
物理方法模拟的烟雾流体（3D）
12-19
Jos Stam, Real-Time Fluid Dynamics for Games流体例程修改成了3D的，基于半拉格朗日法
html5+three.js天空乌云密布背景动画特效
06-11
html5基于canvas+three.js绘制的天空乌云密布背景动画特效，乌云滚滚、云雾飘动网页背景动画效果。右上角的参数设置面板可以改变动画参数做出更多效果。
threejs 自定义材质 熔浆，云雾效果
七岁
12-17 3609
效果如下： 它其实就是使用了两种图片在着色器中经过拉伸，扭曲得到的效果； 需要两张图片： 上面那种云雾的很重要，它可以勉去在着色器中随机的运算， 代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>three.js shader教程</title> ...
Three.js - 雾（十四）
小小的前端
04-26 909
雾 雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。 在three.js中有两种设置雾的对象： .Fog() 定义了线性雾。简单来说就是雾的密度是随着距离线性增大的。 .FogExp2() 定义了指数雾。在相机附近提供清晰的视野，且距离相机越远，雾的浓度随着指数增长越快。 基础模版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title
threejs fire 火焰与烟雾效果
热门推荐
凌风子夜
08-28 1万+
在threejs中有一个为我们提供了可以实现火焰和烟雾效果的包，我们可以直接引用这个包，通过设置某些参数实现需要的效果。 第一步引入fire包，可在工程文件夹下的example文件夹中找到 <script type="text/javascript" src="js/objects/Fire.js" ></script> 后续马上更新，工作… ...
基于Threejs火焰烟雾动画功能代码
珞珈鸡丝
09-12 2236
利用Threejs进行三维可视化的应用项目开发，我们经常回遇到需要加入一些动画效果，粒子效果等。所以本片利用此详细的例子进行介绍在Threejs中如何使用。 1，首先需要对三维场景进行初始化 function init() { // 创建clock clock = new THREE.Clock(); // 创建场景 scene=new THREE.Scene(); // 创建渲染器 renderer=new THREE.WebGLRenderer.
vue使用three.js实现星云效果
05-28
要使用Three.js实现星云效果，可以按照以下步骤进行： 1. 引入Three.js库文件和需要的插件 ``` <script src="https://threejs.org/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> ``` 2. 创建场景、相机和渲染器 ``` var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 3. 创建星云材质 ``` var starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1, map: THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/sprites/disc.png" ), blending: THREE.AdditiveBlending, transparent: true, depthWrite: false }); ``` 4. 创建星云模型 ``` var starGeometry = new THREE.Geometry(); for (var i = 0; i < 10000; i++) { var star = new THREE.Vector3(); star.x = THREE.Math.randFloatSpread(2000); star.y = THREE.Math.randFloatSpread(2000); star.z = THREE.Math.randFloatSpread(2000); starGeometry.vertices.push(star); } var stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); ``` 5. 创建控制器，实现交互操作 ``` var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = false; ``` 6. 渲染场景 ``` function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate(); ``` 7. 完整代码示例 ``` <!DOCTYPE html> <html> <head> <title>Starfield Simulation</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; overflow: hidden; } </style> </head> <body> <script src="https://threejs.org/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1, map: THREE.ImageUtils.loadTexture( "https://threejs.org/examples/textures/sprites/disc.png" ), blending: THREE.AdditiveBlending, transparent: true, depthWrite: false }); var starGeometry = new THREE.Geometry(); for (var i = 0; i < 10000; i++) { var star = new THREE.Vector3(); star.x = THREE.Math.randFloatSpread(2000); star.y = THREE.Math.randFloatSpread(2000); star.z = THREE.Math.randFloatSpread(2000); starGeometry.vertices.push(star); } var stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); var controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = false; function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 这样就可以在Vue项目中使用Three.js实现星云效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值