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

refactor(tunnelScene): 优化代码结构和添加注释

Browse Source 
重构模型加载和控制器初始化逻辑，添加详细代码注释
调整代码格式和参数对齐，提高可读性
This commit is contained in:
dj
2026-03-09 00:38:47 +08:00
parent 1d794eb3ba
commit a0a65f2e2e
2 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/content/tunnelScene/PreviewScene.vue
View File

@@ -312,7 +312,7 @@ async function handleMounted() {
let tunnelasync = await demo.loadModel(
GLTFLoader,
"/tunnelModel/chanel-have-wall-now-use.gltf",
);
);//初始化轨道控制器
demo.addOrbitControls(OrbitControls);
demo.addTween(TWEEN);
demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);

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

@@ -10,7 +10,11 @@ import {
import { saveState, resetState } from "./viewBack";
import addFunction from "./addEvent";
import { editTunnelInit } from "./editTunnelInit";
import { addEquipment, removeEquipment,clearTunnelEquipments } from "./editEquipment";
import {
addEquipment,
removeEquipment,
clearTunnelEquipments,
} from "./editEquipment";
import previewtunnelModeInit from "./previewTunnelInit";
import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
import { realTimeRenderData } from "./realTimeRerender";
@@ -23,6 +27,8 @@ export default class Demo {
//设备模型数组
deviceModels = [];
constructor(three, mountedElement) {
// 初始化 Three.js 场景、相机、渲染器
// 绑定各种功能模块
this._StreetSignTag = StreetSignTag;
this._handleLClick = handleLClick;
this._handleLHover = handleLHover;
@@ -50,7 +56,7 @@ export default class Demo {
75,
window.innerWidth / window.innerHeight,
1,
1000
1000,
);
this.camera.position.z = 1.24;
@@ -142,37 +148,46 @@ export default class Demo {
// 模型加载
/**
* @param {Object} GLTFLoader 模型加载器
* @param {String} path 模型资源路径
* 加载 GLTF 格式的 3D 模型
* @param {Object} GLTFLoader Three.js 的 GLTF 模型加载器类
* @param {String} path 模型文件的相对路径
* @param {Boolean} isedit 是否为编辑模式，影响加载后的交互行为
* @returns {Promise} 返回 Promise 对象，支持 async/await 调用
*/
loadModel(GLTFLoader, path, isedit) {
// 返回一个Promise对象，支持异步调用
return new Promise((resolve, reject) => {
// 创建GLTF加载器实例
this.gltfloader = new GLTFLoader();
// 调用加载器加载模型
this.gltfloader.load(
//下面是模型加载的路径
path,
(gltf) => {
// console.log(isedit);
path, // 模型文件路径
(gltf) => { // 加载成功的回调函数
// 遍历模型场景中的所有子对象
gltf.scene.traverse((child) => {
// 对每个子模型执行处理操作
this._forModels(child);
});
// 初始化模型缩放倍率
// 设置模型缩放比例为0.75倍
gltf.scene.scale.set(0.75, 0.75, 0.75);
// 初始化场景位置
// 设置模型位置坐标
gltf.scene.position.set(-5, 0, 10);
// 将模型添加到场景中
this.scene.add(gltf.scene);
// 加载完后可执行函数
// console.log(isedit);
// 执行模型加载后的初始化操作
this._afterLoaded(gltf.scene, isedit);
// 将加载的模型对象传递给Promise的resolve
resolve(gltf);
},
(xhr) => {
// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
(xhr) => { // 加载进度的回调函数
// console.log((xhr.loaded / xhr.total) * 100 + "% loaded"); // 可选：打印加载进度百分比
},
(error) => {
(error) => { // 加载失败的回调函数
// 在控制台输出错误信息
console.log(error);
// 将错误传递给Promise的reject
reject(error);
}
},
);
});
}
@@ -208,9 +223,9 @@ export default class Demo {
}
//是否显示附着点
pointsVisible(isEnable = true) {
this.points.forEach((element) => {
element.material.visible = isEnable;
});
this.points.forEach((element) => {
element.material.visible = isEnable;
});
}
// 添加轨道控制器
/**
@@ -219,7 +234,7 @@ export default class Demo {
addOrbitControls(OrbitControls, isedit) {
this.orbitControls = new OrbitControls(
this.camera,
this.renderer.domElement
this.renderer.domElement,
);
//初始化轨道控制器
this.orbitControls.object.position.set(-29, 18, -50);
@@ -259,9 +274,14 @@ export default class Demo {
const raycaster = new this.THREE.Raycaster();
raycaster.setFromCamera(mouse, this.camera);
const intersects = raycaster.intersectObjects(hoverModels);
if (intersects.length > 0) {
if(Object.keys(intersects[0].object).includes('enableHover') && !intersects[0].object.enableHover && !isedit)return;
if (
Object.keys(intersects[0].object).includes("enableHover") &&
!intersects[0].object.enableHover &&
!isedit
)
return;
if (!this.preHover) {
this.preHover = intersects[0].object;
} else {
@@ -277,7 +297,7 @@ export default class Demo {
intersects[0].object.material.color.set("red");
const tagP = intersects[0].object.getWorldPosition(
new this.THREE.Vector3()
new this.THREE.Vector3(),
);
// if (isedit != false) {
this._checkAnimation(tagP);
@@ -303,12 +323,12 @@ export default class Demo {
// 点击两次处理事件
this.renderer.domElement.addEventListener(
"dblclick",
this.__handleListenerDBLClickEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
this.__handleListenerDBLClickEvent.bind(this, isClickModels), //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
);
// 点击一次时处理时间
this.renderer.domElement.addEventListener(
"mousedown",
this.__handleListenerClickRLEvent.bind(this, isClickModels) //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
this.__handleListenerClickRLEvent.bind(this, isClickModels), //注意这里重新指向this，第一个是修改this指向，第二个是传入函数的参数
);
}
// 处理点击2次触发事件事件
@@ -471,7 +491,7 @@ export default class Demo {
// 初始标签面板
const tag = new this.THREE.Mesh(
new this.THREE.PlaneGeometry(7, 5),
new this.THREE.MeshBasicMaterial({ color: "white" })
new this.THREE.MeshBasicMaterial({ color: "white" }),
);
this.equMap.get("equ_sensors").rotation.x += Math.PI / 2;
this.equMap.get("equ_sensors").add(tag);
@@ -501,7 +521,7 @@ export default class Demo {
"/images/background/background.png",
function (texture) {
texture.encoding = backColorSet;
}
},
);
}
/**
@@ -530,7 +550,7 @@ export default class Demo {
lookY: 0,
lookZ: 0,
},
500
500,
);
this.opacityTween.start();
this.opacityTween.onUpdate((obj) => {
@@ -568,7 +588,7 @@ export default class Demo {
// console.log(Signs);
const tag = new this.THREE.Mesh(
new this.THREE.PlaneGeometry(100, 76),
new this.THREE.MeshBasicMaterial({ color: "white" })
new this.THREE.MeshBasicMaterial({ color: "white" }),
);
Signs.add(tag);
tag.name = "tag";