Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

  • 2.几何体BufferGeometry

  • 3.模型对象、材质

  • 4.层级模型

  • 5.顶点UV坐标、纹理贴图

  • 6.加载外部三维模型(gltf)

  • 7.PBR材质与纹理贴图

  • 8.渲染器和前端UI界面

  • 9.生成曲线、几何体

  • 10.相机基础

  • 11.光源和阴影

  • 12.精灵模型Sprite

  • 13.后处理EffectComposer

    • 1. 后处理(发光描边OutlinePass)
    • 2. OutlinePass描边样式
      • 3. Bloom发光通道
      • 4. 多通道组合(GlitchPass和描边)
      • 5. gltf工厂模型设置发光描边
      • 6. gltf后处理颜色异常(伽马校正)
      • 7. 抗锯齿后处理
    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 13.后处理EffectComposer
    郭隆邦
    2023-02-25
    目录

    2. OutlinePass描边样式

    # OutlinePass高亮发光描边样式

    继续上节课关于OutlinePass的讲解,给大家演示如何修改OutlinePass默认高亮发光描边样式。

    OutlinePass有很多控制高亮外边框样式的属性,下面介绍几个比较常用的属性。

    //模型描边颜色,默认白色         
    outlinePass.visibleEdgeColor.set(0xffff00); 
    //高亮发光描边厚度
    outlinePass.edgeThickness = 4; 
    //高亮描边发光强度
    outlinePass.edgeStrength = 6; 
     //模型闪烁频率控制,默认0不闪烁
    outlinePass.pulsePeriod = 2;
    

    # 描边颜色.visibleEdgeColor

    # 修改OutlinePass默认边框效果

    .visibleEdgeColor可以设置模型边缘高亮描边颜色

    //模型边缘高亮边框颜色,默认白色  
    outlinePass.visibleEdgeColor.set(0xffff00);
    

    # 描边厚度.edgeThickness

    outlinePass.edgeThickness表示高亮发光描边的厚度,默认值1

    console.log('描边厚度',outlinePass.edgeThickness);          
    

    轮廓边缘描边厚度设置

    outlinePass.edgeThickness = 4.0;
    

    # 描边亮度.edgeStrength

    outlinePass.edgeThickness表示高亮描边的发光强度,默认值3

    console.log('描边亮度',outlinePass.edgeStrength);
    

    高亮描边发光强度设置

    outlinePass.edgeStrength = 6; 
    

    # 描边闪烁.pulsePeriod

    outlinePass.pulsePeriod的功能是控制描边的闪烁频率,默认0不闪烁。

    outlinePass.pulsePeriod = 2;
    
    1. 后处理(发光描边OutlinePass)
    3. Bloom发光通道

    ← 1. 后处理(发光描边OutlinePass) 3. Bloom发光通道→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式