基础使用示例

本页面展示了 NIVIOBIM 图形引擎的基础使用方法，包括模型加载、相机控制、对象选择等核心功能。

完整示例代码

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" src="viewer3D.module.js"></script> -->
<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('https://www.nwydbim.com/models/');
    const config = new GraphicsEngine.Config('地质博物馆建筑',document.getElementById('app'));
    config.setStaticPath('../public/models/');
    config.currentLoadType = GraphicsEngine.Config.LoadType.Local;

    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>

功能说明

1. 引擎初始化

javascript

// 创建配置
const config = new GraphicsEngine.Config('building_model', container);
config.setStaticPath('./public/models/');
config.currentLoadType = GraphicsEngine.Config.LoadType.Local;
config.enabledRaycaster = true;

// 初始化Viewer3D
viewer3D = GraphicsEngine.Viewer3D.Initializer(config, progressCallback, errorCallback);

2. 相机控制

javascript

// 重置相机到场景中心
const boundingSphere = viewer3D.sceneManager.sceneBoundingSphere;
viewer3D.sceneManager.cameraManager.fitToSphere(boundingSphere, true);

3. 对象选择

javascript

// 启用/禁用选择
viewer3D.selection.enabled = true;

// 监听选择事件
viewer3D.selection.addEventListener('selected', (event) => {
    console.log('选中对象:', event.object);
});

注意事项

确保浏览器支持 WebGL 2.0
模型文件需要放在正确的路径下
某些功能需要特定的模型格式支持
建议在HTTPS环境下运行以获得最佳性能

基础使用示例 ​

完整示例代码 ​

功能说明 ​

1. 引擎初始化 ​

2. 相机控制 ​

3. 对象选择 ​

注意事项 ​

相关链接 ​

基础使用示例

完整示例代码

功能说明

1. 引擎初始化

2. 相机控制

3. 对象选择

注意事项

相关链接