diff --git a/src/components/content/tunnelScene/PreviewScene.vue b/src/components/content/tunnelScene/PreviewScene.vue index d3f7ae7..6acab24 100644 --- a/src/components/content/tunnelScene/PreviewScene.vue +++ b/src/components/content/tunnelScene/PreviewScene.vue @@ -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); diff --git a/src/components/content/tunnelScene/sceneClass/demo.js b/src/components/content/tunnelScene/sceneClass/demo.js index a0294bc..49b48f8 100644 --- a/src/components/content/tunnelScene/sceneClass/demo.js +++ b/src/components/content/tunnelScene/sceneClass/demo.js @@ -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";