在three.js中如果不设置光源，就算几何体设置了颜色，看到的物体也将会是漆黑一片。但是three中有分为好几种光源，他有什么不同呢，接下来我们一起来看一下这几种光源的不同之处。
Ambintlight
THREE.AmbientLight 环境光，是一中最常见的光源。环境光会均匀照亮所有物体，它 没有投影效果 ，因为它是没有方向的。
// 环境光 参数1：光线颜色 参数2：关照强度
scene.add(new THREE.AmbientLight(0xffffff, 1))
重点 - 投影
要在three中显示投影，条件其实还是挺多的。不要问我怎么知道的，因为我踩了好久/(ㄒoㄒ)/~~
- 渲染器 ：
renderer.shadowMap.enabled = true;渲染器要允许渲染光源 - 平板：
plane.receiveShadow = true;可以接受光源 - 灯光：
point.castShadow = true;灯光需要开启 允许渲染阴影 - 灯光：只能使用可以渲染投影的光源
- 几何体 || 模型：
meshrial.castShadow = true;同上需要 允许渲染 - 几何体：需要使用
MeshLambertMaterial材质 (其他材质我们在后期测试更新)
PointLight
THREE.PointLight 点光源。从一个方向向各个方向发送的光源。就如同我们生活的中电灯泡，可以照亮一大片，被挡住的地方还有或投影的出现。
function light() {
// 环境光
scene.add(new THREE.AmbientLightProbe(0xffffff, 1));
// 点光源
let point = new THREE.PointLight(
0x00ff00, // 光照颜色
1, // 光照强度
1000, // 光照最大距离
Math.PI / 2, // 光照角度最大为Math.PI / 2
);
point.position.set(20, 50, 10); // 设置光源的xyz坐标位置
point.castShadow = true; // 渲染到阴影中
scene.add(point);
// 模拟光源位置
let pointHelper = new THREE.PointLightHelper(
point, // 要模拟的光源
2, // 模拟的尺寸
0xff0000
);
scene.add(pointHelper)
}
PostLight
THREE.PostLight 聚光灯，从一个点射出，沿着光线边变远，圆锥体也会逐渐增大。
function light() {
// 环境光
scene.add(new THREE.AmbientLightProbe(0xffffff, 1));
let spot = new THREE.SpotLight(
0xffff00, // 光照颜色
1, // 光照强度
50, // 光照最大距离
Math.PI / 1.2, // 光照角度最大为Math.PI / 2
1, // 半影衰减百分比 0-1 之间
0 // 光照距离衰减量 0-1 之间
);
spot.castShadow = true;
spot.position.set(10, 20, 10);
scene.add(spot);
// 模拟灯光位置
let helper = new THREE.SpotLightHelper(
spot, // 光源
0x00ffff // 模拟物体颜色
);
scene.add(helper)
}
DirectionalLight
THREE.DirectionalLight 平行光。这种关照是无线远并且是平行发出。通常用来 模拟太阳光 。
function light() {
// 环境光
scene.add(new THREE.AmbientLightProbe(0xffffff, 1));
// 平行光
const directional = new THREE.DirectionalLight(
0x00ff00, // 光照颜色
1 // 光照前端
);
directional.position.set(10, 20, 10)
directional.castShadow = true;
scene.add(directional);
// 模拟平行光位置
scene.add(new THREE.DirectionalLightHelper(
directional, // 灯光体
5, // 平板大小
0xff0000 // 平板颜色
));
}
列举了几种比较常用的光源分享给大家。大家可以加我qdwdss一起学习啊。
