RenderManager

渲染管理器类，负责管理3D场景的渲染，包括WebGL渲染器、CSS2D渲染器、FPS监控等功能。提供完整的渲染管线，支持3D几何渲染、2D标签渲染等。

类定义

class RenderManager extends ProgressRender

属性

glRender

获取WebGL渲染器，返回Three.js的WebGL渲染器实例。

类型: {THREE.WebGLRenderer}
只读: true

示例:

// 获取WebGL渲染器
const glRenderer = renderManager.glRender;

// 设置渲染器参数
glRenderer.setSize(800, 600);
glRenderer.setClearColor(0x000000);

cssRender

获取CSS2D渲染器，返回CSS2D渲染器实例，用于渲染2D标签和UI元素。

类型: {CSS2DRenderer}
只读: true

示例:

// 获取CSS2D渲染器
const cssRenderer = renderManager.cssRender;

// 设置渲染器尺寸
cssRenderer.setSize(800, 600);

glRenderInfo

获取WebGL渲染信息，返回WebGL渲染器的统计信息。

类型: {Object}
只读: true

示例:

// 获取渲染信息
const renderInfo = renderManager.glRenderInfo;
console.log('渲染统计:', renderInfo);
console.log('三角形数量:', renderInfo.triangles);
console.log('绘制调用次数:', renderInfo.calls);

clock

获取时钟实例，返回Three.js的时钟实例，用于计算时间增量。

类型: {THREE.Clock}
只读: true

示例:

// 获取时钟实例
const clock = renderManager.clock;

// 在渲染循环中使用
function render() {
    const delta = clock.getDelta();
    // 使用delta进行动画更新
    requestAnimationFrame(render);
}

fpsCtrlEnable

获取或设置FPS控制器的可用性状态，控制是否启用FPS限制功能。

类型:

示例:

// 获取FPS控制状态
const isEnabled = renderManager.fpsCtrlEnable;

// 启用FPS控制
renderManager.fpsCtrlEnable = true;

// 禁用FPS控制
renderManager.fpsCtrlEnable = false;

FPS

获取FPS监控器实例，返回FPS监控器实例。

类型: {FPS}
只读: true

示例:

// 获取FPS监控器
const fps = renderManager.FPS;

// 启用FPS显示
fps.enabled = true;

neturalEnvironment

中性环境贴图，用于室内环境的反射和光照。

类型: {Texture}
只读: true

方法

showRender(group, number)

渐进式显示渲染，分批显示对象组中的所有对象。每批显示指定数量的对象，间隔250ms处理下一批。

参数:

• group {THREE.Group} - 要显示的对象组
• number {number} - 每批显示的对象数量，默认300

示例:

// 渐进式显示对象组
renderManager.showRender(objectGroup, 200);

// 监听渲染进度
renderManager.addEventListener('renderer', (event) => {
    console.log(`显示进度: ${event.processInfo.currentShow}%`);
});

hideRender(group, number)

渐进式隐藏渲染，分批隐藏对象组中的所有对象。每批隐藏指定数量的对象，间隔250ms处理下一批。

参数:

• group {THREE.Group} - 要隐藏的对象组
• number {number} - 每批隐藏的对象数量，默认300

示例:

// 渐进式隐藏对象组
renderManager.hideRender(objectGroup, 200);

// 监听渲染进度
renderManager.addEventListener('renderer', (event) => {
    console.log(`隐藏进度: ${event.processInfo.currentHide}%`);
});

setFPS(value)

设置FPS帧率限制，设置渲染的最大帧率。

参数:

• value {number} - 目标帧率，必须大于0

示例:

// 设置30FPS
renderManager.setFPS(30);

// 设置60FPS
renderManager.setFPS(60);

updateFPS()

更新FPS统计，更新FPS监控器的统计信息，通常在渲染循环中调用。

示例:

// 在渲染循环中更新FPS
function render() {
    renderManager.updateFPS();
    // 其他渲染逻辑
    requestAnimationFrame(render);
}

fpsCtrl(delta, render)

FPS控制委托方法，根据设置的FPS限制控制渲染频率，避免过度渲染。

参数:

• delta {number} - 时间增量
• render {function} - 渲染函数

示例:

// 在渲染循环中使用FPS控制
function renderLoop() {
    const delta = clock.getDelta();
    renderManager.fpsCtrl(delta, () => {
        // 实际的渲染逻辑
        renderManager.glRenderer(scene, camera);
    });
    requestAnimationFrame(renderLoop);
}

glRenderer(geoScene, camera)

渲染3D几何场景，使用WebGL渲染器渲染3D几何场景，并分发渲染开始和结束事件。

参数:

• geoScene {THREE.Scene} - 3D几何场景实例
• camera {THREE.Camera} - 相机实例

示例:

// 渲染3D场景
renderManager.glRenderer(scene, camera);

// 监听渲染事件
renderManager.addEventListener('glRenderStart', () => {
    console.log('开始渲染3D场景');
});

cssRenderer(cssScene, camera)

渲染CSS2D场景，使用CSS2D渲染器渲染2D标签和UI元素。

参数:

• cssScene {THREE.Scene} - CSS2D场景实例，包含CSS2DObject对象
• camera {THREE.Camera} - 相机实例

示例:

// 渲染2D标签场景
renderManager.cssRenderer(cssScene, camera);

// 创建CSS2D场景并添加标签
const cssScene = new THREE.Scene();
const label = new CSS2DObject(labelElement);
cssScene.add(label);
renderManager.cssRenderer(cssScene, camera);

setToneMappingExposure(value)

设置色调映射曝光强度，调整渲染器的曝光强度，影响场景的整体亮度。

参数:

• value {number} - 曝光强度值，通常范围0.1-2.0

示例:

// 设置较低的曝光强度（较暗）
renderManager.setToneMappingExposure(0.3);

// 设置较高的曝光强度（较亮）
renderManager.setToneMappingExposure(1.2);

// 设置默认曝光强度
renderManager.setToneMappingExposure(0.5);

使用场景

渲染控制

• 管理WebGL和CSS2D渲染器
• 控制渲染器的尺寸和参数
• 提供统一的渲染接口

渲染控制

• FPS监控和统计
• 渐进式渲染大量对象
• 分批渲染处理

环境设置

• 提供室内环境贴图
• 支持环境光照和反射
• 改善渲染效果

内存管理

• 提供渲染器的清理功能
• 防止内存泄漏

相关链接

• SceneManager - 场景管理器
• CameraManager - 相机管理器
• Viewer3D - 主引擎类