基础 Viewer 示例
本示例演示如何以最小成本创建 Viewer3D，并完成模型加载、加载状态监听与错误处理。
完整示例代码
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 Viewer 最小示例</title>
</head>
<body>
<div id="viewer" style="position:fixed;inset:0"></div>
<div id="log" style="position:fixed;left:16px;top:16px;z-index:10;background:#111;color:#fff;padding:8px 10px;border-radius:8px;font-size:12px;">
初始化中...
</div>
<script type="module">
import * as GraphicsEngine from './core/Viewer3D@v2.2.0-rc1.module.js';
const logEl = document.getElementById('log');
const container = document.getElementById('viewer');
const config = new GraphicsEngine.Config('地质博物馆建筑', container);
config.setStaticPath('../public/models/');
config.currentLoadType = GraphicsEngine.Config.LoadType.Local;
const viewer3D = GraphicsEngine.Viewer3D.Initializer(
config,
(progress) => {
if (progress.loadType === 'STREAM') {
logEl.textContent = progress.status === 'close'
? '模型加载完成'
: `流式加载 ${progress.loaded}/${progress.total}`;
} else {
logEl.textContent = `状态：${progress.status || 'loading'}`;
}
},
(error) => {
logEl.textContent = '加载失败';
console.error(error);
}
);
window.viewer3D = viewer3D;
</script>
</body>
</html>关键步骤说明
1. 创建配置对象
javascript
const config = new GraphicsEngine.Config('model-name', container);
config.setStaticPath('../public/models/');
config.currentLoadType = GraphicsEngine.Config.LoadType.Local;2. 初始化 Viewer3D
javascript
const viewer3D = GraphicsEngine.Viewer3D.Initializer(config, onProgress, onError);3. 处理加载状态与错误
javascript
function onProgress(progress) {
console.log(progress);
}
function onError(error) {
console.error(error);
}