深入理解three.js中平面光光源RectAreaLight
前言
之前有深入讲解过Three.js中光源,在那篇文章的最后也说了由于平面光光源的特殊性,所以会单独拿出来讲解,这篇文章会详细的讲解平面光光源的特性和实际应用该如何使用。
首先,平面光光源从一个矩形平面上均匀地发射光线,这种光源的主要应用场景是模拟明亮的窗户或者条状灯光光源,实际在开发家具建模项目中会有广泛应用。平面光光源的最大特点事不支持阴影,我们无法通过设置RectAreaLight.castShadow = true来映射让物体显示阴影,而且,平面光光源支持的材质也很有限,只有MeshStandardMaterial和MeshPhysicalMaterial两种材质。有一点需要特别说明下,查看官方文档中有 你必须在你的场景中加入 RectAreaLightUniformsLib ,并调用init() 注意事项,但是我在项目中使用发现,我不添加RectAreaLightUniformsLib也是能够正常运行的。
原理说明
创建一个平面光光源很简单,官网实例如下:
var width = 10;
var height = 10;
var intensity = 1;
var rectLight = new THREE.RectAreaLight( 0xffffff, intensity, width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
scene.add( rectLightHelper );
new THREE.RectAreaLight用于创建平面光光源构造器函数,该函数有四个变量,分别是color,intensity,width,height,以上四个参数都是可选参数,如果不传都会按照默认的值来创建平面光光源。
color:(可选参数) 十六进制数字表示的光照颜色,缺省值为 0xffffff (白色),实测中发现使用HEX格式和RGB格式都是可以的,但是RGBA格式不支持。
intensity:(可选参数) 光源强度/亮度 ,缺省值为 1,实测最小值为0,最大值不限,2为自然光亮度。
width:(可选参数) 光源宽度,缺省值为 10,只要不小于0都可以。
height:(可选参数) 光源高度,缺省值为 10,只要不小于0都可以。
rectLight.position.set( 5, 5, 0 ) 这行代码用来指示平面光光源位置,这个位置可以随意设定,只要在camera设定的范围内都可以,如果超出了我们将什么都看不到,当然这个位置最好离映射物体不能太远,因为本身平面光光源模拟的是窗口光,所有它的辐射距离很有限,位置设定离物体太远将无法映射物体。
rectLight.lookAt( 0, 0, 0 )这行代码用来指代平行光光源指向的中心位置,一般情况下会指向需要映射物体的中心位置。
rectLightHelper = new THREE.RectAreaLightHelper( rectLight )这行代码再次说明下,实测中删掉也是可以正常执行的。
应用场景说明
首先,需要说明,Three.js中的所有光源在场景中是没有任何显示的,我们是感知不到光源的,所以为了模拟现实中的光源点,比如太阳、灯泡等,我们一般会通过创建一个材质为MeshBasicMaterial的物体来替代现实中的光源。至于为什么会选择MeshBasicMaterial的材质来替代光源,后续我会专门写一篇博文来详细讲解MeshBasicMaterial这种材质。回到平面光光源,项目中模拟平面光光源通常会通过面板来指代光源,一般使用的比较多的是平面缓冲几何体PlaneBufferGeometry。
平面缓冲几何体替代平面光光源位置的时候,我们需要创建两个平面缓冲几何体,这样做是为了保证我们看到平面光光源指向的是同一个方向。
平面光光源正面平面缓冲几何体代码如下:
var rectLightMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( {color:'#ffffff' side: THREE.BackSide } ) );
rectLightMesh.scale.x = rectLight.width;
rectLightMesh.scale.y = rectLight.height;
rectLight.add( rectLightMesh );
上述代码中,rectLight表示已经创建好的平面光光源,rectLightMesh 表示平面光光源正面的平面缓冲几何体,正面的平面缓冲几何体我们一定要设置智能单面查看,必须设置side = THREE.BackSide,这样做是为了保证方面的平面缓冲几何体能够上色。
平面光光源反面平面缓冲几何体代码如下:
var rectLightMeshBack = new THREE.Mesh( new THREE.PlaneBufferGeometry(), new THREE.MeshBasicMaterial( { color: 0x080808 } ) );
rectLightMesh.add( rectLightMeshBack );
上述代码中,rectLightMesh表示的是我们上一步创建的平面光光源正面缓冲几何体,rectLightMeshBack 表示是的我们创建的平面光光源反面平面缓冲几何体,这一步中我们只需要将创建的反面平面缓冲几何体添加到上一步创建的正面缓冲几何体中即可。
平面光光源实例
实例效果图如下:
实例介绍:
实例中,创建了一个平面,这个平面用来限定平面光光源的光照范围,平面上创建了三个物体,分别是一个球体,一个正方体,一个管状体。场景中添加了亮度为0.1的自然光,防止场景太黑影响视觉,也可衬托平面光光源。创建了亮度为1的平面光光源,在平面光光源位置添加了正反两面平面缓冲几何体。为了能够更好地感受到平面光光源在应用中亮度与距离的关系,因此在实例中添加了动画,用于随机移动平面光光源。
实例预览地址:深入理解three.js中平面光光源RectAreaLight
后话
希望上述讲解能够帮助到您,上述见解纯属个人理解,如果有理解不到位的或者表述有误的还请留言说明,共同学习,共同进步。
深入理解three.js中平面光光源RectAreaLight的更多相关文章
- 深入理解three.js中光源
前言: Three.js 是一个封装了 WebGL 接口的非常好的库,简化了 WebGL 很多细节,降低了学习成本,是当前前端开发者完成3D绘图的得力工具,那么今天我就给大家详细讲解下 Three.j ...
- 理解Node.js的事件轮询
前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...
- 初步理解require.js模块化编程
初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...
- 方便大家学习的Node.js教程(一):理解Node.js
理解Node.js 为了理解Node.js是如何工作的,首先你需要理解一些使得Javascript适用于服务器端开发的关键特性.Javascript是一门简单而又灵活的语言,这种灵活性让它能够经受住时 ...
- 深入理解Node.js中的垃圾回收和内存泄漏的捕获
深入理解Node.js中的垃圾回收和内存泄漏的捕获 文章来自:http://wwsun.github.io/posts/understanding-nodejs-gc.html Jan 5, 2016 ...
- 深入理解Three.js中透视投影照相机PerspectiveCamera
前言 在开始正式讲解透视摄像机前,我们先来理理three.js建模的流程.我们在开始创建一个模型的时候,首先需要创建我们模型需要的物体,这个物体可以是three.js中已经为我们封装好的,比如正方体, ...
- 深入理解Three.js中正交摄像机OrthographicCamera
前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用 ...
- 深入理解Three.js中线条Line,LinLoop,LineSegments
前言 在可视化开发中,无论是2d(canvas)开发还是3d开发,线条的绘制应用都是比较普遍的.比如绘制城市之间的迁徙图,运行轨迹图等.本文主要讲解的是Three.js中三种线条Line,LineLo ...
- 出去就餐并且理解Express.js的基本知识
Going out to eat and understanding the basics of Express.js出去就餐并且理解Express.js的基本知识 原文:Going out to e ...
随机推荐
- HashMap与ConcurrentHashMap在Java8的改进
链接:http://www.cnblogs.com/huaizuo/archive/2016/04/20/5413069.html#undefined http://www.cnblogs.com/h ...
- .Net MVC 框架基础知识
一.什么是MVC? MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式. MVC全名是Model View Controlle ...
- SQL Server发布订阅报错:The conversion of a datetime data type to smalldatetime data type resulted in an out of range value.
执行SQL Server发布订阅时,报错如下信息: The conversion of a datetime data type to smalldatetime data type resulted ...
- Nginx安装之源码安装
nginx部署 1. 安装依赖 yum install gcc gccc++ pcre pcre-devel zlib zlib-devel openssl openssl-devel-y 2. 下载 ...
- G1 collector 介绍
背景:由于CMS算法产生空间碎片和其它一系列的问题缺陷,HotSpot提供了另外一种垃圾回收策略,G1(也就是Garbage First)算法,该算法在JDK7u4版本被正式推出,官网对此描述如下: ...
- three.js实现球体地球2018年全球GDP前十国家标记
概况如下: 1.SphereGeometry实现自转的地球: 2.THREE.Math.degToRad,Math.sin,Math.cos实现地图经纬度与三位坐标x,y,z之间的转换: 3.Imag ...
- ES6之模块化导入导出
1.概述 在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的.复杂的项目形成了巨大障碍. 在 ES6 之前,社区制定了一些模 ...
- LuoGu-P2863牛的舞会The Cow Prom[tarjan 缩点模板]
传送门:https://www.luogu.org/problemnew/show/P2863 思路:tarjan模板题,之前会的tarjan,一直想学缩点到底是什么操作,发现就是把同组的放在一个数组 ...
- CodeForces 809B Glad to see you!
Glad to see you! 题解: 交互题一般都是需要用二分去完成. 在二分时候每次检查左边和右边哪边会和答案更近, 然后在更近的那段新区间去重复检查, 知道区间长度为1. 在检查的时候,可以使 ...
- codeforces 822 D. My pretty girl Noora(dp+素数筛)
题目链接:http://codeforces.com/contest/822/problem/D 题解:做这题首先要推倒一下f(x)假设第各个阶段分成d1,d2,d3...di组取任意一组来说,如果第 ...