react-three/postprocessing库的参数中文含义使用解析

一、react-three/postprocessing--处理效果的库

简而言之：包装效果 该库提供了一个 EffectPass，可自动组织和合并任何给定的效果组合。这最大限度地减少了渲染操作的数量，并且可以组合许多效果，而不会受到传统传递链接的性能损失。此外，每个效果都可以选择自己的混合功能。 后处理还支持开箱即用的 srgb 编码，以及 webGL2 MSAA（多样本抗锯齿），这是 react-postprocessing 的默认设置，您可以获得高性能的清晰结果，而不会出现锯齿状边缘。

二、提供的组件

<EffectComposer>//...//</EffectComposer>

效果处理器，包裹添加的效果组件，比如光照效果Light 景深组件等等

参数：

<EffectComposer
  enabled?: boolean
  children: jsX.Element | JSX.Element[]
  depthBuffer?: boolean  
  disableNORMalPass?: boolean  
  stencilBuffer?: boolean //模板缓冲区
  autoClear?: boolean //自动clear
  multisampling?: number
  frameBufferType?: TextureDataType
  
  resolutionScale?: number //分辨率尺cun
  renderPriority?: number  //渲染优先级
  camera?: THREE.Camera
  scene?: THREE.Scene
>

<DepthOfField />景深效果组件

作用："景深"是指当焦距对准某一点时，其前后都仍可清晰的范围。拍照时景深越大，景深范围内所有画面的轮廓依然清晰，从近到远全部清晰，相反景深值小了清晰的单位就小，前景背景是模糊的 贴两个对比图

参数

官网示例：<DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />

• focusDistance:对焦距离
• focalLength: 焦距 ，关于对焦距离和焦距的区别看文末补充介绍就好
• bokehScale: 虚化比例
• height :高度
• width:宽度
• blur：number：模糊度
• depthTexture:{texture: Texture; packing: number;};：纹理

<Bloom /> 光晕效果组件

参数

官网示例 <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />

• luminanceThreshold： 亮度阈值 默认0.9 在[0,1]之间取值
• luminanceSmoothing：亮度平滑 默认00.025 在[0,1]之间取值
• height：高度
• width: 宽度
• intensity: 强度 默认是 1
• kernelSize: 内核大小 一般用不上
• opacity: 不透明度，指定了一个元素后面的背景的被覆盖程度。

<Noise /> 噪点效果组件

官网示例 <Noise opacity={0.02} />

作用：类似于“颗粒”效果，俗话说给一个图片降噪，就是设置这个组件并添加参数值 参数

• premultiply：boolean 默认false 噪点的预乘功能 噪声是否应与输入颜色相乘。 比如有了亮度 设置它为true，图片会更亮
• opacity: 不透明度，指定了一个元素后面的背景的被覆盖程度。

<Vignette /> 晕影，虚化效果组件

官网示例

Vignette eskil={false} offset={0.1} darkness={1.1} />

参数

• eskil Boolean 默认false 如果offset值大于1，那么这里必须设置为true，不然图片可能会有个黑洞
• blendFunction BlendFunction 默认BlendFunction.NORMAL.
• offset Number 默认0.5 偏移量
• darkness Number 默认0.5 好比一个图片，设置了虚化，这个值越大，图片的四个角的黑色越大

<ToneMapping/> 一种色调映射效果组件

示例及参数：

<ToneMapping
    //blendFunction={BlendFunction.NORMAL} // blend mode
    adaptive={true} // 切换自适应亮度图用法 默认为true
    resolution={256} // texture 亮度的分辨率。默认256。
    middleGrey={0.6} // 中间灰色值 默认0.6
    maxLuminance={16.0} // 最大亮度  默认16
    averageLuminance={1.0} // 平均亮度 默认1
    adaptationRate={1.0} // 亮度适应率  默认1
  />

<HueSaturation />色彩饱和度

示例：

<HueSaturation hue={0} saturation={0}
  />

参数

• hue：色调，色调偏移，弧度 默认是0
• saturation： 饱和度数 饱和度值，单位为弧度，默认是0

<Grid/>网格效果组件

示例及参数

<Grid
   // blendFunction={BlendFunction.OVERLAY} // blend mode
    scale={1.0} // 网格图案比例 默认1
    lineWidth={0.0} // 网格图案的线宽 默认0
    size={{ width, height }} // 覆盖默认的通道(pass)的宽度和高度 无默认
  />

<GodRays>辐射线

示例及默认参数及参数默认值

 <GodRays
    sun={sunRef} //光源。必须不写深度，并且必须被标记为透明。
    blendFunction={BlendFunction.Screen} // 这种效果的混合功能。
    samples={60} // 每个像素的样本数。
    density={0.96} //  光线的密度。
    decay={0.9} // 衰变 照明衰减系数
    weight={0.4} // 光线权重
    exposure={0.6} // 曝光  一个曝光系数。
    clampMax={1} // 整体效果的饱和度的上限。
    width={Resizer.AUTO_SIZE} // Render width.
    height={Resizer.AUTO_SIZE} // Render height.
    kernelSize={KernelSize.SMALL} // 模糊的内核大小。如果模糊功能被禁用，则没有影响。
    blur={true} // 雾化效果的光照是否应该被模糊化以减少伪影。
  />

补充：下面介绍下对焦距离和焦距

对焦距离和焦距

对焦距离：是指镜头最前端镜片与拍摄物体的距离。
对焦距离：就是您的相机在拍摄物体的时候需要离被摄物体一定距离这样相机才可以拍摄清楚，否则相机无法对焦。对焦距离近的话适合拍摄小物件，这就是为什么有的镜头叫微距镜头，说的就是可以离被摄物体近，这样拍摄的就会更清楚，最简单容易理解就这样解释了。在选择数码相机的时候尤其是家用DC的时候会经常有写微距拍摄距离，有的相机可以达到1cm 还有更厉害的相机可以达到0cm 也就是说可以贴在物体上拍摄了，当然是否有这个必要，就看在拍摄的时候你自己的兴趣爱好了。
焦距：一般在相机的镜头上会有写 XXmm或者 XX-XXXmm类似 变焦18-55mm ，28-200mm 还有就是定焦 50mm 焦距简单的可以理解为拍摄画面的远近和角度范围大小。人的眼睛视野范围如果用镜头焦距来作为参考就是50mm的 所以为什么管50mm的镜头称为标头，就是符合人的眼睛视角范围。这个数值越大说明可以拍的越远，数值越小可以拍的越广，所以小于或者等于28mm的一般都称为广角镜头 大于70mm以上的例如200mm都称为长焦镜头，如果数值特小的一般都称为鱼眼镜头，鱼眼镜头拍的更广，所以在选择镜头的时候经常会看到厂家一个参数镜头变焦范围 28－105mm 就是说这个镜头广角端可以到28mm的 长焦端可以到105mm 这个对于选择相机是一个很重要的参数。数值变化越大说明拍摄范围就越广泛了。
焦距：相机的镜头是一组透镜，当平行光线穿过透镜时，会会聚到一点上，这个点叫做焦点，焦点到透镜中心的距离，就称为焦距。焦距固定的镜头，即定焦镜头；焦距可以调节变化的镜头，就是变焦镜头。

到此这篇关于react-three/postprocessing库的参数中文含义使用总结的文章就介绍到这了,更多相关react中文含义使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！