NIVIOBIM 图形引擎 API

外观

Viewer3D ​

NIVIOBIM图形引擎的核心类，继承自EventManager。提供完整的3D场景管理功能，包括渲染、模型加载、插件系统、交互控制等。

类定义 ​

javascript
class Viewer3D extends EventManager

构造函数 ​

constructor(config) ​

创建Viewer3D实例，初始化Viewer3D引擎，创建所有必要的管理器、加载器和控制器。设置渲染循环、事件监听、渐进式渲染等核心功能。

参数:

  • config {Config} - 配置类实例，包含容器、模型路径等配置信息

示例:

javascript
// 创建Viewer3D实例
const config = new Config('building_model', container);
const viewer3D = new Viewer3D(config);

// 获取各种管理器
const sceneManager = viewer3D.sceneManager;
const renderManager = viewer3D.renderManager;
const extensionManager = viewer3D.extensionManager;

静态方法 ​

Initializer(config, progress, failed) ​

初始化Viewer3D，根据配置的加载类型自动选择相应的模型加载方式。

参数:

  • config {Config} - 初始化配置实例。详见 Config
  • progress {Function} - 初始化过程中的回调函数
  • failed {function(Error)} - 初始化失败的回调函数

返回值:

  • {Viewer3D} Viewer3D实例

示例:

javascript
// 使用静态初始化方法创建Viewer3D
const config = new Config('building_model', container);
const viewer3D = Viewer3D.Initializer(
    config,
    (progress) => console.log('加载进度:', progress),
    (error) => console.error('加载失败:', error)
);

// 获取各种管理器
const sceneManager = viewer3D.sceneManager;
const renderManager = viewer3D.renderManager;
const extensionManager = viewer3D.extensionManager;

getTHREE() ​

获取THREE实例，用于访问Three.js的所有功能。

返回值:

  • {Object} Three.js库实例

示例:

javascript
// 获取Three.js实例
const THREE = Viewer3D.getTHREE();

// 使用Three.js创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

属性 ​

renderManager ​

获取渲染管理器实例，用于控制WebGL渲染器和CSS2D渲染器。详见 RenderManager

类型:

示例:

javascript
// 获取渲染管理器
const renderManager = viewer3D.renderManager;

// 设置渲染器大小
viewer3D.resizeRender();

sceneManager ​

获取场景管理器实例，用于管理3D场景、相机、灯光等。详见 SceneManager

类型:

示例:

javascript
// 获取场景管理器
const sceneManager = viewer3D.sceneManager;

// 获取几何场景
const geometryScene = sceneManager.geometryScene;

extensionManager ​

获取扩展管理器实例，用于管理插件系统。详见 ExtensionManager

类型:

示例:

javascript
// 获取扩展管理器
const extensionManager = viewer3D.extensionManager;

// 添加插件
extensionManager.addPlugin('measure', measurePlugin, true);

loader ​

获取NIVIOBIM加载器实例，用于加载各种格式的3D模型。详见 NIVIOBIMLoader

类型:

示例:

javascript
// 获取加载器
const loader = viewer3D.loader;

// 加载GLTF模型
loader.loadGlTF(url, onSuccess, onProgress, onError);

selection ​

获取选择器实例，用于3D场景中的对象选择和交互。详见 Selection

类型:

示例:

javascript
// 获取选择器
const selection = viewer3D.selection;

// 设置选择模型
selection.setModel(model);

config ​

获取配置实例，包含Viewer3D的所有配置信息。详见 Config

类型:

示例:

javascript
// 获取配置
const config = viewer3D.config;

// 获取模型名称
const modelName = config.modelName;

realTimeRender ​

控制渲染模式，决定是否启用实时渲染。

类型: {boolean}
默认值: false

说明:

  • true: 启用实时渲染，每帧都进行完整渲染
  • false: 启用渐进式渲染，仅在交互时进行优化渲染

示例:

javascript
// 启用实时渲染
viewer3D.realTimeRender = true;

// 启用渐进式渲染
viewer3D.realTimeRender = false;

controllingRender ​

交互时的渐进式渲染方法，在用户交互时自动调用，用于优化渲染性能。

类型:

示例:

javascript
// 手动触发交互渲染
viewer3D.controllingRender();

controlEndRender ​

交互结束时的渐进式渲染方法，在用户交互结束后自动调用，用于恢复完整渲染。

类型:

示例:

javascript
// 手动触发交互结束渲染
viewer3D.controlEndRender();

方法 ​

setRoomEnvironment(bool) ​

设置室内环境，控制3D场景的室内环境贴图，影响模型的反射和光照效果。

参数:

  • bool {boolean} - 是否启用室内环境，true为启用，false为禁用

示例:

javascript
// 启用室内环境
viewer3D.setRoomEnvironment(true);

// 禁用室内环境
viewer3D.setRoomEnvironment(false);

allRender() ​

同时渲染标签元素和几何元素，执行完整的渲染，包括3D几何场景和2D标签场景的渲染。

示例:

javascript
// 执行完整渲染
viewer3D.allRender();

glRender() ​

渲染几何元素，使用WebGL渲染器渲染3D几何场景。

示例:

javascript
// 渲染3D几何场景
viewer3D.glRender();

cssRender() ​

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

示例:

javascript
// 渲染2D标签场景
viewer3D.cssRender();

resizeRender() ​

将canvas像素适应到窗口大小，调整渲染器大小以适应容器尺寸变化，同时更新相机投影矩阵。

示例:

javascript
// 调整渲染器大小
viewer3D.resizeRender();

loadGlTF(onSuccess, onProgress, onError) ​

加载glTF模型，并转换为Model。从配置的URL加载glTF格式的3D模型，并转换为NIVIOBIM的Model格式。

参数:

  • onSuccess {function(Model)} - 模型加载成功的回调函数
  • onProgress {function(LoadedGltfStatus)} - 模型加载过程中的回调函数
  • onError {function(Error)} - 模型加载失败的回调函数

示例:

javascript
// 加载glTF模型
viewer3D.loadGlTF(
    (model) => console.log('模型加载成功:', model),
    (progress) => console.log('加载进度:', progress),
    (error) => console.error('加载失败:', error)
);

loadGlb(glbFile, onSuccess, onProgress, onError) ​

加载glb模型文件，从本地文件加载glb格式的3D模型，并转换为NIVIOBIM的Model格式。

参数:

  • glbFile {File} - 需要加载的glb文件
  • onSuccess {function(Model)} - 模型加载成功的回调函数
  • onProgress {function(LoadedGltfStatus)} - 模型加载过程中的回调函数
  • onError {function(Error)} - 模型加载失败的回调函数

示例:

javascript
// 加载glb文件
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    viewer3D.loadGlb(
        file,
        (model) => console.log('模型加载成功:', model),
        (progress) => console.log('加载进度:', progress),
        (error) => console.error('加载失败:', error)
    );
});

loadModelByStream(onSuccess, onProgress, onError) ​

模型流式加载方法，使用流式加载方式加载NIVIOBIM格式的模型，支持大型模型的分批加载。

参数:

  • onSuccess {function(Model)} - 模型加载成功的回调函数
  • onProgress {function(LoadedInfo)} - 模型加载过程中的回调函数
  • onError {function(Error)} - 模型加载失败的回调函数

示例:

javascript
// 流式加载模型
viewer3D.loadModelByStream(
    (model) => console.log('模型加载完成:', model),
    (progress) => console.log('加载进度:', progress.status),
    (error) => console.error('加载失败:', error)
);

loadLocalModel(nivioFile, onSuccess, onProgress, onError) ​

加载本地NIVIOBIM模型文件，从本地文件加载NIVIOBIM格式的模型文件，支持.nivio格式。

参数:

  • nivioFile {File} - 需要加载的.nivio文件
  • onSuccess {function(Model)} - 模型加载成功的回调函数
  • onProgress {function(LoadedInfo)} - 模型加载过程中的回调函数
  • onError {function(Error)} - 模型加载失败的回调函数

示例:

javascript
// 加载本地NIVIOBIM文件
const fileInput = document.getElementById('nivioFileInput');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    viewer3D.loadLocalModel(
        file,
        (model) => console.log('模型加载成功:', model),
        (progress) => console.log('加载进度:', progress),
        (error) => console.error('加载失败:', error)
    );
});

loadModelProperty(model) ​

加载模型属性，并将该模型属性赋予它自身。异步加载模型的属性数据，包括材质、纹理、元数据等信息。

参数:

  • model {Model} - 需要加载属性的模型

返回值:

  • {Promise<Object>} 模型属性数据

示例:

javascript
// 加载模型属性
const model = viewer3D.sceneManager.dataManager.models.get('modelId');
const properties = await viewer3D.loadModelProperty(model);
console.log('模型属性:', properties);

loadModelTree(model) ​

加载模型树属性，并将该模型树赋予它自身。异步加载模型的树形结构数据，包括层级关系、节点信息等。

参数:

  • model {Model} - 需要加载树结构的模型

返回值:

  • {Promise<Object>} 模型树结构数据

示例:

javascript
// 加载模型树结构
const model = viewer3D.sceneManager.dataManager.models.get('modelId');
const tree = await viewer3D.loadModelTree(model);
console.log('模型树结构:', tree);

dispose() ​

回收viewer3D，清理Viewer3D实例的所有资源，包括场景、渲染器、插件等。调用此方法后，Viewer3D实例将不再可用。

示例:

javascript
// 清理Viewer3D资源
viewer3D.dispose();

事件 ​

processInfo ​

渲染过程中的信息事件，包含渲染统计等信息。

事件数据:

  • processInfo {Object} - 渲染过程信息

示例:

javascript
viewer3D.addEventListener('processInfo', (event) => {
    console.log('渲染信息:', event.processInfo);
});

相关链接 ​

文档内容为北京逆维悦动科技有限公司版权所有，禁止未授权转载

Copyright © 2023-2025 北京逆维悦动科技有限公司