基础使用示例
本页面展示 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.2.0-rc1.module.js';
import PluginPackage from './plugins/PluginPackage@v2.2.0-rc1.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 服务访问资源，避免本地文件跨域问题。