快速开始

欢迎使用 NIVIOBIM 轻量化图形引擎！本指南将帮助您在5分钟内快速上手。

基础使用

1. 创建HTML页面

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GraphicsEngine</title>
</head>
<body>
<div id="app" style="position:absolute;width: 80%;height:80%;border: solid 1px black;left: 50%;top: 50%;transform: translate(-50%,-50%)"></div>
<div id="progress" style="position: absolute;bottom: 3rem;">    
    <label>加载:</label><label id="showInfo"></label>
</div>
<script type="module">
    import * as GraphicsEngine from './core/viewer3D@2.1.0.module.js';
    window.GraphicsEngine = GraphicsEngine;
    import PluginPackage from './plugins/PluginPackage@2.1.0.module.js';
    window.PluginPackage = PluginPackage;

    const config = new GraphicsEngine.Config('模型名称',document.getElementById('app'));
    config.setStaticPath('../public/models/');
    //1:本地模式 
    config.currentLoadType = GraphicsEngine.Config.LoadType.Local;
    //2.SaaS模式
    //config.currentLoadType = GraphicsEngine.Config.LoadType.SaaS;

    const viewer3D = GraphicsEngine.Viewer3D.Initializer(config,ProgressInfo,ErrorInfo);
    window.viewer3D = viewer3D;
    const infoShow = document.getElementById('showInfo');

    function ProgressInfo(progress) {
        if(progress.loadType === "STREAM"){
            if(progress.status === 'close'){
                infoShow.innerText = '加载完成';
            }else{
                infoShow.innerText = '';
                infoShow.innerText = `共:${progress.total}，名称:${progress.name},状态:${progress.loaded}，进度：${parseInt((progress.loaded/progress.total)*100) }%`;
            }
        }else{
            if(progress.status === 'loading'){
                infoShow.innerText = progress.value;
            }else if(progress.status === 'disposing'){
                infoShow.innerText = '数据解析中...';
            }else{
                infoShow.innerText = '完成';
            }
        }
    }
    function ErrorInfo(error) {
        console.error(error);
    }
</script>
</body>
</html>

代码详解

让我们详细分解这个示例代码的每个部分：

HTML文档结构

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GraphicsEngine</title>
</head>

标准的HTML5文档声明
设置页面标题为"GraphicsEngine"
使用UTF-8编码支持中文显示

页面布局元素

html

<div id="app" style="position:absolute;width: 80%;height:80%;border: solid 1px black;left: 50%;top: 50%;transform: translate(-50%,-50%)"></div>
<div id="progress" style="position: absolute;bottom: 3rem;">    
    <label>加载:</label><label id="showInfo"></label>
</div>

容器元素 (#app)：

这是3D场景的渲染容器
使用绝对定位，占据屏幕80%的宽高
居中显示（通过left: 50%; top: 50%; transform: translate(-50%,-50%)实现）
添加黑色边框便于可视化

进度显示元素 (#progress)：

位于页面底部，显示加载进度信息
包含"加载:"标签和动态更新的进度信息

模块导入和依赖关系

javascript

import * as GraphicsEngine from './core/viewer3D@2.1.0.module.js';
window.GraphicsEngine = GraphicsEngine;
import PluginPackage from './plugins/PluginPackage@2.1.0.module.js';
window.PluginPackage = PluginPackage;

核心引擎导入：

导入NIVIOBIM图形引擎的核心模块
版本号为2.1.0
将整个模块挂载到window.GraphicsEngine，便于全局访问

插件包导入：

导入插件包模块
同样挂载到window.PluginPackage供全局使用

配置对象和参数设置

javascript

const config = new GraphicsEngine.Config('模型名称',document.getElementById('app'));
config.setStaticPath('../public/models/');
//1:本地模式 
config.currentLoadType = GraphicsEngine.Config.LoadType.Local;
//2.SaaS模式
//config.currentLoadType = GraphicsEngine.Config.LoadType.SaaS;

配置对象创建：

使用GraphicsEngine.Config构造函数创建配置对象
第一个参数：模型名称（这里使用字符串'模型名称'）
第二个参数：DOM容器元素（通过getElementById('app')获取）

静态资源路径设置：

setStaticPath('../public/models/')：设置模型文件的本地路径
指向项目中的public/models/目录

加载模式配置：

本地模式：GraphicsEngine.Config.LoadType.Local
- 从本地文件系统加载模型
- 适用于开发和测试环境
SaaS模式：GraphicsEngine.Config.LoadType.SaaS（已注释）
- 从云端服务加载模型
- 适用于生产环境

Viewer3D初始化过程

javascript

const viewer3D = GraphicsEngine.Viewer3D.Initializer(config,ProgressInfo,ErrorInfo);
window.viewer3D = viewer3D;
const infoShow = document.getElementById('showInfo');

初始化器调用：

使用GraphicsEngine.Viewer3D.Initializer静态方法初始化3D查看器
传入三个参数：
1. config：之前创建的配置对象
2. ProgressInfo：进度回调函数
3. ErrorInfo：错误处理回调函数

全局访问设置：

将viewer3D实例挂载到window.viewer3D
便于在浏览器控制台或其他脚本中访问

DOM元素引用：

获取进度显示元素，用于后续更新加载状态

进度回调函数机制

javascript

function ProgressInfo(progress) {
    if(progress.loadType === "STREAM"){
        if(progress.status === 'close'){
            infoShow.innerText = '加载完成';
        }else{
            infoShow.innerText = '';
            infoShow.innerText = `共:${progress.total}，名称:${progress.name},状态:${progress.loaded}，进度：${parseInt((progress.loaded/progress.total)*100) }%`;
        }
    }else{
        if(progress.status === 'loading'){
            infoShow.innerText = progress.value;
        }else if(progress.status === 'disposing'){
            infoShow.innerText = '数据解析中...';
        }else{
            infoShow.innerText = '完成';
        }
    }
}

进度回调函数详解：

流式加载模式 (STREAM)：

当progress.loadType === "STREAM"时，处理流式加载
加载完成：progress.status === 'close'时显示"加载完成"
加载中：显示详细信息
- progress.total：总文件数
- progress.name：当前加载的文件名
- progress.loaded：已加载的文件数
- 计算并显示百分比进度

普通加载模式：

加载中：progress.status === 'loading'时显示progress.value
数据解析：progress.status === 'disposing'时显示"数据解析中..."
其他状态：显示"完成"

错误处理机制

javascript

function ErrorInfo(error) {
    console.error(error);
}

错误处理函数：

接收错误对象作为参数
使用console.error()将错误信息输出到浏览器控制台
便于开发者调试和排查问题

总结

这个示例代码展示了NIVIOBIM图形引擎的基本使用流程：

环境准备：创建HTML容器和进度显示元素
模块导入：导入核心引擎和插件包
配置设置：创建配置对象，设置模型路径和加载模式
引擎初始化：使用配置和回调函数初始化3D查看器
状态监控：通过回调函数监控加载进度和处理错误

这是一个完整的、可运行的示例，为开发者提供了使用NIVIOBIM图形引擎的基础模板。通过这个示例，开发者可以快速上手并在此基础上进行更复杂的3D应用开发。

下一步

查看 API 参考了解详细的API文档
阅读基础概念深入理解引擎架构
探索插件开发示例学习如何扩展功能

快速开始 ​

基础使用 ​

1. 创建HTML页面 ​

代码详解 ​

HTML文档结构 ​

页面布局元素 ​

模块导入和依赖关系 ​

配置对象和参数设置 ​

Viewer3D初始化过程 ​

进度回调函数机制 ​

错误处理机制 ​

总结 ​

下一步 ​

快速开始

基础使用

1. 创建HTML页面

代码详解

HTML文档结构

页面布局元素

模块导入和依赖关系

配置对象和参数设置

Viewer3D初始化过程

进度回调函数机制

错误处理机制

总结

下一步