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

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

Browse Source
This commit is contained in:
trp
2023-12-16 03:58:36 +08:00
parent dcc92b3c77
commit ae6a305515
9 changed files with 243 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
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);
} }
@@ -156,6 +155,10 @@ function rClickCallback(demo) {
// 添加设备 // 添加设备
function handleAddEqu(formInfo) { function handleAddEqu(formInfo) {
if (!formInfo.equipmentType) {
alert("请选择设备");
return;
}
//表单信息 //表单信息
//这里利用处理请求 //这里利用处理请求
demo.addEquipment(targetP, formInfo); demo.addEquipment(targetP, formInfo);
@@ -163,16 +166,7 @@ function handleAddEqu(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("删除");
} }
// 处理取消关闭编辑框事件 // 处理取消关闭编辑框事件

11
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"]);
@@ -83,7 +90,7 @@ const equipmentSetting = reactive({
const options = reactive([ const options = reactive([
{ label: "风机", value: "fan" }, { label: "风机", value: "fan" },
{ label: "风压传感器", value: "sensors" }, { label: "风压传感器", value: "sensors" },
{ label: "普通传感器", value: "sensors" }, { label: "普通传感器", value: "sensors_2" },
]); ]);
// 设备编号参数 // 设备编号参数

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

@@ -72,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);
@@ -101,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();
}
} }
// 添加世界坐标系 // 添加世界坐标系
@@ -280,9 +280,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);
@@ -308,16 +308,14 @@ export default class Demo {
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.tagCSS2DObj.element.style.opacity = "1";
this.tag2CSS2DObj.element.style.opacity = "1"; // this.tag2CSS2DObj.element.style.opacity = "1";
this.tag3CSS2DObj.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) {
@@ -326,6 +324,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);
} }
@@ -364,12 +363,27 @@ export default class Demo {
v.material = new this.THREE.MeshBasicMaterial(); v.material = new this.THREE.MeshBasicMaterial();
v.material.color = new this.THREE.Color("#191a05"); 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").scale.set(0.1, 0.1, 0.1);
this.equMap.get("equ_sensors").traverse((v) => { this.equMap.get("equ_sensors").traverse((v) => {
v.material = new this.THREE.MeshBasicMaterial(); v.material = new this.THREE.MeshBasicMaterial();
v.material.color = new this.THREE.Color("white"); 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);
} }
/** /**

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

@@ -1,3 +1,4 @@
import EquipmentTag from "../utils/EquipmentTag";
/** /**
* *
* @param {Mesh} targetPoint * @param {Mesh} targetPoint
@@ -13,33 +14,53 @@ function addEquipment(targetPoint, formInfo) {
handleFanEqu.call(this, targetPoint); handleFanEqu.call(this, targetPoint);
break; break;
case "sensors": case "sensors":
handleOtherEqu.call(this, targetPoint); case "sensors_2":
handleOtherEqu.call(this, targetPoint, formInfo.equipmentType);
break; break;
default: default:
break; break;
} }
targetPoint.hasDevice = true; targetPoint.hasDevice = true;
console.log("添加信息", targetPoint, formInfo); // 标识设备信息
} }
// 其他传感器 // 其他传感器
function handleOtherEqu(targetPoint, speed = 0) { function handleOtherEqu(targetPoint, EqeName) {
const equMesh = this.equMap.get("equ_sensors").clone(); const equMesh = this.equMap.get("equ_sensors").clone();
const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3()); const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
equMesh.position.copy(worldP); equMesh.position.copy(worldP);
//设备添加标签
const tag = EquipmentTag(EqeName === "sensors" ? "风压传感器" : "普通传感器");
equMesh.getObjectByName("tag").material = tag;
if (/tr$/.test(targetPoint.name)) { if (/tr$/.test(targetPoint.name)) {
equMesh.rotation.z = -(3 * Math.PI) / 4; 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)) { } else if (/tl$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 4; equMesh.rotation.z = -(5 * Math.PI) / 4;
} else if (/trc$/.test(targetPoint.name)) { 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)) { } else if (/br$/.test(targetPoint.name)) {
equMesh.rotation.z = -Math.PI / 2; equMesh.rotation.z = -Math.PI / 2;
equMesh.translateX(-1); 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)) { } else if (/bl$/.test(targetPoint.name)) {
equMesh.rotation.z = Math.PI / 2; equMesh.rotation.z = Math.PI / 2;
equMesh.translateX(1); equMesh.translateX(1);
targetPoint.scale.set(0.03, 0.03, 0.075);
} }
this.scene.add(equMesh); this.scene.add(equMesh);
targetPoint.visible = false; targetPoint.visible = false;
// 保存该设备id，后期直接从附附着点进行删除
targetPoint.info = {
id: equMesh.id,
};
} }
// 风机 // 风机
@@ -50,6 +71,19 @@ function handleFanEqu(targetPoint, speed = 0) {
equMesh.translateY(-0.6); equMesh.translateY(-0.6);
this.scene.add(equMesh); this.scene.add(equMesh);
targetPoint.visible = false; 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 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);
} }
} }

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),
});
} }

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

@@ -20,10 +20,32 @@ export function resetState() {
// 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"));
} }
} }