如何实现在空间中给三维模型添加标签的功能?

JavaScriptHtml
29次浏览
0

套入小红砖社区下载的完整代码,修改成自己的模型key和自己的密匙,无法运行出画面,请问是什么原因呢?运行显示乱码,如下图:


完整代码如下:

/**
* @description: 为空间添加标签
*/
// 隐藏左上角的视图控制
BIMWINNER.BOS3D.GlobalData.EnableViewController = false;

// 配置三维主对象参数
const op = {
host: "https://webapi.bos.xyz",
viewport: "viewport"
};

const extraComponent = "BuildingIOT_spaceInfo_2tfyzEGf1Dg9mRmsgVgP7n";

// 初始化主对象
const viewer3D = new BIMWINNER.BOS3D.Viewer(op);
const tool = new BIMWINNER.BOS3D.ToolBar(viewer3D);

viewer3D.resize(window.innerWidth, window.innerHeight);// 模型画布自适应窗口大小

// 实例化插件主对象
const XHZ = new BIMWINNER.BOS3D.XHZ(viewer3D);

// 模型文件key
const modelKey = "";
// 开发者授权码
const devcode = "";

// 创建一个threejs的obj对象,用来作为三维标签的父级,便于标签的管理
const threeBallMarkers = new THREE.Object3D();
const spaceTreeData = {} // 定义空间树数据
// 初始化,主函数
function init() {
const scene = viewer3D.getViewerImpl().getScene();
scene.add(threeBallMarkers); // 将三维标签的父级添加进场景
addRestorButton(); // 添加复位按钮
viewer3D.addView(modelKey, devcode);
// 监听模型加载完成
viewer3D.getViewerImpl().modelManager.addEventListener(BIMWINNER.BOS3D.EVENTS.ON_LOAD_COMPLETE, function (event) {
const promptingMessage1 = BIMWINNER.BOS3D.message(
"info", "楼层数据获取中,请稍等...", false); // 加载完模型提示用户
getSpaceTreeComponents(modelKey)
.then(data => {
if (data.code === 2000) {
promptingMessage1.remove(); // 获取数据后移除提示框
initSpaceTreeData(data.data); // 初始化空间树所需数据
initTree(getLocationTreeNodes(data.data)); // 初始化空间树操作区
}
})
});
}

// 添加左侧树
const initTree = (tree) => {
$('#tree').treeview({
data: tree,
collapseIcon: "glyphicon glyphicon-minus", // 树节点关闭的图标
expandIcon: 'glyphicon glyphicon-plus', // 树节点展开的图标
onNodeSelected: function (event, data) {
removeMarker(threeBallMarkers, 'test1'); // 移除上次的标签
const hightArray = getComponentArrayByButton(data.text); // 获取当前层级构件数组
const index = hightArray.indexOf(extraComponent); // 第三层的空间树构件里多出了一个构件
if(index !== -1){
hightArray.splice(index,1);
}
const starPosition = XHZ.getBoundingBoxCenterByComponents(hightArray); // 获取当前包围盒位置
// 添加三维标签
/**
* 该方法用来添加三维线段面板和图片
* @params: componentid {string}
* @params: callback {function} 回调函数
* @param [options] {object} 参数
* @param [options.color]{16进制颜色} 球形标签的颜色 例如0xff0000
* @param [options.offsetX]{number} 标签的终点相对于构件位置的偏移X
* @param [options.offsetY]{number} 标签的终点相对于构件位置的偏移Y
* @param [options.offsetZ]{number} 标签的终点相对于构件位置的偏移Z
* @param [options.depthTest]{boolen} 是否关闭标签的深度测试
* @param [options.startPosition]{Object} 标签的起始位置
* @params:
* @return:

*/
XHZ.addThreeWordMarker({
startPosition: starPosition,
offsetX: -20300,
offsetY:10600,
offsetZ:16150,
content: data.text,
scale: 200,
id: 'test1'
}, (threeBallMarker) => {
threeBallMarkers.add(threeBallMarker); // 创建完成以后将三维标签添加到模型场景中
});
viewer3D.resetScene(false, false, false, true, true, false); // 恢复模型到初始状态
viewer3D.adaptiveSizeByKey(hightArray); // 让模型视角适应选择的构件数组
viewer3D.transparentOtherComponentsByKey(hightArray); // 对此构件数组进行反选透明操作
},
onNodeUnselected: (event, data) => {
viewer3D.resetScene(); // 恢复模型到初始状态
}
});
$('#tree').treeview('collapseAll', {silent: true});
}

// 根据[数据接口:通过模型key获取模型空间树结构]返回的数据结构,
// 进行数据整理
const getLocationTreeNodes = (arr) => {
const tree = [];
for (let i = 0; i < arr.length; i++) {
const node = {};
node.id = arr[i].key;
let name = "";
switch (arr[i].type) {
case "IFCPROJECT" :
name = "项目(未命名)";
break;
case "IfcSite" :
name = "场地(未命名)";
break;
case "IFCBUILDING" :
name = "建筑(未命名)";
break;
case "IFCBUILDINGSTOREY" :
name = "楼层(未命名)";
break;
case "IfcSpace" :
name = "空间(未命名)";
break;
default:
name = "构件(未命名)";
}
node.text = arr[i].name || name;
if (arr[i].childrenResultList && arr[i].childrenResultList.length > 0 && arr[i].childrenResultList[0].childrenResultList) {
node.nodes = getLocationTreeNodes(arr[i].childrenResultList);
} else if (arr[i].childrenResultList && arr[i].childrenResultList.length === 0) {
tree.push({text: "该模型无空间划分"});
continue;
}
tree.push(node);
}
return tree;
};

// 数据接口:通过模型key获取模型空间树结构
const getSpaceTreeComponents = (modelKey) => fetch(`${op.host}/models/${modelKey}/trees/location`, {headers: {devcode, k: "space_tag", v: 2}})
.then(response => response.json())

// 初始化空间树数据
const initSpaceTreeData = (treeData) => {
const array = treeData[0].childrenResultList[0].childrenResultList[0].childrenResultList;
array.forEach(item => spaceTreeData[item.name] = item.children.filter(item => viewer3D.getViewerImpl().modelManager.getComponent(item) !== undefined));
return spaceTreeData;
}

// 根据点击按钮返回对应数组
const getComponentArrayByButton = (text) => {
if (spaceTreeData[text]) {
return spaceTreeData[text];
} else {
const model = viewer3D.getViewerImpl().getModel(modelKey);
const allCOmponents = model.getAllComponents();
return allCOmponents;
}
}

// 移除标签
const removeMarker = (threeObj, markerkey) => {
threeObj.children.forEach(item => {
if (item.key === markerkey) {
threeObj.remove(item)
}
});
}

// 创建复位按钮,目的是点击按钮的时候将模型回复到初始状态
const addRestorButton = () => {
XHZ.addRestorButton(function () {
viewer3D.resetScene();
});
// 调整样式
const toolId = viewer3D.viewerImpl.uuid;
$("#home" + toolId).css("padding", "1px 7px 2px");
}

// 监听浏览器窗口变化,自动适应画布为浏览器窗口大小
window.addEventListener("resize", function () {
viewer3D.resize(window.innerWidth, window.innerHeight);
});

// 运行主函数
init();
<html>
<title>空间加标签</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="icon" href="https://www.bos.xyz/vizbim/img/redblock.ico" type="img/x-ico"/>
<link rel="stylesheet" href="https://www.bos.xyz/bos3d/latest/BIMWINNER.BOS3D.min.css"/>
</head>
<body style="overflow: hidden; outline: none; margin: 0">
<div id="viewport"></div>
<div id="tree"
style="width: 250px; position: absolute; height: 600px;top:80px; left:30px;"></div>
<script type="application/javascript" src="https://www.bos.xyz/bos3d/latest/BIMWINNER.BOS3D.min.js"></script>
<script type="application/javascript" src="https://www.bos.xyz/bos3d/latest/XHZ.min.js"></script>
<script type="text/javascript" src="https://www.bos.xyz/vizbim/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="https://www.bos.xyz/vizbim/jquery-ui.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>

</html>


关注|0
回答问题
邀请回答
回答
邀请回答
分享
举报
0条回答

撰写答案