模型点位修改
1 parent 97871d2 commit dfe5617c1d73fc22ceb8cc726f506d8518f9e8a0
@zhangzhihui zhangzhihui authored on 25 Oct
Showing 4 changed files
View
442
src/views/oneMap/BIM/Tunnel.vue
<template>
<div id="Tunnel" ref="threeDom">
<div
class="YuanDian"
v-for="(item, i) in labelData"
:key="item.id"
:id="item.id"
style="display: none"
>
<div class="iconBox" v-show="show == item.id">
<div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
<div class="iconBox" v-show="item.show">
<img src="@/assets/images/ljx.png" alt="" class="iconImg" />
<div class="ydBox">
<div class="YuanDianText">{{ item.name }}</div>
<div class="ydData" v-for="(val, k) in item.data" :key="k">
<div class="leftData">{{ val.name + ":" }}</div>
<div class="rightData">{{ val.value + " " + val.unit }}</div>
<div class="leftData">{{ val.name + ':' }}</div>
<div class="rightData">{{ val.value + ' ' + val.unit }}</div>
</div>
</div>
</div>
<img
class="YuanDianIcon"
:src="item.icon"
@mouseenter="show = item.id"
@mouseleave="show = ''"
/>
<img class="YuanDianIcon" :src="item.icon" @mouseenter="item.show = true" @mouseleave="item.show = false" />
</div>
</div>
</template>
 
<script setup name="Tunnel">
import { ref, reactive, toRefs, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { Water } from "three/examples/jsm/objects/Water.js";
 
import {
CSS3DRenderer,
CSS3DObject,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import gsap from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";
 
const show = ref("");
import { ref, reactive, toRefs, onMounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { Water } from 'three/examples/jsm/objects/Water.js';
 
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import gsap from 'gsap';
import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
import bus from '@/bus';
 
const show = ref('');
const width = ref(null);
const height = ref(null);
const Camera = ref(null);
const Renderer = ref(null);
const animationFrameId = ref(null);
let Twater = null;
const labelData = ref([
{
name: "静力水准仪",
name: '激光位移计',
id: `YuanDian1`,
position: {
// x: -1400,
x: -900,
y: 30,
z: -140,
},
icon: '/Three/icon/wyj_mx.png',
data: [
{
name: '应变量',
value: '17',
unit: 'με',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
show: false,
},
{
name: '激光位移计',
id: `YuanDian2`,
position: {
// x: -1400,
x: -900,
y: 30,
z: -85,
},
icon: '/Three/icon/wyj_mx.png',
data: [
{
name: '应变量',
value: '17',
unit: 'με',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
show: false,
},
{
name: '静力水准仪',
id: `YuanDian3`,
position: {
x: -1390,
y: 65,
z: -70,
y: -50,
z: -90,
},
icon: "/Three/icon/jlszy_icon.png",
icon: '/Three/icon/jlszy_icon.png',
data: [
{
name: "挠度变化值",
value: "-0.01",
unit: "mm",
},
{
name: "温度",
value: "16.3",
unit: "℃",
name: '挠度变化值',
value: '-0.01',
unit: 'mm',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
},
{
name: "静力水准仪",
id: `YuanDian2`,
name: '静力水准仪',
id: `YuanDian4`,
position: {
x: -1080,
y: 65,
z: -80,
x: -900,
y: -50,
z: -90,
},
icon: "/Three/icon/jlszy_icon.png",
icon: '/Three/icon/jlszy_icon.png',
data: [
{
name: "挠度变化值",
value: "-0.01",
unit: "mm",
},
{
name: "温度",
value: "16.3",
unit: "℃",
name: '挠度变化值',
value: '-0.01',
unit: 'mm',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
},
{
name: "激光位移计",
id: `YuanDian3`,
name: '应变计',
id: `YuanDian5`,
position: {
x: -400,
x: -900,
y: 80,
z: 0,
},
icon: "/Three/icon/wyj_mx.png",
icon: '/Three/icon/ybj_icon.png',
data: [
{
name: "应变量",
value: "17",
unit: "με",
},
{
name: "温度",
value: "16.3",
unit: "℃",
},
],
},
{
name: "激光位移计",
id: `YuanDian4`,
position: {
x: -400,
y: 80,
z: -200,
},
icon: "/Three/icon/wyj_mx.png",
data: [
{
name: "应变量",
value: "17",
unit: "με",
},
{
name: "温度",
value: "16.3",
unit: "℃",
},
],
},
{
name: "应变计",
id: `YuanDian5`,
position: {
x: -1380,
y: 80,
z: 0,
},
icon: "/Three/icon/ybj_icon.png",
data: [
{
name: "应变量",
value: "17",
unit: "με",
},
{
name: "温度",
value: "16.3",
unit: "℃",
name: '应变量',
value: '17',
unit: 'με',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
},
{
name: "裂缝计",
id: `YuanDian6`,
position: {
x: -1350,
x: -900,
y: 80,
z: 0,
z: -210,
},
icon: "/Three/icon/lfj_mx.png",
data: [
{
const initModal = (name, url) => {
const Gltfloader = new GLTFLoader();
var dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
Gltfloader.setDRACOLoader(dracoLoader);
Gltfloader.load(
url,
(gltf) => {
gltf => {
gltf.scene.name = name;
gltf.scene.scale.set(1, 1, 1);
// gltf.scene.position.x = -70;
gltf.scene.position.y = 2;
x: position.x,
y: position.y,
z: position.z,
duration: time,
ease: "power4.out",
ease: 'power4.out',
});
// gsap.to(Camera.value.lookAt, {
// x: lookAt.x,
// y: lookAt.y,
x: lookAt.x,
y: lookAt.y,
z: lookAt.z,
duration: time,
ease: "power4.out",
ease: 'power4.out',
});
};
 
/**
* 初始化渲染器
* 该函数负责创建和配置Three.js的WebGL渲染器,包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
*/
const initRenderer = () => {
width.value = document.getElementById("Tunnel").clientWidth;
height.value = document.getElementById("Tunnel").clientHeight;
width.value = document.getElementById('Tunnel').clientWidth;
height.value = document.getElementById('Tunnel').clientHeight;
Renderer.value = new THREE.WebGLRenderer({
antialias: true,
// alpha: true, //开启alpha
});
*/
const initLabelRenderer = () => {
LabelRenderer.value = new CSS3DRenderer();
LabelRenderer.value.setSize(width.value, height.value);
LabelRenderer.value.domElement.style.position = "absolute";
LabelRenderer.value.domElement.style.top = "0px";
LabelRenderer.value.domElement.style.position = 'absolute';
LabelRenderer.value.domElement.style.top = '0px';
threeDom.value.appendChild(LabelRenderer.value.domElement);
// LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
};
 
* 初始化摄像机
* 创建一个透视摄像机,并设置其位置
*/
const initCamera = () => {
Camera.value = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
4000
);
Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
Camera.value.position.set(500, 500, 500);
};
 
/**
Controls.value.maxDistance = 3000;
// 是否开启右键拖拽
Controls.value.enablePan = true;
// AxesHelper:辅助观察的坐标系
// const axesHelper = new THREE.AxesHelper(3000);
// Scene.add(axesHelper);
const axesHelper = new THREE.AxesHelper(3000);
Scene.add(axesHelper);
};
 
/**
* 初始化灯光
// const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
// // directionalLight.position.set(-2500, 1, 1);
// Scene.add(directionalLight);
// 创建环境光
const ambientLight = new THREE.AmbientLight("#ffffff", 0.5);
const ambientLight = new THREE.AmbientLight('#ffffff', 0.5);
ambientLight.visible = true;
// const ambientLight = new THREE.AmbientLight('#1784f9', 0.8);
Scene.add(ambientLight);
// 创建平行光辅助线
// Scene.environment = envMap;
// // Scene.background = envMap;
// pmremGenerator.dispose();
// });
new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
new THREE.TextureLoader().load('/Gltf/bg.png', function (texture) {
Scene.background = texture;
});
};
 
updateLabelOrientation(Camera.value.position);
Renderer.value.render(Scene, Camera.value);
LabelRenderer.value.render(Scene, Camera.value);
const delta = clock.getDelta();
console.log(Camera.value);
// 如需调试请打开这个获取Camera,Controls 的值
console.log('Camera.value', Camera.value);
console.log('Controls.value', Controls.value);
};
 
// 创建气泡窗
function createLable() {
labelData.value.forEach((item, index) => {
let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
if (labelCSS3D === undefined) {
let lableDiv = document.getElementById(`YuanDian${index + 1}`);
lableDiv.style.display = "block";
lableDiv.style.display = 'block';
labelCSS3D = new CSS3DObject(lableDiv);
labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
// labelCSS3D.scale.set(0.1, 0.1, 0.1);
labelCSS3D.scale.set(3, 3, 3);
}
});
}
 
const flyTo = data => {
// 静立水准仪
if (data.name[0] == '激光位移计') {
// 摄像机位置
gsap.to(Camera.value.position, {
x: -1509.9225299741292,
y: 437.8471459592194,
z: 345.1272978647253,
duration: 3,
ease: 'power4.out',
});
// 视角
gsap.to(Controls.value.target, {
x: -148.03951167756108,
y: -406.06002918439316,
z: -648.358072973929,
duration: 3,
ease: 'power4.out',
});
} else if (data.name[0] == '静力水准仪') {
// 摄像机位置
gsap.to(Camera.value.position, {
x: -1797.8251896016222,
y: 191.14387148699308,
z: 635.4949495785738,
duration: 3,
ease: 'power4.out',
});
// 视角
gsap.to(Controls.value.target, {
x: -318.0579715399841,
y: 35.607933619702905,
z: -983.3798167321406,
duration: 3,
ease: 'power4.out',
});
} else if (data.name.includes('应变计')) {
gsap.to(Camera.value.position, {
x: -1694.6408790629657,
y: 259.7822136553308,
z: 583.3976961218505,
duration: 3,
ease: 'power4.out',
});
gsap.to(Controls.value.target, {
x: -546.8674967113623,
y: 24.916489480624683,
z: -409.17274087310204,
duration: 3,
ease: 'power4.out',
});
}else if (data.name.includes('裂缝计')) {
gsap.to(Camera.value.position, {
x: -1530.357885036637,
y: 356.99171737793193,
z: 332.61457706089254,
duration: 3,
ease: 'power4.out',
});
gsap.to(Controls.value.target, {
x: -80.11715403668808,
y: -84.77688943101725,
z: -787.9032398615595,
duration: 3,
ease: 'power4.out',
});
}
 
// 打开弹窗
labelData.value.forEach(element => {
// if (element.name == data.name[0]) {
if (data.name.includes(element.name)) {
element.show = true;
} else {
element.show = false;
}
});
};
 
onBeforeMount(() => {
// initGltfFloor();
// initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
initModal(
"yjlSD",
"https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/yanan/yjlSD3.gltf"
);
initModal('yjlSD', 'https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/yanan/yjlSD3.gltf');
// 共同弹窗触发事件
bus.on('Tunnel_flyTo', params => {
// 打开弹窗
flyTo(params);
});
});
onMounted(() => {
nextTick(() => {
if (document.readyState === "complete") {
if (document.readyState === 'complete') {
createLable();
// createWaterLevel();
}
});
Render();
});
 
onBeforeUnmount(() => {
bus.off('Tunnel_flyTo');
// document.removeEventListener('click', meshOnClick);
// window.removeEventListener("resize", onWindowResize, false);
 
Scene.traverse((e) => {
Scene.traverse(e => {
if (e.BufferGeometry) e.BufferGeometry.dispose();
if (e.material) {
if (Array.isArray(e.material)) {
e.material.forEach((m) => {
e.material.forEach(m => {
m.dispose();
});
} else {
e.material.dispose();
left: calc(50% + 19px);
bottom: 12px;
width: 45px;
// height: 26px;
background: linear-gradient(
0deg,
rgba(12, 54, 92, 0.6) 0%,
rgba(12, 54, 92, 0.6) 100%
);
background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
border-radius: 2px;
border: 1px solid #04d8ff;
.ydData {
display: flex;
// cursor: pointer;
pointer-events: none;
font-size: 3px;
text-align: center;
background: linear-gradient(
90deg,
rgba(4, 216, 255, 0.8) 0%,
rgba(4, 216, 255, 0.2) 100%
);
background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
}
 
.YuanDianIcon {
z-index: 999;
View
468
src/views/oneMap/BIM/WangJiaPIng.vue
<template>
<div id="WangJiaPIng" ref="threeDom">
<div
class="YuanDian"
v-for="(item, i) in labelData"
:key="item.id"
:id="item.id"
style="display: none"
>
<div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
<div class="iconBox" v-show="item.show">
<img src="@/assets/images/ljx.png" alt="" class="iconImg" />
<div class="ydBox">
<div class="YuanDianText">{{ item.name }}</div>
<div class="ydData" v-for="(val, k) in item.data" :key="k">
<div class="leftData">{{ val.name + ":" }}</div>
<div class="rightData">{{ val.value + " " + val.unit }}</div>
<div class="leftData">{{ val.name + ':' }}</div>
<div class="rightData">{{ val.value + ' ' + val.unit }}</div>
</div>
</div>
</div>
<img
class="YuanDianIcon"
:src="item.icon"
@mouseenter="item.show = true"
@mouseleave="item.show = false"
/>
<img class="YuanDianIcon" :src="item.icon" @mouseenter="item.show = true" @mouseleave="item.show = false" />
</div>
</div>
</template>
 
<script setup name="WangJiaPIng">
import { ref, reactive, toRefs, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { Water } from "three/examples/jsm/objects/Water.js";
 
import {
CSS3DRenderer,
CSS3DObject,
} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import gsap from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";
import bus from "@/bus";
import { ref, reactive, toRefs, onMounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { Water } from 'three/examples/jsm/objects/Water.js';
 
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import gsap from 'gsap';
import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
import bus from '@/bus';
const AllData = reactive({});
 
const show = ref("");
const show = ref('');
const width = ref(null);
const height = ref(null);
const Camera = ref(null);
const Renderer = ref(null);
const animationFrameId = ref(null);
let Twater = null;
const labelData = ref([
{
name: "风速风向仪",
name: '静力水准仪',
id: `YuanDian1`,
position: {
x: 0,
y: 0,
z: 2.5,
z: -0.8,
},
icon: "/Three/icon/fsfx_icon.png",
icon: '/Three/icon/jlszy_icon.png',
data: [
{
name: "方向",
value: "东北风",
unit: "",
},
{
name: "风速",
value: "1.3",
unit: "m/s",
name: '挠度变化值',
value: '-0.01',
unit: 'mm',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
show: false,
},
{
name: "静力水准仪",
name: '静力水准仪',
id: `YuanDian2`,
position: {
x: -46,
x: 40,
y: 0,
z: 2.5,
z: -0.8,
},
icon: "/Three/icon/jlszy_icon.png",
icon: '/Three/icon/jlszy_icon.png',
data: [
{
name: "挠度变化值",
value: "-0.01",
unit: "mm",
},
{
name: "温度",
value: "16.3",
unit: "℃",
name: '挠度变化值',
value: '-0.01',
unit: 'mm',
},
{
name: '温度',
value: '16.3',
unit: '℃',
},
],
show: false,
},
{
name: "静力水准仪",
name: "应变计",
id: `YuanDian3`,
position: {
x: -46,
x: -37,
y: 0,
z: -12.6,
z: -0.2,
},
icon: "/Three/icon/jlszy_icon.png",
icon: "/Three/icon/ybj_icon.png",
data: [
{
name: "挠度变化值",
value: "-0.01",
unit: "mm",
name: "应变量",
value: "17",
unit: "με",
},
{
name: "温度",
value: "16.3",
{
name: "应变计",
id: `YuanDian4`,
position: {
x: 0,
y: 7.5,
z: 0,
x: 37,
y: 0,
z: -0.2,
},
icon: "/Three/icon/ybj_icon.png",
data: [
{
{
name: "温度",
value: "16.3",
unit: "℃",
},
],
show: false,
},
{
name: "应变计",
id: `YuanDian5`,
position: {
x: 0,
y: 7.5,
z: -10,
},
icon: "/Three/icon/ybj_icon.png",
data: [
{
name: "应变量",
value: "17",
unit: "με",
},
{
name: "温度",
value: "16.3",
unit: "℃",
},
],
show: false,
},
{
name: "加速度计",
id: `YuanDian6`,
position: {
x: 0,
y: 0,
z: -5,
},
icon: "/Three/icon/jsdj_icon.png",
data: [
{
name: "加速度",
value: "1.42",
unit: "mm/s²",
},
{
name: "风速",
value: "1.3",
unit: "m/s",
},
],
show: false,
},
// {
// name: '风速风向仪',
// name: "加速度计",
// id: `YuanDian6`,
// position: {
// x: 0,
// y: 0,
// z: -5,
// },
// icon: "/Three/icon/jsdj_icon.png",
// data: [
// {
// name: "加速度",
// value: "1.42",
// unit: "mm/s²",
// },
// {
// name: "风速",
// value: "1.3",
// unit: "m/s",
// },
// ],
// show: false,
// },
 
// {
// name: "风速风向仪",
// id: `YuanDian1`,
// position: {
// x: 0,
// y: 1,
// y: 0,
// z: 2.5,
// },
// OnSrc: '/Three/icon/BJ_On.png',
// OffSrc: '/Three/icon/BJ_Off.png',
// icon: '/Three/icon/fsfx_icon.png',
// status: false,
// boxShow: true,
// value1: '--',
// value2: '--',
// value3: '--',
// deviceCode: '',
// stCode: 'HP0104201130000469',
// },
// {
// name: "二号泵机",
// id: `YuanDian2`,
// position: {
// x: 3,
// y: 230,
// z: -180,
// },
// OnSrc: "/Three/icon/BJ_On.png",
// OffSrc: "/Three/icon/BJ_Off.png",
// status: false,
// boxShow: true,
// value1: "--",
// value2: "--",
// value3: "--",
// deviceCode: "",
// stCode: "HP0104201130000469",
// },
// {
// name: "三号泵机",
// id: `YuanDian3`,
// position: {
// x: 195,
// y: 230,
// z: -180,
// },
// OnSrc: "/Three/icon/BJ_On.png",
// OffSrc: "/Three/icon/BJ_Off.png",
// status: false,
// boxShow: true,
// value1: "--",
// value2: "--",
// value3: "--",
// deviceCode: "",
// stCode: "HP0104201130000469",
// icon: "/Three/icon/fsfx_icon.png",
// data: [
// {
// name: "方向",
// value: "东北风",
// unit: "",
// },
// {
// name: "风速",
// value: "1.3",
// unit: "m/s",
// },
// ],
// show: false,
// },
]);
const deviceCode = ref(null);
const stCode = ref(null);
const initModal = (name, url) => {
const Gltfloader = new GLTFLoader();
var dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
Gltfloader.setDRACOLoader(dracoLoader);
Gltfloader.load(
url,
(gltf) => {
gltf => {
gltf.scene.name = name;
gltf.scene.scale.set(1, 1, 1);
// gltf.scene.position.x = -70;
gltf.scene.position.y = 2;
x: position.x,
y: position.y,
z: position.z,
duration: time,
ease: "power4.out",
ease: 'power4.out',
});
// gsap.to(Camera.value.lookAt, {
// x: lookAt.x,
// y: lookAt.y,
x: lookAt.x,
y: lookAt.y,
z: lookAt.z,
duration: time,
ease: "power4.out",
ease: 'power4.out',
});
};
 
/**
* 初始化渲染器
* 该函数负责创建和配置Three.js的WebGL渲染器,包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
*/
const initRenderer = () => {
width.value = document.getElementById("WangJiaPIng").clientWidth;
height.value = document.getElementById("WangJiaPIng").clientHeight;
width.value = document.getElementById('WangJiaPIng').clientWidth;
height.value = document.getElementById('WangJiaPIng').clientHeight;
Renderer.value = new THREE.WebGLRenderer({
antialias: true,
// alpha: true, //开启alpha
});
*/
const initLabelRenderer = () => {
LabelRenderer.value = new CSS3DRenderer();
LabelRenderer.value.setSize(width.value, height.value);
LabelRenderer.value.domElement.style.position = "absolute";
LabelRenderer.value.domElement.style.top = "0px";
LabelRenderer.value.domElement.style.position = 'absolute';
LabelRenderer.value.domElement.style.top = '0px';
threeDom.value.appendChild(LabelRenderer.value.domElement);
// LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
};
 
* 初始化摄像机
* 创建一个透视摄像机,并设置其位置
*/
const initCamera = () => {
Camera.value = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
4000
);
Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
Camera.value.position.set(500, 500, 500);
};
 
/**
*/
const initSky = () => {
var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
pmremGenerator.compileEquirectangularShader();
new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
const envMap = pmremGenerator.fromEquirectangular(texture).texture;
envMap.isPmremTexture = true;
Scene.environment = envMap;
Scene.background = envMap;
Renderer.value.render(Scene, Camera.value);
LabelRenderer.value.render(Scene, Camera.value);
const delta = clock.getDelta();
// 如需调试请打开这个获取Camera,Controls 的值
console.log("Camera.value", Camera.value);
console.log("Controls.value", Controls.value);
console.log('Camera.value', Camera.value);
console.log('Controls.value', Controls.value);
};
 
// 创建气泡窗
function createLable() {
labelData.value.forEach((item, index) => {
let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
if (labelCSS3D === undefined) {
let lableDiv = document.getElementById(`YuanDian${index + 1}`);
lableDiv.style.display = "block";
lableDiv.style.display = 'block';
labelCSS3D = new CSS3DObject(lableDiv);
labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
labelCSS3D.scale.set(0.1, 0.1, 0.1);
labelCSS3D.name = `YuanDian${index + 1}`;
labelCSS3D.rotation.y = angle; // 调整角度使其始终面向相机
}
});
}
const flyTo = (data) => {
const flyTo = data => {
// 静立水准仪
if (data.name[0] == "静力水准仪") {
if (data.name[0] == '静力水准仪') {
// 摄像机位置
gsap.to(Camera.value.position, {
x: -69.16984920750228,
y: 9.22906292776404,
z: 14.97197297303164,
x: -17.414766616979897,
y: 7.132760656412787,
z: 23.413620521050024,
// x: -69.16984920750228,
// y: 9.22906292776404,
// z: 14.97197297303164,
duration: 3,
ease: "power4.out",
ease: 'power4.out',
});
// 视角
gsap.to(Controls.value.target, {
x: -30.064052350817732,
y: -1.2146002003091534,
z: -14.382184358955339,
x: 12.660351499015919,
y: 3.159510377176017,
z: 0.8474660132082192,
duration: 3,
ease: "power4.out",
ease: 'power4.out',
});
} else if (data.name[0] == "应变计") {
} else if (data.name[0] == '应变计') {
// 摄像机位置
gsap.to(Camera.value.position, {
x: -18.741902596516276,
y: 11.41010130909887,
z: 8.418282711965766,
x: -49.48316713595012,
y: 7.308749802511068,
z: 14.904389905294007,
duration: 3,
ease: "power4.out",
ease: 'power4.out',
});
// 视角
gsap.to(Controls.value.target, {
x: 8.466340266349222,
y: 7.3984913282701665,
z: -5.438067100513153,
x: 29.03625918562505,
y: -0.3313374072727649,
z: -29.291435662949137,
duration: 3,
ease: "power4.out",
ease: 'power4.out',
});
} else if (data.name[0] == "加速度计") {
gsap.to(Camera.value.position, {
x: -17.287720948075602,
y: 8.016773260004873,
z: 11.57619028778769,
duration: 3,
ease: "power4.out",
});
gsap.to(Controls.value.target, {
x: 4.538970140099083,
y: 2.881636781852132,
z: -8.354337289076433,
duration: 3,
ease: "power4.out",
});
} else if (data.name[0] == '加速度计') {
// gsap.to(Camera.value.position, {
// x: -17.287720948075602,
// y: 8.016773260004873,
// z: 11.57619028778769,
// duration: 3,
// ease: 'power4.out',
// });
// gsap.to(Controls.value.target, {
// x: 4.538970140099083,
// y: 2.881636781852132,
// z: -8.354337289076433,
// duration: 3,
// ease: 'power4.out',
// });
}
 
// 打开弹窗
labelData.value.forEach((element) => {
labelData.value.forEach(element => {
if (element.name == data.name[0]) {
element.show = true;
} else {
element.show = false;
// };
onBeforeMount(() => {
// initGltfFloor();
// initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
initModal(
"daqiao",
"https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/yanan/daqiao2.gltf"
);
initModal('daqiao', 'https://newfiber-cloud-1255570142.cos.ap-chengdu.myqcloud.com/yanan/daqiao2.gltf');
// 共同弹窗触发事件
bus.on("WJP_BIM_flyTo", (params) => {
bus.on('WJP_BIM_flyTo', params => {
// 打开弹窗
flyTo(params);
});
});
onMounted(() => {
nextTick(() => {
if (document.readyState === "complete") {
if (document.readyState === 'complete') {
createLable();
// createWaterLevel();
}
});
// window.addEventListener("click", BIMClick, false);
});
 
onBeforeUnmount(() => {
bus.off("WJP_BIM_flyTo");
bus.off('WJP_BIM_flyTo');
// window.removeEventListener("click", BIMClick);
 
// document.removeEventListener('click', meshOnClick);
// window.removeEventListener("resize", onWindowResize, false);
 
Scene.traverse((e) => {
Scene.traverse(e => {
if (e.BufferGeometry) e.BufferGeometry.dispose();
if (e.material) {
if (Array.isArray(e.material)) {
e.material.forEach((m) => {
e.material.forEach(m => {
m.dispose();
});
} else {
e.material.dispose();
left: calc(50% + 19px);
bottom: 8px;
width: 45px;
// height: 26px;
background: linear-gradient(
0deg,
rgba(12, 54, 92, 0.6) 0%,
rgba(12, 54, 92, 0.6) 100%
);
background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
border-radius: 2px;
border: 1px solid #04d8ff;
.ydData {
display: flex;
// cursor: pointer;
pointer-events: none;
font-size: 3px;
text-align: center;
background: linear-gradient(
90deg,
rgba(4, 216, 255, 0.8) 0%,
rgba(4, 216, 255, 0.2) 100%
);
background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
}
 
.YuanDianIcon {
width: 10px;
View
src/views/oneMap/smartBridge/LeftBox.vue
View
src/views/oneMap/smartTunnel/LeftBox.vue