唐润平: 传感器添加删除、标签文字设置、双击进入视角、双击空白回退视角

2023-12-16 03:58:36 +08:00
parent dcc92b3c77
commit ae6a305515
9 changed files with 243 additions and 189 deletions
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js
@@ -1,32 +1,56 @@
 export function handleLClick(targetPoint) {
-  return;
+  // 保存进入状态
+  this._saveState();
  this.clearTagsObj();
+  // 全局临时标记该选中的模型;
+  this.targetPoint = targetPoint;
  const worldPosition = new this.THREE.Vector3();
  //获取附着点的世界坐标系
  targetPoint.getWorldPosition(worldPosition);
  this._checkAnimation(worldPosition);
-  // 显示左键属性栏
-  this.tag2CSS2DObj.element.style.display = "block";
+
  // 设置标签位置
-  // this.tag2CSS2DObj.position.set(
-  //   worldPosition.x,
-  //   worldPosition.y,
-  //   worldPosition.z
-  // );
-  // 标签定位
-  this.tag2CSS2DObj.translateY(-15);
-  this.tag2CSS2DObj.translateX(15);
-  this.scene.add(this.tag2CSS2DObj);
-  intoAnimation.call(this, targetPoint);
-  //调用该函数回调作用返回给组件操作 very important-----
-  this.displayDevInfo(targetPoint);
+  this.tag3CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+  this.isControlOrbit(false);
+  this.position = worldPosition;
+  if (/tr$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this, 4.31, -2.55, -11);
+  } else if (/tl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-3);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-5);
+    intoAnimation.call(this, -4.31, -2.55, -11);
+  } else if (/tc$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(0);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(-6);
+    intoAnimation.call(this, 0, -2.55, -11);
+  } else if (/br$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this, 4.31, 5, -11);
+  } else if (/bl$/.test(targetPoint.name)) {
+    this.tag3CSS2DObj.translateX(-2);
+    this.tag3CSS2DObj.translateZ(10);
+    this.tag3CSS2DObj.translateY(3);
+    intoAnimation.call(this, -4.31, 5, -11);
+  }
+  this.scene.add(this.tag3CSS2DObj);
+  // 返回给编辑组件的回调函数
+  this.editDev(targetPoint);
 }

-// 视角进入动画
-function intoAnimation(targetPoint) {
-  const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
+function intoAnimation(x = -10, y = 3, z = -12) {
+  const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
  const positionOBj = this.camera.position;
-
  const start = this.orbitControls.target;
  this.intoPointAnimation = new this.TWEEN.Tween({
    x: positionOBj.x,
@@ -35,26 +59,33 @@ function intoAnimation(targetPoint) {
    xTarget: start.x,
    yTarget: start.y,
    zTarget: start.z,
+    ctlTargetX: 0,
+    ctlTargetY: 0,
+    ctlTargetZ: 0,
  });
-
  this.intoPointAnimation.to(
    {
-      x: worldP.x + 20,
-      y: worldP.y + 5,
-      z: worldP.z + 50,
-      xTarget: worldP.x,
-      yTarget: worldP.y,
-      zTarget: worldP.z,
+      x: worldP.x + x,
+      y: worldP.y + y,
+      z: worldP.z + z,
+      xTarget: -5,
+      yTarget: 8.814,
+      zTarget: worldP.z + 30,
+      ctlTargetX: 0,
+      ctlTargetY: 0,
+      ctlTargetZ: 120,
    },
-    600
+    500
  );
  this.intoPointAnimation.start();
  this.intoPointAnimation.onUpdate((obj) => {
    this.camera.position.set(obj.x, obj.y, obj.z);
    this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
+    // this.orbitControls.target.set(obj.x, obj.y, -obj.z);
    this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
  });
  this.intoPointAnimation.onComplete(() => {
-    this.camera.lookAt(worldP.x, worldP.y, worldP.z);
+    this.tag3CSS2DObj.element.style.opacity = "1";
+    this.tag3CSS2DObj.element.style.display = "block";
  });
 }
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
@@ -1,57 +1,33 @@
+import toImg from "../utils/EquipmentTag";
 export function handleRClick(targetPoint) {
-  // 保存进入状态
-  this._saveState();
+  return;
  this.clearTagsObj();
-  // 全局临时标记该选中的模型;
-  this.targetPoint = targetPoint;
  const worldPosition = new this.THREE.Vector3();
  //获取附着点的世界坐标系
  targetPoint.getWorldPosition(worldPosition);
  this._checkAnimation(worldPosition);
  // 显示左键属性栏
-  this.tag3CSS2DObj.element.style.display = "block";
+  this.tag2CSS2DObj.element.style.display = "block";
  // 设置标签位置
-  this.tag3CSS2DObj.position.set(
-    worldPosition.x,
-    worldPosition.y,
-    worldPosition.z
-  );
-  this.isControlOrbit(false);
-  this.position = worldPosition;
-  if (/tr$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(3);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this, 4.31, -2.55, -11);
-  } else if (/tl$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(-3);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this, -4.31, -2.55, -11);
-  } else if (/tc$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(0);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-6);
-    intoAnimation.call(this, 0, -2.55, -11);
-  } else if (/br$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(2);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(3);
-    intoAnimation.call(this, 4.31, 5, -11);
-  } else if (/bl$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(-2);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(3);
-    intoAnimation.call(this, -4.31, 5, -11);
-  }
-
-  // 返回给编辑组件的回调函数
-  this.editDev(targetPoint);
+  // this.tag2CSS2DObj.position.set(
+  //   worldPosition.x,
+  //   worldPosition.y,
+  //   worldPosition.z
+  // );
+  // 标签定位
+  this.tag2CSS2DObj.translateY(-15);
+  this.tag2CSS2DObj.translateX(15);
+  this.scene.add(this.tag2CSS2DObj);
+  intoAnimation.call(this, targetPoint);
+  //调用该函数回调作用返回给组件操作 very important-----
+  this.displayDevInfo(targetPoint);
 }

-function intoAnimation(x = -10, y = 3, z = -12) {
-  const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
+// 视角进入动画
+function intoAnimation(targetPoint) {
+  const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
  const positionOBj = this.camera.position;
+
  const start = this.orbitControls.target;
  this.intoPointAnimation = new this.TWEEN.Tween({
    x: positionOBj.x,
@@ -60,21 +36,16 @@ function intoAnimation(x = -10, y = 3, z = -12) {
    xTarget: start.x,
    yTarget: start.y,
    zTarget: start.z,
-    ctlTargetX: 0,
-    ctlTargetY: 0,
-    ctlTargetZ: 0,
  });
+
  this.intoPointAnimation.to(
    {
-      x: worldP.x + x,
-      y: worldP.y + y,
-      z: worldP.z + z,
-      xTarget: -5,
-      yTarget: 8.814,
-      zTarget: worldP.z + 30,
-      ctlTargetX: 0,
-      ctlTargetY: 0,
-      ctlTargetZ: 120,
+      x: worldP.x + 20,
+      y: worldP.y + 5,
+      z: worldP.z + 50,
+      xTarget: worldP.x,
+      yTarget: worldP.y,
+      zTarget: worldP.z,
    },
    600
  );
@@ -82,10 +53,9 @@ function intoAnimation(x = -10, y = 3, z = -12) {
  this.intoPointAnimation.onUpdate((obj) => {
    this.camera.position.set(obj.x, obj.y, obj.z);
    this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget);
-    // this.orbitControls.target.set(obj.x, obj.y, -obj.z);
    this.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
  });
  this.intoPointAnimation.onComplete(() => {
-    this.scene.add(this.tag3CSS2DObj);
+    this.camera.lookAt(worldP.x, worldP.y, worldP.z);
  });
 }