【threejs】阴影Shadow

阴影 Shadow

  • DirectionalLightShadow - 平行光阴影
  • PointLightShadow - 点光源阴影
  • SpotLightShadow - 聚光灯阴影
  • LightShadow - 阴影基类

文档：https://threejs.rocyuan.top/docs/#api/zh/lights/shadows/PointLightShadow

平行光阴影示例

添加步骤：

  • 渲染器中启用阴影
  • 开启平行光投射阴影
  • 开启物体投射阴影（castShadow） 与 接收阴影（receiveShadow）,如果物体未开启 receiveShadow 另外一个物体的阴影将不会投射到该物体上
  • 开启平面（模拟地面）接收阴影
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<template>
  <div ref="threeContainer" class="three-container"></div>
</template>
<script setup>
  import { onMounted, ref } from "vue";
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

  const threeContainer = ref(null);

  function init3D() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, threeContainer.value.clientWidth / threeContainer.value.clientHeight, 0.1, 1000);
    camera.position.set(0, 3, 4);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(threeContainer.value.clientWidth, threeContainer.value.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    threeContainer.value.appendChild(renderer.domElement);
    // 1. 渲染器中启用阴影
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    const ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.y = 200;
    directionalLight.position.x = 200;
    // 2. 开启平行光投射阴影
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
    const sphereMaterial = new THREE.MeshStandardMaterial({
      color: 0x00ff00,
    });
    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(0, 1, 0);
    // 3. 开启物体投射阴影（castShadow） 与 接收阴影（receiveShadow）
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);

    const planeGeometry = new THREE.PlaneGeometry(5, 5);
    const planeMaterial = new THREE.MeshStandardMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
    });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = Math.PI / 2;
    // 4. 开启平面（模拟地面）接收阴影
    plane.receiveShadow = true;
    scene.add(plane);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
    animate();
  }

  onMounted(() => {
    init3D();
  });
</script>
<style scoped>
  .three-container {
    width: 100vw;
    height: calc(100vh - 20px);
  }
</style>

效果图

平行光阴影