threejs后期处理的基本使用方法之加特效-前端开发

在Three.js中，后期处理是在渲染器执行完菜单渲染中的所有对象之后对渲染结果进行筛选和修改的一种技术。Three.js提供了多种后期处理方法，如全屏像素化、阴影、镜面反射等等。本攻略将介绍Three.js中加特效的基本使用方法，希望可以帮到你。

Threejs后期处理的基本使用方法之加特效

前言

在Three.js中，后期处理是在渲染器执行完菜单渲染中的所有对象之后对渲染结果进行筛选和修改的一种技术。Three.js提供了多种后期处理方法，如全屏像素化、阴影、镜面反射等等。本攻略将介绍Three.js中加特效的基本使用方法，希望可以帮到你。

加特效

加特效（GlitchPass）是Three.js中一个非常流行的后期处理特效，可以模拟模拟电视失真、信号干扰等效果。要使用加特效，必须先导入它：

import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

完成导入后，可以直接实例化加特效并添加到渲染管道中：

const glitchPass = new GlitchPass();
composer.addPass(glitchPass);

示例一

下面是一个简单的使用示例，实现在场景中添加一个Cube、球体和地面，并对整个场景添加一个加特效：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threejs 加特效示例</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            display:block;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/postprocessing/GlitchPass.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        const composer = new THREE.EffectComposer( renderer );
        const renderPass = new THREE.RenderPass( scene, camera );
        composer.addPass( renderPass );
        const glitchPass = new THREE.GlitchPass();
        composer.addPass( glitchPass );
        const controls = new THREE.OrbitControls( camera, renderer.domElement );
        const geometry1 = new THREE.BoxGeometry();
        const material1 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry1, material1 );
        scene.add( cube );
        const geometry2 = new THREE.SphereGeometry();
        const material2 = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
        const sphere = new THREE.Mesh( geometry2, material2 );
        sphere.position.set(2,2,0);
        scene.add( sphere );
        const geometry3 = new THREE.PlaneGeometry( 20,20 );
        const material3 = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        const plane = new THREE.Mesh( geometry3, material3 );
        plane.rotateX(-Math.PI / 2);
        plane.position.setY(-1);
        scene.add( plane );
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame( animate );
            controls.update();
            composer.render();
        }
        animate();
    </script>
</body>
</html>

示例二

在上面的示例中，我们只添加了一个加特效。如果想要对整个场景添加多个加特效，应当如何实现呢？下面给大家提供一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threejs 加特效示例</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            display:block;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.125.2/examples/js/postprocessing/GlitchPass.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        const composer = new THREE.EffectComposer( renderer );
        const renderPass = new THREE.RenderPass( scene, camera );
        composer.addPass( renderPass );
        const glitchPass1 = new THREE.GlitchPass();
        composer.addPass( glitchPass1 );
        const glitchPass2 = new THREE.GlitchPass();
        composer.addPass( glitchPass2 );
        glitchPass2.enabled = false;
        const controls = new THREE.OrbitControls( camera, renderer.domElement );
        const geometry1 = new THREE.BoxGeometry();
        const material1 = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry1, material1 );
        scene.add( cube );
        const geometry2 = new THREE.SphereGeometry();
        const material2 = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
        const sphere = new THREE.Mesh( geometry2, material2 );
        sphere.position.set(2,2,0);
        scene.add( sphere );
        const geometry3 = new THREE.PlaneGeometry( 20,20 );
        const material3 = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        const plane = new THREE.Mesh( geometry3, material3 );
        plane.rotateX(-Math.PI / 2);
        plane.position.setY(-1);
        scene.add( plane );
        camera.position.z = 5;
        function animate() {
            requestAnimationFrame( animate );
            controls.update();
            composer.render();
        }
        animate();
    </script>
</body>
</html>

在这个示例中，我们添加了两个加特效，并且实现了在不同时刻开关加特效。由于加特效非常流行，且在官方工具库中极为常用，建议大家了解一下加特效，并考虑在自己的项目中加入这一特效。