WebGL3DRenderTarget是 Three.js 中用于在 WebGL 上创建 3D 渲染目标的类，通常用于将渲染的内容绘制到纹理中，而不是直接显示到屏幕上。这在需要对场景进行离屏渲染时特别有用，比如创建动态反射、阴影贴图或后期处理效果。
WebGLArrayRenderTarget是 Three.js 中用于创建二维数组纹理（2D texture arrays）的渲染目标的类。二维数组纹理在 WebGL 中表现为一组纹理切片，每个切片可以单独访问并用于特定效果，比如多层次渲染或复杂的纹理组合。这个类特别适用于多重渲染的场景，比如延迟渲染（deferred rendering）或体积渲染。
WebGLCubeRenderTarget是 Three.js 中专门用于立方体纹理（cube textures）的渲染目标。立方体纹理是六个正方形纹理面（即立方体的六个面）的组合，每个面可以独立渲染，因此它们非常适合应用在环境映射和反射上，比如实现天空盒（skybox）、反射效果等。
WebGL3DRenderTarget 有两个属性，方法与属性都继承 WebGLRenderTarget
WebGL3DRenderTarget( width : Number, height : Number, depth : Number, options : Object ) width - 渲染目标的宽度，单位为像素。默认值为1。 height - 渲染目标的高度，单位为像素。默认值为1。 depth - 渲染目标的深度。 默认值为1。 options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。 有关纹理参数的说明，请参阅Texture. See WebGLRenderTarget for details. 创建新的WebGL3DRenderTarget.
**renderTarget** (`WebGLRenderTarget`)：要设置的渲染目标。这是一个包含纹理和深度缓冲区的对象，通常用于离屏渲染。
**activeCubeFace** (`Integer`)：如果 `renderTarget` 是一个立方体贴图，则此参数用于指定当前渲染到的立方体面的索引。立方体贴图通常有六个面，对应于以下索引：
- `0`: 正面 (Positive X)
- `1`: 负面 (Negative X)
- `2`: 顶面 (Positive Y)
- `3`: 底面 (Negative Y)
- `4`: 左面 (Positive Z)
- `5`: 右面 (Negative Z)
**activeMipmapLevel** (`Integer`)：指定要写入的 mipmap 级别。mipmap 是用于生成多级纹理的技术，可以在不同距离下提供更好的图像质量。通常为 `0` 表示基础级别，随着级别增加，纹理尺寸会减小。
// 使用示例
// 创建 3D 渲染目标
const depth = 100; // 深度
const options = {
format: THREE.RGBAFormat, // 确保使用 RGBAFormat
type: THREE.UnsignedByteType,
depthBuffer: true,
stencilBuffer: false
};
// 添加光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
console.log(width, height,"width, height")
// 创建 WebGL3DRenderTarget
const renderTarget = new THREE.WebGL3DRenderTarget(width, height, 100, options);
// 创建一个简单的几何体（例如一个立方体）
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
// 创建网格对象
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 创建一个平面，用于显示渲染目标的纹理
const planeGeometry = new THREE.PlaneGeometry(20, 20,20,20);
console.log(renderTarget.texture,"renderTarget.texture")
const planeMaterial = new THREE.MeshBasicMaterial({ map: renderTarget.texture });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.z = -5; // 使平面位于相机前面
plane.position.x = -15; // 使平面位于相机前面
scene.add(plane);
// 创建一个平面，用于显示渲染目标的纹理
const planeGeometry1 = new THREE.PlaneGeometry(20, 20);
const planeMaterial1 = new THREE.MeshBasicMaterial({ color: 0xff0000,transparent: true,opacity: 0.5 });
const plane1 = new THREE.Mesh(planeGeometry1, planeMaterial1);
plane1.position.z = -5; // 使平面位于相机前面
plane1.position.x = -15; // 使平面位于相机前面
scene.add(plane1);
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
// 渲染到 WebGL3DRenderTarget
renderer.setRenderTarget(renderTarget, 0, 0); // 设置渲染目标
renderer.clear(); // 清除之前的渲染
renderer.render(scene, camera); // 渲染场景到目标纹理
renderer.setRenderTarget(null); // 还原到默认渲染目标
// 渲染场景到屏幕
renderer.render(scene, camera);
}
animate();
WebGL3DRenderTarget( width : Number, height : Number, depth : Number, options : Object ) width - 渲染目标的宽度，单位为像素。默认值为1。 height - 渲染目标的高度，单位为像素。默认值为1。 depth - 渲染目标的深度。 默认值为1。 options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。 有关纹理参数的说明，请参阅Texture. See WebGLRenderTarget for details. 创建新的WebGL3DRenderTarget.
属性
-
- depth : number 渲染目标的深度。
- texture : Data3DTexture Data3DTexture实例覆盖纹理属性。
WebGLArrayRenderTarget 有两个属性 ，方法与属性都继承 WebGLRenderTarget
WebGLArrayRenderTarget( width : Number, height : Number, depth : Number, options : Object ) width - 渲染目标的宽度，单位为像素。默认值为1。 height - 渲染目标的高度，单位为像素。默认值为1。 depth - 渲染目标的深度或图层数。 默认值为1。 options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。 有关纹理参数的说明，请参阅Texture. See WebGLRenderTarget for details. 创建新的WebGLArrayRenderTarget.
属性
- depth : number 渲染目标的深度。
- texture : DataArrayTexture DataArrayTexture实例覆盖纹理属性。
WebGLCubeRenderTarget 有两个方法 ，方法与属性都继承 WebGLRenderTarget
WebGLCubeRenderTarget(size : Number, options : Object) size - the size, in pixels. Default is 1. options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。 有关纹理参数的说明，请参阅Texture. 以下是合理选项： wrapS - 默认是ClampToEdgeWrapping. wrapT - 默认是ClampToEdgeWrapping. magFilter - 默认是.LinearFilter. minFilter - 默认是LinearFilter. generateMipmaps - 默认是false. format - 默认是RGBAFormat. type - 默认是UnsignedByteType. anisotropy - 默认是 1. 参见Texture.anisotropy colorSpace - 默认是NoColorSpace. depthBuffer - 默认是true. stencilBuffer - default is false. 创建一个新WebGLCubeRenderTarget
方法
- fromEquirectangularTexture ( renderer : WebGLRenderer, texture : Texture ) : this renderer — 渲染器。 texture — equirectangular 纹理。 如果你想将一张equirectangular格式的全景图转换到cubemap格式，则使用此方法。
- clear ( renderer : WebGLRenderer, color : Boolean, depth : Boolean, stencil : Boolean ) : undefined 这个方法用来来清除renderTarget的颜色、深度和/或模板缓冲区。 颜色缓冲区设置为渲染器当前的“清除”色。参数默认值均为true。
