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-14 10:26:29 +08:00
parent e95c24befe
commit fb9dfb37a2
21 changed files with 701 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/content/tunnelScene/sceneClass/addDev/index.js
View File

@@ -2,8 +2,6 @@ export default function (devInfo) {
const dev = this.deviceList[devInfo.checkIndex].clone(); //克隆对应的moxin
const p = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
dev.position.copy(p);
// console.log(this.targetPoint);
modelEffectProcess(dev, this.targetPoint)
this.scene.add(dev);
this.targetPoint.hasDevice = true; //标记还存在设备
// 附着点记录信息
@@ -17,35 +15,16 @@ export default function (devInfo) {
return this.targetPoint.info;
}
function modelEffectProcess(model, point) {
if (model.children[0].name == "camera") {
console.log(model);
console.log(point);
model.scale.set(0.1, 0.1, 0.1)
}
if (model.children[0].name == "fan") {
console.log(model);
console.log(point);
}
if (model.children[0].name == "sensors") {
console.log(model);
console.log(point);
model.scale.set(0.2, 0.2, 0.2)
}
}
function transformPosition(position, distance) {
return `${equal(position.charAt(position.lastIndexOf("_") + 1))}边隧道${equal(
position.charAt(position.lastIndexOf("_") + 2)
)}侧设备约${(Number(
position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
) +
1) *
distance
}米处`;
)}侧设备约${
(Number(
position.substring(position.indexOf("_") + 1, position.lastIndexOf("_"))
) +
1) *
distance
}米处`;
}
function equal(str) {

2
src/components/content/tunnelScene/sceneClass/addDevice/index.js
View File

@@ -13,7 +13,6 @@ function handleLoadedDevice(model) {
const wp = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
model.position.copy(wp);
this.targetPoint.visible = false;
model.scale = 0.1
this.scene.add(model);
if (model.name === "camera") {
@@ -21,7 +20,6 @@ function handleLoadedDevice(model) {
model.translateZ(4);
model.translateY(-0.5);
}
// 添加的信息请求或初始化的信息
this.targetPoint.info = {
name: "摄像头",

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

@@ -45,9 +45,9 @@ export default class Demo {
1000
);
this.camera.position.z = -60;
this.camera.position.y = 20;
this.camera.position.x = -30;
this.camera.position.z = 1.24;
this.camera.position.y = 9.14;
this.camera.position.x = -63.79;
this.camera.lookAt(0, 0, 1000);
// 初始化渲染器
@@ -58,6 +58,7 @@ export default class Demo {
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.domElement.style.position = "absolute";
this.mountedElement.appendChild(this.renderer.domElement);
console.log(this.renderer.domElement);
// 创建渲染帧
this.render = () => {
this.__renderScope();
@@ -101,6 +102,10 @@ export default class Demo {
if (this.intoPointAnimation) {
this.intoPointAnimation.update();
}
// 隧道颜色渐变动画
if (this.opacityTween) {
this.opacityTween.update();
}
}
// 添加世界坐标系
@@ -133,6 +138,8 @@ export default class Demo {
gltf.scene.traverse((child) => {
this._forModels(child);
});
// 初始化场景位置
gltf.scene.position.set(-5, 0, 10);
this.scene.add(gltf.scene);
// 加载完后可执行函数
this._afterLoaded(gltf.scene);
@@ -156,14 +163,14 @@ export default class Demo {
this._ClickModel(this.points);
}
// 在此方法中对模型批量操作
// 在此方法中对模型批量操作，这里遍历附着点
_forModels(child) {
// 匹配附着点(这里不适合对单个模型进行保存，批量对模型进行操作)
if (child.isMesh && /^point+/.test(child.name)) {
this.points.push(child);
// 改变为基础材质
child.material = new this.THREE.MeshBasicMaterial();
child.scale.set(0.01, 0.01, 0.01);
// 遍历一个属性是否存在设备
child.hasDevice = false; //初始化
}
@@ -178,7 +185,7 @@ export default class Demo {
this.camera,
this.renderer.domElement
);
this.orbitControls.object.position.set(-27.285, 16.356, -54.925);
//限制轨道控制器的视角变化
this.orbitControls.maxPolarAngle = Math.PI * (3 / 5);
// 监听控制器变化
@@ -242,6 +249,7 @@ export default class Demo {
}
// 处理点击2次触发事件事件
__handleListenerDBLClickEvent(isClickModels, e) {
e.preventDefault();
// 如果监听到双击则清空单次点击事件
clearTimeout(this.EventTimer);
//最后一个是监听器默认参数
@@ -263,6 +271,7 @@ export default class Demo {
// 处理点击左右键触发的事件
__handleListenerClickRLEvent(isClickModels, e) {
e.preventDefault();
clearTimeout(this.EventTimer);
this.EventTimer = setTimeout(() => {
const mouse = new this.THREE.Vector2();
@@ -276,9 +285,9 @@ export default class Demo {
this.setBoxHelper(intersects[0].object);
// 处理点击左右键事件
if (e.button === 0) {
if (e.button === 2) {
this._handleLClick(intersects[0].object);
} else if (e.button === 2) {
} else if (e.button === 0) {
this._handleRClick(intersects[0].object);
}
}, 400);
@@ -309,18 +318,12 @@ export default class Demo {
this.tagCSS2DObj.element.style.display = "none";
this.tag2CSS2DObj.element.style.display = "none";
this.tag3CSS2DObj.element.style.display = "none";
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.1, 0.1, 0.1);
this.tag3CSS2DObj.position.y = 1000;
this.tagCSS2DObj.scale.set(3, 3, 3);
this.tag3CSS2DObj.scale.set(0.025, 0.025, 0.025); //编辑框
this.tag3CSS2DObj.position.set(10, 0, 10);
this.tagCSS2DObj.scale.set(0.5, 0.5, 0.5);
}
clearTagsObj() {
if (this.preDBLModel) {
this.preDBLModel.remove(this.tagCSS2DObj);
@@ -378,9 +381,64 @@ export default class Demo {
setDistance(distance = 10) {
this.distance = distance;
}
loadBackground(backColorSet) {
this.scene.background = new this.THREE.TextureLoader().load("/images/background/background.png", function (texture) {
texture.encoding = backColorSet;
});
loadBackground(hdrLoader, backColorSet) {
// hdrLoader.load("/images/background/background.hdr", (texture) => {
// texture.mapping = this.THREE.EquirectangularReflectionMapping;
// this.scene.background = texture;
// this.scene.environment = texture;
// })
this.scene.background = new this.THREE.TextureLoader().load(
"/images/background/background.png",
function (texture) {
texture.encoding = backColorSet;
}
);
}
/**
*
* @param {Boolean} option 是否禁用轨道控制器
*/
isControlOrbit(option = true) {
this.orbitControls.enabled = option;
const mesh = this.scene.getObjectByName("chanel");
const mesh2 = this.scene.getObjectByName("chanel_1");
const mesh3 = this.scene.getObjectByName("chanel_2");
const mesh4 = this.scene.getObjectByName("chanel_3");
const opacityTween = (startVal, endVal, isNeedLookAt = false) => {
this.opacityTween = new this.TWEEN.Tween({
opacity: startVal,
lookX: this.orbitControls.target.x,
lookY: this.orbitControls.target.y,
lookZ: this.orbitControls.target.z,
});
this.opacityTween.to(
{
opacity: endVal,
lookX: 0,
lookY: 0,
lookZ: 0,
},
500
);
this.opacityTween.start();
this.opacityTween.onUpdate((obj) => {
mesh.material.opacity = obj.opacity;
mesh2.material.opacity = obj.opacity;
mesh3.material.opacity = obj.opacity;
mesh4.material.opacity = obj.opacity;
if (!isNeedLookAt) return;
this.camera.lookAt(obj.lookX, obj.lookY, obj.lookZ);
this.orbitControls.target.set(obj.lookX, obj.lookY, obj.lookZ);
});
};
if (!option) {
// 显示编辑框隧道颜色
opacityTween(0.5, 0.1);
} else {
// 退出编辑框什么颜色
opacityTween(0.1, 0.5, true);
}
}
}

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

@@ -1,4 +1,5 @@
export function handleDBLClick(e) {
return;
this._saveSate();
// 注意位置不能改变
this.clearTagsObj();

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

@@ -5,5 +5,5 @@ export function handleStartChange(e) {
export function handleEndChange(e) {
// 围绕点到照相机的位置
// console.log("结束");
// console.log(this.camera.position);
// console.log(this.orbitControls.object.position);
}

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

@@ -1,4 +1,5 @@
export function handleLClick(targetPoint) {
return;
this.clearTagsObj();
const worldPosition = new this.THREE.Vector3();
//获取附着点的世界坐标系
@@ -7,11 +8,11 @@ export function handleLClick(targetPoint) {
// 显示左键属性栏
this.tag2CSS2DObj.element.style.display = "block";
// 设置标签位置
this.tag2CSS2DObj.position.set(
worldPosition.x,
worldPosition.y,
worldPosition.z
);
// this.tag2CSS2DObj.position.set(
// worldPosition.x,
// worldPosition.y,
// worldPosition.z
// );
// 标签定位
this.tag2CSS2DObj.translateY(-15);
this.tag2CSS2DObj.translateX(15);

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

@@ -14,18 +14,20 @@ export function handleRClick(targetPoint) {
worldPosition.y,
worldPosition.z
);
this.tag3CSS2DObj.translateY(-15);
this.tag3CSS2DObj.translateX(15);
this.isControlOrbit(false);
this.tag3CSS2DObj.translateX(-3);
this.tag3CSS2DObj.translateZ(10);
this.scene.add(this.tag3CSS2DObj);
intoAnimation.call(this);
// 返回给组件的回调函数
this.displayDevInfo(targetPoint);
// 返回给编辑组件的回调函数
this.editDev(targetPoint);
}
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,
@@ -35,12 +37,11 @@ function intoAnimation() {
yTarget: start.y,
zTarget: start.z,
});
this.intoPointAnimation.to(
{
x: worldP.x + 20,
y: worldP.y + 20,
z: worldP.z + 50,
x: worldP.x - 10,
y: worldP.y + 3,
z: worldP.z - 12,
xTarget: worldP.x,
yTarget: worldP.y,
zTarget: worldP.z,

20
src/components/content/tunnelScene/sceneClass/removeDevice/index.js
View File

@@ -1,20 +0,0 @@
export function removeDev() {
if (!this.targetPoint.hasDevice) {
alert("该附着点不存在设备");
return;
} else {
// 删除模型逻辑
const devId = this.targetPoint.info.devId;
const model = this.scene.getObjectById(devId);
this.scene.remove(model);
// 附着点可见
this.targetPoint.visible = true;
this.targetPoint.info = null;
// 按钮可否操作情况
this.addBtn.disabled = false;
this.removeBtn.disabled = true;
this.targetPoint.hasDevice = false;
}
}