直接就开始了，从最基础的在线环境使用开始，现在假设大家都有一个bimface账号了，之后会用到。

1、搭建一个入门级别的webpack环境

搭建一个基本的开发环境，这个不是重点哈，我简单介绍下就过了。

1.1、新建项目文件夹

新建一个文件夹作为我们项目的根目录，命名为online_bimface。

mkdir online_bimface
cd online_bimface

1.2、初始化npm

初始化npm，初学者这里参数全部选择默认就好，注意啊，这里默认你的node环境都是安装好的啊。

npm init

1.3、项目配置

在根目录下新建文件夹【src】，其中包含index.html文件、assets文件夹、配置文件webpack.config.js。文件目录截图如下：

我把webpack.config.js的内容贴一下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development', 
    entry:{
        index:path.join(__dirname,'./src/assets/js/index.js'),
    },
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'js/[name].[chunkhash:10].js',
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: 'threeJS',
            template:'./src/index.html',
            filename:'index.html',
            chunks: ['index']
        })
    ],
    module:{
        rules:[
            {
                test:/\.css/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.html$/,
                loader:'html-loader'
            },
            {
                test:/\.(jpg|png|gif|svg)$/,
                loader:'url-loader',
                options:{
                    name:'[name].[ext]',
                    esModule:false,
                    outputPath:'img'
                }
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        historyApiFallback: true,
        open:true,
        hot: true,
        inline: true,
        port: 8080
    }
}

这里涉及到一些库依赖的安装，我把package.json的内容也贴一下，后期的话，会把代码开源。

{
  "name": "online_bimface",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --watch"
  },
  "keywords": [],
  "author": "taoxiang",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.6",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "style-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.41.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }
}

1.4、安装启动

npm install
npm run dev

我们这里设置一下背景色，查看一下运行效果。

#view{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background-color: black;
}

2. 上传模型和转换

大概是这样一个逻辑，我们拿到项目中的bim模型，通过bimface的控制台，把这个模型上传到后台，bimface针对模型做一个轻量化的处理，这时候我们使用这个处理的结果来做bim的应用开发。

2.1、上传转换

1、使用注册的账号密码登录到控制台。（没账号的可以免费注册下）

2、创建一个新项目，命名为temp，之后的文章案例都使用这个项目中的资源。

3、进入temp项目，上传我们的bim文件，这里我们选用的是情报板这样一个rvt格式的文件。

4、上传成功后，我们开始使用转换功能，初学者可以直接选择默认选项即可。

5、等待完成后，我们可以在预览窗口查看下详情。

2.2、获取viewToken

我们可以在控制台获取到viewtoken，这个作为我们下一步加载模型的唯一依据。

3. 场景初始化

3.1、引用组件库

index.html页面引用引用BIMFACE的JavaScript显示组件库。

<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>

3.2、场景封装

/*
 * @Descripttion: 三维场景
 * @version: 
 * @Author: taoxiang
 * @Date: 2026-03-18T15:59:37+00:00
 * @LastEditors: taoxiang
 * @LastEditTime: 2026-03-18T15:59:37+00:00
 */
class Scene {
  constructor() {
    // 从bimface控制台获取的全局变量
    this.viewToken = '07dc481616c5449d9dda54ecf2c86b78';
    // 操作三维场景的类
    this.viewer3D = null;
    // 存放试图的DOM容器ID
    this.viewContainerID = 'view';
  }
  init () {
    const options = new BimfaceSDKLoaderConfig();
    options.viewToken = this.viewToken;
    BimfaceSDKLoader.load(options, (viewMetaData) => {
      this.successCallback(viewMetaData);
    }, (error) => {
      this.failureCallback(error);
    });
  }
  /**
   * @description 成功回调
   * @param {*} viewMetaData 
   */
  successCallback (viewMetaData) {
    if (viewMetaData.viewType == "3DView") {
      const webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
      const viewContainer = document.getElementById(this.viewContainerID);
      viewContainer && (webAppConfig.domElement = viewContainer);
      const app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
      this.viewer3D = app.getViewer();
      this.viewer3D && this.viewer3D.loadModel({
        viewToken: this.viewToken
      });
      this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, () => {
        this.onViewAdded();
      })
    }
  }
  /**
   * @description 失败回调
   * @param {*} error 
   */
  failureCallback (error) {
    console.log(error);
  }
  /**
   * @descripttion: 场景初始化完成
   * @param {*}
   * @return {*}
   */
  onViewAdded () {
    window.onresize = function () {
      this.viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight);
    }
    this.viewer3D.render();
  }
}
export default new Scene();

3.3、实例化

import scene from './scene.js';
scene.init();

4. 调用接口获取viewToken

在上文中，有些人可能注意到了，这个viewToken是通过bimface控制台去获取的，而且有效期只有12小时，实际项目中这样肯定是不能满足要求的，这需要我们调用bimface的后端接口，获取viewToken的值，并进行更新。接下来介绍怎么通过获取viewToken。

1、打开控制台，获取自己的App证书。在【我的应用】中选择【应用概览】，复制APPKey和AppSecrt。

2、新建一个ViewToken类，用于获取viewToken和accessToken。

/*
 * @Descripttion: 
 * @version: 
 * @Author: taoxiang
 * @Date: 2026-03-18T15:59:37+00:00
 * @LastEditors: taoxiang
 * @LastEditTime: 2026-03-18T15:59:37+00:00
 */
import * as $ from 'jquery';
class ViewToken {
    constructor(appKey,appSecret ){
        this.appKey = appKey || '';
        this.appSecret = appSecret || '';
    }
    /**
     * @description 获取字符串appKey:appSecret BASE64编码
     * @returns 
     */
    base64(){
        return window.btoa(this.appKey + ':' + this.appSecret);
    }
    getAccessToken(){
        const url = '/bimface/oauth2/token';
        const method = 'POST';
        const base64 = this.base64();
        const headers = {
            Authorization:'Basic' + ' ' + base64
        }
        let accessToken = '';
        $.ajax({
            url:url,
            method:method,
            headers:headers,
            async:false,
            error:(err)=>{
                console.log(err);
            },
            success:(res)=>{
                console.log(res);
                if(res){
                    if(res.data){
                        if(res.data.token){
                            accessToken = res.data.token;
                        }
                    }
                }
            }
        });
        return accessToken;
    }
    getViewToken(){
        const accessToken = this.getAccessToken();
        const url = '/bimface/view/token';
        const method = 'GET';
        const headers = {
            Authorization:'bearer ' + accessToken
        }
        const fileId = '2165566248569280';
        let viewToken = '';
        $.ajax({
            url:url,
            method:method,
            headers:headers,
            async:false,
            data:{
                fileId : fileId
            },
            error:(err)=>{
                console.log(err);
            },
            success:(res)=>{
                if(res){
                    if(res.data){
                        viewToken = res.data;
                    }
                }
            }
        });
        return viewToken;
    }
}
export default ViewToken;

在scene.js中调用。

5. 总结一下

1、其实文章有很多细节的东西没有提了，像上文中的模型转换，是有多种模式去选择的，着色、真实、线框等等。

2、viewToken的获取直接在控制台生成只能用12小时，要是用接口的方式调用，能保持7天。

3、webpack工具的使用在这里不是重点，重点是bimface的使用流程。直接把我的项目拉下来用，不用花时间去研究配置。

4、目前笔者接触到的数字孪生、智慧城市项目很多都是都是没有外网环境的，那这种在线使用的方式就不能满足要求了，接下来会去介绍怎么在离线环境下使用，将道理，离线使用也是使用最多的一种场景。