webGl旋转问题解决

dev_xd
haha 2025-07-29 00:31:48 +08:00
parent 1073c8a188
commit cff600a3b7
3 changed files with 131 additions and 68 deletions

View File

@ -17,7 +17,7 @@
<script> <script>
import { import {
getModelFeatureInfos,updateBimModel getModelFeatureInfos, updateBimModel
} from "@/api/bim/bimModel"; } from "@/api/bim/bimModel";
export default { export default {
props: { props: {
@ -33,36 +33,40 @@ export default {
hideEl: 0, hideEl: 0,
} }
}, },
watch:{ watch: {
hideParts(val){ hideParts(val) {
this.me.hideParts=val; this.me.hideParts = val;
} }
}, },
methods: { methods: {
doSaveHide(){ isClient() {
return this.me.bimCfg.clientApi;
},
doSaveHide() {
this.$modal.confirm("确定保存吗?").then(() => { this.$modal.confirm("确定保存吗?").then(() => {
let obj={}; let obj = {};
this.hideParts.forEach(it=>{ this.hideParts.forEach(it => {
let modelId=it.modelId; let modelId = it.modelId;
if(!obj[modelId]){ if (!obj[modelId]) {
obj[modelId]=[]; obj[modelId] = [];
} }
obj[modelId].push({ obj[modelId].push({
featureId:it.featureId, featureId: it.featureId,
externalId:it.externalId, externalId: it.externalId,
modelId:it.modelId, modelId: it.modelId,
info:it.info info: it.info
}); });
}) })
for(let modelId in obj){ for (let modelId in obj) {
let modelInfo=this.me.models.find(it=>it.modelId==modelId); let modelInfo = this.me.models.find(it => it.modelId == modelId);
if(modelInfo){ if (modelInfo) {
modelInfo.bimCfg.hideParts=obj[modelId]; modelInfo.bimCfg.hideParts = obj[modelId];
modelInfo.bimConfig=JSON.stringify(modelInfo.bimCfg); modelInfo.bimConfig = JSON.stringify(modelInfo.bimCfg);
updateBimModel(modelInfo).then(res => { updateBimModel(modelInfo).then(res => {
this.$message.success("保存成功"); this.$message.success("保存成功");
}); });
} }
} }
}); });
}, },
@ -80,21 +84,40 @@ export default {
}, },
doHideFeatures(hideParts) { doHideFeatures(hideParts) {
let that = this; let that = this;
this.hideParts=hideParts||[]; this.hideParts = hideParts || [];
api.Public.clearHandler(); if (!this.isClient()) {
api.Feature.getByEvent(false); api.Public.clearHandler();
api.Feature.getByEvent(true, async (n) => { api.Feature.getByEvent(false);
if (n && n["id"]) { api.Feature.getByEvent(true, async (n) => {
let featureId = n.id; if (n && n["id"]) {
let datas = await that.getServerFeatureInfos(that, [featureId]); let featureId = n.id;
datas.forEach(it => { let datas = await that.getServerFeatureInfos(that, [featureId]);
that.hideParts.push(it); datas.forEach(it => {
that.hideParts.push(it);
});
//that.hideParts.push(featureId);
api.Feature.setVisible(featureId, false);
that.hideEl++;
}
});
} else {
api.Public.pickupCoordinate(false);
api.Public.event("LEFT_CLICK", (t) => {
api.Feature.GetFeatureByEvent(t.position, async n => {
if (n && n["id"]) {
let featureId = n.id;
let datas = await that.getServerFeatureInfos(that, [featureId]);
datas.forEach(it => {
that.hideParts.push(it);
});
//that.hideParts.push(featureId);
api.Feature.setVisible(featureId, false);
that.hideEl++;
}
}); });
//that.hideParts.push(featureId); });
api.Feature.setVisible(featureId, false); }
that.hideEl++;
}
});
}, },
async getServerFeatureInfos(that, ids) { async getServerFeatureInfos(that, ids) {
if (ids.length == 0) { if (ids.length == 0) {
@ -128,6 +151,7 @@ export default {
.hide-features { .hide-features {
padding: 0px 0px 20px; padding: 0px 0px 20px;
height: 80vh; height: 80vh;
.sel-list { .sel-list {
padding: 0px 10px 10px; padding: 0px 10px 10px;
height: 100%; height: 100%;

View File

@ -185,10 +185,17 @@ export default {
}, },
addModel(modelId, cb) { addModel(modelId, cb) {
let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`; let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
let modelInfo = this.projectMessage.find(m => m.modelId == modelId);
let direction = null;
if (this.me.bimCfg.clientApi) { if (this.me.bimCfg.clientApi) {
url = `/bimdata/Tools/output/model/${modelId}/root.glt`; url = `/bimdata/Tools/output/model/${modelId}/root.glt`;
if (modelInfo) {
direction = modelInfo.bimCfg.direction;
}
} }
console.log("加载模型:" + url); console.log("加载模型:" + url);
api.Model.add( api.Model.add(
url, url,
modelId, modelId,
@ -197,7 +204,7 @@ export default {
}, },
() => { () => {
console.log("加载模型成功"); console.log("加载模型成功");
let modelInfo = this.projectMessage.find(m => m.modelId == modelId);
if (modelInfo) { if (modelInfo) {
let cfg = modelInfo.bimCfg; let cfg = modelInfo.bimCfg;
let x = cfg?.x || 0; let x = cfg?.x || 0;
@ -208,9 +215,9 @@ export default {
api.Model.moveToPosition([x, y, 0], 0, modelId) api.Model.moveToPosition([x, y, 0], 0, modelId)
} }
if (rotateZ * 1 != 0) { if (rotateZ * 1 != 0) {
if(this.me.bimCfg.clientApi){ if (this.me.bimCfg.clientApi) {
}else{ } else {
api.Model.rotate(0, 0, rotateZ, modelId) api.Model.rotate(0, 0, rotateZ, modelId)
} }
} }
@ -249,6 +256,7 @@ export default {
setTimeout(() => { setTimeout(() => {
let featureIds = (this.me.hideParts || []).map(it => it.featureId); let featureIds = (this.me.hideParts || []).map(it => it.featureId);
if (featureIds.length > 0) { if (featureIds.length > 0) {
console.log("隐藏", featureIds.join("#"));
api.Feature.setVisible(featureIds.join("#"), false); api.Feature.setVisible(featureIds.join("#"), false);
} }
hideFn(); hideFn();
@ -256,8 +264,7 @@ export default {
}; };
hideFn(); hideFn();
}, 1000); }, 1000);
} }, direction);
);
}, },
onCheckTree(checkNode, event) { onCheckTree(checkNode, event) {
let checked = event.checkedNodes.includes(checkNode); let checked = event.checkedNodes.includes(checkNode);

View File

@ -21,25 +21,37 @@
</el-form-item> </el-form-item>
<div class="button-group"> <div class="button-group">
<el-button type="primary" @click="updatePosition"></el-button> <el-button type="primary" @click="updatePosition"></el-button>
</div>
<div class="nav-title">旋转</div>
<el-form-item label="绕X轴">
<el-slider v-model="form.rotateX" :min="-180" :max="180"></el-slider>
<el-input-number v-model="form.rotateX" placeholder="请输入旋转角度" :min="-180" :max="180"></el-input-number>
</el-form-item>
<el-form-item label="绕Y轴">
<el-slider v-model="form.rotateY" :min="-180" :max="180"></el-slider>
<el-input-number v-model="form.rotateY" placeholder="请输入旋转角度" :min="-180" :max="180"></el-input-number>
</el-form-item>
<el-form-item label="绕Z轴">
<el-slider v-model="form.rotateZ" :min="-180" :max="180"></el-slider>
<el-input-number v-model="form.rotateZ" placeholder="请输入旋转角度" :min="-180" :max="180"></el-input-number>
</el-form-item>
<div class="button-group">
<el-button type="primary" @click="updateRotate"></el-button>
</div> </div>
<template v-if="isClient">
<template v-if="clientEditMode">
<el-button type="primary" @click="doSaveEditData"></el-button>
<el-button @click="doCancelEditMode"></el-button>
</template>
<el-button v-else type="primary" @click="updateRotate"></el-button>
</template>
<template v-else>
<div class="nav-title">旋转</div>
<el-form-item label="绕X轴">
<el-slider v-model="form.rotateX" :min="-180" :max="180"></el-slider>
<el-input-number v-model="form.rotateX" placeholder="请输入旋转角度" :min="-180"
:max="180"></el-input-number>
</el-form-item>
<el-form-item label="绕Y轴">
<el-slider v-model="form.rotateY" :min="-180" :max="180"></el-slider>
<el-input-number v-model="form.rotateY" placeholder="请输入旋转角度" :min="-180"
:max="180"></el-input-number>
</el-form-item>
<el-form-item label="绕Z轴">
<el-slider v-model="form.rotateZ" :min="-180" :max="180"></el-slider>
<el-input-number v-model="form.rotateZ" placeholder="请输入旋转角度" :min="-180"
:max="180"></el-input-number>
</el-form-item>
<div class="button-group">
<el-button type="primary" @click="updateRotate"></el-button>
</div>
</template>
<div class="footer-btn"> <div class="footer-btn">
<el-button @click="resetRotate"></el-button> <el-button @click="resetRotate"></el-button>
<el-button type="primary" @click="onSubmit"></el-button> <el-button type="primary" @click="onSubmit"></el-button>
@ -64,7 +76,7 @@ export default {
}, },
data() { data() {
return { return {
isClient:false, isClient: false,
modelId: null, modelId: null,
movePoint: null, movePoint: null,
form: { form: {
@ -77,7 +89,7 @@ export default {
}, },
saveData: { saveData: {
type:'', type: '',
x: 0, x: 0,
y: 0, y: 0,
z: 0, z: 0,
@ -86,10 +98,28 @@ export default {
rotateZ: 0, rotateZ: 0,
}, },
movePoint: null movePoint: null,
clientEditMode: false,
} }
}, },
methods: { methods: {
doSaveEditData() {
this.clientEditMode = false;
api.Edit.setEditMode("")
api.Edit.save(d => {
let m = d.model.find(it => it.id == this.modelId);
this.saveData.direction = {
flyto: true,
matrix: m.matrix,
rotate: m.rotate,
transform: m.transform
}
});
},
doCancelEditMode() {
this.clientEditMode = false;
api.Edit.setEditMode("")
},
doModelMove() { doModelMove() {
ElMessage.info("左键单击选择移动位置,右键单击结束操作!"); ElMessage.info("左键单击选择移动位置,右键单击结束操作!");
if (this.me.bimCfg.clientApi) { if (this.me.bimCfg.clientApi) {
@ -107,6 +137,8 @@ export default {
this.$modal.confirm("确定保存吗?").then(() => { this.$modal.confirm("确定保存吗?").then(() => {
let model = this.me.models.find(model => model.modelId == this.modelId); let model = this.me.models.find(model => model.modelId == this.modelId);
if (model) { if (model) {
this.saveData.hideParts = model.bimCfg?.hideParts || [];
this.saveData.direction = this.saveData.direction || model.bimCfg?.direction;
model.bimConfig = JSON.stringify(this.saveData); model.bimConfig = JSON.stringify(this.saveData);
model.bimCfg = this.saveData; model.bimCfg = this.saveData;
updateBimModel(model).then(res => { updateBimModel(model).then(res => {
@ -119,8 +151,8 @@ export default {
}, },
initData(modelId) { initData(modelId) {
this.modelId = modelId; this.modelId = modelId;
this.saveData.type=this.me.bimCfg.clientApi?'api':'sapi' this.saveData.type = this.me.bimCfg.clientApi ? 'api' : 'sapi'
this.isClient=this.me.bimCfg.clientApi this.isClient = this.me.bimCfg.clientApi
let modelInfo = this.me.models.find(m => m.modelId == modelId); let modelInfo = this.me.models.find(m => m.modelId == modelId);
if (modelInfo) { if (modelInfo) {
let cfg = modelInfo.bimCfg; let cfg = modelInfo.bimCfg;
@ -166,10 +198,10 @@ export default {
}, },
updateRotate() { updateRotate() {
if(this.isClient){ if (this.isClient) {
api.Model.ClearModelRotation(this.modelId); api.Edit.setEditMode("Rotate")
api.Model.rotateForEdit(this.modelId,this.form.rotateX, this.form.rotateY, this.form.rotateZ) this.clientEditMode = true;
}else{ } else {
api.Model.rotateForEdit(this.form.rotateX, this.form.rotateY, this.form.rotateZ, this.modelId) api.Model.rotateForEdit(this.form.rotateX, this.form.rotateY, this.form.rotateZ, this.modelId)
} }
this.saveData.rotateZ = this.form.rotateZ; this.saveData.rotateZ = this.form.rotateZ;