1.three.js库提供的光源

three.js库提供了一些列光源,而且没种光源都有特定的行为和用途。这些光源包括:

光源名称/描述

AmbientLight(环境光)/这是一种基础光源,它的颜色会添加到整个场景和所有对象的当前颜色上

PointLight(点光源)/空间中的一点,朝所有的方向发射光线

SpotLight(聚光灯光源)/这种光源有聚光的效果,类似台灯、天花板上的吊灯,或者手电筒

DirectionLight(方向光)/也称为无限光。从这种光源发出的光线可以看着平行的。例如,太阳光

HemishpereLight(半球光)/这是一种特殊光源,可以用来创建更加自然的室外光线,模拟放光面和光线微弱的天空

AreaLight(面光源)/使用这种光源可以指定散发光线的平面,而不是空间中的一个点

LensFlare(镜头眩光)/这不是一种光源,但是通过LensFlare可以为场景中的光源添加眩光效果

2.使用THREE.Color对象

当构建THREE.Color(color)对象时,color可以用十六进制字符串(#cccccc)或者十六进制数值。然而,在构想构造好后如果需要改变颜色,就不得不创建一个新的THREE.Color对象或者修改当前THREE.Color对象的内部属性。THREE.Color提供的函数包括:

函数名/描述

set(value)/将当前颜色改成指定的十六进制值。可以是字符串,也可以是数字

setHex(value)/将当前颜色指定为十六进制数值

setRGB(r, g, b)/根据提供的RBG设置颜色。参数范围0到1

setHSV(h, s, v)/根据提供的HSV值设置颜色。参数的范围从0到1

setStyle(color)/根据CSS值设置颜色

copy(color)/从提供的颜色对象复制颜色值到当前对象

convertGamaToLinear(color)/将当前颜色从伽马色彩空间转换到线性色彩空间

convertLinearToGamma(color)/将当前颜色从线性色彩空间转换到伽马色彩空间

getHex()/以十六进制形式从颜色对象中获取颜色值

getHexString()/以十六进制字符串形式从颜色对象中获取颜色值

getStyle()/以CSS值得形式从颜色对象获取颜色值

getHSV()/以HSV形式从颜色对象中获取颜色值

addColor(color)/将提供的颜色添加到当前颜色上

clone()/复制当前颜色

3.PointLight属性

属性/描述
    color(颜色)/光源颜色
    intensity(强度)/光照强度。默认值是1
    distance(距离)/光源照射的距离
    position(位置)/光源所在的位置
    visible(是否可见)/如果设为true,该光源就会打开;如果设置为false,改光源就会关闭

4.SpotLight属性

属性/描述
    castShadow(投影)/如果设置为true,光源生成阴影
    target/决定光源的方向
    angle(角度)/光源射出的光柱有多宽。单位为弧度,默认值是Math.PI/3
    shadowCameraVisible(投影方式显示)/用于调试,如果设置true,你就可以看到光源在哪里以及如何生成阴影
    shadowMapWidth(阴影映射宽度)/决定多少像素用来生成阴影。如果阴影的边缘参差不齐或看上去不平滑,可增加这个值。场景渲染之后就不能修改
    shadowMapHeight(阴影映射高度)/决定杜少像素用来生成阴影。如果阴影的边缘参差不齐或看上去不平滑,可增加这个值。场景渲染之后就不能修改
    创建光源非常简单。只要指定颜色、设置需要的属性、添加到场景集客。例如:

var target = new THREE.Object3D();
target.position = new THREE.Vector3(5, 0, 0); var pointColor = "#ffffff";
var spotLight = new THREE.SpotLight(pointColor);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.shadowCameraNear = 2;
spotLight.shadowCameraFar = 200;
spotLight.target = target;
spotLight.distance = 0;
spotLight.angle = 0.4; scene.add(spotLight);

如果阴影看上去有点模糊,可以增加shadowMapWidth、shadowMaptHeight属性的值,或者保证用于生成阴影的区域紧密包围着对象。可以使用shadowCameraNear、shadowCameraFar和shadowCameraFov属性配置这个区域。

5.DirectionLight属性

方向光源和聚光灯光源很多属性都是相同的。跟聚光灯一样,包围对象空间定义的月紧密,投影的效果越好。可以使用下面几个属性定义这个方块。

var pointColor = "#ff5808";
var directionLight = new THREE.DirectionalLight(pointColor);
directionLight.position.set(-40, 60, -10);
directionLight.castShadow = true;
directionLight.shadowCameraNear = 2;
directionLight.shadowCameraFar = 100;
directionLight.shadowCameraLeft = -50;
directionLight.shadowCameraRight = 50;
directionLight.shadowCameraTop = 50;
directionLight.shadowCameraBottom = -50; directionLight.distance = 0;
directionLight.intensity = 0.5;
directionLight.shadowMapWidth = 1024;
directionLight.shadowMapHeight = 1024; scene.add(directionLight);

6.HemisphereLight半球光光源

使用半球光光源,可以创建出更加贴近自然的光照效果。构造函数为new THREE.HeimsphereLight(groundColor, color, intensity)。属性说明:

属性/描述
    groundColor/从地面发出的光线颜色
    Color/从天空发出的光线颜色
    intensity/光线照射的强度

7.如何加载文理

我们可以给材质表面添加文理,文理可以来至一张图片。加载文理可使用THREE.ImageUtils的loadTexture函数。例如:

var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");
textureGrass.wrapS = THREE.RepeatWrapping;
textureGrass.wrapT = THREE.RepeatWrapping;
textureGrass.repeat.set(4, 4); // create the ground plane
var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);
var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;

textureGrass就是一个文理对象,通过wrapS、wrapT设置文理坐标s、t方向的平铺方式。 textureGrass.repeat.set(4, 4)设置屏幕在s、t方向重复数为2*2。

8.平面光光源

平面光光源AleaLight可以顶一个一个放光的矩形。AreaLight并不在标注你的Three.js库中,而是在他的扩展库中,所有在使用之前要完成几个额外的步骤。
    如果要使用平面光光源,那么就不能直接使用THREE.WebGLRenderer对象了。而使用使用THREE.WebGLDeferredRenderer(WebGL的延迟渲染器)。要使用THREE.WebGLDeferredRenderer对象,必须引入Three.js提供的额外极端javascript代码。在html头部引入:

<script type="text/javascript" src="../libs/WebGLDeferredRenderer.js"></script>
<script type="text/javascript" src="../libs/ShaderDeferred.js"></script>
<script type="text/javascript" src="../libs/RenderPass.js"></script>
<script type="text/javascript" src="../libs/EffectComposer.js"></script>
<script type="text/javascript" src="../libs/CopyShader.js"></script>
<script type="text/javascript" src="../libs/ShaderPass.js"></script>
<script type="text/javascript" src="../libs/FXAAShader.js"></script>
<script type="text/javascript" src="../libs/MaskPass.js"></script>

包含这些库之后就可以使用THREE.WebGLDeferredRenderer对象了。使用代码如下:

var renderer = new THREE.WebGLDeferredRenderer({
width: window.innerWidth,
height: window.innerHeight,
scale: 1, antialias: true,
tonemapping: THREE.FilmicOperator, brightness: 2.5
});

9.镜头眩光

可以通过实例化THREE.LensFlare对象来创建镜头眩光。首先创建这个对象。THREE.LensFlare对象接收参数:
    THREE.LensFlare = function(texture, size, distance, blending, color),参数列表:
    参数/描述
    texture/用着眩光效果的材质。决定眩光的样子
    size/指定眩光应该多大,单位为像素。
    distance/光源0到相机1的距离
    blending/我们可以为眩光提供多种材质。融合模式决定他们讲如何融合在一起。默认融合模式是THREE.AddtiveBlending。它提供一种办透明的眩光。
    color/眩光颜色
    创建代码如下所示:

var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor); lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending); lensFlare.position.copy(spotLight.position);
scene.add(lensFlare);

创建的眩光位置可以放在光源处,就像太阳光一样。其中lensFlare.add可添加光圈的效果,调用它需要置顶文理、尺寸、距离、融合模式。

使用Three.js里的各种光源的更多相关文章

  1. Three.js开发指南---使用three.js里的各种光源(第三章)

    本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...

  2. PHP中的__toString方法(实现JS里的链式操作)

    _toString方法是在打印对象时自动调用的魔术方法,如果不声明会报以下错 Catchable fatal error: Object of class String could not be co ...

  3. 理解 Node.js 里的 process.nextTick()

    有很多人对Node.js里process.nextTick()的用法感到不理解,下面我们就来看一下process.nextTick()到底是什么,该如何使用. Node.js是单线程的,除了系统IO之 ...

  4. chart.js 里添加图表的清单:

    chart.js 里添加图表的清单: var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legen ...

  5. js笔记——js里var与变量提升

    var是否可以省略 一般情况下,是可以省略var的,但有两点值得注意: 1.var a=1 与 a=1 ,这两条语句一般情况下作用是一样的.但是前者不能用delete删除.不过,绝大多数情况下,这种差 ...

  6. js里cookie操作

    原生js操作cookie 创建和存储 cookie 在这个例子中我们要创建一个存储访问者名字的 cookie.当访问者首次访问网站时,他们会被要求填写姓名.名字会存储于 cookie 中.当访问者再次 ...

  7. JS里设定延时:js中SetInterval与setTimeout用法

     js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...

  8. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

  9. js里各浏览器解析XML,支持IE、火狐、Chrome等

    js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"&g ...

随机推荐

  1. jd-gui的使用方法

    java的反编译工具,简单使用: 打开文件.单击“file”从中选择“Open File ...“选项,弹出一个文件选择框,可以选择要打开的文件,或者直接单击文件夹图标,直接弹出文件选择框:从文件选择 ...

  2. Docker网络模式说明

    现在的Docker版本不推荐继续使用Link了,而是推荐用网络模式解决问题,简单讲一下最常用的几个网络模式,其他我用到时候再补充. bridge -net不加参数就是默认的bridge模式,这个默认b ...

  3. sql ,内连接,外连接,自然连接等各种连接

    1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 students和c ...

  4. 深入理解Git (一) - 元数据

    三分钟教你学Git仅仅是教我们会用Git了,但是内部的一些实现原理假设我们也知道一些的话会使我们使用起来更加顺手.这个系列就是在你用了Git一段时间之后,并想继续到Git的内部看一下到底而准备的. G ...

  5. mipmap和drawable文件夹的区别

    在Android上创建工程,会默认创建mipmap文件夹.之前在Eclipse上创建的是drawable的文件夹.那么这两个有什么区别呢? 问题: I'm working with android s ...

  6. 每天一个linux命令(1):pwd命令

    1.命令简介 pwd(print work directory 打印当前目录)命令以绝对路径的方式显示用户当前工作目录. 2.用法 pwd [-LP] 3.选项 -L --logical 当目录为连接 ...

  7. sublime python3中读取和写入文件时如何解决编码问题

    # -*- coding: utf-8 -*- #分析用户身份审核信息 #python 3.5 #xiaodeng #http://apistore.baidu.com/apiworks/servic ...

  8. CSS中的偏僻知识点

    一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...

  9. NeoFinder for Mac(增强型文件管理工具)破解版安装

    1.软件简介    NeoFinder 是 macOS 系统上一款帮助用户管理磁盘的 Mac 工具,NeoFinder for mac 能迅速组织您的数据,无论是在外部或内部磁盘,或任何其他卷.它能记 ...

  10. Effective Java 第三版——49. 检查参数有效性

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...