odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'trp_dev' (#143) from trp_dev into dev

Browse Source 
Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/143
This commit is contained in:
trp-ironman
2023-12-15 20:32:38 +00:00
parent 828a4fca82 9ff76d31db
commit ae7d15d22b
10 changed files with 327 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/content/tunnelScene/TunnelScene.vue
View File

@@ -74,7 +74,6 @@ async function handleMounted() {
// 给对象初加载设备模型 // 给对象初加载设备模型
demo.initDevicesModel(map); demo.initDevicesModel(map);
console.info("设备模型加载完毕", deviceList);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
@@ -155,22 +154,19 @@ function rClickCallback(demo) {
} }
// 添加设备 // 添加设备
function handleAddEqu(e) { function handleAddEqu(formInfo) {
console.log("添加的设备属性", e); if (!formInfo.equipmentType) {
alert("请选择设备");
return;
}
//表单信息
//这里利用处理请求
demo.addEquipment(targetP, formInfo);
} }
// 删除设备 // 删除设备
async function handleRemoveEqu() { async function handleRemoveEqu() {
// const result = await demo.removeDev(devInfo.meshId); demo.removeEquipment(targetP);
// if (result === "ok") {
// hasDevice.value = false;
// editDevInfo();
// ElMessage({
// message: "删除成功",
// type: "success",
// });
// }
console.log("删除");
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件

36
src/components/content/tunnelScene/editEquComp/editDialog.vue
View File

@@ -55,7 +55,14 @@
<script setup> <script setup>
import InputNum from "./childComps/InputNum.vue"; import InputNum from "./childComps/InputNum.vue";
import { reactive, computed, defineEmits, defineProps, watch } from "vue"; import {
reactive,
computed,
defineEmits,
defineProps,
watch,
nextTick,
} from "vue";
// 定义事件发射器，父组件监听 // 定义事件发射器，父组件监听
const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]); const emit = defineEmits(["cancel", "removeEquipment", "addEquipment"]);
@@ -82,8 +89,8 @@ const equipmentSetting = reactive({
// 设备类型选项参数 // 设备类型选项参数
const options = reactive([ const options = reactive([
{ label: "风机", value: "fan" }, { label: "风机", value: "fan" },
{ label: "风压传感器", value: "windPressure" }, { label: "风压传感器", value: "sensors" },
{ label: "普通传感器", value: "sensors" }, { label: "普通传感器", value: "sensors_2" },
]); ]);
// 设备编号参数 // 设备编号参数
@@ -143,16 +150,19 @@ function removeEquipment() {
// 添加设备 // 添加设备
function addEquipment() { function addEquipment() {
// 处理不合法情况 // // 处理不合法情况
if ( // if (
!equipmentSetting.chooseEquipment || // !equipmentSetting.chooseEquipment ||
!equipmentSetting.equipmentType || // !equipmentSetting.equipmentType ||
!equipmentSetting.threshold // !equipmentSetting.threshold
) { // ) {
alert("选项不能有空"); // alert("选项不能有空");
return; // return;
} // }
emit("addEquipment", equipmentSetting); emit("addEquipment", equipmentSetting);
equipmentSetting.chooseEquipment = "";
equipmentSetting.equipmentType = "";
equipmentSetting.threshold = "";
} }
const equipmentType = { const equipmentType = {
label: String, //传感器类型 label: String, //传感器类型
@@ -184,7 +194,7 @@ const equipment = {
p { p {
width: 388px; width: 388px;
height: 35px; height: 35px;
font-size: 26px; font-size: 24px;
font-family: MicrosoftYaHei; font-family: MicrosoftYaHei;
color: #ffffff; color: #ffffff;
line-height: 35px; line-height: 35px;

68
src/components/content/tunnelScene/sceneClass/demo.js
View File

@@ -17,7 +17,6 @@ export default class Demo {
//设备模型数组 //设备模型数组
deviceModels = []; deviceModels = [];
constructor(three, mountedElement) { constructor(three, mountedElement) {
// 外部引入匿名函数
this._handleLClick = handleLClick; this._handleLClick = handleLClick;
this._handleRClick = handleRClick; this._handleRClick = handleRClick;
this._handleDBLClick = handleDBLClick; this._handleDBLClick = handleDBLClick;
@@ -73,11 +72,6 @@ export default class Demo {
// console.log(this.camera.position); // console.log(this.camera.position);
} }
// 摄像头移动动画
if (this.cameraPositionTween) {
this.cameraPositionTween.update();
}
//html标签渲染 //html标签渲染
if (this.CSS2Renderer) { if (this.CSS2Renderer) {
this.CSS2Renderer.render(this.scene, this.camera); this.CSS2Renderer.render(this.scene, this.camera);
@@ -102,6 +96,11 @@ export default class Demo {
if (this.opacityTween) { if (this.opacityTween) {
this.opacityTween.update(); this.opacityTween.update();
} }
// 双击进入动画
if (this.dblIntoTween) {
this.dblIntoTween.update();
}
} }
// 添加世界坐标系 // 添加世界坐标系
@@ -182,10 +181,9 @@ export default class Demo {
this.renderer.domElement this.renderer.domElement
); );
//初始化轨道控制器 //初始化轨道控制器
this.orbitControls.object.position.set(-29, 18, -50) this.orbitControls.object.position.set(-29, 18, -50);
this.orbitControls.maxPolarAngle = Math.PI * (3.17 / 6); this.orbitControls.maxPolarAngle = (4 * Math.PI) / 7;
this.orbitControls.minPolarAngle = Math.PI * (2 / 6); this.orbitControls.minDistance = 5;
this.orbitControls.minDistance = 19;
this.orbitControls.maxDistance = 87; this.orbitControls.maxDistance = 87;
// 监听控制器变化 // 监听控制器变化
this.orbitControls.addEventListener("end", handleEndChange.bind(this)); this.orbitControls.addEventListener("end", handleEndChange.bind(this));
@@ -284,9 +282,9 @@ export default class Demo {
this.setBoxHelper(intersects[0].object); this.setBoxHelper(intersects[0].object);
// 处理点击左右键事件 // 处理点击左右键事件
if (e.button === 2) { if (e.button === 0) {
this._handleLClick(intersects[0].object); this._handleLClick(intersects[0].object);
} else if (e.button === 0) { } else if (e.button === 2) {
this._handleRClick(intersects[0].object); this._handleRClick(intersects[0].object);
} }
}, 400); }, 400);
@@ -309,19 +307,17 @@ export default class Demo {
this.tagCSS2DObj = new CSS2DObject(this.tagHtml); this.tagCSS2DObj = new CSS2DObject(this.tagHtml);
this.tag2CSS2DObj = new CSS2DObject(this.tag2Html); this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
this.tag3CSS2DObj = new CSS2DObject(this.tag3Html); this.tag3CSS2DObj = new CSS2DObject(this.tag3Html);
// 设置该标签初始化透明
this.tagCSS2DObj.element.style.opacity = "1";
this.tag2CSS2DObj.element.style.opacity = "1";
this.tag3CSS2DObj.element.style.opacity = "1";
this.tagCSS2DObj.element.style.display = "none"; this.tagCSS2DObj.element.style.display = "none";
this.tag2CSS2DObj.element.style.display = "none"; this.tag2CSS2DObj.element.style.display = "none";
this.tag3CSS2DObj.element.style.display = "none"; this.tag3CSS2DObj.element.style.display = "none";
// // 设置该标签初始化透明
// this.tagCSS2DObj.element.style.opacity = "1";
// this.tag2CSS2DObj.element.style.opacity = "1";
this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1); this.tagCSS2DObj.scale.set(0.1, 0.1, 0.1);
this.tag2CSS2DObj.scale.set(0.1, 0.1, 0.1);
this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框 this.tag3CSS2DObj.scale.set(0.02, 0.02, 0.02); //编辑框
this.tag3CSS2DObj.position.set(10, 0, 10); this.tag3CSS2DObj.position.set(10, 0, 10);
this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
} }
clearTagsObj() { clearTagsObj() {
if (this.preDBLModel) { if (this.preDBLModel) {
@@ -330,6 +326,7 @@ export default class Demo {
// 所有标签看不见 // 所有标签看不见
this.scene.remove(this.tag2CSS2DObj); this.scene.remove(this.tag2CSS2DObj);
this.scene.remove(this.tag3CSS2DObj); this.scene.remove(this.tag3CSS2DObj);
this.tag3CSS2DObj.element.style.opacity = "0";
// 删除标记动画 // 删除标记动画
this.scene.remove(this.group); this.scene.remove(this.group);
} }
@@ -357,13 +354,38 @@ export default class Demo {
} }
/** /**
* @param {Map} meshes gltf加载过后的模型数组 * @param {Map} meshes gltf加载过后的模型Map
*/ */
initDevicesModel(equMap) { initDevicesModel(equMap) {
// // 初始化风机
this.equMap = equMap;
console.log(equMap); this.equMap = equMap;
// 初始化风机颜色
this.equMap.get("equ_fan").traverse((v) => {
v.material = new this.THREE.MeshBasicMaterial();
v.material.color = new this.THREE.Color("#191a05");
});
// 初其他传感器机颜色
this.equMap.get("equ_sensors").scale.set(0.1, 0.1, 0.1);
this.equMap.get("equ_sensors").traverse((v) => {
v.material = new this.THREE.MeshBasicMaterial();
v.material.color = new this.THREE.Color("#7e7b7b");
});
// 初始标签面板
const tag = new this.THREE.Mesh(
new this.THREE.PlaneGeometry(10, 4),
new this.THREE.MeshBasicMaterial({ color: "white" })
);
this.equMap.get("equ_sensors").add(tag);
// const axesHelper = new this.THREE.AxesHelper(100);
// this.equMap.get("equ_sensors").add(axesHelper);
tag.name = "tag";
tag.rotation.x = Math.PI / 2;
tag.rotation.z = Math.PI / 2; //旋转这里改变文字顺序
tag.rotation.y = Math.PI;
tag.translateZ(2.0);
} }
/** /**

96
src/components/content/tunnelScene/sceneClass/editEquipment/index.js
View File

@@ -1,10 +1,90 @@
function addEquipment(targetPoint, EquType) { import EquipmentTag from "../utils/EquipmentTag";
const equMesh = this.equMap.get("equ_fan").clone(); /**
console.log(equMesh); *
this.scene.add(equMesh); * @param {Mesh} targetPoint
* @param {String} equType "fan" "sensors"
*/
function addEquipment(targetPoint, formInfo) {
if (targetPoint.hasDevice) {
alert("已添加设备");
return;
}
switch (formInfo.equipmentType) {
case "fan":
handleFanEqu.call(this, targetPoint);
break;
case "sensors":
case "sensors_2":
handleOtherEqu.call(this, targetPoint, formInfo.equipmentType);
break;
default:
break;
}
targetPoint.hasDevice = true;
// 标识设备信息
this.clearTagsObj();
}
// 其他传感器
function handleOtherEqu(targetPoint, EqeName) {
const equMesh = this.equMap.get("equ_sensors").clone();
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
equMesh.position.copy(worldP);
//设备添加标签
const tag = EquipmentTag(EqeName === "sensors" ? "风压传感器" : "普通传感器");
equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -(3 * Math.PI) / 4;
targetPoint.scale.set(0.03, 0.03, 0.03);
equMesh.getObjectByName("tag").rotation.z += Math.PI; ///注意在原来的基础上加
} else if (/tl$/.test(targetPoint.name)) {
equMesh.rotation.z = -(5 * Math.PI) / 4;
targetPoint.scale.set(0.03, 0.03, 0.03);
} else if (/tc$/.test(targetPoint.name)) {
equMesh.rotation.z = Math.PI;
targetPoint.scale.set(0.03, 0.03, 0.03);
} else if (/br$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2;
equMesh.translateX(-1);
equMesh.getObjectByName("tag").rotation.z += Math.PI; ///注意在原来的基础上加
targetPoint.scale.set(0.03, 0.03, 0.075);
} else if (/bl$/.test(targetPoint.name)) {
equMesh.rotation.z = Math.PI / 2;
equMesh.translateX(1);
targetPoint.scale.set(0.03, 0.03, 0.075);
}
this.scene.add(equMesh);
targetPoint.visible = false;
// 保存该设备id，后期直接从附附着点进行删除
targetPoint.info = {
id: equMesh.id,
};
}
// 风机
function handleFanEqu(targetPoint, speed = 0) {
const equMesh = this.equMap.get("equ_fan").clone();
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
equMesh.position.copy(worldP);
equMesh.translateY(-0.6);
this.scene.add(equMesh);
targetPoint.visible = false;
// 放大附着点方便选中风机的范围
targetPoint.scale.set(0.06, 0.06, 0.06);
// 保存该设备id，后期直接从附附着点进行删除
targetPoint.info = {
id: equMesh.id, //模型在场景id
};
}
function removeEquipment(targetPoint) {
if (!targetPoint.hasDevice) return;
const mesh = this.scene.getObjectById(targetPoint.info.id);
this.scene.remove(mesh);
targetPoint.visible = true;
targetPoint.hasDevice = false;
targetPoint.scale.set(0.01, 0.01, 0.01);
} }
// 处理设备添加位置
function handleOtherEqu() {}
function handleFanEqu() {}
function removeEquipment(targetPoint) {}
export { addEquipment, removeEquipment }; export { addEquipment, removeEquipment };

103
src/components/content/tunnelScene/sceneClass/handleDBLclick/index.js
View File

@@ -1,68 +1,45 @@
export function handleDBLClick(e) { export function handleDBLClick(targetPoint) {
return; if (!targetPoint.hasDevice) return;
this._saveSate();
// 注意位置不能改变
this.clearTagsObj(); this.clearTagsObj();
this._saveState();
this.preDBLModel = e; const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
//获取模型世界坐标位置 const viewAng = viewAngle(targetPoint.name);
const modelP = new this.THREE.Vector3(); this.dblIntoTween = new this.TWEEN.Tween({
e.getWorldPosition(modelP); x: this.camera.position.x,
this._checkAnimation(modelP); y: this.camera.position.y,
z: this.camera.position.z,
this.setBoxHelper(e); targetX: this.orbitControls.target.x,
if (/l$/.test(e.name)) { targetY: this.orbitControls.target.y,
//匹配单个隧道左边附着点 targetZ: this.orbitControls.target.z,
modelP.x += 5; });
modelP.y -= 5; this.dblIntoTween.to(
modelP.z += 10; {
x: worldP.x + viewAng.x,
this.orbitControls.target = modelP; y: worldP.y + viewAng.y,
this.cameraPositionTween = new this.TWEEN.Tween(this.camera.position); z: worldP.z + viewAng.z,
this.cameraPositionTween.to(modelP, 400); targetX: worldP.x,
this.cameraPositionTween.start(); targetY: worldP.y,
targetZ: worldP.z,
modelP.x -= 4; },
modelP.y += 4; 500
modelP.z -= 20; );
} else if (/r$/.test(e.name)) { this.dblIntoTween.start();
//匹配单个隧道右边附着点 this.dblIntoTween.onUpdate((obj) => {
modelP.x -= 5; this.camera.position.set(obj.x, obj.y, obj.z);
modelP.y -= 5; this.camera.lookAt(obj.targetX, obj.targetY, obj.targetZ);
modelP.z += 10; this.orbitControls.target.set(obj.targetX, obj.targetY, obj.targetZ);
this.orbitControls.target = modelP;
this.cameraPositionTween = new this.TWEEN.Tween(this.camera.position);
this.cameraPositionTween.to(modelP, 400);
this.cameraPositionTween.start();
modelP.x += 4;
modelP.y += 4;
modelP.z -= 20;
}
if (this.preTargetModel) {
this.preTargetModel.remove(this.tagCSS2DObj);
}
this.cameraPositionTween.onComplete(() => {
this.orbitControls.target = modelP;
this.camera.lookAt(modelP);
// 动画完成过后自动弹出标签
autoOutTag(e, this);
this.listenerEventFlag = false;
// 返回个组件
this.displayDevInfo(e);
}); });
} }
function viewAngle(targetPointName) {
// 视角移动过去自动弹出标签 if (/tr$/.test(targetPointName)) {
function autoOutTag(targetModel, context) { return { x: 5, y: -1, z: 1 };
// 判断是否纯在设备 } else if (/tl$/.test(targetPointName)) {
// if (targetModel.hasDevice) return; return { x: -5, y: -1, z: 1 };
context.preTargetModel = targetModel; } else if (/tc$/.test(targetPointName)) {
context.tagCSS2DObj.element.style.display = "block"; return { x: -1, y: -1, z: -9 };
} else if (/br$/.test(targetPointName)) {
targetModel.add(context.tagCSS2DObj); return { x: 5, y: 1, z: 1 };
if (/l$/.test(targetModel.name)) { } else if (/bl$/.test(targetPointName)) {
context.tagCSS2DObj.position.set(150, 0, 700); return { x: -5, y: 1, z: 1 };
} else if (/r$/.test(targetModel.name)) {
context.tagCSS2DObj.position.set(-150, 0, 700);
} }
} }

1
src/components/content/tunnelScene/sceneClass/handleOrbitControlsChange/index.js
View File

@@ -42,4 +42,5 @@ export function handleEndChange(e) {
// .getObjectByName("point_001_tr") // .getObjectByName("point_001_tr")
// .getWorldPosition(new this.THREE.Vector3()) // .getWorldPosition(new this.THREE.Vector3())
// ); // );
console.log(this.orbitControls.distance);
} }

87
src/components/content/tunnelScene/sceneClass/handleRLclick/handleLclick.js
View File

@@ -1,32 +1,56 @@
export function handleLClick(targetPoint) { export function handleLClick(targetPoint) {
return; // 保存进入状态
this._saveState();
this.clearTagsObj(); this.clearTagsObj();
// 全局临时标记该选中的模型;
this.targetPoint = targetPoint;
const worldPosition = new this.THREE.Vector3(); const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系 //获取附着点的世界坐标系
targetPoint.getWorldPosition(worldPosition); targetPoint.getWorldPosition(worldPosition);
this._checkAnimation(worldPosition); this._checkAnimation(worldPosition);
// 显示左键属性栏
this.tag2CSS2DObj.element.style.display = "block";
// 设置标签位置 // 设置标签位置
// this.tag2CSS2DObj.position.set( this.tag3CSS2DObj.position.set(
// worldPosition.x, worldPosition.x,
// worldPosition.y, worldPosition.y,
// worldPosition.z worldPosition.z
// ); );
// 标签定位 this.isControlOrbit(false);
this.tag2CSS2DObj.translateY(-15); this.position = worldPosition;
this.tag2CSS2DObj.translateX(15); if (/tr$/.test(targetPoint.name)) {
this.scene.add(this.tag2CSS2DObj); this.tag3CSS2DObj.translateX(3);
intoAnimation.call(this, targetPoint); this.tag3CSS2DObj.translateZ(10);
//调用该函数回调作用返回给组件操作 very important----- this.tag3CSS2DObj.translateY(-5);
this.displayDevInfo(targetPoint); 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(x = -10, y = 3, z = -12) {
function intoAnimation(targetPoint) { const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
const positionOBj = this.camera.position; const positionOBj = this.camera.position;
const start = this.orbitControls.target; const start = this.orbitControls.target;
this.intoPointAnimation = new this.TWEEN.Tween({ this.intoPointAnimation = new this.TWEEN.Tween({
x: positionOBj.x, x: positionOBj.x,
@@ -35,26 +59,33 @@ function intoAnimation(targetPoint) {
xTarget: start.x, xTarget: start.x,
yTarget: start.y, yTarget: start.y,
zTarget: start.z, zTarget: start.z,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 0,
}); });
this.intoPointAnimation.to( this.intoPointAnimation.to(
{ {
x: worldP.x + 20, x: worldP.x + x,
y: worldP.y + 5, y: worldP.y + y,
z: worldP.z + 50, z: worldP.z + z,
xTarget: worldP.x, xTarget: -5,
yTarget: worldP.y, yTarget: 8.814,
zTarget: worldP.z, zTarget: worldP.z + 30,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 120,
}, },
600 500
); );
this.intoPointAnimation.start(); this.intoPointAnimation.start();
this.intoPointAnimation.onUpdate((obj) => { this.intoPointAnimation.onUpdate((obj) => {
this.camera.position.set(obj.x, obj.y, obj.z); this.camera.position.set(obj.x, obj.y, obj.z);
this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget); 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.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
}); });
this.intoPointAnimation.onComplete(() => { this.intoPointAnimation.onComplete(() => {
this.camera.lookAt(worldP.x, worldP.y, worldP.z); this.tag3CSS2DObj.element.style.opacity = "1";
this.tag3CSS2DObj.element.style.display = "block";
}); });
} }

84
src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js
View File

@@ -1,57 +1,33 @@
import toImg from "../utils/EquipmentTag";
export function handleRClick(targetPoint) { export function handleRClick(targetPoint) {
// 保存进入状态 return;
this._saveState();
this.clearTagsObj(); this.clearTagsObj();
// 全局临时标记该选中的模型;
this.targetPoint = targetPoint;
const worldPosition = new this.THREE.Vector3(); const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系 //获取附着点的世界坐标系
targetPoint.getWorldPosition(worldPosition); targetPoint.getWorldPosition(worldPosition);
this._checkAnimation(worldPosition); this._checkAnimation(worldPosition);
// 显示左键属性栏 // 显示左键属性栏
this.tag3CSS2DObj.element.style.display = "block"; this.tag2CSS2DObj.element.style.display = "block";
// 设置标签位置 // 设置标签位置
this.tag3CSS2DObj.position.set( // this.tag2CSS2DObj.position.set(
worldPosition.x, // worldPosition.x,
worldPosition.y, // worldPosition.y,
worldPosition.z // worldPosition.z
); // );
this.isControlOrbit(false); // 标签定位
this.position = worldPosition; this.tag2CSS2DObj.translateY(-15);
if (/tr$/.test(targetPoint.name)) { this.tag2CSS2DObj.translateX(15);
this.tag3CSS2DObj.translateX(3); this.scene.add(this.tag2CSS2DObj);
this.tag3CSS2DObj.translateZ(10); intoAnimation.call(this, targetPoint);
this.tag3CSS2DObj.translateY(-5); //调用该函数回调作用返回给组件操作 very important-----
intoAnimation.call(this, 4.31, -2.55, -11); this.displayDevInfo(targetPoint);
} 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);
} }
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 positionOBj = this.camera.position;
const start = this.orbitControls.target; const start = this.orbitControls.target;
this.intoPointAnimation = new this.TWEEN.Tween({ this.intoPointAnimation = new this.TWEEN.Tween({
x: positionOBj.x, x: positionOBj.x,
@@ -60,21 +36,16 @@ function intoAnimation(x = -10, y = 3, z = -12) {
xTarget: start.x, xTarget: start.x,
yTarget: start.y, yTarget: start.y,
zTarget: start.z, zTarget: start.z,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 0,
}); });
this.intoPointAnimation.to( this.intoPointAnimation.to(
{ {
x: worldP.x + x, x: worldP.x + 20,
y: worldP.y + y, y: worldP.y + 5,
z: worldP.z + z, z: worldP.z + 50,
xTarget: -5, xTarget: worldP.x,
yTarget: 8.814, yTarget: worldP.y,
zTarget: worldP.z + 30, zTarget: worldP.z,
ctlTargetX: 0,
ctlTargetY: 0,
ctlTargetZ: 120,
}, },
600 600
); );
@@ -82,10 +53,9 @@ function intoAnimation(x = -10, y = 3, z = -12) {
this.intoPointAnimation.onUpdate((obj) => { this.intoPointAnimation.onUpdate((obj) => {
this.camera.position.set(obj.x, obj.y, obj.z); this.camera.position.set(obj.x, obj.y, obj.z);
this.camera.lookAt(obj.xTarget, obj.yTarget, obj.zTarget); 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.orbitControls.target.set(obj.xTarget, obj.yTarget, obj.zTarget);
}); });
this.intoPointAnimation.onComplete(() => { this.intoPointAnimation.onComplete(() => {
this.scene.add(this.tag3CSS2DObj); this.camera.lookAt(worldP.x, worldP.y, worldP.z);
}); });
} }

11
src/components/content/tunnelScene/utils/toImg.js → src/components/content/tunnelScene/sceneClass/utils/EquipmentTag.js
View File

@@ -1,4 +1,6 @@
import * as THREE from "three";
/** /**
* 返回一个带有文字的几何平面
* @param {String} text 把输入的文字转化为base64的img图片 * @param {String} text 把输入的文字转化为base64的img图片
*/ */
export default function (text, width = 100, height = 50) { export default function (text, width = 100, height = 50) {
@@ -9,7 +11,10 @@ export default function (text, width = 100, height = 50) {
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.font = "30px serif"; ctx.font = "16px serif";
ctx.fillText(text, 0, 30); ctx.fillText(text, (100 - text.length * 16.6) / 2, 30);
return canvas.toDataURL(); const base64 = canvas.toDataURL();
return new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load(base64),
});
} }

31
src/components/content/tunnelScene/sceneClass/viewBack/index.js
View File

@@ -16,14 +16,37 @@ export function saveState() {
export function resetState() { export function resetState() {
if (this.viewSate && this.viewSate.isSave) { if (this.viewSate && this.viewSate.isSave) {
this.viewSate.isSave = false; this.viewSate.isSave = false;
this.orbitControls.enabled = true;
// //恢复原始的镜头指向 // //恢复原始的镜头指向
// this.camera.lookAt(0, 0, 0); // this.camera.lookAt(0, 0, 0);
// this.orbitControls.target.set(0, 0, 0); // this.orbitControls.target.set(0, 0, 0);
//创建动画 //创建动画
this.viewSateResetAnimation = new this.TWEEN.Tween(this.camera.position); this.viewSateResetAnimation = new this.TWEEN.Tween({
this.viewSateResetAnimation.to(this.viewSate.position, 500); x: this.camera.position.x,
y: this.camera.position.y,
z: this.camera.position.z,
tx: this.orbitControls.target.x,
ty: this.orbitControls.target.y,
tz: this.orbitControls.target.z,
});
this.viewSateResetAnimation.to(
{
x: this.viewSate.position.x,
y: this.viewSate.position.y,
z: this.viewSate.position.z,
tx: 0,
ty: 0,
tz: 0,
},
500
);
this.viewSateResetAnimation.start(); this.viewSateResetAnimation.start();
//清空boxHelper this.viewSateResetAnimation.onUpdate((obj) => {
this.scene.remove(this.scene.getObjectByName("boxHelper")); this.camera.position.set(obj.x, obj.y, obj.z);
this.camera.lookAt(obj.tx, obj.ty, obj.tz);
this.orbitControls.target.set(obj.tx, obj.ty, obj.tz);
}),
//清空boxHelper
this.scene.remove(this.scene.getObjectByName("boxHelper"));
} }
} }