three.js 物体产生阴影 增强阴影效果

1.three.js中阴影投影效果

• 需要设置受产生投影的物体
• 需要设置接受投影的物体
• 需要设置用于计算阴影的光源对象
• renderer.shadowMap.enabled = true;

// 1、创建场景
const scene = new THREE.Scene();
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);
scene.background = '#fff';

创建物体、创建平面物体

//创建一个立体几何体
const geometry = new THREE.BoxGeometry(1,1,1);
//创建一个材质对象
const material = new THREE.MeshLambertMaterial({
	color:0xb9d3ff,
	side:THREE.DoubleSide
});
//创建一个网格模型
const mesh = new THREE.Mesh(geometry,material);
//将网格模型添加到场景中
scene.add(mesh);
 // 投射阴影
sphere.castShadow = true;
// 创建平面
const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, 0, 0);
plane.rotation.x = -Math.PI / 2;
// 接收阴影
plane.receiveShadow = true;

 创建灯光

	const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    //产生阴影
	directionalLight.castShadow = true;
	directionalLight.position.set(5, 5, 5);
	// 设置阴影贴图模糊度
	directionalLight.shadow.radius = 10;
	// 设置阴影贴图的分辨率
	directionalLight7.shadow.mapSize.set(4096, 4096);
     // 设置平行光投射相机的属性
	directionalLight7.shadow.camera.near = 0.5;
	directionalLight7.shadow.camera.far = 1000;
	directionalLight7.shadow.camera.top = 5;
	directionalLight7.shadow.camera.bottom = -5;
	directionalLight7.shadow.camera.left = -5;
	directionalLight7.shadow.camera.right = 5;
     // 添加灯光到场景中
	scene.add(directionalLight7);

实际效果

 如果灯光比较多阴影也会变得很暗 达不到我们想要的需求我们可以使用t阴影材质来更换地面的材质