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. angular.js创建自定义指令-demo3

    html: <!doctype html><html ng-app="myModule"> <head> <meta charset=&q ...

  2. 107. 二叉树的层次遍历 II

    107. 二叉树的层次遍历 II 题意 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历). 解题思路 递归:利用前序遍历的思想,在递归过程中 ...

  3. Windows10系统重置网络设置

    使用Windows10系统户很可能会遇到网络异常,连接不上网的情况? 如此,简易方法可以尝试下.重置网络,教程如下: 1.//按下WIN+X(或右键点击开始按钮),然后选择“命令提示符(管理员)”; ...

  4. db2文件系统已满

    文章主要讲述的是DB2文件系统已满的正确解决方案,此文首先是以列举错误案例来对其进行分析,之后再给出正确的解决方案,以下就是文章的主要内容的具体描述,望大家浏览之后会对其有更好的了解. DB2文件系统 ...

  5. strip_tags、htmlentities、htmlspecialchars的区别

    一.strip_tags() 函数剥去字符串中的 HTML.XML 以及 PHP 的标签. strip_tags(string,allow) 注释:可通过allow设置允许的标签.这些标签不会被删除. ...

  6. Profiling Java Application with Systemtap

    https://laurent-leturgez.com/2017/12/22/profiling-java-application-with-systemtap/ https://myaut.git ...

  7. VS2010链接TFS遇见错误:TF204017,没有访问工作区域,需要一个或者多个必须权限

    最近刚刚搭建好服务器,然后准备将VSS源代码迁移到TFS源代码管理服务器上面.在我本机先用的服务器帐号来上传初始化源代码数据库,然后我又用自己的帐号进行迁出代码的时候发生的异常. 造成上述错误,主要是 ...

  8. OpenCV支持向量机(SVM)介绍

    支持向量机(SVM)介绍 目标 本文档尝试解答如下问题: 如何使用OpenCV函数 CvSVM::train 训练一个SVM分类器, 以及用 CvSVM::predict 测试训练结果. 什么是支持向 ...

  9. conda虚拟环境

    https://blog.csdn.net/lyy14011305/article/details/59500819 1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是 ...

  10. Spark2.2(三十三):Spark Streaming和Spark Structured Streaming更新broadcast总结(一)

    背景: 需要在spark2.2.0更新broadcast中的内容,网上也搜索了不少文章,都在讲解spark streaming中如何更新,但没有spark structured streaming更新 ...