PHP网站加载BIMFACE模型

BIMFACE是一款具有完全自主知识产权的BIM轻量化引擎，建筑行业的软件开发者可在BIMFACE所提供的基础功能上进行二次开发，为终端用户提供更加丰富、更有价值的BIM应用。

官方文档中心有相关的教程供开发者阅读参考。这篇文章主要从实际使用需求出发，记录在PHP网站中加载BIMFACE的方法和问题。

前期准备

注册BIMFACE账号；
账号的appkey和secret；
模型的fileId；
postman工具（非必要）

参考官方文档

整体思路

要加载模型，只需要得到模型的ViewToken和即可
但从模型管理页面中复制得到的ViewToken是有时效，不并能提供网站长期展示使用
所以要调用BIMFACE服务端API，因此需要
- 先获取Access Token，
- 然后通过Access Token获取ViewToken
使用ViewToken加载模型

下面我们就来完成关键的步骤。

获取Access Token

假设你已经注册BIMFACE账号，并手上有postman工具，按照Access Token介绍和获取Access Token两篇文档的内容，使用postman调试成功，并使用它提供的PHP - cURL代码

获取Access Token

得到的代码片断如下


<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://api.bimface.com/oauth2/token',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_HTTPHEADER => array(
    'Authorization: Basic 【你的appkey:secret转换的Base64编码】',
    'Content-Type: application/json',
    'Cookie: acw_tc=【值】'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

获取模型的View Token

参考获取模型的View Token，同样使用postman调试成功，并使用它提供的PHP - cURL代码

获取模型的View Token

得到的代码片断如下


<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://api.bimface.com/view/token?fileId=【模型fileId】',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'GET',
  CURLOPT_HTTPHEADER => array(
    'Authorization: Bearer 【Access Token】',
    'Cookie: acw_tc=【值】'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

功能整合并应用

下面就是我写的代码文件 bimface.php，只需要按实际填入【你的appkey:secret转换的Base64编码】，然后把bimface.php放在PHP网站上就可运行，


<?php
$fileId=$_GET["url"]; //使用iframe传入fileId的值并赋值给变量$fileId

//开始获取Access Token
$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://api.bimface.com/oauth2/token',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'POST',
  CURLOPT_HTTPHEADER => array(
    'Authorization: Basic 【你的appkey:secret转换的Base64编码】',
    'Content-Type: application/json',
  ),
));
$response1 = curl_exec($curl);
curl_close($curl);
//结束获取Access Token，$response1即为服务器返回信息（json格式）


$json_Class1=json_decode($response1);  //对JSON格式的字符串进行解码 
$bimtoken = $json_Class1->{'data'}->{'token'};//获取返回数组中的token值
$bimtoken2 = 'Authorization: Bearer '.$bimtoken; //使用token值来构建获取模型的View Token时需要的header数组


//开始获取模型的View Token
$curl = curl_init();
curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.bimface.com/view/token?fileId={$fileId}",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'GET',
  CURLOPT_HTTPHEADER => array(
    $bimtoken2,
  ),
));
$response2 = curl_exec($curl);
curl_close($curl);
$json_Class2=json_decode($response2);//JSON格式的字符串进行解码
$Bim_View_Token = $json_Class2->{'data'};//获取返回Json信息中的View Token值
?>
//结束获取模型的View Token

//开始加载显示模型
<div id="model<?php echo substr($fileId,-5); ?>" style="width:100%;height:600px"></div>
<script src="https://static.bimface.com/api/BimfaceSDKLoader/该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。" charset="utf-8"></script>
<script>
        let viewer3D;
        let app;
        let viewToken = '<?php echo $Bim_View_Token ?>';
        let loaderConfig = new BimfaceSDKLoaderConfig();
            loaderConfig.viewToken = viewToken;
        BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
            function successCallback(viewMetaData) {
                let domShow = document.getElementById('model<?php echo substr($fileId,-5); ?>');
                let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
                    webAppConfig.domElement = domShow;    
                app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);    
                app.addView(viewToken);
                viewer3D = app.getViewer();    
            };
            
            function failureCallback(error) {
                console.log(error);
            };
</script>
//结束加载显示模型

然后使用iframe的形式来加载模型，无论是在文章中直接加载，还是创建一个简单的html文件来加载都没有问题。只需要在iframe的url中填入你要加载模型的fileId


<iframe src="bimface.php?url=【你的fileId】" frameborder="false" scrolling="false" style="border:none;" width="100%" height="620" allowtransparency="false"></iframe>