可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
ThreeJs 认识场景和雾
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
ThreeJs 认识场景和雾
Terry
关注
已关注
0
0
0
2022
发表于 2020-08-14 19:43:15
## 一、前言 场景,可以认为是 ThreeJs 3D 世界中的一个舞台,场景允许你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。 场景可以接受一个雾参数来模拟场景中雾的效果,而物体的材质则通过设置 fog 属性来决定材质是否受雾的影响。添加了雾的场景,就有点类似于起了雾的山峰,或者就是类似于西游记里天庭上的那种场景。 ## 二、认识场景和雾 ### 1.Scene ![](https://img.meiwen.com.cn/i5828513/187c601b1699833f.jpg)Scene.jpg### 2.Fog ![](https://img.meiwen.com.cn/i5828513/3075eac40b1018b9.jpg)Fog.jpg ``` scene.fog = new THREE.Fog( 0x050505, 2000, 3500 ); ``` ![](https://img.meiwen.com.cn/i5828513/bed2f02aeeb9468d.jpg)FogSample.jpg### 3.FogExp2 ![](https://img.meiwen.com.cn/i5828513/2a7b9df5bcc0d746.jpg)FogExp2.jpg ``` scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 ); ``` ![](https://img.meiwen.com.cn/i5828513/514e860866487e1c.jpg)FogExp2Sample.jpg## 三、总结 ThreeJs 中不管是物体还是灯光,或者是相机,都要被添加到场景中来进行渲染。雾是场景的修饰器,而物体的材质可以选择是否受到雾的影响。
点击查看更多
全部评论
登录
|
注册
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
32
获赞
15
评论
8
访问
95120
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接