基础使用示例

本页面展示 NIVIOBIM 图形引擎的基础接入流程，包括初始化、加载进度显示、相机复位与选择交互。

完整示例代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NIVIOBIM 基础示例</title>
</head>
<body>
  <div id="app" style="position:fixed;inset:0"></div>

  <div style="position:fixed;left:16px;bottom:16px;z-index:10;background:rgba(0,0,0,.7);color:#fff;padding:10px 12px;border-radius:8px;min-width:220px;">
    <div>加载状态：<span id="status">初始化中...</span></div>
    <button id="fitBtn" style="margin-top:8px;">相机复位</button>
  </div>

  <script type="module">
    import * as GraphicsEngine from './core/Viewer3D@v2.1.5.module.js';
    import PluginPackage from './plugins/PluginPackagev2.1.5.module.js';

    window.GraphicsEngine = GraphicsEngine;
    window.PluginPackage = PluginPackage;

    const statusEl = document.getElementById('status');

    const config = new GraphicsEngine.Config('地质博物馆建筑', document.getElementById('app'));
    config.setStaticPath('../public/models/');
    config.currentLoadType = GraphicsEngine.Config.LoadType.Local;
    config.enabledRaycaster = true;

    const viewer3D = GraphicsEngine.Viewer3D.Initializer(
      config,
      (progress) => {
        if (progress.loadType === 'STREAM') {
          if (progress.status === 'close') {
            statusEl.textContent = '加载完成';
          } else {
            statusEl.textContent = `流式加载中 ${progress.loaded}/${progress.total}`;
          }
        } else {
          statusEl.textContent = progress.status || 'loading';
        }
      },
      (error) => {
        statusEl.textContent = '加载失败';
        console.error(error);
      }
    );

    window.viewer3D = viewer3D;

    // 选择功能示例
    viewer3D.selection.enabled = true;
    viewer3D.selection.addEventListener('selected', (event) => {
      console.log('选中对象：', event?.object || event);
    });

    // 相机复位示例
    document.getElementById('fitBtn').addEventListener('click', () => {
      const sphere = viewer3D.sceneManager.sceneBoundingSphere;
      if (sphere) viewer3D.sceneManager.cameraManager.fitToSphere(sphere, true);
    });
  </script>
</body>
</html>

功能说明

1. 引擎初始化

javascript

const config = new GraphicsEngine.Config('model-name', container);
config.setStaticPath('../public/models/');
config.currentLoadType = GraphicsEngine.Config.LoadType.Local;
const viewer3D = GraphicsEngine.Viewer3D.Initializer(config, onProgress, onError);

2. 模型加载状态展示

javascript

function onProgress(progress) {
  if (progress.loadType === 'STREAM') {
    // 展示分片流式加载进度
  } else {
    // 展示普通加载状态
  }
}

3. 交互能力

javascript

viewer3D.selection.enabled = true;
viewer3D.selection.addEventListener('selected', (event) => {
  console.log(event.object);
});

注意事项

请确保静态资源路径与模型目录一致。
浏览器需支持 WebGL。
生产环境建议使用 HTTP 服务访问资源，避免本地文件跨域问题。

基础使用示例 ​

完整示例代码 ​

功能说明 ​

1. 引擎初始化 ​

2. 模型加载状态展示 ​

3. 交互能力 ​

注意事项 ​

相关链接 ​

基础使用示例

完整示例代码

功能说明

1. 引擎初始化

2. 模型加载状态展示

3. 交互能力

注意事项

相关链接