three WebGLRenderer WebGL渲染器属性 autoClear : Boolean 定义渲染器是否在

WebGLRenderer 是 Three.js 中的一个渲染器，用于将 3D 场景通过 WebGL 渲染到 HTML 元素上。它主要负责将 3D 对象、材质、光照等转换为可在浏览器中显示的 2D 图像。

WebGLRenderer 有二十个属性三十八个方法

    WebGLRenderer( parameters : Object )
    parameters - (可选) 该对象的属性定义了渲染器的行为。也可以完全不传参数。在所有情况下，当缺少参数时，它将采用合理的默认值。 以下是合法参数：
        canvas - 一个供渲染器绘制其输出的canvas 它和下面的domElement属性对应。 如果没有传这个参数，会创建一个新canvas
        context - 可用于将渲染器附加到已有的渲染环境(RenderingContext)中。默认值是null
        precision - 着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持，默认为"highp" .
        alpha - 控制默认的透明 alpha 值。当设置为 true 时，值为 0。否则为 1。默认值为 false。
        premultipliedAlpha - renderer是否假设颜色有 premultiplied alpha. 默认为true
        antialias - 是否执行抗锯齿。默认为false.
        stencil - 绘图缓存是否有一个至少8位的模板缓存(stencil buffer)。默认为false
        preserveDrawingBuffer -是否保留缓直到手动清除或被覆盖。 默认false.
        powerPreference - 提示用户代理怎样的配置更适用于当前WebGL环境。 可能是"high-performance", "low-power" 或 "default"。默认是"default". 详见WebGL spec
        failIfMajorPerformanceCaveat - 检测渲染器是否会因性能过差而创建失败。默认为false。详见 WebGL spec for details.
        depth - 绘图缓存是否有一个至少6位的深度缓存(depth buffer )。 默认是true.
        logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 请注意，此设置使用 gl_FragDepth（如果可用），这会禁用早期片段测试优化并可能导致性能下降。 默认是false。 示例：camera / logarithmicdepthbuffer

属性

autoClear : Boolean 定义渲染器是否在渲染每一帧之前自动清除其输出。autoClear 是 Three.js 中 WebGLRenderer 的一个属性，它控制渲染器在每一帧渲染之前是否自动清除帧缓存（颜色、深度或模板缓冲区）。默认为 true，表示每次渲染新的一帧时，都会先清除之前的渲染内容。
autoClearColor : Boolean 如果autoClear为true, 定义renderer是否清除颜色缓存。默认是true
autoClearDepth : Boolean 如果autoClear是true, 定义renderer是否清除深度缓存。默认是true
autoClearStencil : Boolean 如果autoClear是true, 定义renderer是否清除模板缓存. 默认是true
debug : Object - checkShaderErrors: 如果为true，定义是否检查材质着色器程序编译和链接过程中的错误。禁用此检查生产以获得性能增益可能很有用。强烈建议在开发期间保持启用这些检查。如果着色器没有编译和链接 - 它将无法工作，并且相关材料将不会呈现。默认是true
capabilities : Object 一个包含当前渲染环境(RenderingContext)的功能细节的对象

    - floatFragmentTextures: 环境是否支持OES_texture_float扩展
    - floatVertexTextures: 如果floatFragmentTextures和vertexTextures都是true， 则此值为true
    - getMaxAnisotropy(): 返回最大可用各向异性。
    - getMaxPrecision(): 返回顶点着色器和片元着色器的最大可用精度。
    - isWebGL2: 如果使用的上下文是 WebGL2RenderingContext 对象，则为 true。
    - logarithmicDepthBuffer: 如果logarithmicDepthBuffer在构造器中被设为true且 环境支持EXT_frag_depth扩展，则此值为true
    - maxAttributes: gl.MAX_VERTEX_ATTRIBS的值
    - maxCubemapSize: gl.MAX_CUBE_MAP_TEXTURE_SIZE 的值，着色器可使用的立方体贴图纹理的最大宽度*高度
    - maxFragmentUniforms: gl.MAX_FRAGMENT_UNIFORM_VECTORS的值，片元着色器可使用的全局变量(uniforms)数量
    - maxSamples: gl.MAX_SAMPLES 的值。多重采样抗锯齿 (MSAA) 环境中的最大采样数。
    - maxTextureSize: gl.MAX_TEXTURE_SIZE的值，着色器可使用纹理的最大宽度*高度
    - maxTextures: *gl.MAX_TEXTURE_IMAGE_UNITS的值，着色器可使用的纹理数量
    - maxVaryings: gl.MAX_VARYING_VECTORS的值，着色器可使用矢量的数量
    - maxVertexTextures: gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS的值，顶点着色器可使用的纹理数量。
    - maxVertexUniforms: gl.MAX_VERTEX_UNIFORM_VECTORS的值，顶点着色器可使用的全局变量(uniforms)数量
    - precision: 渲染器当前使用的着色器的精度
    - vertexTextures: 如果 .maxVertexTextures : Integer大于0，此值为true (即可以使用顶点纹理)

clippingPlanes : Array 用户自定义的剪裁平面，在世界空间中被指定为THREE.Plane对象。这些平面全局使用。空间中与该平面点积为负的点将被切掉。默认值是[]
domElement : DOMElement 一个canvas，渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数);你需要做的仅仅是像下面这样将它加页面里去:document.body.appendChild( renderer.domElement );
extensions : Object - get( extensionName : String ): 用于检查是否支持各种扩展，并返回一个对象，其中包含扩展的详细信息。该方法检查以下扩展： WEBGL_depth_texture EXT_texture_filter_anisotropic WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_pvrtc WEBGL_compressed_texture_etc1
outputColorSpace : string 定义渲染器的输出编码。默认为THREE.SRGBColorSpace 如果渲染目标已经使用 .setRenderTarget、之后将直接使用renderTarget.texture.colorSpace 查看texture constants页面以获取其他格式细节
info : Object 一个对象，包含有关图形板内存和渲染过程的一系列统计信息。这些信息可用于调试或仅仅满足下好奇心。该对象包含以下字段:

    -   memory:
    -   geometries
    -   textures
-   render:
    -   calls
    -   triangles
    -   points
    -   lines
    -   frame
-   programs 
    默认情况下，这些字段在每次渲染调用时都会重置，但是当每帧有多个渲染通道时（例如，使用后处理时），最好使用自定义模式重置。先将 autoReset 设置为 false.
    renderer.info.autoReset = false;
    然后在单个帧时渲染完成后调用 reset().
    renderer.info.reset();

localClippingEnabled : Boolean 定义渲染器是否考虑对象级剪切平面。默认为false.
properties : Object 渲染器内部使用，以跟踪各种子对象属性。
renderLists : WebGLRenderLists 在内部用于处理场景渲染对象的排序。
shadowMap : WebGLShadowMap 如果使用，它包含阴影贴图的引用。

    - enabled: 如果设置开启，允许在场景中使用阴影贴图。默认是 false。
    - autoUpdate: 启用场景中的阴影自动更新。默认是true
    如果不需要动态光照/阴影, 则可以在实例化渲染器时将之设为false
    - needsUpdate: 当被设为true, 场景中的阴影贴图会在下次render调用时刷新。默认是false
    如果你已经禁用了阴影贴图的自动更新(shadowMap.autoUpdate = false), 那么想要在下一次渲染时更新阴影的话就需要将此值设为true
    - type: 定义阴影贴图类型 (未过滤, 关闭部分过滤, 关闭部分双线性过滤), 可选值有:
        THREE.BasicShadowMap
        THREE.PCFShadowMap (默认)
        THREE.PCFSoftShadowMap
        THREE.VSMShadowMap
        详见Renderer constants

sortObjects : Boolean 定义渲染器是否应对对象进行排序。默认是true. 说明: 排序用于尝试正确渲染出具有一定透明度的对象。根据定义，排序可能不总是有用。根据应用的需求，可能需要关闭排序并使其他方法来处理透明度的渲染，例如，手动确定每个对象的渲染顺序。
state : Object 包含设置WebGLRenderer.context状态的各种属性的函数。
toneMapping : Constant 默认是NoToneMapping。查看Renderer constants以获取其它备选项
toneMappingExposure : Number 色调映射的曝光级别。默认是1
xr : WebXRManager 提供对渲染器的WebXR相关接口的访问。

方法

clear ( color : Boolean, depth : Boolean, stencil : Boolean ) : undefined 告诉渲染器清除颜色、深度或模板缓存. 此方法将颜色缓存初始化为当前颜色。参数们默认都是true
clearColor ( ) : undefined 清除颜色缓存。相当于调用.clear( true, false, false )
clearDepth ( ) : undefined 清除深度缓存。相当于调用.clear( false, true, false )
clearStencil ( ) : undefined 清除模板缓存。相当于调用.clear( false, false, true )
compile ( scene : Object3D, camera : Camera, targetScene : Scene ) : Set 使用相机编译场景中的所有材质。这对于在首次渲染之前预编译着色器很有用。如果要将 3D 对象添加到现有场景，请使用第三个可选参数来应用目标场景。请注意，在调用此方法之前应配置场景的照明。
compileAsync ( scene : Object3D, camera : Camera, targetScene : Scene ) : Promise compile() 的异步版本。该方法返回一个 Promise。它解决了何时可以渲染给定的 3D 对象或场景，而不会因着色器编译而出现不必要的停顿。此方法利用 KHR_parallel_shader_compile。
copyFramebufferToTexture ( texture : FramebufferTexture, position : Vector2, level : Number ) : undefined 将当前WebGLFramebuffer中的像素复制到2D纹理中。可访问WebGLRenderingContext.copyTexImage2D.
copyTextureToTexture ( srcTexture : Texture, dstTexture : Texture, srcRegion : Box2, dstPosition : Vector2, level : Number ) : undefined 从给定位置开始复制目标纹理中“srcRegion”边界中的纹理像素。允许访问 WebGLRenderingContext.texSubImage2D。是的，在 Three.js 中，纹理通常是绑定到物体的材质上，然后作用于该物体的表面。通过 copyTextureToTexture 方法复制纹理，实际上是在修改纹理本身，而这个纹理可以应用到一个或多个物体的材质上。

    // 创建一个立方体几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    // 加载初始纹理
    const initialTexture = new THREE.TextureLoader().load('path_to_texture.jpg');
    // 创建材质并应用纹理
    const material = new THREE.MeshBasicMaterial({ map: initialTexture });
    // 创建立方体，并将材质应用到立方体上
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 加载另一个纹理作为源纹理
    const srcTexture = new THREE.TextureLoader().load('path_to_source_texture.jpg');
    // 定义源区域和目标位置
    const srcRegion = new THREE.Box2(
        new THREE.Vector2(0.25, 0.25), 
        new THREE.Vector2(0.75, 0.75)
    );
    const dstPosition = new THREE.Vector2(0.5, 0.5);
    // 将源纹理的一部分复制到应用于立方体的纹理
    renderer.copyTextureToTexture(srcTexture, initialTexture, srcRegion, dstPosition, 0);

copyTextureToTexture3D ( srcTexture : Texture, dstTexture : Texture, srcRegion : Box3, dstPosition : Vector3, level : Number ) : undefined 从给定位置开始复制目标纹理中“srcRegion”边界中的纹理像素。允许访问 WebGL2RenderingContext.texSubImage3D。copyTextureToTexture3D 是 Three.js 中用于将一个 3D 纹理的一部分复制到另一个 3D 纹理的 API。它类似于 copyTextureToTexture，但针对的是 3D 纹理数据。3D 纹理与 2D 纹理的主要区别在于，它们不仅在 XY 平面上有纹理数据，还在 Z 轴上有多层数据。
dispose ( ) : undefined 处理当前的渲染环境
forceContextLoss () : undefined 模拟WebGL环境的丢失。需要支持 WEBGL_lose_context 扩展才能用。
forceContextRestore ( ) : undefined 模拟WebGL环境的恢复。需要支持 WEBGL_lose_context 扩展才能用。
getClearAlpha () : Float 返回一个表示当前alpha值的float，范围0到1
getClearColor ( target : Color ) : Color 返回一个表示当前颜色值的THREE.Color实例
getContext () : WebGL2RenderingContext 返回当前WebGL环境
getContextAttributes () : WebGLContextAttributes 返回一个对象，这个对象中存有在WebGL环境在创建的时候所设置的属性
getActiveCubeFace () : Integer 返回当前活动的立方体面。
getActiveMipmapLevel () : Integer 返回当前活动的 mipmap 级别。
getRenderTarget () : RenderTarget 如果当前存在RenderTarget，则返回该值；否则返回null。
getCurrentViewport () : RenderTarget 返回当前视口
getDrawingBufferSize () : Object 返回一个包含渲染器绘图缓存宽度和高度(单位像素)的对象。
getPixelRatio () : number 返回当前使用设备像素比
getSize ( target : Vector2 ) : Vector2 返回包含渲染器输出canvas的宽度和高度(单位像素)的对象。
initTexture ( texture : Texture ) : undefined 初始化给定的纹理。用于预加载纹理而不是等到第一次渲染（可能会由于解码和 GPU 上传的开销而导致明显的延迟）.
resetGLState ( ) : undefined 将GL状态重置为默认值。WebGL环境丢失时会内部调用
readRenderTargetPixels ( renderTarget : WebGLRenderTarget, x : Float, y : Float, width : Float, height : Float, buffer : TypedArray, activeCubeFaceIndex : Integer ) : undefined buffer - Uint8Array 是所有情况下唯一支持的目标类型，其他类型取决于 renderTarget 和平台。有关详细信息，请参阅 WebGL 规范。将renderTarget中的像素数据读取到传入的缓冲区中。这是WebGLRenderingContext.readPixels()的包装器 readRenderTargetPixels 是 Three.js 中用于读取 WebGLRenderTarget 中某一区域的像素数据的函数。这个方法允许你从帧缓冲中获取指定区域的像素，并将它们存储到一个类型化数组（TypedArray）中。

    // 创建一个 WebGLRenderTarget
    const width = 512;
    const height = 512;
    const renderTarget = new THREE.WebGLRenderTarget(width, height);
    // 创建一个场景并渲染到 renderTarget
    renderer.setRenderTarget(renderTarget);
    renderer.render(scene, camera);
    renderer.setRenderTarget(null);
    // 创建一个 TypedArray 来存储读取的像素数据
    const pixelBuffer = new Uint8Array(width * height * 4); // 每个像素4个值(RGBA)
    // 从 renderTarget 的特定区域读取像素
    renderer.readRenderTargetPixels(
        renderTarget,    // 渲染目标
        0,               // 区域起点的X坐标
        0,               // 区域起点的Y坐标
        width,           // 区域宽度
        height,          // 区域高度
        pixelBuffer,     // 存储像素数据的 TypedArray
        0                // 如果是立方体贴图，指定面索引；否则为0
    );

render ( scene : Object3D, camera : Camera ) : undefined 用相机(camera)渲染一个场景(scene)或是其它类型的object。渲染一般是在canvas上完成的，或者是renderTarget(通过.setRenderTarget指定)。默认情况下渲染缓存是会被清除的，但是你可以通过设置autoClear 属性的值为false来阻止渲染缓存被清除。如果你想阻止某个指定的缓存被清空，可以设置autoClearColor、autoClearStencil或autoClearDepth属性的值为false来阻止其被清除。如果想要强制清除一个或多个缓存，可以调用.clear。
resetState () : undefined 可用于重置内部 WebGL 状态。此方法主要与跨多个 WebGL 库共享单个 WebGL 上下文的应用程序相关。
setAnimationLoop ( callback : Function ) : undefined callback — 每个可用帧都会调用的函数。如果传入‘null’,所有正在进行的动画都会停止。可用来代替requestAnimationFrame的内置函数. 对于WebXR项目，必须使用此函数。
setClearAlpha ( alpha : Float ) : undefined 设置alpha。合法参数是一个0.0到 1.0之间的浮点数
setClearColor ( color : Color, alpha : Float ) : undefined 设置alpha。合法参数是一个0.0到 1.0之间的浮点数
setPixelRatio ( value : number ) : undefined 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
setRenderTarget ( renderTarget : WebGLRenderTarget, activeCubeFace : Integer, activeMipmapLevel : Integer ) : undefined setRenderTarget 是 Three.js 中用于设置当前渲染目标的函数。渲染目标（WebGLRenderTarget）决定了场景的渲染输出位置，通常是渲染到屏幕（默认目标）或渲染到一个纹理（离屏渲染）。你可以通过该方法将渲染输出重定向到纹理或立方体贴图的特定面，并且还可以选择 Mipmaps 级别。

    // 创建 WebGLRenderTarget 对象，用于存储渲染结果  普通的离屏渲染到 WebGLRenderTarget：
    const renderTarget = new THREE.WebGLRenderTarget(512, 512);
    // 将场景渲染到这个 renderTarget
    renderer.setRenderTarget(renderTarget);
    renderer.render(scene, camera);
    // 渲染完成后，恢复默认的渲染目标，即屏幕
    renderer.setRenderTarget(null);
    
    // 创建 WebGLCubeRenderTarget 对象 渲染到 WebGLCubeRenderTarget 的特定立方体面：
    const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256);
    // 渲染到立方体贴图的 +X 面
    const activeCubeFace = 0; // 0 是 +X 面, 1 是 -X, 2 是 +Y, 3 是 -Y, 4 是 +Z, 5 是 -Z
    renderer.setRenderTarget(cubeRenderTarget, activeCubeFace);
    renderer.render(scene, camera);
    // 完成后恢复默认渲染目标
    renderer.setRenderTarget(null);
    
    // 创建 WebGLRenderTarget 对象并启用 mipmaps 渲染到 WebGLRenderTarget 的特定 Mipmaps 级别：
    const renderTarget = new THREE.WebGLRenderTarget(512, 512);
    renderTarget.texture.generateMipmaps = true;
    // 将场景渲染到 renderTarget 的 Mipmap 级别 1
    const activeMipmapLevel = 1;
    renderer.setRenderTarget(renderTarget, 0, activeMipmapLevel); // activeCubeFace 设为 0
    renderer.render(scene, camera);
    // 恢复默认的渲染目标
    renderer.setRenderTarget(null);

setScissor ( x : Integer, y : Integer, width : Integer, height : Integer ) : undefined 将剪裁区域设为(x, y)到(x + width, y + height) Sets the scissor area from
setScissorTest ( boolean : Boolean ) : undefined 启用或禁用剪裁检测. 若启用，则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响。
setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : undefined 将输出canvas的大小调整为(width, height)并考虑设备像素比，且将视口从(0, 0)开始调整到适合大小将updateStyle设置为false以阻止对canvas的样式做任何改变。
setViewport ( x : Integer, y : Integer, width : Integer, height : Integer ) : undefined 将视口大小设置为(x, y)到 (x + width, y + height).

three WebGLRenderer WebGL渲染器

WebGLRenderer 有二十个属性 三十八个方法

WebGLRenderer 有二十个属性三十八个方法