【WebGL】4.光源

光的类型:所有的光都是从THREE.Light继承,分为环境光THREE.AmbientLight,点光源PointLight,聚光灯THREE.SpotLight和方向光THREE.DirectionalLight等。

1. 环境光:一种无处不在的光,任何物体任何方向都可以感受的光源,这种光源和物体的距离,方向,角度无关

var light = new THREE.AmbientLight( 0xff0000 );

scene.add( light );

2. 点光源:光源放出的光线来自同一点,且方向辐射自四面八方。例如蜡烛放出的光,萤火虫放出的光。

PointLight( color, intensity, distance )

Color:光的颜色

Intensity:光的强度,默认是1.0,就是说是100%强度的灯光

distance:光的距离,从光源所在的位置,经过distance这段距离之后,光的强度将从  Intensity衰减为0。 默认情况下,这个值为0.0  ,表示光源强度不衰减。

3. 聚光灯:这种光源的光线从一个锥体中射出,在被照射的物体上产生聚光的效果

THREE.SpotLight( hex, intensity, distance, angle, exponent )

函数的参数如下所示:

Hex:聚光灯发出的颜色,如0xFFFFFF

Intensity:光源的强度,默认是1.0,如果为0.5,则强度是一半,意思是颜色会淡一些。和上面点光源一样。

Distance:光线的强度,从最大值衰减到0,需要的距离。 默认为0,表示光不衰减,如果非0,则表示从光源的位置到Distance的距离,光都在线性衰减。到离光源距离Distance时,光源强度为0.

Angle:聚光灯着色的角度,用弧度作为单位,这个角度是和光源的方向形成的角度。

exponent:光源模型中,衰减的一个参数,越大衰减约快。

4. 方向光:一组没有衰减的平行的光线

THREE.DirectionalLight = function ( hex, intensity )

Hex:颜色,用16进制表示

Intensity:光线的强度,默认为1

方向光的特性:

1.光的方向由左边和原点决定

2.颜色深浅与物体距离无关,但是与方向有关

时间: 2024-12-07 15:46:16

【WebGL】4.光源的相关文章

[WebGL入门]二十二,从环境光源发出的光

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 平行光源的弱点 上次挑战了一下从平行光源发出的光.平行光源的光的方向是固定的.而且,为了模拟这些,需要用到模型变换矩阵的逆矩阵,以及需要向模型数据中加入法线情报等等.平行光源的计算负担比较小,在一定程度上模拟了光照效果,在3D模拟世界中经常被用到.但是,平行光源也有弱

webgl之五彩光源

一.Three.js中有哪些光源? 在Three.js中,光源有一个基类THREE.Light(hex),这个hex接受16进制颜色作为参数而初始化光源的颜色,比如我们要定义一种绿色的光源,可以这样来定义: var greenLight = new THREE.Light(0x00FF00); 而作为3d引擎three.js,这个基类是很难满足我们的要求的,所以,我们还需要继承这个基类的更多样化的光源:   即除了这个基类光源之外,我们还有环境光.区域光.方向光.聚光灯.点光源等等.下面我们介绍

[WebGL入门]二十四,补色着色

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 着色方法 上次介绍了反射光,反射光是实现光泽的不可缺少的概念,到此为止,基本的光照效果都已经封装完毕了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次稍微换个视点,看一下着色,着色是

[WebGL入门]二十三,反射光的光照效果

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 各种各样的光照 上次,以及上上次,介绍了通过顶点着色器来实现光照效果. 最开始介绍了从平行光源发出的光,上次介绍了平行光源的缺点,以及对应这个缺点的方法,就是环境光源. 这次是光照处理的第三篇,进一步介绍反射光照. 反射光和它的名字一样,就是模拟光的反射.通过反射光,

[WebGL入门]二十,绘制立体模型(圆环体)

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 立体的模型 这次稍微喘口气,开始绘制立体模型.这里说的[喘口气]是指本次的文章中没有出现任何新的技术知识点.只是利用到现在为止所介绍过的内容,来绘制一个立体的圆环体.到现在为止,只绘制了三角形和四边形,当然,在三维空间中绘制简单的多边形也没什么不对,但是缺点儿说服力.

[WebGL入门]二十一,从平行光源发出的光

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 照亮世界 上次绘制了一个像甜甜圈一样的圆环体模型,虽然没有涉及特别的新知识,但是也算成功的绘制出了3D模型了吧. 那么,这次来看一下光. 光在3D渲染中有很多种类和使用方法,想把光研究透彻,也是很不容易的. 现实世界中我们能看到物体,是因为物体反射的光进入我们的眼睛.

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------

【转】使用 WebGL 进行 3D 开发,第 2 部分: 使用 WebGL 库以更少的编码做更多的事情

转自HTML5开发社区 使用 WebGL 进行 3D 开发,第 1 部分: WebGL 简介使用 WebGL 进行 3D 开发,第 2 部分: 使用 WebGL 库以更少的编码做更多的事情使用 WebGL 进行 3D 开发,第 3 部分: 添加用户交互 WebGL API 让 JavaScript 开发人员能够直接利用如今的 PC 及移动设备硬件中强大的内置 3D 图形加速功能.现代浏览器透明地支持 WebGL,它使人们可以为主流 Web 用户创建高性能的 3D 游戏.应用程序以及 3D 增强的

[WebGL入门]二十五,点光源的光照

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 本次的demo的运行结果 点光源 上次介绍了高氏着色和补色着色.使用补色着色的手法,可以渲染更加自然的阴影,3D效果更加真实.但是会有计算量比较大的缺点.这个只能case by case,根据不同的情况来处理了,是个挺烦人的地方.那么,这次,还是讲光源.我貌似听到了"不会吧......&quo