邓洁 : 隧道模型合并

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js

@@ -0,0 +1,71 @@
+export function handleLClick(targetPoint) {
+  this.clearTagsObj();
+  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);
+  displayDevInfo(this, targetPoint);
+  this.scene.add(this.tag2CSS2DObj);
+  intoAnimation.call(this, targetPoint);
+}
+
+function displayDevInfo(context, targetModel) {
+  if (!targetModel.info) {
+    // 因为标签内的内容共同使用所以附着点没有信心则清空信息
+    context.tag2CSS2DObj.element.children[1].children[1].innerHTML = "无";
+    context.tag2CSS2DObj.element.children[2].children[1].innerHTML = "无";
+    return;
+  }
+
+  context.tag2CSS2DObj.element.children[1].children[1].innerHTML =
+    targetModel.info.name;
+  context.tag2CSS2DObj.element.children[2].children[1].innerHTML =
+    targetModel.info.state;
+}
+
+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,
+    y: positionOBj.y,
+    z: positionOBj.z,
+    xTarget: start.x,
+    yTarget: start.y,
+    zTarget: start.z,
+  });
+
+  this.intoPointAnimation.to(
+    {
+      x: worldP.x + 20,
+      y: worldP.y + 5,
+      z: worldP.z + 50,
+      xTarget: worldP.x,
+      yTarget: worldP.y,
+      zTarget: worldP.z,
+    },
+    600
+  );
+  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.xTarget, obj.yTarget, obj.zTarget);
+  });
+  this.intoPointAnimation.onComplete(() => {
+    this.camera.lookAt(worldP.x, worldP.y, worldP.z);
+  });
+}

src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js

@@ -0,0 +1,56 @@
+export function handleRClick(targetPoint) {
+  this.clearTagsObj();
+  // 全局临时标记该选中的模型;
+  this.targetPoint = targetPoint;
+  const worldPosition = new this.THREE.Vector3();
+  //获取附着点的世界坐标系
+  targetPoint.getWorldPosition(worldPosition);
+  this._checkAnimation(worldPosition);
+  // 显示左键属性栏
+  this.tag3CSS2DObj.element.style.display = "block";
+  // 设置标签位置
+  this.tag3CSS2DObj.position.set(
+    worldPosition.x,
+    worldPosition.y,
+    worldPosition.z
+  );
+
+  this.tag3CSS2DObj.translateY(-15);
+  this.tag3CSS2DObj.translateX(15);
+  this.scene.add(this.tag3CSS2DObj);
+
+  intoAnimation.call(this);
+}
+
+function intoAnimation() {
+  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,
+    y: positionOBj.y,
+    z: positionOBj.z,
+    xTarget: start.x,
+    yTarget: start.y,
+    zTarget: start.z,
+  });
+
+  this.intoPointAnimation.to(
+    {
+      x: worldP.x + 20,
+      y: worldP.y + 20,
+      z: worldP.z + 50,
+      xTarget: worldP.x,
+      yTarget: worldP.y,
+      zTarget: worldP.z,
+    },
+    600
+  );
+  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.xTarget, obj.yTarget, obj.zTarget);
+  });
+}