Three阴影指示器实例

基础环境搭建：

设置灯光和网格模型：

1. 设置灯光：环境光和聚光灯

    scene.add(new THREE.AmbientLight(0x404040))

    spotLight = new THREE.SpotLight(0xffffff)
    spotLight.name = 'Spot light'
    spotLight.angle = Math.PI / 5
    spotLight.penumbra = 0.3
    spotLight.position.set(10, 10, 5)
    scene.add(spotLight)

2. 设置环形结

.shininess : Float
.specular高亮的程度，越高的值越闪亮，默认值为 30。
.specular : Color
材质的高光颜色，默认值为0x111111（深灰色）。
这定义了材质的光泽度和光泽的颜色。

.scale ( x : Float, y : Float, z : Float ) : this
缩放几何体。该操作一般在一次处理中完成，不会循环处理。典型的用法是通过调用 Object3D.scale 实时旋转几何体。
.multiplyScalar ( s : Float ) : this
将该向量与所传入的标量s进行相乘。

    let geometry = new THREE.TorusKnotGeometry(25, 8, 75, 20)
    let material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        shininess: 150,
        specular: 0x222222
    })
    torus_knot = new THREE.Mesh(geometry, material)
    torus_knot.scale.multiplyScalar(1 / 18)
    torus_knot.position.set(0, 3, 0)
    scene.add(torus_knot)

3. 与此相同设置平行光和投射面、立方体：

设置阴影：

1. 初步设置：

2. 可以看到环形结阴影正常，立方体因为阴影范围原因未显示阴影，这里使用cameraHelper调节阴影范围：

.shadow : xxxLightShadow
这个 xxxLightShadow 对象用来计算该平行光产生的阴影。
.camera : Camera
在光的世界里。这用于生成场景的深度图；从光的角度来看，其他物体背后的物体将处于阴影中。
默认值为PerspectiveCamera，近剪裁平面为0.5。 fov将通过更新方法跟踪拥有SpotLight的角度属性。同样，aspect属性将跟踪mapSize的方面。如果设置了灯光的距离属性，则远剪裁平面将跟踪该值，否则默认为500。
.mapSize : Vector2
一个Vector2定义阴影贴图的宽度和高度。较高的值会以计算时间为代价提供更好的阴影质量。值必须是2的幂，直到给定设备的WebGLRenderer.capabilities.maxTextureSize， 宽度和高度不必相同（例如，（512,1024）有效）。 默认值为（512,512）。

CameraHelper( camera : Camera )
camera – 被模拟的相机.
为指定相机创建一个新的相机辅助对象 CameraHelper.

    spotLight.shadow.camera.near = 8
    spotLight.shadow.camera.far = 30
    spotLight.shadow.mapSize.width = 1024
    spotLight.shadow.mapSize.height = 1024
    scene.add(new THREE.CameraHelper(spotLight.shadow.camera))

    dirLight.shadow.camera.near = 1
    dirLight.shadow.camera.far = 10
    dirLight.shadow.camera.left = -15
    dirLight.shadow.camera.right = 15
    dirLight.shadow.camera.top = 15
    dirLight.shadow.camera.bottom = -15
    scene.add(new THREE.CameraHelper(dirLight.shadow.camera))

旋转网格模型：

.getDelta () : Float
获取自 .oldTime 设置后到当前的秒数。 同时将 .oldTime 设置为当前时间。
如果 .autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。

    let clock=new THREE.Clock()
    ...
    const delta = clock.getDelta()
    torus_knot.rotation.x += 1 * delta
    torus_knot.rotation.y += 2 * delta
    torus_knot.rotation.z += 1.5 * delta
    ...

添加阴影指示器ShadowMapViewer:

源代码中解释：

这是一个可以帮助可视化给定光的阴影图的helper。它适用于阴影投射光：平行光和聚光灯。它渲染出阴影地图，并显示在HUD上。
example:
1)导入ShadowMapViewer到你的应用。
2)创建一个阴影投射光源，并可选命名:
let light = new DirectionalLight( 0xffffff, 1 );
light.castShadow = true;
light.name = ‘Sun’;
3)创建一个阴影查看器的光，并设置其大小和位置可选:
let shadowMapViewer = new ShadowMapViewer( light );
shadowMapViewer.size.set( 128, 128 ); //width, height default: 256, 256 shadowMapViewer.position.set(10, 10 ); //x, y in pixel default: 0, 0 (top left corner)
4)在渲染循环中渲染阴影地图查看器: shadowMapViewer.render( renderer );
5)可选:在窗口调整大小上更新阴影地图指示器: shadowMapViewer.updateForWindowResize();
6)如果你直接设置成员的位置或大小，你需要调用shadowMapViewer.update();

import { ShadowMapViewer } from 'three/examples/jsm/utils/ShadowMapViewer'
...
let spotLightShadowMapViewer, dirLightShadowMapViewer
...
window.addEventListener('resize', function () {
    ...
    initShadowMapViewer()
    spotLightShadowMapViewer.updateForWindowResize()
    dirLightShadowMapViewer.updateForWindowResize()
})
function initShadowMapViewer() {
    spotLightShadowMapViewer = new ShadowMapViewer(spotLight)
    dirLightShadowMapViewer = new ShadowMapViewer(dirLight)

    const size = window.innerWidth * 0.15
    spotLightShadowMapViewer.size.set(size, size)
    spotLightShadowMapViewer.position.set(10, 10)

    dirLightShadowMapViewer.size.set(size, size)
    dirLightShadowMapViewer.position.set(size + 10, 10)
}
function render(){
	...
    spotLightShadowMapViewer.render(renderer)
    dirLightShadowMapViewer.render(renderer)
}