2. 渲染器Render

渲染器的常用写法

new THREE.WebGLRenderer() ——声明渲染器renderer

 new THREE.WebGLRenderer({
    antialias: true, // true/false表示是否开启反锯齿
    alpha: true, // true/false 表示是否可以设置背景色透明
    precision: 'highp', // highp/mediump/lowp 表示着色精度选择
    premultipliedAlpha: false, // true/false 表示是否可以设置像素深度(用来度量图像的分辨率)
    preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
    maxLights: 3, // 最大灯光数
    stencil: false // false/true 表示是否使用模板字体或图案
  })

new THREE.WebGLDeferredRenderer() ——处理复杂光的延迟渲染器

  new THREE.WebGLDeferredRenderer({
      width: window.innerWidth,
      height: window.innerHeight,
      scale: 1,
      antialias: true,
      tonemapping: THREE.FilmicOperator,
      brightness: 2.5
  });
  • *还没找到文档

Three.js的渲染方式

WebGLRenderer

构造函数

WebGLRenderer(Parameters: Object) parameters可选的对象,有效的参数如下:

  • canvas 渲染器绘制输出的画布,这对应于下面的docElement元素,不在这里传递则创建一个新的画布元素
  • context 将渲染器附加到所有存在的RenderingContext,默认null
  • precision 阴影精度,highp/mediump/lowp 默认highp
  • alpha 画布是否包含透明缓冲区,默认false
  • premultipliedAlpha 渲染器是否会假设颜色具有预乘透明度,默认true
  • antialias 是否开启反锯齿,默认false
  • stencil 绘图缓冲区是否有至少8位的stencil buffer
  • preserveDrawingBuffer 是否保留缓冲区,直到手动清除或覆盖。默认false
  • powerPreference 向用户代理提供提示,指示适用于此WebGL上下文的GPU配置。可以是“high-performance”,“low-power”或“默认”。默认为“default”。
  • depth 绘图缓冲区具有至少16位的depth buffer。默认为true
  • logarithmicDepthBuffer 是否使用对数深度缓冲区。如果在单个场景中处理规模的巨大差异,则可能需要使用它。默认值为false
特性
  • autoClear: Boolean 在渲染一帧后是否自动清理输出
  • autoClearColr: Boolean 渲染器清理颜色缓冲区,默认true
  • autoClearDepth: Boolean 渲染器清理深度缓冲区,默认true
  • autoCleanStencil: Boolean 渲染器清理模板缓冲区,默认true
  • capabilities: Object 包括当前渲染上下文的详细信息,详细参考
  • clippingPlanes: Array 用户定义的裁剪平面,默认[]
  • context: WebGLRenderingContext 渲染器默认用HTMLCanvasElement.getContext.getContext从它自己的domElement获取RenderingContext的上下文
  • domElement: DOMElement 理解为渲染器绘制输出的canvas元素
  • extensions: Object GET方法包装器,检查是否支持各种WebGL扩展
  • gammaInput: Boolean 所有的纹理和颜色预乘伽马,默认false
  • gammaOutput: Boolean 需要以预乘的伽马输出,默认false
  • gammaFactor 默认2
  • info: Object 图形版内存和绘制过程中的统计信息,用于debugging
  • localClippingEnabled: Boolean 默认false
  • maxMorphTargets: Intrget 默认8,标准材料只能用八个
  • maxMorphNormals: Integer 默认4
  • physicallyCorrectLights: Boolean 默认false
  • properties: Object 跟踪子对象的属性
  • renderLists: WebGLRenderList 处理渲染列表
  • shadowMap: WebGLShadowMap 属性有enabled/autoUpdate/needsUpdate/type
  • sortObjects: Boolean 默认true
  • state: Object 设置WebGLRenderer.context状态的各种属性
  • toneMapping: Constant 在Renderer constants选择,默认LinearToneMapping(声调)
  • toneMappingExposure: Number 默认1
  • toneMappingWhitePoint: Number 默认1

方法

  • clear(color: Boolean,depth: Boolean,stencil: Boolean) 清除
  • clearColor/Depth/Stencil()
  • clearTarget(renderTarget: WebGLRenderTarget,color: Boolean,depth:Boolean,stencil: Boolean)
  • compile(scene: Scene,camera: Camera) 在第一次呈现之前预编译很有用
  • copyFramebufferToTexture(position: Vector2,teture: Texture,level: Number): null
  • copyTextureToTexture(position: Vector2,texture: Texture,level: Number): null
  • dispose(): null 处理当前渲染的上下文
  • forceContextLoss(): null 模拟WebGL上下文丢失
  • getClearAlpha(): Float 0~1
  • setClearAlpha(alpha)
  • getClearColor(): Color 返回一个当前清晰的Three.Color实例
  • setClearColor(color,alpha) 设置渲染的环境的颜色
  • getContext(): WebGLRenderingContext 返回当前WebGL的上下文
  • getContextAttributes(): WebGLContextAttrobute 一个对象被创建的时候返回对象的描述属性
  • getRenderTarget(): RenderTarget
  • setRenderTarget(renderTarget)
  • getCurrentViewport(): RenderTarget
  • getDrawingBufferSize(): Object 绘图缓冲区,以像素为单位
  • getPixelRatio(): Number 当前设备像素所用的比率
  • setPixelRatio(value) 设置设备像素比
  • getSize(): Object
  • setSize(width,height,updateStyle: Boolean)
  • resetGLState(): null WebGL上下文丢失时内部调用reset GL状态为默认的
  • readRenderTargetPixels(renderTarget,x,y,width,height,buffer) 读取渲染目标的像素到缓冲区
  • render(scene,camera,renderTarget,forceClear:Boolean) 渲染场景 ;
    • renderTarget:渲染的目标,默认是渲染到前面定义的render变量中;
    • forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。
  • renderBufferDirect(camera,lights: Array,fog,material,geometryGroup) 渲染一个几何体的缓冲组
  • renderBufferImmediate(object: Object3D,program: shaderprogram,shading:materual) 渲染一个及时缓冲区
  • setAnimationLoop(callback) callback 来代替requestAnimationFrame WebVR 这个函数必须调用
  • setScissor(x,y,width,height) 设置裁剪区
  • setScissorText(boolean) true,只用在定义裁剪区域的受到渲染的影响
  • setTexture2D(texture,slot: Number) 将纹理设置到正确的solt(插槽)
  • setTextureCube(cubeTexture,solt)
  • setViewport(x,y,width,height)

WebGLRenderTarget

渲染目标的一个缓冲区

构造函数

WebGLRenderTarget(width,height,options: Object)

options的有效选择: wrapS/wrapT/magFilter/minFilter/format/type/anisortropy/encoding/depthBuffer/stencilBuffer

特性

  • width/height
  • scissor: Vector4 渲染目标视口的矩形区域
  • scissorTest: Boolean 裁剪测试是否激活
  • viewport: Vector4 渲染目标的视口区域
  • texture: Texture 保存呈现的像素
  • depthBuffer: Boolean 渲染到深度缓冲区 默认true
  • stencilBuffer: Boolean 渲染到模板缓冲区,默认true
  • depthTexture: DepthTexture 场景的深度纹理,默认null

方法

  • setSize(width,height) 设置渲染目标的大小
  • clone()
  • copy()
  • dispose() 分发处理事件

CanvasRenderer

比较慢,已经被启用,

CSS2DRenderer

如果你想结合基于HTML的标签和3D对象,渲染器是非常有用的

CSS3DRenderer

CSS3DRenderer可用于通过CSS 3转换属性对DOM元素应用分层3D转换。这个渲染器是特别有趣的,如果你想把3D效果应用到一个没有基于画布渲染的网站上。它还可以用于将DOM元素与WebGL内容结合起来

SVGRenderer

WebGLRenderTargetCube

被cubeCamera用作它的WebGLRenderTarget

构造函数

WebDLRenderTargetCube(width,height,option) option可用选项和上面的一样

特性

继承WebGLRenderTarget

  • activeCubeFace: Integer

方法

继承WebGLRenderTarget


官方文档


  • *红色字为常用方法或属性

threejs
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。