RenderManager

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

类定义

class RenderManager extends ProgressRender

构造函数

constructor(container)

创建渲染管理器实例，初始化渲染管理器，创建WebGL渲染器、CSS2D渲染器、FPS监控器等组件。设置默认的渲染参数、环境贴图和文件拖拽功能。

参数:

• container {Element} - DOM容器元素，用于放置渲染器

示例:

// 创建渲染管理器
const renderManager = new RenderManager(container);

属性

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

方法

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);

事件

drag

文件拖拽事件，当用户在渲染区域拖拽文件时触发。

事件数据:

• files {FileList} - 拖拽的文件列表

示例:

// 监听文件拖拽
renderManager.addEventListener('drag', (event) => {
    console.log('拖拽的文件:', event.files);
});

glRenderStart

3D渲染开始事件，在WebGL渲染器开始渲染时触发。

示例:

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

glRenderEnd

3D渲染结束事件，在WebGL渲染器完成渲染时触发。

示例:

// 监听3D渲染结束
renderManager.addEventListener('glRenderEnd', () => {
    console.log('3D渲染完成');
});

renderer

渲染进度事件，在渐进式渲染过程中触发，提供渲染进度信息。

事件数据:

• processInfo {Object} - 渲染进度信息
  • currentShow {number} - 当前显示进度百分比
  • currentHide {number} - 当前隐藏进度百分比

示例:

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

子类

FPS

FPS性能监控类，用于监控和显示渲染性能的FPS（每秒帧数）统计信息。基于Three.js的Stats库实现，提供实时的性能监控功能。

类定义:

class FPS

构造函数:

constructor(container)

属性:

• stats {Stats} - Three.js的Stats实例，用于性能监控
• enabled {boolean} - FPS监控器的可用性状态

示例:

// 创建FPS监控器
const fps = new FPS(container);

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

// 在渲染循环中更新FPS
fps.stats.update();

ProgressRender

渐进式渲染类，提供渐进式渲染功能，支持分批显示和隐藏大量对象，避免一次性渲染造成的性能问题。通过分时渲染的方式，将大量对象的显示/隐藏操作分散到多个帧中执行。

类定义:

class ProgressRender extends EventManager

构造函数:

constructor()

属性:

• progressEnabled {boolean} - 是否开启渐进式渲染
• processInfo {Object} - 渲染进度信息

方法:

• showRender(group, number) - 渐进式显示渲染
• hideRender(group, number) - 渐进式隐藏渲染

示例:

// 创建渐进式渲染器
const progressRender = new ProgressRender();

// 渐进式显示对象
progressRender.showRender(objectGroup, 300);

// 渐进式隐藏对象
progressRender.hideRender(objectGroup, 300);

// 监听渲染进度
progressRender.addEventListener('renderer', (event) => {
    console.log('渲染进度:', event.processInfo);
});

使用场景

渲染控制

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

性能监控

• FPS监控和统计
• 渲染性能分析
• 帧率控制

渐进式渲染

• 分批显示大量对象
• 分批隐藏大量对象
• 避免一次性渲染造成的性能问题

环境设置

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

文件交互

• 支持拖拽文件加载
• 提供文件拖拽事件

相关链接

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