Three.js adds shadows and simple post-processing

In Three.js, you can use some features of the renderer to achieve shadows and post-processing effects.

add shadow

To add a shadow effect in Three.js, you need to do the following steps:

1. Turn on shadows

First, enable shadows in the renderer:

renderer.shadowMap.enabled = true;

2. Set the render target

Next, you need to set the properties of the light castShadowand the properties of the object that needs to generate shadows . For example:receiveShadowtrue

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);

Note that in order to obtain more realistic shadow effects, materials need to be used MeshStandardMaterial. Also, it needs to be set dark enough.

3. Adjust the light source

In order to produce a more realistic shadow effect, you also need to adjust the lighting parameters:

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;

Additionally, shadow resolution and blur can be adjusted with the following code:

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

These parameters need to be adjusted according to the size of the scene, the position of the light source, and the size and shape of the objects that need to produce shadows. By modifying these parameters, different shadow effects can be obtained.

Add post-processing effects

In Three.js, you can use the PostProcessing function to add various post-processing effects, such as blur, color correction, etc.

To use post-processing effects, you need to use the following classes:

• EffectComposer: Post-processing renderer
• RenderPass: render pass
• ShaderPass: Custom shader channel
• CopyShader: Duplicate shader channel (used to copy the image to the screen)

Here's a simple example showing how to use post-processing effects:

// 创建渲染器、相机和场景
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();
});

This example uses two custom shader passes: VerticalBlurShaderand VignetteShader. Among them, it VerticalBlurShaderis a Gaussian blur shader in the vertical direction, which can achieve a blur effect; VignetteShaderit is a vignetting shader, which can darken the edges of the image and produce a color correction effect.

It is important to note that when using a post-process renderer, you need to add a shader pass in addition to the render pass and renderToScreenset the properties of the last pass to trueso that the image is copied to the screen.

That’s the basic way to add shadows and post-processing effects in Three.js. The specific implementation of each effect may be different and needs to be adjusted according to the scenario and needs.