Threejs之后处理EffectComposer

参考资料

  • 后处理(发光描边OutlinePass)
  • 抗锯齿后处理

知识点

注:基于Three.jsv0.155.0

  • 后处理(发光描边OutlinePass):EffectComposerRenderPassOutlinePass
  • OutlinePass描边样式:visibleEdgeColor edgeThickness edgeStrength pulsePeriod
  • Bloom发光通道:UnrealBloomPass
  • 多通道组合(GlitchPass和描边):GlitchPass(闪屏)
  • gltf工厂模型设置发光描边
  • gltf后处理颜色异常(伽马校正):GammaCorrectionShader
  • 抗锯齿后处理:FXAAShader SMAAPass

代码实现

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Three.jstitle>
head>
  <body>
  body>
  
  <script type="importmap">
    {
      "imports": {
        "three": "./js/three.module.js",
        "three/addons/": "../three.js/examples/jsm/"
      }
    }
  script>
  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    // 引入后处理扩展库EffectComposer.js
    import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
    // 引入渲染器通道RenderPass
    import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
    // 引入OutlinePass通道
    import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
    // 引入UnrealBloomPass通道
    import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
    // 引入GlitchPass通道
    import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
    // 伽马校正后处理Shader
    import {GammaCorrectionShader} from 'three/addons/shaders/GammaCorrectionShader.js';
    // ShaderPass功能:使用后处理Shader创建后处理通道
    import {ShaderPass} from 'three/addons/postprocessing/ShaderPass.js';
   
    const width = 800
    const height = 500

    // 场景
    const scene = new THREE.Scene();
    // 几何体
    const geometry = new THREE.BoxGeometry(50, 50, 50);
    // 材质
    const material = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      transparent: true,
      opacity: 0.5
    });
    // 网格模型:物体
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0);
    scene.add(mesh);

    const mesh1 = mesh.clone()
    mesh1.position.set(100, 0, 0);
    scene.add(mesh1);

    const mesh2 = mesh.clone()
    mesh2.position.set(0, 100, 0);
    scene.add(mesh2);

    // 坐标系
    const axes = new THREE.AxesHelper(200);
    scene.add(axes);

    // 相机
    const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
    camera.position.set(200, 200, 200);
    camera.lookAt(scene.position);

    // 渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.render(scene, camera);
    // 设置设备像素比,避免canvas画布输出模糊
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);
    
    // 描边效果 Start
    const composer = new EffectComposer(renderer);

    const renderPass = new RenderPass(scene, camera);
    composer.addPass(renderPass);

    // 描边效果 Start
    const outlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera);
    outlinePass.selectedObjects = [mesh];
    //模型描边颜色,默认白色         
    outlinePass.visibleEdgeColor.set(0xffff00); 
    //高亮发光描边厚度
    outlinePass.edgeThickness = 4; 
    //高亮描边发光强度
    outlinePass.edgeStrength = 6; 
    //模型闪烁频率控制,默认0不闪烁
    outlinePass.pulsePeriod = 2;
    composer.addPass(outlinePass);
    // 描边效果 End

    // 发光通道 Start
    const params = {
      threshold: 0,
      strength: 1,
      radius: 0,
      exposure: 1
    };

    const bloomPass = new UnrealBloomPass(new THREE.Vector2(width, height), 1.5, 0.4, 0.85);
    bloomPass.threshold = params.threshold;
    bloomPass.strength = params.strength;
    bloomPass.radius = params.radius;
		composer.addPass( bloomPass );
    // 发光通道 End

    // 闪屏效果 Start
    const glitchPass = new GlitchPass();
    console.log(' ~ file: 13.后处理EffectComposer.html:109 ~ glitchPass:', glitchPass)
    // 设置glitchPass通道
    composer.addPass(glitchPass);
    // 闪屏效果 End

    // 创建伽马校正通道
    const gammaPass= new ShaderPass(GammaCorrectionShader);
    composer.addPass(gammaPass);

    // 动画渲染
    // 跟踪时间
    var clock = new THREE.Clock();
    function render() {
      const spt = clock.getDelta() * 1000;
      // mesh.rotation.y += 0.01;
      // renderer.render(scene, camera);
      composer.render();
      requestAnimationFrame(render);
    }

    render();

    // 控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      // 因为动画渲染了,所以这里可以省略
      // renderer.render(scene, camera);
    });
  script>
html>

你可能感兴趣的:(Web3D,threejs,Web3D)