diff --git a/dist.7z b/dist.7z index 13a89f1..58c9eb4 100644 Binary files a/dist.7z and b/dist.7z differ diff --git a/src/views/bim/bimHome/components/ThreeView2.vue b/src/views/bim/bimHome/components/ThreeView2.vue index 2fa715b..8ad7414 100644 --- a/src/views/bim/bimHome/components/ThreeView2.vue +++ b/src/views/bim/bimHome/components/ThreeView2.vue @@ -9,7 +9,7 @@
{{ isAddLabel ? '添加标签' : '移除标签' }}
-
+
漫游
@@ -19,7 +19,7 @@ import { onMounted, ref,watch } from 'vue'; import * as THREE from 'three'; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; -import { DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js"; +import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js"; import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import TWEEN from "@tweenjs/tween.js"; @@ -37,7 +37,8 @@ onMounted(() => { document.addEventListener("click", onMouseDown); // document.addEventListener("mousemove", onMouseMove); }); -let scene, renderer, camera, controls = true; +let scene, renderer, camera, controls, pointsArr = true; +let i = 1; let mouse = new THREE.Vector2(); let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer const data = reactive({ @@ -51,7 +52,7 @@ Bus.on('clickBuild', (isParent) => { if (!isParent) {// 点击子级 var clickName = bimStore().activateTree.clickName; var Floor = scene.getObjectByName(clickName); - console.log(123, Floor.position); + //投放间坐标 x: 42.6454163 y: 5.36651754 z: -95.03277 //糖化间坐标 x: 27.127655 y: 8.55 z: -6.132766 //原料处理间坐标 x: 27.6954441 y: 10.7530384 z: -37.73485 @@ -99,7 +100,7 @@ const init = () => { //渲染器 renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(window.innerWidth, window.innerHeight); + renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputEncoding = THREE.sRGBEncoding; document.getElementById('gltf').appendChild(renderer.domElement); @@ -169,7 +170,7 @@ const isSelent = (obj) => { } } } - + let selectedObjects = ref([]); let selectBoxByClick, selectBoxByMouseon; var marginLeft = 0; @@ -201,28 +202,26 @@ const onMouseDown = (event) => { mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children, true); - + if (intersects.length > 0) { const clickedObject = intersects[0].object; - // 起点 {x: -1.6464157104492188, y: 2.9064807891845703, z: -11.564851760864258} - // 终点 {x: -1.7519302368164062, y: 6.542750358581543, z: 11.509664535522461} var selectedObject = isSelent(clickedObject); - console.log(selectedObject); - // boxLight(selectedObject); - nearCamera(selectedObject) + console.log(123, selectedObject); + boxLight(selectedObject); + // nearCamera(selectedObject) } } const boxLight = (selectedObject) => { if (selectedObject) { - selectedObjects[0] = selectedObject; - if (selectBoxByClick) { - scene.remove(selectBoxByClick); - } - selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff'); - scene.add(selectBoxByClick); - centerSelectedGroup(selectedObject); + selectedObjects[0] = selectedObject; + if (selectBoxByClick) { + scene.remove(selectBoxByClick); } + selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff'); + scene.add(selectBoxByClick); + centerSelectedGroup(selectedObject); + } } // 居中显示选中 const centerSelectedGroup = (obj) => { @@ -252,24 +251,68 @@ const centerSelectedGroup = (obj) => { // tween1.start() } + // 漫游 -const i = 0; -const roam = (obj) => { - gsap.to(camera.position, { - x: obj.x, - y: obj.y, - z: obj.z, - duration: 2, - ease: "power1.inOut", - onComplete: () => { - // if (i < 1) { - // // 获取第二个点位坐标 - // roam( {x: -1.7519302368164062, y: 6.542750358581543, z: 11.509664535522461}) - // } - // i++; - }, - }); +const roam = () => { + //漫游 + controls.enableDamping = false; // 启用惯性 + controls.dampingFactor = 0.05; // 惯性阻尼,应该介于 0 到 1 之间。 default = 0.25 + controls.screenSpacePanning = false; // 默认的屏幕空间行为。当它控制在真正的三维空间中时使用屏幕空间拖动。default = false + controls.minDistance = 100; + controls.maxDistance = 200; + controls.maxPolarAngle = Math.PI / 2; // 限制atorbit控制操作(禁止摄像机下凹) + // 启用飞行模式,默认轨道 + controls.enablePan = false; // 禁用拖拽pan + controls.enableKeys = true; + controls.keyPanSpeed = 30; // 默认值 7,每按一次 WSAD 键的速度像素量 + controls.enableZoom = false; // 禁用滚轮缩放 + controls.keyRotateSpeed = 90; // 默认值:30,每按一次Q和E的旋转度数 + controls.spaceingFactor = 0.4; //默认值:0.4,每按一次上下左右的速度像素量 + + //漫游坐标 + const path = new THREE.CatmullRomCurve3([ + new THREE.Vector3(-50, 20, 90), // 起始坐标 + new THREE.Vector3(-10, 40, 40), //中间节点 + new THREE.Vector3(0, 0, 0), // 中间节点 + new THREE.Vector3(60, -60, 0), //中间节点 + new THREE.Vector3(90, -40, 60), //中间节点 + new THREE.Vector3(120, 30, 30), //终点 + // //起点 + // new THREE.Vector3(-10, 0, 10), + // //中间节点 + // new THREE.Vector3(-5,10,-10), + // new THREE.Vector3(2, 5, -5), + // //终点 + // new THREE.Vector3(10, 0, 10), + ]); + pointsArr = path.getSpacedPoints(500); + // console.log(pointsArr); + i = 100; + // 设置相机起点, 相机位置:曲线上当前点pointsArr[i] + camera.position.copy(pointsArr[i]); + // 相机观察目标:当前点的下一个点pointsArr[i + 1] + camera.lookAt(pointsArr[i + 1]); + renders(); } +let num = 0; +const renders = () => { + /* angle += 0.01; + // 相机y坐标不变,在XOZ平面上做圆周运动 + camera.position.x = R * Math.sin(angle); + camera.lookAt(0, 0, 0); */ + if (num < pointsArr.length - 1) { + // 相机位置设置在当前点位置 + camera.position.copy(pointsArr[num]); + // 曲线上当前点pointsArr[num]和下一个点pointsArr[num+1]近似模拟当前点曲线切线 + // 设置相机观察点为当前点的下一个点,相机视线和当前点曲线切线重合 + camera.lookAt(pointsArr[num + 1]); + num += 1; //调节速度 + } else { + num = 0 + } + requestAnimationFrame(renders); +}; + let roamdObjects = ref([]); // 返回初始值 const toHomeView = () => { @@ -278,21 +321,21 @@ const toHomeView = () => { // 拉近距离 const nearCamera = (floor) => { controls.reset(); - - // gsap.to(camera.position, { - // x: floor.position.x, - // y: floor.position.y, - // z: floor.position.z, - // duration: 2, - // ease: "power1.inOut", - // onComplete: () => { - // }, - // }); - + + gsap.to(camera.position, { + x: floor.position.x, + y: floor.position.y, + z: floor.position.z, + duration: 2, + ease: "power1.inOut", + onComplete: () => { + }, + }); + } //标签 const setLabel = () => { - if(isAddLabel.value) { + if (isAddLabel.value) { addLabel(); } else { removeLabel(); @@ -334,6 +377,7 @@ const removeLabel = () => { height: 100%; width: 100%; } + .btnGroup { width: 180px; position: absolute; @@ -356,6 +400,7 @@ const removeLabel = () => { margin-top: 10px; } } + .laber_name { width: 120px; height: 90px; diff --git a/src/views/bim/bimHome/components/qqq.vue b/src/views/bim/bimHome/components/qqq.vue new file mode 100644 index 0000000..8c57ece --- /dev/null +++ b/src/views/bim/bimHome/components/qqq.vue @@ -0,0 +1,112 @@ + + + + + + diff --git a/src/views/bim/bimHome/index.vue b/src/views/bim/bimHome/index.vue index 8f3ec54..51c1fc9 100644 --- a/src/views/bim/bimHome/index.vue +++ b/src/views/bim/bimHome/index.vue @@ -49,6 +49,7 @@ 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 ThreeView from './components/qqq.vue'; import DeviceInfoDialog from './components/DeviceInfoDialog.vue'; import RealInfoDialog from './components/RealInfoDialog.vue'; import DeviceDetial from './components/DeviceDetial.vue';