threejs之阴影

本文为记录学习threejs阴影学习。

在threejs产生阴影得满足哪些条件呢？

1. 首先材质需要满足对光照必须有反应。
2. 渲染器得开启阴影计算, renderer.shadowMap.enabled = true;
3. 得有光照 directionalLight.castShadow = true;
4. 物体得投射阴影 sphere.castShadow = true;
5. 显示阴影的物体得接收阴影 plane.receiveShadow = true;

同时 在threejs中并不是所有的光跟材质都能产生阴影，那么有哪些光是可以产生阴影的呢？

• 可以产生阴影的光

  1. 平行光 【类似于太阳光的照射一个方向遥远的星球】
  2. 点光源 【可以想象成一颗会发光的卤蛋，向四周发射光】
  3. 聚光灯 【可以想象成一个手电照射出的效果】

• 可以产生阴影的材质

  1. 标准网格材质 MeshStandardMaterial
  2. Lambert网格材质
  3. Phong 网格材质
  4. 物理网格材质 --- 效果更逼真，性能损耗更大

// 创建一个标准材质
const sphereGeometry = new THREE.SphereBufferGeometry(1,20,20);
// 默认标准材质
const material = new THREE.MeshStandardMaterial();
const sphere = new THREE.Mesh(sphereGeometry,material);
// 添加一个灯光
const light = new THREE.AmbientLight(0xffffff,0.5);
scene.add(light);
scene.add(sphere);

// 创建一个面用来接收投射的阴影
const planeGeometry = new THREE.PlaneBufferGeometry(10,10);
const plane = new THREE.Mesh(planeGeometry,material);
plane.position.set(0,-1,0);
// 设置证明可见
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

// 创建渲染器 并开启阴影
const renderer = new THREE.WebGLRenderer();
...
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true;
...
light.castShadow = true;
// 物体开启阴影投射
sphere.castShadow = true;
// 告诉哪个平面接收阴影贴图
plane.receiveShadow = true;