<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定義二維標籤</title>
<style media="screen">
* {margin: 0;padding: 0;}
html,body{height:100%}
.main {display: flex;flex-direction: column;overflow: hidden;height: 100%; width: 100%;}
.model {flex: 1; }
</style>
<!-- 引用BIMFACE的JavaScript顯示組件庫 -->
<script src="https://static.bimface.com/api/BimfaceSDKLoader/[email protected]" charset="utf-8"></script>
</head>
<body>
<div id="domId" style="width:100%;height:800px"></div>
<script type="text/javascript">
var viewer3D;
var marker;
var viewToken = '224bc056e00e40e4841455df8edbd22b';
var position0=new Object();
position0={"x": 0, "y": 0, "z": 0};
// 初始化顯示組件
var options = new BimfaceSDKLoaderConfig();
options.viewToken = viewToken;
BimfaceSDKLoader.load(options, successCallback, failureCallback);
function successCallback(viewMetaData) {
if (viewMetaData.viewType == "3DView") {
// 獲取DOM元素
var WebAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
WebAppConfig.domElement = document.getElementById('domId');
var app = new Glodon.Bimface.Application.WebApplication3D(WebAppConfig);
viewer3D = app.getViewer();
app.addView(viewMetaData.viewToken);
//三維標籤的配置類
var markerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();
markerConfig.viewer = viewer3D;
marker = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(markerConfig);
viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
// tupian()
});
viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,function(objectData) {
if(objectData && objectData.objectId){
tupian(objectData)
// add3DMarker( objectData.worldPosition);
//
//
}
console.log("獲得座標的地方")
console.log(objectData.worldPosition)
//自適應屏幕大小
// window.onresize=function(){
// viewer3D.resize(document.documentElement.clientWidth,document.documentElement.clientHeight-40)
// }
});
}}
function failureCallback(error){
};
//增加三維標籤的方法
function tupian(objectData){
// 首先創建DrawableContainer
var drawaleContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
drawaleContainerConfig.viewer = viewer3D;
var drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawaleContainerConfig);
var imageConfig = new Glodon.Bimface.Plugins.Drawable.ImageConfig();
// 設置自己的imageUrl
imageConfig.src = "logo.png";
// 通過selection change可以得到構件ID和座標
imageConfig.worldPosition = objectData.worldPosition;
var image = new Glodon.Bimface.Plugins.Drawable.Image(imageConfig);
//圖片的點擊事件
image.onClick(function() {
var id=image.id;
alert(id);
});
//添加image
drawableContainer.addItem(image);
}
</script>
</body>
</html>
因爲viewtoken的時效較短，需要12小時換一次