Three.js常见光源类型
常见光源类型
本文是Three.js电子书的5.1节
Threejs虚拟光源是对自然界光照的模拟,threejs搭建虚拟场景的时候,为了更好的渲染场景,往往需要设置不同的光源,设置不同的光照强度,就像摄影师给你拍照要设置各种辅助灯光一样。
光源 环境光 平行光 点光源 聚光灯光源 基类Light AmbientLight .color 颜色 .intensity 强度 属性 DirectionalLight PointLight SpotLight
环境光AmbientLight
环境光是没有特定方向的光源,主要是均匀整体改变Threejs物体表面的明暗效果,这一点和具有方向的光源不同,比如点光源可以让物体表面不同区域明暗程度不同。
//环境光:环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);//环境光对象添加到scene场景中
你可以把光源颜色从0x444444
更改为0x888888
,可以看到threejs场景中的网格模型表面变的更亮。
点光源PointLight
点光源就像生活中的白炽灯,光线沿着发光核心向外发散,同一平面的不同位置与点光源光线入射角是不同的,点光源照射下,同一个平面不同区域是呈现出不同的明暗效果。
和环境光不同,环境光不需要设置光源位置,而点光源需要设置位置属性.position
,光源位置不同,物体表面被照亮的面不同,远近不同因为衰减明暗程度不同。
//点光源
var point = new THREE.PointLight(0xffffff);
//设置点光源位置,改变光源的位置
point.position.set(400, 200, 300);
scene.add(point);
平行光DirectionalLight
平行光顾名思义光线平行,对于一个平面而言,平面不同区域接收到平行光的入射角一样。
// 平行光
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 设置光源的方向:通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50);
// 方向光指向对象网格模型mesh2,可以不设置,默认的位置是0,0,0
directionalLight.target = mesh2;
scene.add(directionalLight);
平行光如果不设置.position
和.target
属性,光线默认从上往下照射,也就是可以认为(0,1,0)
和(0,0,0)
两个坐标确定的光线方向。
聚光源SpotLight
// 聚光光源
var spotLight = new THREE.SpotLight(0xffffff);
// 设置聚光光源位置
spotLight.position.set(200, 200, 200);
// 聚光灯光源指向网格模型mesh2
spotLight.target = mesh2;
// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6
scene.add(spotLight);//光对象添加到scene场景中
光源辅助对象
Threejs提供了一些光源辅助对象,就像AxesHelper
可视化显示三维坐标轴一样显示光源对象,通过这些辅助对象可以方便调试代码,查看位置、方向。
辅助对象 | 构造函数名 |
---|---|
聚光源辅助对象 | SpotLightHelper |
点光源辅助对象 | PointLightHelper |
平行光光源辅助对象 | DirectionalLightHelper |
光照计算算法
Three.js渲染的时候光照计算还是比较复杂的,这里不进行深入介绍,只给大家说下光源颜色和网格模型Mesh颜色相乘的知识,如果你有兴趣可以学习计算机图形学或者WebGL教程。
Threejs在渲染的时候网格模型材质的颜色值mesh.material.color
和光源的颜色值light.color
会进行相乘,简单说就是RGB三个分量分别相乘。
平行光漫反射简单数学模型:漫反射光的颜色 = 网格模型材质颜色值 x 光线颜色 x 光线入射角余弦值
漫反射数学模型RGB分量表示:(R2,G2,B2) = (R1,G1,B1) x (R0,G0,B0) x cosθ
R2 = R1 * R0 * cosθ
G2 = G1 * G0 * cosθ
B2 = B1 * B0 * cosθ
颜色相乘测试
你可以通过下面代码验证上面颜色相乘的算法,比如把网格模型的颜色设置为白色0xffffff
,也就意味着可以反射任意光照颜色,然后把环境光和点光源只保留红色成分,绿色和蓝色成分都设置为0。你可以看到网格模型会把渲染为红色。
// 网格模型材质设置为白色
var geometry = new THREE.BoxGeometry(100, 100, 100); //
var material = new THREE.MeshLambertMaterial({color: 0xffffff
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);//环境光 环境光颜色RGB成分分别和物体材质颜色RGB成分分别相乘
var ambient = new THREE.AmbientLight(0x440000);
scene.add(ambient);//环境光对象添加到scene场景中
//点光源
var point = new THREE.PointLight(0xff0000);
//设置点光源位置 光源对象和模型对象的position属性一样是Vector3对象
//PointLight的基类是Light Light的基类是Object3D 点光源对象继承Object3D对象的位置属性position
point.position.set(400, 200, 300);
scene.add(point);
你还可以尝试把网格模型设置为纯蓝色0x0000ff
,光源颜色只保留红色成分不变,你可以看到网格模型的渲染效果是黑色,因为这两个颜色相乘总有一个RGB分量为0,相乘的结果是0x00000
,也就是黑色。这也符合实际的物理规律,蓝色的物体不会反射红色的光线,熙然就是黑色效果。
如果你想模拟一个舞台的各种颜色灯光效果,可以用这种思路设置RGB各个分量值来实现特定颜色光源,不过一般渲染的时候RGB三个分量是相同的,也就是表示白色光源,0xffffff
表示最高强度的白色光源,0x000000
相当于没有光照。
Three.js常见光源类型相关推荐
- three.js 常见光源类型
1,环境光 AmbientLight 环境光是没有特定方向的光源,主要是改变物体表面的明暗效果.代码: var ambient = new THREE.AmbientLight(0x444444); ...
- Moment.js常见用法总结
From: https://www.jianshu.com/p/9c10543420de Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中 ...
- Moment.js常见用法总结 1
Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...
- 前端常用时间工具 -- Moment.js常见用法总结
Moment.js常见用法总结 文章目录 Moment.js常见用法总结 Moment.js常见用法总结 获取时间 Start of Time End of Time Timestamp Get Ti ...
- JS常见正则方法整理
JS常见正则方法整理 目录 文章目录 前言 1. 使用测试方法 - `test` 2. 同时用多种模式匹配文字字符串 - `x|y` 3. 匹配时忽略大小写 - `/x/i` 4. 提取匹配项 - ` ...
- js常见的几种页面刷新方法
js常见的几种页面刷新方法如下: 1 history.go(0); 2 location.reload(); 3 location=location; 4 location.assign(locati ...
- js 数组修改watch_前端面试:专注Vue.js常见的问题答疑,掌握了基本上Vue就过关了...
v-show 与 v-if 区别 第一题应该是最简单的,提这个问题,也是想让候选人不那么紧张,因为但凡用过 Vue.js,多少知道 v-show 和 v-if 的区别,否则就没得聊了.不过这最简单的一 ...
- Moment.js 常见用法总结
Moment.js是一个时间日期库,它方便了日常开发中对时间的操作,提高了开发效率. 结合官网及其他资料,对Moment. js的常见用法做了简单的总结,方便后续的查阅与使用. 一.引入 1.node ...
- js常见的的6种继承方式
继承是面向对象的,继承可以帮助我们更好的复用以前的代码,缩短开发周期,提高开发效率:继承也常用在前端工程技术库的底层搭建上,在整个js的学习中尤为重要 常见的继承方式有以下的六种 一.原型链继承 原型 ...
最新文章
- 记录一次java项目上线部署
- python安装orm_Python ORM框架之 Peewee入门
- 在一个有返回值的方法中,用block回传的解决方法
- 百度神马搜狗360网站地图sitemap,主动提交推送插件
- R语言聚类算法的应用实例
- 中虚数怎么表示_英文论文写作中的常见错误
- Thinkphp编辑器扩展类kindeditor用法
- 【Java】Java SimpleDateFormat 线程安全 问题
- linux查看nec进程状态,【linux】 /proc/PID/stat
- 国内首位!Node.js社区将阿里云工程师张秋怡吸纳为CTC成员
- UVa 548 Tree(中序遍历+后序遍历)
- 【转】Android 平台下使用 i2c-tools
- Linux进程管理命令:nohup、、jobs、fg、bg、ps、kill
- ztree树默认根据ID默认选中该条数据
- MATLAB 结构矩阵和单元矩阵
- Ubuntu 20.04 上安装使用 ibus-rime(超实用)
- 性能测试-性能测试结果分析
- x.264编译问题合集
- rails 分页插件 Kaminari 的 数组分页
- 下载 bilibili 视频字幕文件
热门文章
- el-table默认打钩
- 第一季度贡献奖励分配结果与评级 | IOST合伙人计划
- OMRON CP1H PLC脉冲控制三轴伺服, 码垛机,实际 项目,程序结构清析,有完整的注释,重复功能做成FB功能块,在其它项目可以导出直接用,MCGS触摸屏程序,有电气CAD图纸。
- Ubuntu / CentOS 安装 Anaconda 并创建虚拟环境
- 深入探索 Android 网络优化(三、网络优化篇)上
- 埃隆·马斯克的30句创业语录 | 每天用ChatGPT解读1位大佬语录
- Lesson 7 Too late 为时太晚
- python教学小说02 猫都让我学python
- 网站建站有多少种类型?需要源代码吗?
- android toolbar的使用方法,Toolbar使用详解