灯光

平行光

const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(5,5,5);
directionalLight.castShadow = true;

环境光

// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

天光

// 天光
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.5);
hemisphereLight.position.set(0, 5, 0);

聚光灯

const spotLight = new THREE.SpotLight(0xffffff, 0.5);
spotLight.position.set(5, 5, 5);
spotLight.castShadow = true;

// 聚光灯的角度
spotLight.angle = Math.PI / 6;
// 聚光灯的距离
spotLight.distance = 0;
// 聚光灯的聚光锥的角度
spotLight.penumbra = 0;
// 聚光灯的聚光锥的长度
spotLight.decay = 0;

点光

const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.set(5, 5, 5);

// 点光源的距离
pointLight.distance = 0;
// 点光源的衰减
pointLight.decay = 0;

区域光

const areaLight = new THREE.RectAreaLight(0xffffff, 0.5, 1, 1);
areaLight.position.set(0, 0, 0);

// 区域光的宽度
areaLight.width = 1;
// 区域光的高度
areaLight.height = 1;

阴影计算的开闭

• 材质要对光照有反应
• 设置渲染器开启阴影计算, renderer.shadowMap.enabled = true;
• 设置光照投射阴影, directionalLight.castShadow = true;
• 设置物体投射阴影, sphere.castShadow = true;
• 设置物体接收阴影, plane.receiveShadow = true;

阴影贴图模糊度、分辨率

directionalLight.shadow.radius = 20;

directionalLight.shadow.mapSize.set(2048, 2048);