THREE.js中的光源

作者: mickeyZaku | 来源:发表于2017-11-25 22:24 被阅读27次

THREE中的光源包含多种
其中基础光源有4种

光源 介绍
环境光 AmbientLight是一种基础光源,它的颜色会添加到整个场景和所有对象的当前颜色上
点光源 PointLight空间中的一点,朝所有的方向发射光线
聚光灯光源 SpotLight这种光源有聚光的效果,类似于台灯,吊灯,手电筒
方向光 DirectionalLight也称无限光,从这种光源发出的光线可以看作是平行的,例如太阳光

特殊光源有3种(这三种我们后面再详述)

光源 介绍
半球光光源 HemisphereLight,可以为室内场景创建更加自然的光照效果,模拟反光面和光线微弱的天气
面光源 AreaLight使用这种光源可以指定散发光线的平面,而不是空间的一个点
镜头炫光 LensFlare这不是一种光源,但是通过该炫光可以为场景中的光源添加炫目的效果

ambientLight

环境光光源会影响整个整个场景,该光线没有特定的来源,并且不会影响阴影的产生,不能将ambientLight作为场景的唯一光源,在使用其他光源的同时使用,可达到弱化阴影或者添加某种颜色的作用

var ambiColor = "#0c0c0c";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);

pointLight

点光源,如同环境光一样需要设置颜色即可生成一个点光源,但点光源可以设置位置、强度以及照射距离,大概代码如下:

var pointColor = "#ccffcc";
var pointLight = new THREE.PointLight(pointColor);
pointLight.distance = 100; // 光照距离
pointLight.position.set(-40, 60, -10);// 位置
pointLight.intensity  = 1;// 光照强度
pointLight.visible = true;// 点光源是否可见
白色部分为点光源效果,照射距离100,强度1.3,颜色#fcfcfc
白色部分为点光源效果,照射距离70,强度1.7,颜色#fcfcfc

spotLight

这个光源恐怕是自然界最常见但光源了,台灯,路灯等锥形光源均属于这一类

var spotLight0 = new THREE.SpotLight(0xcccccc);
spotLight0.position.set(-40, 30, -10);
spotLight0.lookAt(plane);
scene.add(spotLight0);

spotLight可设置但参数如下:



directionalLight

自然光源,类似太阳相对均为平行光照

       var pointColor = "#ff5808";
       var directionalLight = new THREE.DirectionalLight(pointColor);
       directionalLight.position.set(-40, 60, -10);
       directionalLight.castShadow = true;
       directionalLight.shadowCameraNear = 2;
       directionalLight.shadowCameraFar = 200;
       directionalLight.shadowCameraLeft = -50;
       directionalLight.shadowCameraRight = 50;
       directionalLight.shadowCameraTop = 50;
       directionalLight.shadowCameraBottom = -50;

       directionalLight.distance = 0;
       directionalLight.intensity = 0.5;
       directionalLight.shadowMapHeight = 1024;
       directionalLight.shadowMapWidth = 1024;


       scene.add(directionalLight);

其参数表如点光源相似,这里几个与阴影微调有关的属性暂且不表

hemisphereLight

半球光源,更加贴近自然光,自然界光源并不是如direcionalLight一样均来自于上方的平行光,而是包含了许多空气散射因素,半球光源就是弥补这个效果的。

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);

其三个参数分别为:地面发出的光色、天空的光色、光照强度
对比只是用direcitonalLight和添加了hemisphereLight的效果之后,是不是添加了的更自然呢


添加前 添加后

AreaLight

平面光光源,不再标准THREE.js库而是扩展库中的光源,用来定义一个发光的矩形,不过该光源会对之前我们使用的webglRender造成较大的性能损失,需要在头里这样写:

 <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <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>

新的渲染方法:

var renderer = new THREE.WebGLDeferredRenderer({
            width: window.innerWidth,
            height: window.innerHeight,
            scale: 1, antialias: true,
            tonemapping: THREE.FilmicOperator, brightness: 2.5
});
//光源
var areaLight1 = new THREE.AreaLight(0xff0000, 3);
        areaLight1.position.set(-10, 10, -35);
        areaLight1.rotation.set(-Math.PI / 2, 0, 0);
        areaLight1.width = 4;
        areaLight1.height = 9.9;
        scene.add(areaLight1);

lensflares

镜头炫光,怎么说呢,就是一个炫光,先看效果


var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);

相关文章

  • 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/htqhbxtx.html