Three.js中的光源
来源:互联网 发布:商业组织顶级域名 编辑:程序博客网 时间:2024/06/05 21:00
Threejs中的各种光源
作为3D技术的发展趋势,浏览器端3D技术越来越被一些技术公司重视。由此,Threejs非常注重3D渲染效果的真实性,对渲染真实性来说,使用光源是比不可少的技巧。Threejs,在光源方面提供了多种光源供选择。
1、 光源基类
在Threejs中,光源用Light表示,它是所有光源的基类。它的构造函数是:
THREE.Light ( hex )
它有一个参数hex,接受一个16进制的颜色值。例如要定义一种红色的光源,我们可以这样来定义:
Var redLight = new THREE.Light(0xFF0000);
环境光
环境光是经过多次反射而来的光称为环境光,无法确定其最初的方向。环境光是一种无处不在的光。环境光源放出的光线被认为来自任何方向。因此,当你仅为场景指定环境光时,所有的物体无论法向量如何,都将表现为同样的明暗程度。 (这是因为,反射光可以从各个方向进入您的眼睛)
环境光用THREE.AmbientLight来表示,它的构造函数如下所示:
THREE.AmbientLight( hex )
它仍然接受一个16进制的颜色值,作为光源的颜色。环境光将照射场景中的所有物体,让物体显示出某种颜色。环境光的使用例子如下所示:
var light = new THREE.AmbientLight( 0xff0000 );
scene.add( light );
只需要将光源加入场景,场景就能够通过光源渲染出好的效果来了。
点光源
点光源:由这种光源放出的光线来自同一点,且方向辐射自四面八方。例如蜡烛放出的光,萤火虫放出的光。
点光源用PointLight来表示,它的构造函数如下所示:
PointLight( color, intensity, distance )
这个类的参数稍微复杂一些,我们花点时间来解释一下:
Color:光的颜色
Intensity:光的强度,默认是1.0,就是说是100%强度的灯光,
distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从Intensity衰减为0。 默认情况下,这个值为0.0,表示光源强度不衰减。
聚光灯
聚光灯:这种光源的光线从一个锥体中射出,在被照射的物体上产生聚光的效果。使用这种光源需要指定光的射出方向以及锥体的顶角α。聚光灯示例如图所示:
聚光灯的构造函数是:
THREE.SpotLight( hex, intensity, distance, angle, exponent )
函数的参数如下所示:
Hex:聚光灯发出的颜色,如0xFFFFFF
Intensity:光源的强度,默认是1.0,如果为0.5,则强度是一半,意思是颜色会淡一些。和上面点光源一样。
Distance:光线的强度,从最大值衰减到0,需要的距离。 默认为0,表示光不衰减,如果非0,则表示从光源的位置到Distance的距离,光都在线性衰减。到离光源距离Distance时,光源强度为0.
Angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度。
exponent:光源模型中,衰减的一个参数,越大衰减约快。
- Three.js中的光源
- Three.JS学习 6:光源
- three.js光源的应用
- three.js中常用的光源详解
- 23 Three.js的光源种类
- three.js 01-03 之添加光源
- three.js 03-01 之 AmbientLight 光源
- three.js 03-02 之 PointLight 光源
- three.js 03-03 之 SpotLight 光源
- three.js 03-04 之 DirectionalLight 光源
- three.js 03-05 之 HemisphereLight 光源
- three.js 03-06 之 RectAreaLight 光源
- 24 Three.js的环境光源THREE.AmbientLight
- 25 Three.js的点光源THREE.PointLight
- 26 Three.js的聚光灯光源THREE.SpotLight
- 28 Three.js的特殊光源THREE.HemisphereLight户外光照光源
- THREE.JS中常用的4种光源
- Three.js开发指南---使用three.js里的各种光源
- 关于ValueAnimator无作用
- FormData 的方法说明
- 看设计师大牛如何将用户体验与建站融会贯通
- 运行pythonp 提示:please select a valid interpreter
- 关于使用vue.js的模板渲染时出现一瞬间的设置的模板的解决方案
- Three.js中的光源
- ArcGIS API for JavaScript 4.x中的3D部分(1)
- 万能地图下载器带你看城市30年的变迁
- mybatis 调用mysql存储过程 带输出输入参数
- 自定义标签的执行过程和自定义标签处理器类的生命周期
- 信道安全(SPFA)
- Linux常用命令
- 项目管理专业英语-风险识别
- Xamarin XAML语言教程Visual Studio中实现XAML预览