光源和阴影

228 阅读1分钟

什么是聚光源

image.png

// 聚光源
// 0xffffff:光源颜色
// 1.0:光照强度intensity
const spotLight = new THREE.SpotLight(0xffffff,1.0);
scene.add(spotLight);//光源添加到场景中
// ### 聚光源位置`.position`
// 设置聚光光源位置
spotLight.position.set(0, 50, 0);
// 光源目标对象属性的位置通过属性值`Object3D`的`.position`属性设置。
// spotLight.target是一个模型对象Object3D,默认在坐标原点
spotLight.target.position.set(50,0,0);
//spotLight.target添加到场景中.target.position才会起作用
scene.add(spotLight.target);

平行光DirectionalLight阴影步骤

// ### 1. 模型阴影投射`.castShadow`
// 设置产生投影的网格模型
mesh.castShadow = true;
// ### 2.光源阴影投射属性`.castShadow`
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// 平行光设置产生阴影的光源对象,开启光源阴影的计算功能
directionalLight.castShadow = true;
### 模型阴影接收属性`.receiveShadow`
// 设置接收阴影的投影面
planeMesh.receiveShadow = true;
### 4. `.shadowMap.enabled`允许渲染器渲染阴影
// 设置渲染器,允许光源阴影渲染
renderer.shadowMap.enabled = true; 
### `CameraHelper`可视化`.shadow.camera`
// 可视化平行光阴影对应的正投影相机对象
const cameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(cameraHelper);
### 5. `.shadow.camera`设置阴影渲染范围
OrthographicCamera( left, right, top, bottom, near, far )
// 设置三维场景计算阴影的范围
directionalLight.shadow.camera.left = -50;
directionalLight.shadow.camera.right = 50;
directionalLight.shadow.camera.top = 200;
directionalLight.shadow.camera.bottom = -100;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 600;

阴影范围.shadow.camera