【Three.js基础学习】11. Shadow

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

课程知识:

        阴影贴图,光在阴影纹理中展现的状态,或者是光下纹理的形状等

    光摄像机在视角中展示时,或观察物体时,呈现出来的,这个画面叫主渲染

    阴影贴图呈现出来的在摄像机中 (不知道)

    如何激活阴影 ,虽然优化阴影更难

    renderer.shadowMap.enabled = true  // 这里是告诉渲染器 如果遇到阴影贴图 必须渲染

    投射阴影

    例如球,

    sphere.castShadow = true  // 默认是false ,设置为true之后 球投射阴影

    接收阴影

    在平面接收

    plane.receiveShadow = true //  这个时候还是没有阴影 ,需要激活灯光上的阴影

    三种光支持阴影

    PointLight , DirectionalLight , SpotLight

    // 环境光不会投射任何阴影

    //在定向光中开启阴影

    directionalLight.castShadow = true

    // 优化阴影贴图

    首先优化渲染大小

    shadowMap (阴影贴图) : 就有宽度 和 高度

    巨大的渲染宽高 会占用更多帧速率

directionalLight.shadow.mapSize.width = 1024

directionalLight.shadow.mapSize.height = 1024

    数值最好时等于2的幂次  ,

   

    灯光相机如何访问

    如:一个 directionalLight.shadow.camera 打印出来

 

    相机助手

    new THREE.CameraHelper()

    要显示一个定向光摄像机助手

    new THREE.Camera(directionalLight.shadow.camera)

    然后加入场景中

    如何控制光的远近

    directionalLight.shadow.camera.near  //近

    directionalLight.shadow.camera.far  // 远

    正交相机中的参数 : 上 下 左 右 近 远

    控制相机中心到上下左右面的距离

    directionalLight.shadow.camera.left

    directionalLight.shadow.camera.top  

    directionalLight.shadow.camera.right

    directionalLight.shadow.camera.bottom

不同的算法

    阴影贴图算法  

    THREE.BasicShadowMap

    THREE.PCFShadowMap

    THREE.PCFSoftShadowMap  // 当使用这个时候  radius不起作用

    THREE.VSMShadowMap

   

    // 点光源

    PointLight

    烘培纹理

        通过纹理实现阴影 ,但是移动球 会出现 阴影不动 ,这是因为就是图....

        // 将材质换成烘培纹理 和球的纹理材质不是一个

    const plane = new THREE.Mesh(

        new THREE.PlaneBufferGeometry(5, 5),

        new MeshBasicMaterial({

            map:bakedShadow

        })

    )

    这种烘培阴影,可以用C4D,Blender,3ds Max等来做出来

    实现物体阴影完美结合

    阿尔法纹理 白色可见 黑色 不可见

---

一、代码

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'
import { PositionalAudio } from 'three'
import { PointLightHelper } from 'three'
import { Mesh } from 'three'
import { MeshStandardMaterial } from 'three'
import { MeshBasicMaterial } from 'three'


/* 
    Textrues
*/
const textrueLoader = new THREE.TextureLoader()
const bakedShadow = textrueLoader.load('/textures/bakedShadow.jpg')
const simpleShadow = textrueLoader.load('