Three.js基础功能学习五：雾与渲染目标

军军君012026-01-02 13:25

在3D引擎里，雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。在three.js中添加雾是通过创建 Fog 或者 FogExp2 实例并设定scene的fog 属性。

Fog 让你设定 near 和 far 属性，代表距离摄像机的距离。任何物体比 near 近不会受到影响，任何物体比 far 远则完全是雾的颜色。在 near 和 far 中间的物体，会从它们自身材料的颜色褪色到雾的颜色。

FogExp2 会根据离摄像机的距离呈指数增长。

在three.js中，渲染目标大体上指的是可以被渲染的纹理。当它被渲染之后，你可以像使用其他纹理一样使用它。

一、学习视频

three.js学习及项目实战：阴影学习
three.js学习及项目实战：渲染目标学习

二、雾

在3D引擎里，雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。在three.js中添加雾是通过创建 Fog 或者 FogExp2 实例并设定scene的fog 属性。

Fog 让你设定 near 和 far 属性，代表距离摄像机的距离。任何物体比 near 近不会受到影响，任何物体比 far 远则完全是雾的颜色。在 near 和 far 中间的物体，会从它们自身材料的颜色褪色到雾的颜色。

FogExp2 会根据离摄像机的距离呈指数增长。

2.1 雾（Fog）

这个类中的参数定义了线性雾。也就是说，雾的密度是随着距离线性增大的。

  • .isFog : Boolean
      Read-only flag to check if a given object is of type Fog.
  • .name : String
      对象的名称，可选、不必唯一。默认值是一个空字符串。
  • .color : Color
      雾的颜色。比如说，如果将其设置为黑色，远处的物体将被渲染成黑色。
  • .near : Float
      开始应用雾的最小距离。距离小于活动摄像机"near"个单位的物体将不会被雾所影响。
    默认值是1。
  • .far : Float
      结束计算、应用雾的最大距离，距离大于活动摄像机"far"个单位的物体将不会被雾所影响。
    默认值是1000。
  • .clone () : Fog
      返回一个具有和当前雾参数相同的新的Fog实例。
  • .toJSON () : Object
      以JSON格式返回Fog的数据。

2.2 雾-指数（FogExp2）

该类所包含的参数定义了指数雾，它可以在相机附近提供清晰的视野，且距离相机越远，雾的浓度随着指数增长越快。

  • .isFogExp2 : Boolean
      Read-only flag to check if a given object is of type FogExp2.
  • .name : String
      对象的名称，可选、不必唯一。默认值是一个空字符串。
  • .color : Color
      雾的颜色。比如说，如果将其设置为黑色，远处的物体将被渲染成黑色。
  • .density : Float
      定义雾的密度将会增长多块。
      默认值是0.00025.
  • .clone () : FogExp2
      返回一个具有和当前雾参数相同的新的FogExp2实例。
  • .toJSON () : Object
      以JSON格式返回FogExp2的数据。
javascript 复制代码 
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
export default () => {
  const canvas = document.querySelector('#demo')

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })
  renderer.shadowMap.enabled = true
  renderer.shadowMap.type = THREE.PCFSoftShadowMap // default THREE.PCFShadowMap

  const fov = 45
  const aspect = 2 // the canvas default
  const near = 0.1
  const far = 100
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.set(0, 10, 20)
  camera.lookAt(0, 0, 0)

  const scene = new THREE.Scene()
  {
    const color = 0xffffff // white
    const near = 1
    const far = 100
    scene.fog = new THREE.Fog(color, near, far)
  }

  {
    {
      const color = 0xffffff
      const intensity = 3
      const light = new THREE.DirectionalLight(color, intensity)
      light.position.set(-1, 2, 4)
      scene.add(light)
    }
  }

  {
    const geometry = new THREE.BoxGeometry(10, 20, 100)
    const sphereMat = new THREE.MeshPhongMaterial({ color: 'rgba(199, 6, 6, 1)' })
    const mesh = new THREE.Mesh(geometry, sphereMat)
    scene.add(mesh)
  }

  function resizeRendererToDisplaySize(renderer: THREE.WebGLRenderer) {
    const canvas = renderer.domElement
    const width = canvas.clientWidth
    const height = canvas.clientHeight
    const needResize = canvas.width !== width || canvas.height !== height
    if (needResize) {
      renderer.setSize(width, height, false)
    }

    return needResize
  }

  function render(time: number) {
    time *= 0.001 // convert to seconds

    resizeRendererToDisplaySize(renderer)

    {
      const canvas = renderer.domElement
      camera.aspect = canvas.clientWidth / canvas.clientHeight
      camera.updateProjectionMatrix()
    }

    renderer.render(scene, camera)

    requestAnimationFrame(render)
  }

  const controls = new OrbitControls(camera, canvas)
  controls.target.set(0, 5, 0)
  controls.update()

  requestAnimationFrame(render)
}

三、渲染目标

在three.js中，渲染目标大体上指的是可以被渲染的纹理。当它被渲染之后，你可以像使用其他纹理一样使用它。

3.1 WebGL3DRenderTarget

表示三维的渲染目标。

  • width - 渲染目标的宽度，单位为像素。默认值为1。
  • height - 渲染目标的高度，单位为像素。默认值为1。
  • depth - 渲染目标的深度。 默认值为1。
javascript 复制代码 
import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const reader = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const rtWidth = 1
  const rtHeight = 1
  const readerTarget = new THREE.WebGL3DRenderTarget(rtWidth, rtHeight)

  const rtCamera = new THREE.PerspectiveCamera(75, rtWidth / rtHeight, 0.1, 5)
  rtCamera.position.z = 2

  const rtScene = new THREE.Scene()
  rtScene.baground = new THREE.Color('red')

  {
    const light = new THREE.DirectionalLight('#ffffff', 1)
    light.position.set(-1, 2, 4)
    rtScene.add(light)
  }

  const geometry = new THREE.BoxGeometry(1, 1, 1)
  function newInstance(geometry: THREE.BoxGeometry, color: string, x: number) {
    const material = new THREE.MeshPhongMaterial({ color })
    const cube = new THREE.Mesh(geometry, material)
    rtScene.add(cube)
    cube.position.x = x

    return cube
  }

  const cubes = [
    newInstance(geometry, '#44aa88', 0),
    newInstance(geometry, '#8844aa', -2),
    newInstance(geometry, '#aa8844', 2),
  ]

  const fov = 75
  const aspect = 2 // the canvas default
  const near = 0.1
  const far = 5
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.z = 2

  const scene = new THREE.Scene()
  {
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1, 2, 4)
    scene.add(light)
  }

  const material = new THREE.MeshPhongMaterial({
    map: readerTarget.texture,
  })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  function readerFn(time: number) {
    time = time * 0.001

    // rotate all the cubes in the render target scene
    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * 0.1
      const rot = time * speed
      cube.rotation.x = rot
      cube.rotation.y = rot
    })

    // draw render target scene to render target
    reader.setRenderTarget(readerTarget)
    reader.render(rtScene, rtCamera)
    reader.setRenderTarget(null)

    // rotate the cube in the scene
    cube.rotation.x = time
    cube.rotation.y = time * 1.1

    // render the scene to the canvas
    reader.render(scene, camera)

    requestAnimationFrame(readerFn)
  }
  requestAnimationFrame(readerFn)
}

3.2 WebGLArrayRenderTarget

该类型的渲染目标表示一组纹理。

  • width - 渲染目标的宽度，单位为像素。默认值为1。
  • height - 渲染目标的高度，单位为像素。默认值为1。
  • depth - 渲染目标的深度。 默认值为1。
javascript 复制代码 
import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const reader = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const rtWidth = 1
  const rtHeight = 1
  const readerTarget = new THREE.WebGLArrayRenderTarget(rtWidth, rtHeight)

  const rtCamera = new THREE.PerspectiveCamera(75, rtWidth / rtHeight, 0.1, 5)
  rtCamera.position.z = 2

  const rtScene = new THREE.Scene()
  rtScene.baground = new THREE.Color('red')

  {
    const light = new THREE.DirectionalLight('#ffffff', 1)
    light.position.set(-1, 2, 4)
    rtScene.add(light)
  }

  const geometry = new THREE.BoxGeometry(1, 1, 1)
  function newInstance(geometry: THREE.BoxGeometry, color: string, x: number) {
    const material = new THREE.MeshPhongMaterial({ color })
    const cube = new THREE.Mesh(geometry, material)
    rtScene.add(cube)
    cube.position.x = x

    return cube
  }

  const cubes = [
    newInstance(geometry, '#44aa88', 0),
    newInstance(geometry, '#8844aa', -2),
    newInstance(geometry, '#aa8844', 2),
  ]

  const fov = 75
  const aspect = 2 // the canvas default
  const near = 0.1
  const far = 5
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.z = 2

  const scene = new THREE.Scene()
  {
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1, 2, 4)
    scene.add(light)
  }

  const material = new THREE.MeshPhongMaterial({
    map: readerTarget.texture,
  })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  function readerFn(time: number) {
    time = time * 0.001

    // rotate all the cubes in the render target scene
    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * 0.1
      const rot = time * speed
      cube.rotation.x = rot
      cube.rotation.y = rot
    })

    // draw render target scene to render target
    reader.setRenderTarget(readerTarget)
    reader.render(rtScene, rtCamera)
    reader.setRenderTarget(null)

    // rotate the cube in the scene
    cube.rotation.x = time
    cube.rotation.y = time * 1.1

    // render the scene to the canvas
    reader.render(scene, camera)

    requestAnimationFrame(readerFn)
  }
  requestAnimationFrame(readerFn)
}

3.3 WebGLMultipleRenderTargets

一个特殊的渲染目标，使片段着色器能够写入多个纹理。这种方法对于高级渲染技术很有用，例如后处理或延迟渲染。

  • width - 渲染目标的宽度。默认为1。
  • height - 渲染目标的高度。默认为1。
  • count - 渲染目标的数量。默认为1。
  • .isWebGLMultipleRenderTargets : Boolean
      只读标志，用于检查给定对象是否属于WebGLMultipleRenderTargets类型。
  • .texture : Array
      纹理属性在WebGLMultipleRenderTargets中被覆盖并替换为数组。该数组包含各个渲染目标的[page:WebGLRenderTarget.texture 纹理]引用。WebGLRenderTarget属性在此类上可用。
javascript 复制代码 
import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const reader = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const rtWidth = 10
  const rtHeight = 10
  const readerTarget = new THREE.WebGLMultipleRenderTargets(rtWidth, rtHeight, 10)

  const rtCamera = new THREE.PerspectiveCamera(75, rtWidth / rtHeight, 0.1, 5)
  rtCamera.position.z = 2

  const rtScene = new THREE.Scene()
  rtScene.baground = new THREE.Color('red')

  {
    const light = new THREE.DirectionalLight('#ffffff', 1)
    light.position.set(-1, 2, 4)
    rtScene.add(light)
  }

  const geometry = new THREE.BoxGeometry(1, 1, 1)
  function newInstance(geometry: THREE.BoxGeometry, color: string, x: number) {
    const material = new THREE.MeshPhongMaterial({ color })
    const cube = new THREE.Mesh(geometry, material)
    rtScene.add(cube)
    cube.position.x = x

    return cube
  }

  const cubes = [
    newInstance(geometry, '#44aa88', 0),
    newInstance(geometry, '#8844aa', -2),
    newInstance(geometry, '#aa8844', 2),
  ]

  const fov = 75
  const aspect = 2 // the canvas default
  const near = 0.1
  const far = 5
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.z = 2

  const scene = new THREE.Scene()
  {
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1, 2, 4)
    scene.add(light)
  }

  const material = new THREE.MeshPhongMaterial({
    map: readerTarget.texture,
  })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  function readerFn(time: number) {
    time = time * 0.001

    // rotate all the cubes in the render target scene
    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * 0.1
      const rot = time * speed
      cube.rotation.x = rot
      cube.rotation.y = rot
    })

    // draw render target scene to render target
    reader.setRenderTarget(readerTarget)
    reader.render(rtScene, rtCamera)
    reader.setRenderTarget(null)

    // rotate the cube in the scene
    cube.rotation.x = time
    cube.rotation.y = time * 1.1

    // render the scene to the canvas
    reader.render(scene, camera)

    requestAnimationFrame(readerFn)
  }
  requestAnimationFrame(readerFn)
}

3.4 WebGLRenderer

WebGL Render 用WebGL渲染出你精心制作的场景。

  • parameters - (可选) 该对象的属性定义了渲染器的行为。也可以完全不传参数。在所有情况下，当缺少参数时，它将采用合理的默认值。 以下是合法参数：
  • canvas - 一个供渲染器绘制其输出的canvas 它和下面的domElement属性对应。 如果没有传这个参数，会创建一个新canvas
  • context - 可用于将渲染器附加到已有的渲染环境(RenderingContext)中。默认值是null
  • precision - 着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持，默认为"highp" .
  • alpha - controls the default clear alpha value. When set to true, the value is 0. Otherwise it's 1. Default is false.
  • premultipliedAlpha - renderer是否假设颜色有 premultiplied alpha. 默认为true
  • antialias - 是否执行抗锯齿。默认为false.
  • stencil - 绘图缓存是否有一个至少8位的模板缓存(stencil buffer)。默认为true
  • preserveDrawingBuffer -是否保留缓直到手动清除或被覆盖。 默认false.
  • powerPreference - 提示用户代理怎样的配置更适用于当前WebGL环境。 可能是"high-performance", "low-power" 或 "default"。默认是"default". 详见WebGL spec
  • failIfMajorPerformanceCaveat - 检测渲染器是否会因性能过差而创建失败。默认为false。详见 WebGL spec for details.
  • depth - 绘图缓存是否有一个至少6位的深度缓存(depth buffer )。 默认是true.
  • logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异，就有必要使用。 Note that this setting uses gl_FragDepth if available which disables the Early Fragment Test optimization and can cause a decrease in performance. 默认是false。 示例：camera / logarithmicdepthbuffer
  • .autoClear : Boolean
    定义渲染器是否在渲染每一帧之前自动清除其输出。
  • .autoClearColor : Boolean
    如果autoClear为true, 定义renderer是否清除颜色缓存。 默认是true
  • .autoClearDepth : Boolean
    如果autoClear是true, 定义renderer是否清除深度缓存。 默认是true
  • .autoClearStencil : Boolean
    如果autoClear是true, 定义renderer是否清除模板缓存. 默认是true
  • .debug : Object
  • checkShaderErrors: 如果为true，定义是否检查材质着色器程序 编译和链接过程中的错误。 禁用此检查生产以获得性能增益可能很有用。 强烈建议在开发期间保持启用这些检查。 如果着色器没有编译和链接 - 它将无法工作，并且相关材料将不会呈现。 默认是true
  • onShaderError( gl, program, glVertexShader, glFragmentShader ): A callback function that can be used for custom error reporting. The callback receives the WebGL context, an instance of WebGLProgram as well two instances of WebGLShader representing the vertex and fragment shader. Assigning a custom function disables the default error reporting. Default is null.
  • .capabilities : Object
      一个包含当前渲染环境(RenderingContext)的功能细节的对象。
    • floatFragmentTextures: 环境是否支持OES_texture_float扩展
    • floatVertexTextures: 如果floatFragmentTextures和vertexTextures都是true， 则此值为true
    • getMaxAnisotropy(): 返回最大可用各向异性。
    • getMaxPrecision(): 返回顶点着色器和片元着色器的最大可用精度。
    • isWebGL2: true if the context in use is a WebGL2RenderingContext object.
    • 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: The value of gl.MAX_SAMPLES. Maximum number of samples in context of Multisample anti-aliasing (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参数);你需要做的仅仅是像下面这样将它加页面里去:
javascript 复制代码 
document.body.appendChild( renderer.domElement );
  • .extensions : Object
  • get( extensionName : String ): 用于检查是否支持各种扩展，并返回一个对象，其中包含扩展的详细信息。 该方法检查以下扩展：
javascript 复制代码 
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

    Provides access to the WebXR related interface of the renderer.

  • .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 ) : undefined

    使用相机编译场景中的所有材质。这对于在首次渲染之前预编译着色器很有用。

  • .copyFramebufferToTexture ( position : Vector2, texture : FramebufferTexture, level : Number ) : undefined

    将当前WebGLFramebuffer中的像素复制到2D纹理中。可访问WebGLRenderingContext.copyTexImage2D.

  • .copyTextureToTexture ( position : Vector2, srcTexture : Texture, dstTexture : Texture, level : Number ) : undefined

    将纹理的所有像素复制到一个已有的从给定位置开始的纹理中。可访问WebGLRenderingContext.texSubImage2D.

  • .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

    Returns the current active cube face.

  • .getActiveMipmapLevel () : Integer

    Returns the current active mipmap level.

  • .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 is the only destination type supported in all cases, other types are renderTarget and platform dependent. See WebGL spec for details.

    将renderTarget中的像素数据读取到传入的缓冲区中。这是WebGLRenderingContext.readPixels()的包装器

    示例：interactive / cubes / gpu

    For reading out a WebGLCubeRenderTarget use the optional parameter activeCubeFaceIndex to determine which face should be read.

  • .render ( scene : Object3D, camera : Camera ) : undefined

    用相机(camera)渲染一个场景(scene)或是其它类型的object。

    渲染一般是在canvas上完成的，或者是renderTarget(如果有指定)

    如果forceClear值是true，那么颜色、深度及模板缓存将会在渲染之前清除，即使渲染器的autoClear属性值是false

    即便forceClear设为true, 也可以通过将autoClearColor、autoClearStencil或autoClearDepth属性的值设为false来阻止对应缓存被清除。

  • .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

    设置颜色及其透明度

  • .setPixelRatio ( value : number ) : undefined

    设置设备像素比。通常用于避免HiDPI设备上绘图模糊

  • .setRenderTarget ( renderTarget : WebGLRenderTarget, activeCubeFace : Integer, activeMipmapLevel : Integer ) : undefined

    renderTarget -- 需要被激活的renderTarget(可选)。若此参数为空，则将canvas设置成活跃render target。

    activeCubeFace -- Specifies the active cube side (PX 0, NX 1, PY 2, NY 3, PZ 4, NZ 5) of   WebGLCubeRenderTarget. When passing a WebGLArrayRenderTarget or WebGL3DRenderTarget this indicates the z layer to render in to (optional).

    activeMipmapLevel -- Specifies the active mipmap level (optional).

该方法设置活跃rendertarget。

  • .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).
javascript 复制代码 
import * as THREE from 'three'

export default () => {
  const canvas = document.querySelector('#demo')

  const reader = new THREE.WebGLRenderer({
    antialias: true,
    canvas,
  })

  const rtWidth = 512
  const rtHeight = 512
  const readerTarget = new THREE.WebGLRenderTarget(rtWidth, rtHeight)

  const rtCamera = new THREE.PerspectiveCamera(75, rtWidth / rtHeight, 0.1, 5)
  rtCamera.position.z = 2

  const rtScene = new THREE.Scene()
  rtScene.baground = new THREE.Color('red')

  {
    const light = new THREE.DirectionalLight('#ffffff', 1)
    light.position.set(-1, 2, 4)
    rtScene.add(light)
  }

  const geometry = new THREE.BoxGeometry(1, 1, 1)
  function newInstance(geometry: THREE.BoxGeometry, color: string, x: number) {
    const material = new THREE.MeshPhongMaterial({ color })
    const cube = new THREE.Mesh(geometry, material)
    rtScene.add(cube)
    cube.position.x = x

    return cube
  }

  const cubes = [
    newInstance(geometry, '#44aa88', 0),
    newInstance(geometry, '#8844aa', -2),
    newInstance(geometry, '#aa8844', 2),
  ]

  const fov = 75
  const aspect = 2 // the canvas default
  const near = 0.1
  const far = 5
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
  camera.position.z = 2

  const scene = new THREE.Scene()
  {
    const color = 0xffffff
    const intensity = 1
    const light = new THREE.DirectionalLight(color, intensity)
    light.position.set(-1, 2, 4)
    scene.add(light)
  }

  const material = new THREE.MeshPhongMaterial({
    color: '#ff0000',
    map: readerTarget.texture,
  })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  function readerFn(time: number) {
    time = time * 0.001

    // rotate all the cubes in the render target scene
    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * 0.1
      const rot = time * speed
      cube.rotation.x = rot
      cube.rotation.y = rot
    })

    // draw render target scene to render target
    reader.setRenderTarget(readerTarget)
    reader.render(rtScene, rtCamera)
    reader.setRenderTarget(null)

    // rotate the cube in the scene
    cube.rotation.x = time
    cube.rotation.y = time * 1.1

    // render the scene to the canvas
    reader.render(scene, camera)

    requestAnimationFrame(readerFn)
  }
  requestAnimationFrame(readerFn)
}

3.5 WebGL1Renderer

自r118起，WebGLRenderer会自动使用 WebGL 2 渲染上下文。当升级一个已存在的项目到 => r118 ， 应用程序可能会因为下列两种原因而损坏：

自定义着色器代码必须符合GLSL 3.0。

WebGL 1扩展检查到被更改

如果你不能够花时间来升级你的代码，但仍然想要使用最新版本，那你就可以使用WebGL1Renderer。 这一版本的渲染器会强制使用 WebGL 1 渲染上下文。

3.6 WebGLRenderTarget

render target是一个缓冲，就是在这个缓冲中，视频卡为正在后台渲染的场景绘制像素。 它用于不同的效果，例如用于在一个图像显示在屏幕上之前先做一些处理。

  • width -renderTarget的宽度. Default is 1.

  • height - renderTarget的高度. Default is 1.

  • options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象 以下是一些合法选项：

  • wrapS - 默认是ClampToEdgeWrapping.

  • wrapT - 默认是ClampToEdgeWrapping.

  • magFilter - 默认是LinearFilter.

  • minFilter - 默认是LinearFilter.

  • generateMipmaps - 默认是false.

  • format - 默认是RGBAFormat.

  • type - 默认是UnsignedByteType.

  • anisotropy - 默认是1. 参见Texture.anisotropy

  • colorSpace - 默认是NoColorSpace.

  • depthBuffer - 默认是true.

  • stencilBuffer - 默认是false.

  • samples - 默认是0.
    属性：

  • .isWebGLRenderTarget : Boolean

    Read-only flag to check if a given object is of type WebGLRenderTarget.

  • .width : number

    渲染目标宽度

  • .height : number

    渲染目标高度

  • .scissor : Vector4

    渲染目标视口内的一个矩形区域，区域之外的片元将会被丢弃

  • .scissorTest : Boolean

    表明是否激活了剪裁测试

  • .viewport : Vector4

    渲染目标的视口

  • .texture : Texture

    纹理实例保存这渲染的像素，用作进一步处理的输入值

  • .depthBuffer : Boolean

    渲染到深度缓冲区。默认true.

  • .stencilBuffer : Boolean

    渲染到模板缓冲区。默认为false

  • .depthTexture : DepthTexture

    如果设置，那么场景的深度将会被渲染到此纹理上。默认为null

  • .samples : Number

    Defines the count of MSAA samples. Can only be used with WebGL 2. Default is 0.
    方法：

  • .setSize ( width : Number, height : Number ) : null

    设置渲染目标的大小

  • .clone () : WebGLRenderTarget

    创建一个渲染目标副本

  • .copy ( source : WebGLRenderTarget ) : this

    采用传入的渲染目标的设置

  • .dispose () : null

    发出一个处理事件

3.7 WebGLCubeRenderTarget

被CubeCamera作为它的WebGLRenderTarget使用。

  • width -renderTarget的宽度. Default is 1.

  • height - renderTarget的高度. Default is 1.

  • options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象 以下是一些合法选项：

  • wrapS - 默认是ClampToEdgeWrapping.

  • wrapT - 默认是ClampToEdgeWrapping.

  • magFilter - 默认是LinearFilter.

  • minFilter - 默认是LinearFilter.

  • generateMipmaps - 默认是false.

  • format - 默认是RGBAFormat.

  • type - 默认是UnsignedByteType.

  • anisotropy - 默认是1. 参见Texture.anisotropy

  • colorSpace - 默认是NoColorSpace.

  • depthBuffer - 默认是true.

  • stencilBuffer - 默认是false.

  • samples - 默认是0.

  • .fromEquirectangularTexture ( renderer : WebGLRenderer, texture : Texture ) : this

    renderer --- 渲染器。

    texture --- equirectangular 纹理。

    如果你想将一张equirectangular格式的全景图转换到cubemap格式，则使用此方法。

  • .clear ( renderer : WebGLRenderer, color : Boolean, depth : Boolean, stencil : Boolean ) : undefined

    这个方法用来来清除renderTarget的颜色、深度和/或模板缓冲区。 颜色缓冲区设置为渲染器当前的"清除"色。参数默认值均为true。

相关推荐
程序员爱钓鱼2 小时前
Node.js 编程实战：RESTful API 设计
前端·后端·node.js
程序员爱钓鱼2 小时前
Node.js 编程实战：GraphQL 简介与实战
前端·后端·node.js
charlie1145141912 小时前
FreeRTOS:软件定时器（Software Timers）与时间管理
开发语言·笔记·学习·freertos·实时操作系统·工程
washingtin2 小时前
Get “https://registry-1.docker.io/v2/“: context deadline exceeded
java·开发语言
only-lucky2 小时前
Python版本OpenCV
开发语言·python·opencv
chilavert3182 小时前
技术演进中的开发沉思-284 计算机原理：二进制核心原理
javascript·ajax·计算机原理
罗技1232 小时前
Easysearch 集群监控实战（下）：线程池、索引、查询、段合并性能指标详解
前端·javascript·算法
三万棵雪松2 小时前
【python-基础】
开发语言·python
一路往蓝-Anbo2 小时前
C语言从句柄到对象 (七) —— 给对象加把锁：RTOS 环境下的并发安全
java·c语言·开发语言·stm32·单片机·嵌入式硬件·算法
热门推荐
01GitHub 镜像站点02Linux下V2Ray安装配置指南03jdk21下载、安装（Windows、Linux、macOS）04Claude Code Skills 实用使用手册05手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！06UV安装并设置国内源072025 最新教程：注册并切换到美区 Apple ID08从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击09【踩坑笔记】50系显卡适配的 PyTorch 安装10祝大家 2026 年新年快乐，代码无 bug，需求一次过