文章目录
前言
threejs光源种类、属性。开启阴影需要的设置
基础光源
THREE.AmbientLight()
-
基本光源, 该光源的颜色会叠加至场景现有物体的颜色上
-
无法产生阴影 ❌
THREE.PointLight()
- 点光源, 从空间内一点向所有方向发射光线
- 可以产生阴影 ⭐(新版)
常用属性
color //(光源颜色),
distance //(照射距离,默认为0,超出该距离后照射强度减为0),
intensity //(强度),
position //(位置),
deacy //(随着光源的距离衰减的速度),
visible //(是否可见)
THREE.SpotLight()
- 类似于聚光灯、手电效果
- 可以产生阴影 ⭐
常用属性
angle //(光源发射的光束宽度,弧度制),
castShadow //(阴影),
color //(光源颜色),
deacy //(衰减),
distance //(照射距离),
intensity //(强度),
position //(位置),
target //(模板,指向一个THREE.Object3D对象⭐),
visible //(是否可见),
penumbra //(半影区)
THREE.DirectionalLight()
- 平行光、无限光,发射出的光线可以看作是平行的,类似于太阳光,这照射范围从 position 到 target的位置
- 可以产生阴影 ⭐
常用属性
castShadow //(阴影),
color //(光源颜色),
intensity //(强度),
position //(位置),
target //(模板,指向一个THREE.Object3D对象⭐),
visible //(是否可见),
penumbra //(半影区)
特殊光源
THREE.HemisphereLight()
-
半球光,通过模拟反光面和光线微弱的天空来创建室外光线
-
无法产生阴影 ❌
HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )
skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
intensity - (可选参数) 光照强度。 缺省值 1。
THREE.AreaLight()
- 可以指定散射光源的平面,而不是一个点
- 无法产生阴影 ❌
RectAreaLight( color : Integer, intensity : Float, width : Float, height : Float )
color - (可选参数) 十六进制数字表示的光照颜色。缺省值为 0xffffff (白色)
intensity - (可选参数) 光源强度/亮度 。缺省值为 1。
width - (可选参数) 光源宽度。缺省值为 10。
height - (可选参数) 光源高度。缺省值为 10。
/*
使用方法
*/
// 创建矩形区
var areaLight1 = new THREE.RectAreaLight(0xff0000, 500, 4, 10);
areaLight1.position.set(-10, 10, -35);
scene.add(areaLight1);
// 添加发光体
var planeGeometry1 = new THREE.BoxGeometry(4, 10, 0);
var planeGeometry1Mat = new THREE.MeshBasicMaterial({
color: 0xff0000
});
var plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);
plane1.position.copy(areaLight1.position); // position复制
scene.add(plane1);
THREE.LensFlare()
严格来讲不是一种光源,可以为镜头添加光晕效果
LensflareElement( texture : Texture, size : Float, distance : Float, color : Color )
texture - 用于光晕的的 THREE.Texture。
size - (可选)以像素为单位的大小
distance - (可选)(0-1)距光源(0 = 在光源处)
color - (可选)镜头光晕 的颜色
// 举例
var textureFlare0 = THREE.ImageUtils.loadTexture("../lensflare0.png");
var textureFlare3 = THREE.ImageUtils.loadTexture("../lensflare1.png");
var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.Lensflare();
lensFlare.addElement(new THREE.LensflareElement(textureFlare0, 350, 0.0, flareColor));
lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 60, 0.6, flareColor));
lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 70, 0.7, flareColor));
lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 120, 0.9, flareColor));
lensFlare.addElement(new THREE.LensflareElement(textureFlare3, 70, 1.0, flareColor));
开启阴影设置
1渲染器允许渲染阴影
render.shadowMap.enabled = true;
2 物体开放阴影
投射阴影的物体,如立方体,球等。
接收阴影的物体如地板
cube.castShadow = true; // 投射阴影
sphere.castShadow = true; // 投射阴影
plane.receiveShadow = true; // 接收阴影
3 光源开启阴影效果
SpotLight、DirectionalLight、PointLight可以产生阴影
spotLight.castShadow = true;
总结
基础光源
- THREE.AmbientLight()
- THREE.PointLight()
- THREE.SpotLight()
- THREE.DirectionalLight()
特殊光源
- THREE.HemisphereLight()
- THREE.AreaLight()
- THREE.LensFlare()
开启阴影设置
- 1渲染器允许渲染阴影
- 2 物体开放阴影
- 3 光源开启阴影效果