1. 实例
完整的html案例代码
<!DOCTYPE html>
<html>
<link />
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>构件吸附</title>
</head>
<body style="margin: 0px">
<div id="viewport" style="width: 100%; height: 100%"></div>
<script type="module">
import * as BOS3D from "../../index.js";
import { GUI } from "./../js/dat.gui.module.js";
window.BOS3D = BOS3D;
window.THREE = BOS3D.THREE;
var token = "";
var option = {
// host: "http://bos3d-alpha.bimwinner.com",
host: "http://bos3d.bimwinner.com",
viewport: "viewport"
}; //生产环境
BOS3D.GlobalData.ContinueRender = true;
var viewer3D = new BOS3D.Viewer(option);
let scene = viewer3D.rootScene;
let adsorbControl = viewer3D.adsorbControl;
const axesHelper = new THREE.AxesHelper(5000);
scene.addObject(axesHelper);
viewer3D.addView("M1584527812438", "w4769212f67e423d83ce9cc1c09a82e9");
//初始化吸附控件(只需要初始化一次)
viewer3D.initAdsorbControl();
//开启吸附功能
viewer3D.enableAdsorbControl(true);
let currentTransformKey = undefined;
viewer3D.registerModelEventListener(BOS3D.EVENTS.ON_CLICK_PICK, (e) => {
//获取吸附功能的开启状态
if (!viewer3D.getAdsorbControlEnableState()) {
return;
}
if (!BOS3D.defined(e.intersectInfo)) {
viewer3D.cancelTransformComponent();
currentTransformKey = undefined;
return;
}
let selectedObjectId = e.intersectInfo.selectedObjectId;
if (adsorbControl.targetObjectsMap.has(selectedObjectId)) {
return;
}
//保留当前选中对象的id
currentTransformKey = selectedObjectId;
//将当前对象设置为选中对象，操作方式为translate
viewer3D.translateComponentByKey(selectedObjectId, undefined, undefined, {
isAdsorb: true
});
});
viewer3D.autoResize();
viewer3D.registerModelEventListener(BOS3D.EVENTS.ON_LOAD_COMPLETE, function (event) {
adsorbControl.addTargetObjectByIds([
{
//构件的id
componentId: "M1584527812438_234936",
//判定为吸附的距离阈值
collisionThreshold: 500,
//是否创建高亮面
createHighLightMesh: true
},
{
componentId: "M1584527812438_241831",
collisionThreshold: 500,
createHighLightMesh: true
}
]);
});
const gui = new GUI();
let params = {
开启吸附: true,
设置为被吸附: cancelTransform,
快捷吸附: adsorb,
添加外部构件: addCarModel,
结束吸附: endAdsorb,
切换为平移: setTranslate,
切换为旋转: setRotate
};
gui.add(params, "开启吸附").onChange((value) => {
viewer3D.enableAdsorbControl(value);
});
gui.add(params, "设置为被吸附");
gui.add(params, "快捷吸附");
gui.add(params, "添加外部构件");
gui.add(params, "结束吸附");
gui.add(params, "切换为平移");
gui.add(params, "切换为旋转");
function cancelTransform() {
if (!BOS3D.defined(currentTransformKey)) {
return;
}
if (adsorbControl.targetAABB) {
adsorbControl.targetAABB.resetTranslate();
}
adsorbControl.addTargetObjectByIds([
{
componentId: adsorbControl.selectedObjectId,
collisionThreshold: 500,
createHighLightMesh: true
}
]);
viewer3D.cancelTransformComponent();
currentTransformKey = undefined;
}
function adsorb() {
//将当前选中对象吸附到id为M1584527812438_234936的构件包围盒上，面法线为z=1
adsorbControl.setAdsorbNormal("M1584527812438_234936", {
z: 1
});
}
let externalObjectConverter = new BOS3D.ExternalObjectConverter("http://bos3d-alpha.bimwinner.com", "bos3dalpha");
function addCarModel() {
externalObjectConverter.getExternalObjectByModelKey("M1601286559828").then((object) => {
object.scale.set(10, 10, 10);
object.updateMatrixWorld(true);
scene.addObject(object);
viewer3D.translateComponentByKey(object, undefined, undefined, {
isAdsorb: true
});
currentTransformKey = "M1601286559828";
});
}
function endAdsorb() {
//结束吸附，并指定是否重置回之前的状态，这里为false，不重置
adsorbControl.endAdsorb(false);
}
function setTranslate() {
if (!BOS3D.defined(currentTransformKey)) {
return;
}
viewer3D.translateComponentByKey(currentTransformKey, undefined, undefined, {
isAdsorb: true
});
}
function setRotate() {
if (!BOS3D.defined(currentTransformKey)) {
return;
}
viewer3D.rotateComponentByKey(currentTransformKey, undefined, undefined, {
isAdsorb: true
});
}
</script>
</body>
</html>