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:
邓洁
2023-12-07 23:30:51 +08:00
parent b194b07b95
commit 38820566ec
10 changed files with 225 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/content/tunnelScene/sceneClass/addDev/index.js Normal file
View File

@@ -0,0 +1,37 @@
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);
this.scene.add(dev);
this.targetPoint.hasDevice = true; //标记还存在设备
// 附着点记录信息
this.targetPoint.info = {
meshId: dev.id,
name: devInfo.devName,
position: transformPosition(this.targetPoint.name, this.distance),
state: devInfo.devState,
};
// this.targetPoint.visible = false;
return this.targetPoint.info;
}
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
}米处`;
}
function equal(str) {
switch (str) {
case "r":
return "右";
case "l":
return "左";
}
}

8
src/components/content/tunnelScene/sceneClass/addEvent/index.js Normal file
View File

@@ -0,0 +1,8 @@
export default function (funName, fun) {
//这里给类里面添加函数,方便内部使用操作
if (this[funName]) {
console.error(`已存在${funName}函数`);
return;
}
this[funName] = fun;
}

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

@@ -7,10 +7,10 @@ import {
handleStartChange,
} from "./handleOrbitControlsChange";
import { saveState, resetState } from "./viewBack";
import addFunction from "./addEvent";
import { addDev } from "./addDevice";
import { removeDev } from "./removeDevice";
import { checkDevModel } from "./checkDevModel";
import addDev from "./addDev";
import removeDev from "./removeDev";
export default class Demo {
// 摄像机看向位置
origin = null;
@@ -26,8 +26,13 @@ export default class Demo {
this._checkAnimation = checkAnimation;
this._saveSate = saveState;
this._resetState = resetState;
this._removeDev = removeDev;
// 增加设备模型
this.addDev = addDev;
// 删除设备模型
this.removeDev = removeDev;
// 外部可添加函数
this.addFunction = addFunction;
this.THREE = three;
this.mountedElement = mountedElement;
//初始化场景
@@ -61,10 +66,6 @@ export default class Demo {
this.render();
this.canvasResize();
this.addXYZ();
this.HTMLTagEventListener();
this.bindRightPlaneInfo();
}
//渲染函数作用域(这里主要写渲染帧内操作)
__renderScope() {
@@ -271,6 +272,7 @@ export default class Demo {
raycaster.setFromCamera(mouse, this.camera);
const intersects = raycaster.intersectObjects(isClickModels);
if (intersects.length === 0) return;
//附着点设置方框
this.setBoxHelper(intersects[0].object);
// 处理点击左右键事件
@@ -300,6 +302,9 @@ export default class Demo {
this.tag2CSS2DObj = new CSS2DObject(this.tag2Html);
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.tag2CSS2DObj.element.style.display = "none";
@@ -320,30 +325,7 @@ export default class Demo {
// 删除标记动画
this.scene.remove(this.group);
}
/**
* @param {Array} paths 所有设备模型的路径
*/
addDeviceModels(paths) {
const gltfloader = this.gltfloader;
load(paths);
function load(paths, current = 0) {
return new Promise((resolve, reject) => {
// try {
gltfloader(paths[current], (deviceModel) => {
this.deviceModels.push(deviceModel);
current++;
console.log(deviceModel);
load(paths, current);
if (current > paths.length) {
resolve("ok");
}
});
// } catch (e) {
// reject(new Error("加载异常"));
// }
});
}
}
// 附着点选中线宽包围
setBoxHelper(obj) {
// 判断场景是否纯在该3d对象
@@ -366,18 +348,6 @@ export default class Demo {
this.gltfloader.setDRACOLoader(this.DRAC);
}
// 监听tagHTML标签内事件
HTMLTagEventListener() {
// this.addBtn = document.querySelector("#add-model");
// this.removeBtn = document.querySelector("#remove-model");
// //开启监听
// this.addBtn.addEventListener("click", addDev.bind(this));
// this.removeBtn.addEventListener("click", removeDev.bind(this));
// //监听选择设备
// this.devList = document.querySelector(".divice-list ul");
// this.devList.addEventListener("click", checkDevModel.bind(this));
}
/**
* @param {Meshes} meshes gltf加载过后的模型数组
*/
@@ -388,69 +358,18 @@ export default class Demo {
});
console.log(this.deviceList);
}
/**
* @param {String} devId 添加的设备ID
*/
addDevice(devId) {
addDev.bind(this, devId);
}
/**
* @param {String} devId 删除的设备ID
*/
removeDevice(devId) {
removeDev.bind(this, devId);
}
//获取右边面板信息
bindRightPlaneInfo() {
// this.chanelLengthInput = document.querySelector("#chanel-length-input");
// this.aspectValue = document.querySelector("#aspect-length-value");
// this.chanelLengthInput.addEventListener("input", (e) => {
// // console.log(e.target.value);
// });
}
/**
* @param {OBJLoader} objloader 模型加载器
*
* @param {Number} distance 设置锚点之间的间隔距离
*/
addOBJLoader(objloader) {
this.OBJLoader = new objloader();
}
// 先把模型加载完成
loadeOBJModel() {
this.devMap = new Map();
this.OBJLoader.load(
"/devicesModel/Camera.obj",
callBack.bind(this, "dev_1")
);
this.OBJLoader.load(
"/devicesModel/Camera.obj",
callBack.bind(this, "dev_2")
);
this.OBJLoader.load(
"/devicesModel/Camera.obj",
callBack.bind(this, "dev_3")
);
this.OBJLoader.load(
"/devicesModel/Camera.obj",
callBack.bind(this, "camera")
);
function callBack(param, model) {
switch (param) {
case "dev_1":
model.scale.set(0.2, 0.2, 0.2);
break;
case "dev_2":
model.scale.set(0.2, 0.2, 0.2);
break;
case "dev_3":
model.scale.set(0.1, 0.1, 0.1);
break;
case "camera":
model.scale.set(0.7, 0.7, 0.7);
model.name = "camera";
break;
}
this.devMap.set(param, model);
}
setDistance(distance = 10) {
this.distance = distance;
}
}

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

@@ -43,39 +43,21 @@ export function handleDBLClick(e) {
this.cameraPositionTween.onComplete(() => {
this.orbitControls.target = modelP;
this.camera.lookAt(modelP);
// 选中的物体闪梭(这里必需放在下一个函数之前，这里需要使用到下一个函数需要清空的上一个模型)
// handleModelFlash(e, this);
// 动画完成过后自动弹出标签
autoOutTag(e, this);
this.listenerEventFlag = false;
// 返回个组件
this.displayDevInfo(e);
});
}
//点击模型视角位移过去后模型闪烁函数
// function handleModelFlash(e, context) {
// if (context.timer) {
// clearInterval(context.timer);
// context.preTargetModel.material.color.set("white");
// }
// context.timer = setInterval(fun, 400);
// let flag = false;
// function fun() {
// if (flag) {
// e.material.color.set("red");
// flag = false;
// } else {
// e.material.color.set("white");
// flag = true;
// }
// }
// }
// 视角移动过去自动弹出标签
function autoOutTag(targetModel, context) {
// 判断是否纯在设备
// if (targetModel.hasDevice) return;
context.preTargetModel = targetModel;
context.tagCSS2DObj.element.style.display = "block";
displayDevInfo(context, targetModel);
targetModel.add(context.tagCSS2DObj);
if (/l$/.test(targetModel.name)) {
context.tagCSS2DObj.position.set(150, 0, 700);
@@ -83,17 +65,3 @@ function autoOutTag(targetModel, context) {
context.tagCSS2DObj.position.set(-150, 0, 700);
}
}
function displayDevInfo(context, targetModel) {
if (!targetModel.info) {
// 因为标签内的内容共同使用所以附着点没有信心则清空信息
// context.tagCSS2DObj.element.children[1].children[1].innerHTML = "无";
// context.tagCSS2DObj.element.children[2].children[1].innerHTML = "无";
return;
}
console.log(targetModel.info);
context.tagCSS2DObj.element.children[1].children[1].innerHTML =
targetModel.info.name;
context.tagCSS2DObj.element.children[2].children[1].innerHTML =
targetModel.info.state;
}

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

@@ -12,28 +12,16 @@ export function handleLClick(targetPoint) {
worldPosition.y,
worldPosition.z
);
// 标签定位
this.tag2CSS2DObj.translateY(-15);
this.tag2CSS2DObj.translateX(15);
displayDevInfo(this, targetPoint);
this.scene.add(this.tag2CSS2DObj);
intoAnimation.call(this, targetPoint);
//调用该函数回调作用返回给组件操作 very important-----
this.displayDevInfo(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;

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

@@ -14,12 +14,12 @@ export function handleRClick(targetPoint) {
worldPosition.y,
worldPosition.z
);
this.tag3CSS2DObj.translateY(-15);
this.tag3CSS2DObj.translateX(15);
this.scene.add(this.tag3CSS2DObj);
intoAnimation.call(this);
// 返回给组件的回调函数
this.displayDevInfo(targetPoint);
}
function intoAnimation() {

10
src/components/content/tunnelScene/sceneClass/removeDev/index.js Normal file
View File

@@ -0,0 +1,10 @@
export default function (meshId) {
return new Promise((resolve, reject) => {
if (!meshId) {
reject("null");
}
const mesh = this.scene.getObjectById(meshId);
this.scene.remove(mesh);
resolve("ok");
});
}