Threes.js入门篇之7 - 场景光照

Three.js 主要支持四种光源模式，分别是 环境光、点光源、平行光和聚光灯。另外有半球光源、面光源等，本节暂不涉及。

一. 环境光

Ambient Light：所有对象的整体光照模型，控制整个场景的明暗。

        var ambientLight = new THREE.AmbientLight(ambiColor); // 环境光颜色scene.add(ambientLight);

二. 点光源

Point Light：所有方向发射光线，是应用最多的光源。

        var pointColor = "#ccffcc";var pointLight = new THREE.PointLight(pointColor);pointLight.distance = 100;  // 距离，决定了光线可以照射多远pointLight.intensity = 1;   // 强度scene.add(pointLight);

通常点光源不用来做阴影，主要是因为投射方向用阴影图来描述比较困难，我们看到的阴影主要是 Spot Light 来实现。

三. 平行光

Directional Light：又称方向光，通常用来模拟太阳光（近似平行光源）。

        var pointColor = "#FFFFFF";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;        // 光强度，默认为1directionalLight.shadowMapHeight = 1024; // 阴影图尺寸directionalLight.shadowMapWidth = 1024;

四. 聚光灯

Spot Light：聚光灯与手电筒类似，与相机视角很接近，常用作阴影图的产生。

        var spotLight = new THREE.SpotLight(pointColor);spotLight.position.set(-40, 60, -10);spotLight.castShadow = true;      // 产生阴影spotLight.shadowCameraNear = 2;   // 从距离光源的哪一点开始生成阴影spotLight.shadowCameraFar = 200;  // 从距离光源哪一点开始停止生成阴影spotLight.shadowCameraFov = 30;   // 形成阴影的视场spotLight.target = plane;         // 光照照向地面spotLight.distance = 0;           // 距离target的距离spotLight.angle = 0.4;            // 光源照射出来的光柱有多宽

Threes.js入门篇之7 - 场景光照相关推荐

Threes.js入门篇之3 - 场景与相机
• Three.js 的场景 THREE.Scene 执行场景树管理,场景的创建只需要一句话: var scene = new THREE.Scene(); 场景常用操作包含: 1.scene.add ...
Threes.js入门篇之5 - 场景操纵器Trackball
Three.js 提供了很多操纵器,example下也给了一些操纵器(也叫控制器)的例子,引用 js 可以参考 examples/js/controls/TrackballControls.js . ...
Threes.js入门篇之6 - 场景漫游
THREE.js 支持两种形式的漫游,第一人称漫游(First Person) 和飞行(Fly),可以分别参考 example 下的 "misc_fps.html" 和 &quo ...
Threes.js入门篇之2 - Hello World
与OpenGL一样,Three.js 符合右手坐标系,X轴向右,Y轴向上,Z轴朝外: Three.js 的绘制流程可以描述为: 1. 生成渲染器 - THREE.WebGLRenderer,并绑定C ...
Threes.js入门篇之4 - World View Projection
在三维世界,一个模型要想最终呈现到一个照片上,需要经过三次矩阵变换,这三个矩阵分别是: 模型矩阵(World) - 视图矩阵(View)- 投影矩阵(Projection) 一. 模型矩阵将局部坐 ...
Threes.js入门篇之9 - 全景图
全景图是一个当下非常流行的展示方式,在 VR | AR领域有广泛应用. 在三维内的全景图通常是根据鼠标事件调整摄像机位置(在包围球内旋转),其基本思路一致,包围球可以通过球面.立方体来实现,在 ...
Threes.js入门篇之8 - 材质与纹理
材质是指几何对应的颜色信息,想让一个对象最终呈现出你所希望的样子,其中最重要的一个因素就是材质. 来看一下例子 "canvas_material.html" [html] vie ...
Three.js 入门篇-制作3D 动漫角色欣赏
Three.js 入门篇-制作3D 动漫角色欣赏前言一.与卡通相关又与前端相关的主题及制作思路二.Three.js加载3D模型代码一般思路三.源码及关键注释参考引用交流与学习作者最新发布 ...
js入门篇--制作简单闪烁图片
js入门篇–制作闪烁图片刚刚学习,大神勿喷,还请多多指点... <body "soccerOnload()" topmargin="0"> //o ...

Threes.js入门篇之7 - 场景光照

Threes.js入门篇之7 - 场景光照相关推荐

最新文章

热门文章