Three.js添加阴影和简单后期处理实现示例详解

renderer.shadowMap.enabled = true;

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 0);
light.castShadow = true;
scene.add(light);
var cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
var cubeMaterial = new THREE.MeshStandardMaterial({
    color: 0x00ff00
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1, 0);
cube.receiveShadow = true; // 接收阴影
scene.add(cube);
var planeGeometry = new THREE.PlaneGeometry(20, 20, 1, 1);
var planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xCCCCCC
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -1;
plane.receiveShadow = true; // 接收阴影
scene.add(plane);

light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
light.shadow.camera.left = -100;
light.shadow.camera.right = 100;
light.shadow.camera.top = 100;
light.shadow.camera.bottom = -100;

renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 预过滤模糊
renderer.shadowMap.bias = 0.0039; // 阴影偏移量
renderer.shadowMap.width = 2048; // 分辨率宽度
renderer.shadowMap.height = 2048; // 分辨率高度

// 创建渲染器、相机和场景
var renderer = new THREE.webGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 5;
var scene = new THREE.Scene();
// 加载模型
var loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
    var model = gltf.scene;
    scene.add(model);
    // 设置需要产生阴影的物体
    model.traverse(function (child) {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    // 添加灯光
    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 10,0);
    light.castShadow = true;
    scene.add(light);
            // 创建后期处理渲染器
var composer = new THREE.EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);
// 添加渲染通道
var renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
// 添加自定义着色器通道（模糊）
var blurShader = new THREE.ShaderPass(THREE.VerticalBlurShader);
blurShader.unifORMs["v"].value = 0.01; // 模糊度
composer.addPass(blurShader);
// 添加自定义着色器通道（色彩校正）
var vignetteShader = new THREE.ShaderPass(THREE.VignetteShader);
vignetteShader.uniforms["offset"].value = 1.0; // 色彩校正强度
composer.addPass(vignetteShader);
// 添加复制着色器通道
var copyShader = new THREE.ShaderPass(THREE.CopyShader);
copyShader.renderToScreen = true;
composer.addPass(copyShader);
// 渲染场景
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    composer.render();
}
render();
});