main
wangqiujuan0808 2023-12-11 09:19:48 +08:00
parent ce7e6cc9b8
commit 269bf60bc8
4 changed files with 26 additions and 15 deletions

View File

@ -168,7 +168,7 @@ function setLayout() {
// background: #202a60;
display: flex;
justify-content: space-between;
background: url('@/assets/images/top_banner_deep.png') no-repeat #202a60;
background: url('@/assets/images/top_banner_deep.png') no-repeat #000000;
.left {
width: 33%;

View File

@ -36,9 +36,13 @@ onMounted(() => {
document.addEventListener("click", onMouseDown);
// document.addEventListener("mousemove", onMouseMove);
});
let scene, renderer, camera, controls, isAddLabel = true;
let scene, renderer, camera, controls = true;
let mouse = new THREE.Vector2();
let labelRenderer = new CSS2DRenderer(); //CSS2DRenderer
const data = reactive({
isAddLabel: true
});
const { isAddLabel } = toRefs(data);
//
Bus.on('clickBuild', (isParent) => {
// Todo
@ -48,7 +52,7 @@ Bus.on('clickBuild', (isParent) => {
var Floor = scene.getObjectByName(clickName);
//
// nearCamera(Floor);
centerSelectedGroup(Floor);
boxLight(Floor);
return;
}
})
@ -57,8 +61,9 @@ Bus.on('clickDevice', (isParent) => {
if (!isParent) {//
var clickName = bimStore().activateDevice.clickName;
var Floor = scene.getObjectByName(clickName);
boxLight(Floor);
//
nearCamera(Floor);
// nearCamera(Floor);
return;
}
})
@ -74,7 +79,8 @@ const init = () => {
//
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
// camera.position.z = 5;
camera.position.set(-20.650, 5.456, 30.088);
camera.position.set(-92.650, 67.456, 38.088);
// camera.position.set(-92.936, 180.990, -28.179);
//
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
@ -101,6 +107,7 @@ const renderScene = () => {
TWEEN.update();
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
// if (roamdObjects.length > 0) {
// const currentModel = roamdObjects.shift();
// setTimeout(() => {
@ -173,7 +180,12 @@ const onMouseDown = (event) => {
const clickedObject = intersects[0].object;
var selectedObject = isSelent(clickedObject);
console.log(selectedObject);
if (selectedObject) {
boxLight(selectedObject);
}
}
const boxLight = (selectedObject) => {
if (selectedObject) {
selectedObjects[0] = selectedObject;
if (selectBoxByClick) {
scene.remove(selectBoxByClick);
@ -182,7 +194,6 @@ const onMouseDown = (event) => {
scene.add(selectBoxByClick);
centerSelectedGroup(selectedObject);
}
}
}
//
const centerSelectedGroup = (obj) => {
@ -249,17 +260,19 @@ const nearCamera = (floor) => {
}
//
const setLabel = () => {
if(isAddLabel) {
if(isAddLabel.value) {
addLabel();
} else {
removeLabel();
toHomeView();
}
isAddLabel = !isAddLabel;
isAddLabel.value = !isAddLabel.value;
}
//
const addLabel = () => {
let obj = scene.getObjectByName('set2');
console.log(123, obj);
// console.log(123, obj);
centerSelectedGroup(obj);
let text = "设备二";
let pointLabel = createLableObj(text);
obj.add(pointLabel);
@ -298,10 +311,10 @@ const removeLabel = () => {
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
color: #ffff;
>div {
cursor: pointer;
background: #477efa;
width: 120px;
height: 40px;
@ -317,8 +330,7 @@ const removeLabel = () => {
padding: 5px 10px;
white-space: nowrap;
background-color: #ffffffb3;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-radius: 12px;
font-size: 12px;
display: flex;
flex-direction: column;

View File

@ -49,7 +49,6 @@ import ApplicationTree from './components/ApplicationTree.vue';
import EquipmentInfo from './components/EquipmentInfo.vue';
import RealData from './components/RealData.vue';
import ThreeView from './components/ThreeView2.vue';
// import ThreeModel from './components/ThreeModel.vue';
import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
import RealInfoDialog from './components/RealInfoDialog.vue';
import DeviceDetial from './components/DeviceDetial.vue';

View File

@ -67,7 +67,7 @@ const gotoPage = (item) => {
.home-page {
width:100%;
height: calc(100vh - 150px);
background: #020c45;
background: #000000;
position: relative;
.map-div {
width: 100%;