场景加载

在本教程中，你可以通过BIMFACE提供的Model Viewer组件加载场景，并为后续的场景应用做好准备。

提示：本教程需要先创建场景并完成发布，场景的创建方法可参考场景搭建。

教程

场景加载方式与模型加载、图纸加载的模式基本保持一致。

引用BIMFACE的JavaScript显示组件库在使用BIMFACE JSSDK之前，你需要新建一个HTML文件，并在浏览器中打开。

<!DOCTYPE html>
<html>

<head>
  <title>My first scene in BIMFACE</title>
</head>

<body>
  <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
  <script>
    // 在这里输入BIMFACE JavaScript SDK提供的方法
  </script>
</body>

</html>

新建DOM元素

BIMFACE使用了HTML5的div元素作为容器，你可以方便的在Web上进行模型、图纸或场景的二次开发。这里，我们在HTML中新建一个div元素，将其ID设定为“domId”，并设置其宽度和高度。

这里，你可以将div元素的ID修改为其他值，但需要注意在之后根据ID获取div元素的时候也相应的做出修改。

<div id="domId" style="width:800px; height:600px"></div>

声明viewer及app变量

你需要声明viewer和app这两个变量，其中viewer将会用于对场景进行操作，app则可以以此来获取到默认UI组件。

// 声明viewer及app变量
let viewer, app;

构造Loader并指定待加载的场景

BimfaceSDKLoader是BIMFACE提供的SDK加载器（loader）对象，loader会根据所需加载的资源来加载对应的js组件。你需要调用loader的加载方法，并利用View Token为其指定所要加载的资源。

为了在网页中显示指定的场景，需要其View Token作为标识。需要注意的是，View Token只是一个临时的访问凭证，有效期为12小时。当超过12小时后，你需要重新进行获取View Token的操作。

调用加载方法前，你需要先构造BimfaceSDKLoaderConfig作为loader的配置项，并设置相关的参数。这里我们先只指定View Token，你也可以在配置项中设置SDK版本号、SDK语言版本等（目前支持了中文、英文、瑞典语三种），具体内容相见相关接口文档。

// 声明viewToken变量，填入想要显示的模型/图纸/场景token
let viewToken = '<yourViewToken>';

// 构造BimfaceSDKLoaderConfig对象
let loaderConfig = new BimfaceSDKLoaderConfig();
// 设置BimfaceSDKLoaderConfig的viewToken
loaderConfig.viewToken = viewToken;

// 调用BimfaceSDKLoader的load方法加载模型
BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);

设置加载资源后的回调函数

相信你已经注意到，我们在调用BimfaceSDKLoader.load方法时，分别传入了successCallback、failureCallback两个未定义的参数，它们分别是SDKLoader加载指定资源成功及失败的回调函数。这里，我们开始对其进行定义，当完成定义后，你就能看到场景在页面中加载出来了。

我们先定义加载成功的回调函数。对于加载包含默认UI的场景，可以分为以下几个步骤

获取html中添加的div元素
构造WebApplicationGIS对象，并与指定的div元素关联
在WebApplicationGIS中加载场景
获取到viewer对象，进行后续的二次开发

// 加载成功回调函数
function successCallback(viewMetaData) {

  // 获取DOM元素
  let domShow = document.getElementById('domId');

  // 创建WebApplicationGISConfig
  let webAppConfig = new Glodon.Bimface.Application.WebApplicationGISConfig();
  // 设置创建WebApplicationGIS的dom对象
  webAppConfig.domElement = domShow;
  // 创建WebApplicationGIS
  app = new Glodon.Bimface.Application.WebApplicationGIS(webAppConfig);

  // 加载待显示的场景
  app.addScene(viewToken);

  // 获取ViewerGIS对象
  viewer = app.getViewer();

};

注意到，我们对之前声明的viewer及app变量进行了赋值，这里的viewer即整个场景对象，之后几节教程中对于图层、构件等操作都会从viewer作为起点进行。

最后，我们定义加载失败的回调函数。

// 加载失败回调函数
function failureCallback(error) {

  console.log(error);

};

运行结果

输入以上代码，浏览器就可以加载我们的场景了。

完整代码

<!DOCTYPE html>
<html>

<head>
  <title>My first scene in BIMFACE</title>
</head>

<body>
  <div id="domId" style="width:800px; height:600px"></div>
  <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
  <script>
    // 声明viewer及app变量
    let viewer, app;
    // 声明viewToken变量，填入想要显示的模型/图纸/场景token
    let viewToken = '<yourViewToken>';
      
    // 构造BimfaceSDKLoaderConfig对象
    let loaderConfig = new BimfaceSDKLoaderConfig();
    // 设置BimfaceSDKLoaderConfig的viewToken
    loaderConfig.viewToken = viewToken;

    // 调用BimfaceSDKLoader的load方法加载模型
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);

    // 加载成功回调函数
    function successCallback(viewMetaData) {

      // 获取DOM元素
      let domShow = document.getElementById('domId');
      // 创建WebApplicationGISConfig
      let webAppConfig = new Glodon.Bimface.Application.WebApplicationGISConfig();
      // 设置创建WebApplicationGIS的dom对象
      webAppConfig.domElement = domShow;
      // 创建WebApplicationGIS
      app = new Glodon.Bimface.Application.WebApplicationGIS(webAppConfig);

      // 加载待显示的场景
      app.addScene(viewToken);

      // 获取ViewerGIS对象
      viewer = app.getViewer();

    };

    // 加载失败回调函数
    function failureCallback(error) {

      console.log(error);

    };
  </script>
</body>

</html>

你已经成功加载了场景，接下来你将学习到图层管理相关的知识。

BIMFACE公众号
企业微信
BIMFACE智能客服
7*24提供专业的BIMFACE使用支持与帮助