threejs 11 postprocessing后处理

RenderPass
是最基础的一个pass。

EffectComposer合成器

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { DirectionalLight, HemisphereLight, SphereBufferGeometry } from "three";
import{EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer"
import{RenderPass} from "three/examples/jsm/postprocessing/RenderPass"

var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
//合成器的绘制区域需要设置高宽
    effectComposer.setSize(window.innerWidth,window.innerHeight);
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();

var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);

var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial();
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);



/**
 * 后处理 postProcessing
 * 把场景渲染出来得到一张图，每次调用webglRenderer.render就重新绘制
 * 后处理相当于把这张图进行处理，就是对这张图片进行添加效果的处理
 * 后处理如何实现：怎么实现，使用系统提供的特效合成器
 * 一个pass就是一个渲染通道，就是进行一个特效的方法，可以添加无数的通道
 * renderPass是一个最基础的pass
 * OutlinePass(resolution: THREE.Vector2, scene: THREE.Scene, camera: THREE.Camera, selectedObjects?: THREE.Object3D<THREE.Event>[]): OutlinePass
 */
 //1.合成器 2.renderpass必须在第一个 3.其他pass
var effectComposer=new EffectComposer(renderer);
var renderPass=new RenderPass(scene,camera);
effectComposer.addPass(renderPass);

update()

function update() {
    console.log('刷新')
    // renderer.render(scene, camera);
    //使用后处理，就使用特效合成器EffectComposer来渲染
    effectComposer.render();
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}

DotScreenPass

import{DotScreenPass} from "three/examples/jsm/postprocessing/DotScreenPass"
var effectComposer=new EffectComposer(renderer);

var renderPass=new RenderPass(scene,camera);
effectComposer.addPass(renderPass);

var dotPass=new DotScreenPass();
effectComposer.addPass(dotPass);

OutlinePass

import{OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass"
var outlinePass=new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);
effectComposer.addPass(outlinePass);

鼠标悬浮球体outline，离开球体取消outline

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { DirectionalLight, DoubleSide, HemisphereLight, SphereBufferGeometry} from "three";
import{EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer"
import{OutlinePass} from "three/examples/jsm/postprocessing/OutlinePass"
import{RenderPass} from "three/examples/jsm/postprocessing/RenderPass"

var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor('rgba(135,206,250,0.5)',1.0); 
var mouse = new THREE.Vector2();
var selectedObjects = [];
var raycaster = new THREE.Raycaster();


window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
//合成器的绘制区域需要设置高宽
    effectComposer.setSize(window.innerWidth,window.innerHeight);
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);

var sphereGeometry = new SphereBufferGeometry(5, 12, 12);
var material = new THREE.MeshPhongMaterial({color:0xff0000,side:DoubleSide});
var sphereMesh = new THREE.Mesh(sphereGeometry, material)
scene.add(sphereMesh);

//-------------------------------------------------------------------------------
//添加两个事件

window.addEventListener( 'mousemove', onTouchMove );
window.addEventListener( 'touchmove', onTouchMove );

function onTouchMove( event ) {

    var x, y;

    if ( event.changedTouches ) {

        x = event.changedTouches[ 0 ].pageX;
        y = event.changedTouches[ 0 ].pageY;

    } else {

        x = event.clientX;
        y = event.clientY;

    }

    mouse.x = ( x / window.innerWidth ) * 2 - 1;
    mouse.y = - ( y / window.innerHeight ) * 2 + 1;

    checkIntersection();

}
function checkIntersection() {

    raycaster.setFromCamera( mouse, camera );

    var intersects = raycaster.intersectObjects( [ scene ], true );

    if ( intersects.length > 0 ) {

        var selectedObject = intersects[ 0 ].object;
        addSelectedObject( selectedObject );
        outlinePass.selectedObjects = selectedObjects;

    } else {

         outlinePass.selectedObjects = [];
    }
}

function addSelectedObject( object ) {

    selectedObjects = [];
    selectedObjects.push( object );

}

var effectComposer=new EffectComposer(renderer);

var renderPass=new RenderPass(scene,camera);
effectComposer.addPass(renderPass);

var outlinePass=new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight),scene,camera);
effectComposer.addPass(outlinePass);

HalftonePass

var halftonePass=new HalftonePass(window.innerWidth,window.innerHeight,{});
effectComposer.addPass(halftonePass);

GlitchPass
故障pass

import{GlitchPass} from "three/examples/jsm/postprocessing/GlitchPass"
var glitchPass=new GlitchPass();
effectComposer.addPass(glitchPass);
glitchPass.renderToScreen=true;