当前位置:网站首页>Three.js学习-光照和阴影(了解向)
Three.js学习-光照和阴影(了解向)
2022-07-06 04:50:00 【flashinggg】
参考:Threejs 光照和阴影 - 知乎 (zhihu.com)
在ThreeJs中,物体的颜色也是通过光照叠加得到的,bling-Phong等模型在这里同样适用,ThreeJs将光照也封装成了一个对象。
目录
6种光照
1 环境光 AmbientLight
//环境光-常数项
//无需设置位置,也不用设置光强
AmbientLight(color);
//代码定义
var light = new THREE.AmbientLight(0xffffff);
scene.add(light);
2 点光源 PointLight
//代码定义
//()内四个参数分别表示:
//1 颜色
//2 光强(范围[0,1])
//3 光照距离(默认为0,无限远)
//4 光强随着光照方向逐渐衰减,默认为1
var light = new THREE.PointLight(0xffffff, 1, 0, 1);
light.position.set(1,1,1);
scene.add(light);
3 聚光灯 SpotLight
聚光灯是最常用的光源之一,它是一种具有锥形效果的光源,比如手电筒。
//聚光灯
//参数分别表示:
//1 color-光源颜色,默认白
//2 intensity-光强,默认为1,范围[0,1]
//3 distance-光照距离,默认为光源距离
//4 angle-角度,单位弧度,默认 Math.PI/3
//5 penumbra-照射面光影衰减百分比 默认为0 取值[0,1]
//6 decay-光照衰减指数 当=2时摔跤效果与现实世界光雷同,默认为1
SpotLight(color, intensity, distance, angle, penumbra, decay);
//代码实现
var spotlight = new THREE.SpotLight(0xffffff);//创建
scene.add(light);//添加到场景中
//单独设置属性
spotlight.angle = Math.PI/2;
//or
this.spotlight.angle = Math.PI/2;
//其他属性
//位置-position
//直接定义xyz or 用.position.set(...)定义坐标 or 用 new.THREE.Vector3(...)定义
spotlight.position.x = 1;
spotlight.position.y = 2;
spotlight.position.z = 3;
spotlight.position.set(1, 2, 3);
spotlight.position = new THREE.Vector3(1, 2, 3);
//是否可见-visible
spotlight.visible = true
this.spotlight.visible = this.lightProperties.visible//动态修改聚光灯是否可见
//目标-target
//与camera类似,决定光照方向,一般会指向场景中的一个对象
var geom = new THREE.BoxGeometry(4, 4, 4); //创建一个对象
var material = new THREE.MeshLamberMaterial({
color: 0xff0000}) //创建一个材质
var cube = new THREE.Mesh(geom, material); //创建网格对象
spotlight.target = cube; //聚光灯对象为cube
其实还有很多其他的属性,比如设置阴影,这里就不赘述,关于其他属性可以参考以下文章:
three.js聚光灯SpotLight使用,调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09)_点燃火柴的博客
4 方向光 DirectionalLight
方向光是平行光,从位置position开始,向目标方向照射,不会随着距离衰减;这里的目标方向与聚光灯方向类似,目标方向可以是:1-场景中的一个物体对象(需要有位置信息),也可以指向一个点。
//方向光
DirectionalLight(color, intnesity);
//代码定义
var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(0,0,0);
scene.add(light);
//目标方向-target
//target默认为原点,对于自定义的目标方向,需要加在场景中才能生效
scene.add(light.target);
5 半球光 HemisphereLight
半球光位于场景上方,可以很好的模拟真实环境室外光照效果;可以半球光(基础光照)+方向光(太阳光照)来模拟室外光照。
//半球光
//参数分别表示:
//1 skyColor天空颜色,默认为白
//2 groundColor 地面颜色,默认为黑
//3 光强 默认1
.HemisphereLight(skyColor, groundColor, intensity)
6 平面光 RectAreaLight
平面光光源从一个矩形平面上均匀发射光线,模拟明亮的窗户或者条形透明物体。平面光最大的特点是不支持阴影,其支持的材质也很有限,只支持MeshStandardMaterial和MeshPhysicalMeterial两种材质。
此外,Three.js目前还不支持平面光,需要添加lib库——RectAreaLightUniformsLib(也有说不添加lib库也能运行)
RectAreaLight(color, intensity, width, height)
//代码实例
//创建参数,不传值则为默认值
var width = 10;// 光照宽度,默认10
var height = 10; // 光照高度,默认10
var intensity = 1;
// 创建平面光
var rectlight = new THREE.RectAreaLight(0xffffff, intensity, width, height);
//位置
rectlight.position.set(5, 5, 0);
//聚焦中心
rectlight.lookAt(0, 0, 0);
scene.add(rectlight);
//有人实测发现少了这个说明也是可以执行的,这里不深究
rectLightHelper = new THREE.RectAreaLightHelper(rectlight);
scene.add(rectLightHelper);
更多关于平面光的内容可参考:深入理解three.js中平面光光源RectAreaLight_雁来过的博客
阴影
上述6种光源中,支持阴影的光照有:点光源、聚光灯和方向光。
ThreeJs中由于渲染阴影消耗较大,因此默认不显示阴影,为了实现阴影效果渲染,需要完成以下部分设置:
1 渲染器Renderer开启阴影计算
renderer.shadowMap.enabled = true;
2 光源Light支持阴影并开启光照阴影
//只有点光源、聚光灯、方向光(平行光)支持阴影
light.castShadow = true;
3 指定物体投射阴影
//指定开启
.castShadow = true;
//代码举例
//沿用聚光灯的例子:
const geom = new THREE.BoxGeometry(4, 4, 4); //创建一个对象
const material = new THREE.MeshLamberMaterial({
color: 0xff0000}); //创建一个材质
const cube = new THREE.Mesh(geom, material); //创建网格对象
cube.castShadow = true; //开启渲染阴影,默认值为false
4 指定物体接受阴影
有了投射阴影的物体还没结束,还需要接受阴影的物体,例如添加一个平面用以绘制阴影。
.receiveShadow = true;
//代码实例
//创建平面接受阴影
const plane = new THREE.PlaneGeometry(300, 300); // 生成平面几何
const planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
const planeMesh = new THREE.Mesh(plane, planeMaterial); // 生成平面网格
planeMesh.receiveShadow = true; // 设置平面网格为接受阴影的投影面
阴影就介绍到这里,后续会再补充光源、阴影相关的内容。
边栏推荐
- Visio draw fan
- 几种RS485隔离通讯的方案介绍
- [classic example] binary tree recursive structure classic topic collection @ binary tree
- [FreeRTOS interrupt experiment]
- [noip2008 improvement group] stupid monkey
- View workflow
- [HBZ share] reasons for slow addition and deletion of ArrayList and fast query
- Postman pre script - global variables and environment variables
- Postman前置脚本-全局变量和环境变量
- [HBZ sharing] how to locate slow queries in cloud database
猜你喜欢
yolov5 tensorrt加速
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
Lepton 无损压缩原理及性能分析
[lgr-109] Luogu may race II & windy round 6
Delete subsequence < daily question >
Basic explanation of turtle module - draw curve
Unity screen coordinates ugui coordinates world coordinates conversion between three coordinate systems
几种RS485隔离通讯的方案介绍
Basic knowledge and examples of binary tree
ISP learning (2)
随机推荐
Fuzzy -- basic application method of AFL
newton interpolation
Redis —— Redis In Action —— Redis 实战—— 实战篇一 —— 基于 Redis 的短信登录功能 —— Redis + Token 的共享 session 应用— 有代码
How does vs change the project type?
Upload nestjs configuration files, configure the use of middleware and pipelines
Microservice resource address
acwing周赛58
集合详解之 Collection + 面试题
Application of Flody
SQL injection vulnerability (MSSQL injection)
The IPO of mesk Electronics was terminated: Henan assets, which was once intended to raise 800 million yuan, was a shareholder
Redis - redis in action - redis actual combat - actual combat Chapter 1 - SMS login function based on redis - redis + token shared session application - with code
MIT CMS. 300 session 8 – immersion / immersion
Distributed transaction solution
EditorUtility.SetDirty在Untiy中的作用以及应用
从0到1建设智能灰度数据体系:以vivo游戏中心为例
Orm-f & Q object
web工程导入了mysql驱动jar包却无法加载到驱动的问题
Ue5 small knowledge freezerendering view rendered objects in the cone
[05-1, 05-02, 05-03] network protocol