美文网首页Three.js
THREE.JS中的光源

THREE.JS中的光源

作者: ANoman_M | 来源:发表于2017-08-02 18:13 被阅读56次

Three.js中有很多各式各样的光源,不同的光源可以产生不同的光照效果。这篇文章主要介绍他们的区别,以及各自的应用场景。

目录:

  • AmbientLight (环境光)
  • PointLight (点光源)
  • SpotLight (聚光灯光源)
  • DirectionalLight (平行光)
  • HemisphereLight (半球光)
  • AreaLight (面光源)
  • LensFlare (镜头眩光)
    这不是一种光源,但是通过LensFlare 可以为场景中的光源添加眩光效果。

1.AmbientLight

基础光源,颜色会添加到整个场景和所有对象的当前颜色上。不能作为场景中的唯一光源。一般作为辅助使用,目的是弱化阴影或者添加一些颜色。

2.PointLight

空间中的一点,朝所有的方向发射光线。就像夜空中的照明弹。点光源不产生阴影。
点光源的属性:
color:颜色
intensity: 光照强度,默认为1
distance:距离。决定光线可以照射多远。光线的亮度不会随着距离的增加而递减。
position:位置
visible:是否可见。true,光源打开,false,光源关闭

3.SpotLight

聚光的锥形效果,类似台灯、天花板的吊灯或者手电筒。可以产生阴影。


soptlight.png

4.DirectinalLight

也叫无限光。这种光源发出的光线是平行的,例如太阳光。
场景中对象接收到的都是相同光强的光。这种光只用direction,color,intensity属性计算颜色和阴影。
与聚光灯光源一样,也可以设置几个属性来控制光照强度和投影的方法,属性基本相同。如position,target,intensity,distance,castShadow,onlyShadow,shadowCameraNear.....

5.特殊光源

HemisphereLight 半球光光源

用以创建更贴近自然的光照效果。例如室外环境,并不是所有的光照都来自上方,很多来自空气散射,地面散射等等。这种光源就是为了这种情形创建的。
var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00 , 0.6)
hemiLight.position.set(0,500,0);
scene.add(hemiLight);
groundColor:从地面发出的光的颜色。
Color:从天空发出的光的颜色。
intensity:光线照射强度。

AreaLight 平面光光源

即光源为矩形。AreaLight不在Three.js标准库中。因此需要额外引用文件。并且应该使用WebGL延迟渲染器(WebGLDeferredRenderer对象),而不是WebGLRenderer。

LensFlare 镜头眩光

通过实例化THREE.LensFlare对象来创建镜头眩光效果。

相关文章

  • Three.js光源梳理1——光照基类(Light)

    Three.js光源系统基本上与Unity没有太大差别,下图是当前Three.js版本提供的全部光源,本系列梳理一...

  • THREE.js中的光源

    THREE中的光源包含多种其中基础光源有4种 特殊光源有3种(这三种我们后面再详述) ambientLight 环...

  • THREE.JS中的光源

    Three.js中有很多各式各样的光源,不同的光源可以产生不同的光照效果。这篇文章主要介绍他们的区别,以及各自的应...

  • [WebAR和WebVR学习之路]组成Three.js场景的基本

    组成Three.js场景的基本组件 《创建场景》 场景中的基本组件:相机、光源和几何体 THREE.Scene()...

  • HTREE.JS1.0 Hello three.js

    1、Hello Three.js程序 2、添加灯光效果 在场景里添加一个光源 将材质改成对光源有效果的材质 Mes...

  • three.js浅谈@光源

    光源种类 承接上一节讲了各种镜头,但是光有镜头还是无法看清东西的,因为需要光源threejs中有6种光源 环境光 ...

  • three.js之光源

    作为3D技术的发展趋势,浏览器端3D技术越来越被一些技术公司重视。由此,Threejs非常注重3D渲染效果的真实性...

  • three.js(5)-光源

    我们前面提到了材质与光源的关系,漫反射离不开光源。光源分如下几种: 点光源-PointLight 顾名思义,就是一...

  • Three.js (二) 光源、投影、光晕

    光源 光的通用属性fex:光的颜色,用16进制颜色表示(如0x00FF00)intensity:光的强度,默认为1...

  • Three.js 核心 五步

    1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设...

网友评论

    本文标题:THREE.JS中的光源

    本文链接:https://www.haomeiwen.com/subject/glihkxtx.html