Three.js 基础之灯光

灯光的种类：在场景中添加灯光后，灯光照射在物体上产生明暗，光亮和阴影，从而让物体显示的更加立体有光泽

three.js 中，有 6 种基础类型的灯光，他们都继承于 Three.Light

灯光类型           灯光名称        是否支持阴影    是否作用于全局    是否有照射目标
AmbientLight     环境光，氛围光        否            是                无
DirectionalLight    平行光            是            否                有
HemisphereLight  半球光源，户外光源     否            是                无
PointLight        点光源              有            否                有
RectAreaLight    矩形面光源            否            否                无
SpotLight        聚光灯光源            是            否                有

关于阴影的进一步补充说明：

之前的事例中，当场景上有反光物体且有灯光时，物体会产生明暗，但是请注意：这个物体显示出的明暗并不是真正的阴影

这个物体显示出的明暗并不是完全符合我们日常的光影明暗，这是因为我们目前所有的示例使用的都是简单光照模型，也就是说光照射在物体后并不并不进行漫反射，所以渲染出的明暗并不完全自然合理

默认渲染器并不会渲染阴影，迷人支持阴影的灯光也不会投射阴影，若想产生真正的阴影，还需要开启阴影渲染和投射

灯光的作用于阴影

AmbientLight 环境光，氛围光：通常仅作为基础光线，一般需要与其他灯光配合使用，不能产生阴影，也无需指定坐标位置，仅需设置颜色和强度

DirectionalLight 平行光：最为经常使用的光源，光纤都是平行向着一个方向发射，经常用来模拟太阳光照射到某个物体上的光照效果

HemisphereLight 半球光源：更加真实的模拟自然光源，提供天空地面漫反射光线。一共接收 3 个参数：第一个：天空光线颜色，第二个：地面反射光颜色，第三个：光的反射强度

PointLight： 点光源：类似生活中的灯泡，光纤没有固定方向，朝着四周散射，点光源对应的辅助对象 PointLightHelper 只有一个菱形的光源形状，并没有光的发射线条

RectAreaLight 矩形面光源：与 DirectionalLight 模拟太阳光不同，光源形状为一个矩形，可以模拟出明亮的窗口或者矩形照明光源

只有 MeshStandardMaterial 和 MeshPhysicalMaterial 材质才支持 RectAreaLight光源

RectAreaLight 对应的辅助对象， RectAreaLightArea 引入方式和其他光辅助对象引入方式不同。其他光辅助对象都是在 three 中使用之前无需引入，可以直接使用， RectAreaLight 在使用之前需要引入才可以使用 import { RectAreaLightHelper } from 'three/examples/jsm/helpers'

SpotLight 聚光灯类似与生活中的聚光灯效果

Three.js 基础之灯光相关推荐

构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...
构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
前端面试题目汇总摘录（JS 基础篇 —— 2018.11.01更新）
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
js基础--数据类型检测的相关知识
欢迎访问我的个人博客:www.xiaolongwu.cn 前言最近工作有点忙,好几天都没更新技术博客了. 周末起床打开有道云笔记,发现自己的博客todolist里躺了一堆只有名字的文件. 话不多说, ...
【译】一份通俗易懂的React.js基础指南-2018
原文链接:tylermcginnis.com/reactjs-tut- by Tyler McGinnis 这篇文章最初发表于2015年1月,但最近被更新为React 16.3以及它所包含的所有优点. ...
SVG.js 基础图形绘制整理（二）
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

Three.js 基础之灯光

Three.js 基础之灯光相关推荐

最新文章

热门文章