Threejs之后处理EffectComposer

最新推荐文章于 2024-09-28 17:31:24 发布

开心就是最好

最新推荐文章于 2024-09-28 17:31:24 发布

阅读量489

点赞数

分类专栏： Web3D 文章标签： threejs Web3D

本文链接：https://blog.csdn.net/u010678947/article/details/134480235

版权

Web3D 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

参考资料

知识点

注：基于Three.jsv0.155.0

后处理(发光描边OutlinePass)：EffectComposer、RenderPass、OutlinePass
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.js</title>
</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>