wangqiujuan0808
/
bw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update ThreeView2.vue

main
wangqiujuan0808 2023-12-15 15:09:39 +08:00
parent 0d2a3c5367
commit c7b62bef1c
1 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/bim/bimHome/components/ThreeView2.vue
View File

@ -12,9 +12,9 @@
<div class="button" @click="setBottom()"> <div class="button" @click="setBottom()">
{{ isRemoveBottom ? '移除地板' : '恢复地板' }} {{ isRemoveBottom ? '移除地板' : '恢复地板' }}
</div> </div>
<div class="button" @click="roam()"> <!-- <div class="button" @click="roam()">
漫游 漫游
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>
@ -219,7 +219,7 @@ const onMouseDownRight = (event) => {
const clickedObject = intersects[0].object; const clickedObject = intersects[0].object;
console.log('这是我选中的模型', clickedObject); console.log('这是我选中的模型', clickedObject);
var selectedObject = isSelent(clickedObject); var selectedObject = isSelent(clickedObject);
// addLabel(selectedObject); // addLabel(selectedObject, true);
emit('handleRightClick', selectedObject); emit('handleRightClick', selectedObject);
} }
} }
@ -403,18 +403,18 @@ const nearCamera = (floor) => {
const setLabel = () => { const setLabel = () => {
if (isAddLabel.value) { if (isAddLabel.value) {
let obj = scene.getObjectByName('set2'); let obj = scene.getObjectByName('set2');
addLabel(obj); addLabel(obj, false);
} else { } else {
removeLabel(); removeLabel();
} }
isAddLabel.value = !isAddLabel.value; isAddLabel.value = !isAddLabel.value;
} }
// 添加标签 // 添加标签
const addLabel = (obj) => { const addLabel = (obj,isShowDetail) => {
// console.log(123, obj); // console.log(123, obj);
centerSelectedGroup(obj); centerSelectedGroup(obj);
let text = "设备二"; let text = "设备二";
pointLabel = createLableObj(text); pointLabel = createLableObj(text,isShowDetail);
obj.add(pointLabel); obj.add(pointLabel);
labelRenderer.setSize(window.innerWidth, window.innerHeight); labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = "absolute"; labelRenderer.domElement.style.position = "absolute";
@ -425,10 +425,15 @@ const addLabel = (obj) => {
// 将呈现器的输出添加到HTML元素 // 将呈现器的输出添加到HTML元素
document.getElementById("dom").appendChild(renderer.domElement); document.getElementById("dom").appendChild(renderer.domElement);
}; };
const createLableObj = (text) => { const createLableObj = (text,isShowDetail) => {
let laberDiv = document.createElement("div"); //创建div容器 let laberDiv = document.createElement("div"); //创建div容器
if(!isShowDetail) {
laberDiv.className = "laber_name"; laberDiv.className = "laber_name";
laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>` laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
} else {
laberDiv.className = "laber_name1";
laberDiv.innerHTML = `<div class="detail-btn">详情</div>`
}
let pointLabel = new CSS2DObject(laberDiv); let pointLabel = new CSS2DObject(laberDiv);
return pointLabel; return pointLabel;
}; };
@ -521,4 +526,16 @@ const xfadd = (obj,state)=> {
line-height: 24px; line-height: 24px;
} }
} }
.laber_name1 {
width:100px;
height: 50px;
border-radius: 5px;
cursor: pointer;
background-color: #00174b;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index:999;
}
</style> </style>