Merge branch 'main' of https://git.shikicc.com/wangqiujuan0808/bw

src/views/bim/bimHome/components/ThreeView2.vue

@@ -9,7 +9,7 @@
             <div class="button" @click="setLabel">
                 {{ isAddLabel ? '添加标签' : '移除标签' }}
             </div>
-            <div class="button" @click="roam({x: -1.6464157104492188, y: 2.9064807891845703, z: -11.564851760864258})">
+            <div class="button" @click="roam()">
                 漫游
             </div>
         </div>
@@ -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);
+        console.log(123, selectedObject);
-        // boxLight(selectedObject);
+        boxLight(selectedObject);
-        nearCamera(selectedObject)
+        // nearCamera(selectedObject)
     }
 }
 
 const boxLight = (selectedObject) => {
     if (selectedObject) {
-            selectedObjects[0] = selectedObject;
+        selectedObjects[0] = selectedObject;
-            if (selectBoxByClick) {
+        if (selectBoxByClick) {
-                scene.remove(selectBoxByClick);
+            scene.remove(selectBoxByClick);
-            }
-            selectBoxByClick = new THREE.BoxHelper(selectedObjects[0], '#00ffff');
-            scene.add(selectBoxByClick);
-            centerSelectedGroup(selectedObject);
         }
+        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 = () => {
-const roam = (obj) => {
+    //漫游
-    gsap.to(camera.position, {
+    controls.enableDamping = false; // 启用惯性
-        x: obj.x,
+    controls.dampingFactor = 0.05; // 惯性阻尼，应该介于 0 到 1 之间。 default = 0.25
-        y: obj.y,
+    controls.screenSpacePanning = false; // 默认的屏幕空间行为。当它控制在真正的三维空间中时使用屏幕空间拖动。default = false
-        z: obj.z,
+    controls.minDistance = 100;
-        duration: 2,
+    controls.maxDistance = 200;
-        ease: "power1.inOut",
+    controls.maxPolarAngle = Math.PI / 2; // 限制atorbit控制操作（禁止摄像机下凹）
-        onComplete: () => {
+    // 启用飞行模式，默认轨道
-            // if (i < 1) {
+    controls.enablePan = false; // 禁用拖拽pan
-            //     // 获取第二个点位坐标
+    controls.enableKeys = true;
-            //     roam( {x: -1.7519302368164062, y: 6.542750358581543, z: 11.509664535522461})
+    controls.keyPanSpeed = 30; // 默认值 7，每按一次 WSAD 键的速度像素量
-            // }
+    controls.enableZoom = false; // 禁用滚轮缩放
-            // i++;
+    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, {
+    gsap.to(camera.position, {
-    //     x: floor.position.x,
+        x: floor.position.x,
-    //     y: floor.position.y,
+        y: floor.position.y,
-    //     z: floor.position.z,
+        z: floor.position.z,
-    //     duration: 2,
+        duration: 2,
-    //     ease: "power1.inOut",
+        ease: "power1.inOut",
-    //     onComplete: () => {
+        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;

src/views/bim/bimHome/components/qqq.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="box4"></div>
+</template>
+
+<script>
+	import * as THREE from 'three';
+	import Stats from 'three/examples/jsm/libs/stats.module';
+	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+	export default{
+		data(){
+			return{
+				scene:null,
+				camera:null,
+				renderer:null,
+				stats:null,
+				pointLight:null,
+				pos:0,
+				curve:null,
+				sphereLightMesh:null,
+			}
+		},
+		methods:{
+			init(){
+				this.scene=new THREE.Scene();//创建场景
+				this.camera=new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);//创建相机
+				this.camera.position.set(0,70,70);//设置相机位置
+				this.camera.lookAt(new THREE.Vector3(0,0,0));//设置相机关注点
+				
+				this.scene.add(new THREE.AxesHelper(20));//添加辅助函数
+				this.pointLight=new THREE.PointLight(0xffffff);
+				this.pointLight.position.set(0,5,5);
+				this.pointLight.name="pointLight";//给灯光命名，用于后期获取灯光对象
+				this.scene.add(this.pointLight);
+				//创建灯
+				let sphereLight=new THREE.SphereGeometry(0.5,50,50);
+				let spLightMaterial=new THREE.MeshLambertMaterial({
+					 color:0xffffff,
+					 emissive:0xffffff
+				})
+				this.sphereLightMesh=new THREE.Mesh(sphereLight,spLightMaterial);
+				this.sphereLightMesh.position.copy(this.pointLight.position);
+				this.scene.add(this.sphereLightMesh);
+				//创建物体
+				let spheregeo=new THREE.SphereGeometry(5,100,100);
+				let sphereMaterial=new THREE.MeshLambertMaterial({
+					 color:new THREE.Color().setHSL(Math.random(),0.5,0.5),
+				})
+				this.scene.add(new THREE.Mesh(spheregeo,sphereMaterial));
+				this.curve = new THREE.CatmullRomCurve3( [
+				    //起点
+				    new THREE.Vector3(-10, 0, 10),
+					 //中间节点
+					new THREE.Vector3(-5,10,-10),
+				    new THREE.Vector3(2, 5, -5),
+				    //终点
+				    new THREE.Vector3(10, 0, 10),
+				  ],
+				  true,
+				);
+				 console.log(this.curve.getPoint( 0.1 ));
+				// 绘制曲线
+				let geometry = new THREE.Geometry();
+				// 初始化曲线的顶点(放样点，数值越大弯曲更光滑)
+				geometry.vertices = this.curve.getSpacedPoints(100);
+				let material = new THREE.LineBasicMaterial({ color:new THREE.Color().setHSL(Math.random(),0.5,0.5) });
+				let curveObject = new THREE.Line(geometry, material);
+				this.scene.add(curveObject);
+				
+				
+				this.renderer=new THREE.WebGLRenderer({antialias:true});//创建渲染器,并打开反锯齿
+				this.renderer.setSize(window.innerWidth,window.innerHeight);//设置渲染的尺寸
+				this.renderer.setClearColor(0x000000);//设置颜色
+				this.renderer.setPixelRatio(window.devicePixelRatio);
+				this.stats=new Stats();
+				let control=new OrbitControls(this.camera,this.renderer.domElement);
+				
+				//挂载
+				document.getElementsByClassName("box4")[0].appendChild(this.stats.domElement);
+				document.getElementsByClassName("box4")[0].appendChild(this.renderer.domElement);
+				window.addEventListener("resize",this.onSize,false);//添加监听事件
+			},
+			run(){
+				requestAnimationFrame(this.run);
+				
+				let pointLight=this.scene.getObjectByName("pointLight");
+				if(this.pos<1){
+					pointLight.position=this.curve.getPointAt(this.pos);//光移动
+					this.sphereLightMesh.position.copy(pointLight.position);//物体跟着光移动
+					this.pos+=0.001;
+				}else{
+					this.pos=0;
+				}
+				
+				this.renderer.render(this.scene,this.camera);
+				this.stats.update();
+			},
+			onSize(){
+				this.camera.aspect=window.innerWidth/window.innerHeight;
+				this.renderer.setSize(window.innerWidth,window.innerHeight);
+				this.camera.updateProjectionMatrix();
+			}
+		},
+		mounted() {
+			this.init();
+			this.run();
+		}
+	}
+</script>
+
+<style>
+</style>
+

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';