WebGLRenderTarget

WebGLRenderTarget

3D虚拟工厂在线体验

描述

• WebGLRenderTarget 是 Three.js 中的一个类，用于创建离屏渲染缓冲区（Offscreen Render Target），允许将 3D 场景渲染到纹理（Texture）而不是直接渲染到屏幕。
  • 主要用途：
    • 后期处理（Post-processing）：如模糊、辉光、色调映射等效果（结合 EffectComposer 使用）。
    • 阴影映射（Shadow Mapping）：存储深度信息以计算动态阴影。
    • 反射/折射（Reflections/Refractions）：渲染环境到纹理以实现镜面或玻璃效果。
    • 多通道渲染（Multi-pass Rendering）：用于复杂的光照或自定义渲染流程。
  • 核心特点：
    • 可自定义 尺寸（width/height） 和 纹理参数（如过滤模式、格式等）。
    • 支持 深度缓冲区（depthBuffer） 和 模板缓冲区（stencilBuffer）。
    • 可选 多重采样抗锯齿（MSAA）（通过 samples 属性）。
    • 可存储为普通纹理（texture）或深度纹理（depthTexture）。

构造器

参数	类型	描述	默认值
width	Number	渲染目标的宽度	1
height	Number	渲染目标的高度	1
options	Object	配置纹理参数和缓存的选项对象	-
options.wrapS	-	纹理水平环绕方式	ClampToEdgeWrapping
options.wrapT	-	纹理垂直环绕方式	ClampToEdgeWrapping
options.magFilter	-	纹理放大过滤器	LinearFilter
options.minFilter	-	纹理缩小过滤器	LinearFilter
options.generateMipmaps	Boolean	是否生成mipmaps	false
options.format	-	纹理格式	RGBAFormat
options.type	-	纹理数据类型	UnsignedByteType
options.anisotropy	Number	各向异性过滤级别	1
options.colorSpace	-	颜色空间	NoColorSpace
options.internalFormat	-	内部格式	null
options.depthBuffer	Boolean	是否使用深度缓冲区	true
options.stencilBuffer	Boolean	是否使用模板缓冲区	false
options.resolveDepthBuffer	Boolean	是否解析深度缓冲区	true
options.resolveStencilBuffer	Boolean	是否解析模板缓冲区	true
options.samples	Number	多重采样数	0
options.count	Number	渲染目标数量	1

---

属性

属性	类型	描述	默认值
.isWebGLRenderTarget	Boolean	是否为WebGLRenderTarget类型（只读）	-
.width	Number	渲染目标宽度	-
.height	Number	渲染目标高度	-
.scissor	Vector4	视口内的剪裁区域	-
.scissorTest	Boolean	是否启用剪裁测试	-
.viewport	Vector4	渲染目标的视口	-
.texture	Texture	存储渲染像素的纹理	-
.textures	Array<Texture>	多渲染目标配置的纹理数组	-
.depthBuffer	Boolean	是否渲染到深度缓冲区	true
.stencilBuffer	Boolean	是否渲染到模板缓冲区	false
.resolveDepthBuffer	Boolean	是否解析多采样深度缓冲区	true
.resolveStencilBuffer	Boolean	是否解析多采样模板缓冲区	true
.depthTexture	DepthTexture	存储场景深度的纹理	null
.samples	Number	多重采样数	0

---

方法

方法	参数	返回类型	描述
.setSize	width: Number, height: Number	null	设置渲染目标尺寸
.clone	-	WebGLRenderTarget	创建渲染目标的副本
.copy	source: WebGLRenderTarget	this	复制传入目标的配置
.dispose	-	null	释放资源

---

继承方法（来自 EventDispatcher）

• .addEventListener
• .hasEventListener
• .removeEventListener
• .dispatchEvent

示例

import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';

// 1. 初始化 WebGLRenderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 2. 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 3. 添加一个测试物体（发光球体）
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1, 32, 32),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(sphere);

// 4. 创建 WebGLRenderTarget（可自定义尺寸和参数）
const renderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth,
  window.innerHeight,
  {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false, // 不需要模板缓冲区时可关闭
  }
);

// 5. 创建 EffectComposer，并绑定 renderTarget
const composer = new EffectComposer(renderer, renderTarget);

// 6. 添加渲染通道（RenderPass）
composer.addPass(new RenderPass(scene, camera));

// 7. 添加 Bloom 辉光效果
const bloomPass = new BloomPass(
  1.5,    // 强度
  25,     // 模糊半径
  4,      // 迭代次数
  0.5     // 亮度阈值
);
composer.addPass(bloomPass);

// 8. 渲染循环
function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  composer.render(); // 使用 composer 渲染（而非 renderer.render）
}
animate();