添加阴影.png
1、THREE.AmbientLight(环境光)
环境光创建后会应用到全局中去，该光源没有特别的来源方向，通常不能将THREE.AmbientLight作为场景中的唯一的光源，因为他会将场景中的所有物体渲染为相同的颜色，在场景中再去引入其他的光源的目的就是弱化阴影。
使用方式：
ambientLight = new THREE.AmbientLight(0xffffff,1); //环境光的颜色以及强弱
scene.add(ambientLight);
2、THREE.PointLight(点光源)
THREE.PointLight是一种单点发光、照射所有方向的光源，类似于你晚上打开手电筒去照射一个物体的那种场景，THREE.PointLight不会产生阴影，因为它会朝所有的方向发射光线。
属性：
- color：光源的颜色
- distance：光源照射的距离。默认值为 0，意味着光的强度不会随着距离的增加而减少。
- intensity：光源照射的强度。默认值为 1。
- position：光源在场景中的位置。
- visible：设为 ture（默认值），光源就会打开。设为 false，光源就会关闭。
使用方式：
pointLight = new THREE.PointLight(0xffffff,1);
pointLight.position.set(2, 20, -2);
scene.add(pointLight);
3、示例源代码：
// 定义场景、相机、渲染器、网格、地面、环境光、点光源 变量
var scene, camera, renderer, mesh, meshfloor, ambientLight, pointLight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
// 新建一个箱子
mesh = new THREE.Mesh(
new THREE.BoxGeometry(5, 5, 5), //创建5*5*5的箱子的大小
// 注意：箱子不能使用MeshBasicMaterial，否则会出现光照无反应
new THREE.MeshPhongMaterial({
color: 0x757575,
wireframe: false
})
)
// 箱子去接受光源
mesh.receiveShadow = true;
// 箱子去投射光源
mesh.castShadow = true;
mesh.position.y += 5/2; //设置箱子的位置坐标
// 创建一个地面
meshfloor = new THREE.Mesh(
new THREE.PlaneGeometry(130, 130, 10, 10),
new THREE.MeshPhongMaterial({
color: 0x1B5E20,
wireframe: false
})
)
meshfloor.rotation.x -= Math.PI / 2;
// 地面同样设置去接受光源
meshfloor.receiveShadow = true;
// 将所有创建的物体加入到场景中去
scene.add(mesh);
scene.add(meshfloor);
// 环境光
ambientLight = new THREE.AmbientLight(0xffffff,1); //环境光的颜色以及强弱
// 点光
pointLight = new THREE.PointLight(0xffffff,1);
pointLight.position.set(0, 8, 0);
pointLight.castShadow = true;
pointLight.shadow.camera.near = 0.1;
pointLight.shadow.camera.far = 25;
scene.add(ambientLight);
scene.add(pointLight);
camera.position.set(10, 10, 10);
camera.up.set(0,1,0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 给渲染器添加阴影效果
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
document.body.appendChild(renderer.domElement);
// 每一帧去循环调用render()函数
animate();
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
