光源的分类

  1. AmbientLight(环境光),PointLight(点光源),SpotLight(聚光源) 和 DirectionalLight(平行光)是基础光源
  2. HemisphereLight(半球光源),AreaLight(区域光源),LensFlare(镜头光晕) 是有特殊用途的光源

半球光源 HemisphereLight

  • 半球光直接放置于场景之上,光照颜色从天空光线颜色颜色渐变到地面光线颜色
  • 半球光不能投射阴影
  • 半球光可以创建出更加贴近自然的户外光照效果,就是为了模拟在户外场景中的反光效果

半球光源的应用

如果不使用 THREE.HemisphereLight,要模拟户外光照,通常是创建一个 THREE.DirectionalLight 来模拟太阳光,并且可能再添加一个 THREE.AmbientLight 来为场景提供基础色

半球光源的常用属性

  • color:从天空发出的光线的颜色
  • groundColor:从地面发出的光线的颜色
  • intensity:光源照射的强度。默认值为:1。
  • position:光源在场景中的位置。默认值为:(0, 100, 0)
  • visible:设为 ture(默认值),光源就会打开。设为 false,光源就会关闭。

半球光源的代码示例

var hemiLight = new THREE.HemisphereLight(天空的反光颜色,地面的反光颜色,光的强度)
// 这个也是默认位置
hemiLight.position.set(0, 100, 0)
scene.add(hemiLight)

环境光 AmbientLight

  • 环境光是没有特定方向的光源,会均匀的照亮场景中的所有物体,主要是均匀整体改变Threejs物体表面的明暗效果,这一点和具有方向的光源不同,比如点光源可以让物体表面不同区域明暗程度不同
  • 环境光影响整个场景,它的光线没有特定来源但是又无处不在,它不能影响阴影生成,因为它没有方向,并且不能作为唯一光源,使用其他光源的同时使用 THREE.AmbientLight,目的是弱化阴影和添加一些颜色

环境光的代码示例

// THREE.AmbientLight不需要指定位置,只需要指定颜色(十六进制)
var ambientLight = new THREE.AmbientLight(0x0c0c0c)
scene.add(ambientLight)

环境光和半球光源的区别

  • 环境光分为 THREE.AmbientLight & THREE.HemisphereLight
  • THREE.AmbientLight 物体明暗对比无法呈现
  • THREE.HemisphereLight 物体明暗对比比较明显
  • 如果想模拟真实世界,建议用THREE.HemisphereLight,如果对三维的展现不是特别苛刻,可以用 THREE.AmbientLightTHREE.DirectionalLight

点光源 PointLight

  • 点光源就像生活中的白炽灯,光线沿着发光核心向外发散,同一平面的不同位置与点光源光线入射角是不同的,点光源照射下,同一个平面不同区域是呈现出不同的明暗效果
  • 和环境光不同,环境光不需要设置光源位置,而点光源需要设置位置属性.position,光源位置不同,物体表面被照亮的面不同,远近不同因为衰减明暗程度不同

点光源的代码示例

var point = new THREE.PointLight(0xffffff)
//设置点光源位置,改变光源的位置
point.position.set(400, 200, 300)
scene.add(point)

平行光 DirectionalLight

  • 平行光顾名思义光线平行,对于一个平面而言,平面不同区域接收到平行光的入射角一样
  • 点光源因为是向四周发散,所以设置好位置属性.position就可以确定光线和物体表面的夹角
  • 对于平行光而言,主要是确定光线的方向,光线方向设定好了,光线的与物体表面入射角就确定了,仅仅设置光线位置是不起作用的
  • 在三维空间中为了确定一条直线的方向只需要确定直线上两个点的坐标即可,所以平行光提供了位置.position和目标.target两个属性来一起确定平行光方向
  • 目标.target的属性值可以是场景中任何一个三维模型对象,比如一个网格模型Mesh,平行光会通过自身位置属性.position.target表示的物体的位置属性.position计算出来
  • 平行光如果不设置.position.target属性,光线默认从上往下照射,也就是可以认为(0,1,0)(0,0,0)两个坐标确定的光线方向
  • 注意一点平行光光源的位置属性.position并不表示平行光从这个位置向远处照射,.position属性只是用来确定平行光的照射方向,平行光你可以理解为太阳光,从无限远处照射过来

平行光的代码示例

var directionalLight = new THREE.DirectionalLight(0xffffff, 1)
// 设置光源的方向:通过光源position属性和目标指向对象的position属性计算
directionalLight.position.set(80, 100, 50)
// 方向光指向对象网格模型mesh,可以不设置,默认的位置是0,0,0
directionalLight.target = mesh
scene.add(directionalLight)

聚光源 SpotLight

  • 聚光源可以认为是一个沿着特定方会逐渐发散的光源,照射范围在三维空间中构成一个圆锥体
  • 通过属性.angle可以设置聚光源发散角度,聚光源照射方向设置和平行光光源一样是通过位置.position和目标.target两个属性来实现

聚光源的代码示例

var spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(200, 200, 200)
spotLight.target = mesh
// 设置聚光光源发散角度
spotLight.angle = Math.PI / 6
scene.add(spotLight)//光对象添加到scene场景中

什么是光投影

在具有方向光源的作用下,物体会形成阴影投影效果

如何光投影计算

Three.js物体投影模拟计算主要设置三部分

  1. 一个是设置产生投影的模型对象
  2. 一个是设置接收投影效果的模型
  3. 最后一个是光源对象本身的设置,光源如何产生投影

平行光投影计算代码示例

// 创建方向光光源
var directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(60, 100, 40)
scene.add(directionalLight) // 设置用于计算阴影的光源对象
directionalLight.castShadow = true // 设置计算阴影的区域,最好刚好紧密包围在对象周围,如果计算阴影的区域过大:模糊,如果过小:看不到或显示不完整
directionalLight.shadow.camera.near = 0.5
directionalLight.shadow.camera.far = 300
directionalLight.shadow.camera.left = -50
directionalLight.shadow.camera.right = 50
directionalLight.shadow.camera.top = 200
directionalLight.shadow.camera.bottom = -100 // 设置mapSize属性可以使阴影更清晰,不那么模糊
// directionalLight.shadow.mapSize.set(1024,1024)

聚光源投影计算代码示例

// 创建聚光光源
var spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(50, 90, 50)
spotLight.angle = Math.PI /6
scene.add(spotLight) // 设置用于计算阴影的光源对象
spotLight.castShadow = true // 设置计算阴影的区域,注意包裹对象的周围
spotLight.shadow.camera.near = 1
spotLight.shadow.camera.far = 300
spotLight.shadow.camera.fov = 20

光投影计算的常用属性

  • 模型.castShadow属性,.castShadow属性值是布尔值,默认false,用来设置一个模型对象是否在光照下产生投影效果
  • 模型.receiveShadow属性,.receiveShadow属性值是布尔值,默认false,用来设置一个模型对象是否在光照下接受其它模型的投影效果
  • 光源.castShadow属性,如果属性设置为true, 光源将投射动态阴影,警告: 这需要很多计算资源,需要调整以使阴影看起来正确
  • 光源.shadow属性

    平行光DirectionalLight.shadow属性值是平行光阴影对象DirectionalLightShadow

    聚光源SpotLight.shadow属性值是聚光源阴影对象SpotLightShadow

  • 阴影对象基类LightShadow

    LightShadow属性.camera,观察光源的相机对象,从光的角度来看,以相机对象的观察位置和方向来判断,其他物体背后的物体将处于阴影中

    LightShadow属性.mapSize,定义阴影纹理贴图宽高尺寸的一个二维向量Vector2,

    较高的值会以计算时间为代价提供更好的阴影质量,宽高分量值必须是2的幂直到给定设备的WebGLRenderer.capabilities.maxTextureSize

    尽管宽度和高度不必相同 (例如,(512, 1024)是有效的),默认值为 ( 512, 512 )

    LightShadow属性.map,该属性的值是WebGL渲染目标对象WebGLRenderTarget,使用内置摄像头生成的深度图,超出像素深度的位置在阴影中,在渲染期间内部计算

参考文档一 ———— Threejs光源对象

参考文档二 ———— HemisphereLight和AmbientLight 区别

参考文档三 ———— Threejs官方示例

我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!

如果您喜欢这篇文章,欢迎访问我的 本文github仓库地址,为我点一颗Star,Thanks~

转发请注明参考文章地址,非常感谢!!!

详解Threejs中的光源对象的更多相关文章

  1. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  2. 详解HTML中的window对象和document对象

    Window -- 代表浏览器中一个打开的窗口: 对象属性 window //窗口自身 window.self //引用本窗户window=window.self window.name //为窗口命 ...

  3. 详解JavaScript中的Object对象

    Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...

  4. 详解Javascript中的Array对象

    基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...

  5. 详解es6中Proxy代理对象的作用

    在es6中新添加了Proxy,那么它有什么作用啊?Proxy本意为代理,而es6中的Proxy也就是代理对象,那么代理对象感觉听起来很模糊,在这里就解释一下Proxy代理对象的作用. Proxy的主要 ...

  6. 详解CorelDRAW中如何合并与拆分对象

    合并两个或多个对象可以创建带有共同填充和轮廓属性的单个对象,以便将这些对象转换为单个曲线对象.可以合并的对象包括矩形.椭圆形.多边形.星形.螺纹.图形或文本等,本教程将详解CorelDRAW中关于合并 ...

  7. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  8. 【转】详解C#中的反射

    原帖链接点这里:详解C#中的反射   反射(Reflection) 2008年01月02日 星期三 11:21 两个现实中的例子: 1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内 ...

  9. 详解Webwork中Action 调用的方法

    详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...

随机推荐

  1. pycharm中安装和使用sqlite过程详解

    创建Django项目,添加app 使用虚拟环境 项目创建默认使用的Django数据库是sqlite 配置静态文件 STATIC_URL = '/static/' # HTML中使用的静态文件夹前缀 S ...

  2. [no code][scrum meeting] Beta 8

    $( "#cnblogs_post_body" ).catalog() 例会时间:5月22日15:30,主持者:赵涛 下次例会时间:5月23日11:30,主持者:肖思炀 一.工作汇 ...

  3. 第5次 Beta Scrum Meeting

    本次会议为Beta阶段第6次Scrum Meeting会议 会议概要 会议时间:2021年6月6日 会议地点:「腾讯会议」线上进行 会议时长:10min 会议内容简介:对完成工作进行阶段性汇报:对下一 ...

  4. 如何使用python 新建文件夹以及递归创建文件夹

    转载:如何使用python 新建文件夹以及递归创建文件夹 | 酷python (coolpython.net) 1. os.mkdir 使用python创建文件夹,通常使用os.mkdir方法,在使用 ...

  5. linux 蓝牙开发调试(rtl8821cs模块)

    刚调完rtl8821cs的wifi功能,项目需要打通蓝牙配网功能. 调试过程中遇到各种问题中间几乎放弃,倒腾了几天最后还是打通了,顺便记录下过程. 通信接口:SDIO @WiFi.Uart @BT;工 ...

  6. 第一个只出现一次字符的位置 牛客网 剑指Offer

    第一个只出现一次字符的位置  牛客网 剑指Offer 题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 ...

  7. 原串反转 牛客网 程序员面试金典 C++ Python

    原串反转 牛客网 程序员面试金典 C++ Python 题目描述 请实现一个算法,在不使用额外数据结构和储存空间的情况下,翻转一个给定的字符串(可以使用单个过程变量). 给定一个string iniS ...

  8. vue路由监听和参数监听

    1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu" ...

  9. Redis去重方法

    目录 1.基于 set 2.基于 bit 3.基于 HyperLogLog 4. 基于bloomfilter 这篇文章主要介绍了Redis实现唯一计数的3种方法分享,本文讲解了基于SET.基于 bit ...

  10. 攻防世界 WEB 高手进阶区 PHP2 Writeup

    攻防世界 WEB 高手进阶区 PHP2 Writeup 题目介绍 题目考点 url 二次解码 index.phps 文件(第一次使用dirsearch可能扫不到,需要加到工具字典里) php 简单语法 ...