main
parent
ce7e6cc9b8
commit
269bf60bc8
|
@ -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%;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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%;
|
||||
|
|
Loading…
Reference in New Issue