功能介绍

基于BIMFACE增加批注的扩展功能，可以在模型上增加和保存批注，再次点击保存的批注可以恢复当时保存的视点内容和视角，也可以将批注分享给别人实现协同设计的功能。

效果图

主要逻辑

通过BIMFACE前端JavaScript API灵活使用构建协同批注应用场景。

前端实现

引用BIMFACE的JavaScript显示组件库

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

定义DOM元素，用于在该DOM元素中显示模型或图纸

<div id="view3d"></div>

模型初始化

var options = new BimfaceSDKLoaderConfig();
options.viewToken = viewToken;
BimfaceSDKLoader.load(options, successCallback, failureCallback);

function successCallback() {
// 获取DOM元素
var dom4Show = document.getElementById('view3d');
var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
webAppConfig.domElement = dom4Show;

// 创建WebApplication
window.app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);

// 添加待显示的模型
app.addView(viewToken);

// 监听添加view完成的事件
app.addEventListener(Glodon.Bimface.Application.WebApplication3DEvent.ViewAdded, function () {

  // 渲染3D模型
  app.render();

  // 从WebApplication获取viewer3D对象
  window.viewer3D = app.getViewer();

  // 配置annotationconfig
  var annotationconfig = new Glodon.Bimface.Plugins.Annotation.AnnotationManagerConfig();
  // 把viewer3D注册到annotation绘制管理器
  annotationconfig.viewer = viewer3D;
  // annotation样式的配置
  annotationconfig.lineColor = new Glodon.Web.Graphics.Color(255, 0, 0, 1);
  annotationconfig.fillColor = new Glodon.Web.Graphics.Color(255, 255, 255, 0);
  annotationconfig.fontSize = 14;
  // 设置annotation的类型
  window.annotationManager= new Glodon.Bimface.Plugins.Annotation.AnnotationManager(annotationconfig);
});

};
function failureCallback(error) {
console.log(error);
};

工具栏按钮对应方法

• 箭头

annotationManager.setAnnotationType(Glodon.Bimface.Plugins.Annotation.AnnotationTypeOption.Arrow);

• 矩形

annotationManager.setAnnotationType(Glodon.Bimface.Plugins.Annotation.AnnotationTypeOption.Rectangle);

• 圆形

annotationManager.setAnnotationType(Glodon.Bimface.Plugins.Annotation.AnnotationTypeOption.Circle);

• 十字

annotationManager.setAnnotationType(Glodon.Bimface.Plugins.Annotation.AnnotationTypeOption.Cross);

• 文字

annotationManager.setAnnotationType(Glodon.Bimface.Plugins.Annotation.AnnotationTypeOption.Text);

• 设置颜色

annotationManager.setLineColor(new Glodon.Web.Graphics.Color(87,222,0,1));

• 设置线宽

annotationManager.setLineWidth(3);

• 设置字体

annotationManager.setFontSize(14);

• 清空批注

let _empty = [];
annotationManager.setAnnotationList(_empty);

• 保存图片

annotationManager.createSnapshot(function(data){
	var date = new Date();
	var seperator1 = "-";
	var seperator2 = ":";
	var month = date.getMonth() + 1;
	var strDate = date.getDate();
	let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();
	let _state = annotationManager.getCurrentState();
	let _img = data;
	var obj = {
		name:me.comment,
		time:currentdate,
		src:_img,
		state:_state,
		isClick:false
	}
	me.list.push(obj);
});

• 点击列表获取对应状态

annotationManager.setState(data.state);

ps. 该Demo基于vue+webpack进行开发打包，如用jquery/React实现同上。

参考API：https://bimface.com/docs/model-viewer/v1/api-reference/BimfaceSDKLoader.html

查看示例

http://bimface.com/example/team