/nCommunityThreeJS

智慧园区前端3D场景

Primary LanguageJavaScript

项目介绍

🌳🌇🏢

智慧园区前端3D场景

本项目是基于three.js和Vue构建的一个前端3D场景，旨在展示智慧园区的概念和特点。

功能特点

✨ 动态场景展示: 通过three.js创建逼真的3D场景，展示智慧园区的监测设备

快速开始

  1. 安装依赖：

    npm install

  2. 启动开发服务器：

    npm run serve

每个功能和文件的详细解读 📑🔍

ZThree.js - 初始化和通用函数 🌌🔧

  1. 🚀 initThree(): 初始化Three.js场景，包括创建场景、相机、渲染器等，并将渲染器的DOM元素添加到指定的HTML元素中。
  2. 📍 initHelper(): 添加坐标轴辅助对象，有助于定位和调试。
  3. 🎮 initOrbitControls(): 初始化轨道控制器，允许通过鼠标和触摸来控制相机的旋转、缩放和平移。
  4. 💡 initLight(): 初始化灯光，设置环境光和平行光的位置和投影。
  5. 📦 loaderModel(option): 加载gltf或glb格式的模型文件。
  6. 🔄 iterateLoad(objFileList, onProgress, onAllLoad): 批量加载模型文件，并支持加载过程中和完成后的回调函数。
  7. 🎯 initRaycaster(callback, models = this.scene.children, eventName = "click"): 初始化射线投射器，用于检测鼠标点击或触摸事件与场景中的模型的交互。
  8. 🛑 destroyRaycaster(eventName): 停止射线投射功能，移除事件监听器。
  9. 🔫 fireRaycaster(pointer, models): 发射射线并检测与模型的交互，返回交互结果。
  10. 🌍 getModelWorldPosition(model): 获取模型的世界坐标。
  11. 🕊️ flyTo(option): 控制相机以动画效果飞往指定位置和视角。
  12. 🚶 modelMove(option, obj): 控制模型以动画效果移动到指定位置。
  13. 🎥 render(callback): 渲染循环，每帧执行回调函数进行渲染。

loaderModel.js - 模型加载和管理函数 🔄🗄️

  1. 🚀 loaderModel(app): 异步函数，加载模型并将其添加到场景中。
  2. ❌ destroyControlsGroupText(app, className): 移除指定类名的HTML元素的点击事件监听器。
  3. ⚙️ setModelDefaultMaterial(app): 恢复所有模型的默认材质。
  4. 🧹 destroyControlsGroup(app, className): 移除控制组中的模型。

cssRender.js - 生成场景标签函数 🏷️

ps : 在本项目中,该方法并没有直接使用,而是通过在HomeView.vue中实例化后挂载到了instance方法中.

  1. 🌟 T.init: 这个初始化函数准备CSS渲染器。它创建一个新的 cssRender 实例，设置大小，并将其附加到应用程序元素上。
  2. ➕ T.add: 这个函数用于向场景添加CSS对象。它接受一个参数，该参数可以是一个对象或对象数组，并将其添加到3D场景中。
  3. 🗑️ T.removeAll: 此函数用于从场景中删除所有CSS对象。它遍历父对象的子对象，并从场景和配置中删除所有CSS对象。

material.js - 管理材质

如果要修改材质就直接在这里修改,其他方法使用材质时是直接引用这里暴露的材质,方便管理

floorManage.js -管理楼层和房间的显示与操作

楼层管理中每栋楼的标签是通过查找到"楼顶"这个子模型,并在它的上方生成标签标签,而标签名是这个子模型的父模型名字,每层楼的标签也是要通过"F"关键词来查找的

  1. 🚁 loaderFloorManage: 此函数将摄像机飞到特定位置，然后创建楼层文本标签。

  2. 🏷️ createFloorText: 此函数在3D模型的楼层上创建文本标签。用户可以点击标签，然后摄像机将飞向该楼层，并显示楼层的详细信息。

  3. 📝 createRoomText: 此函数在3D模型的房间中创建文本标签。当用户点击房间标签时，将触发一个事件，显示房间的详细信息。

  4. 🎬 setModelLayer: 此函数控制楼层模型的动画移动。根据所选的楼层，模型会以动画的形式移动到合适的位置，并显示所选楼层的房间标签。

reprocessing.js -实现一些视觉效果，包括辉光、抗锯齿和边缘高亮。(很消耗性能,慎开)

  1. 🎨 Color Management: 关闭颜色管理。

  2. 🌟 Bloom Effect (辉光效果): 为场景添加一个辉光效果。这通过使用UnrealBloomPass来实现。辉光效果使亮部分看起来更亮，类似于光晕。

    • bloomThreshold: 用于确定哪些像素将被认为是辉光的一部分。
    • bloomStrength: 控制辉光的明亮程度。
    • bloomRadius: 辉光效果的半径。

    该代码还包含一些GUI代码的注释，这些代码可以允许用户动态调整辉光效果的参数，但这已经被注释掉。需要时再开启

  3. 📐 Edge Highlighting (边缘高亮): 通过使用OutlinePass，为场景中的对象添加边缘高亮效果。可以调整边缘的强度，辉光，厚度以及脉冲周期（可能是闪烁）。

    • edgeStrength: 控制边缘线的粗细。
    • edgeGlow: 控制发光的强度。
    • edgeThickness: 控制光晕的粗细。
    • pulsePeriod: 控制闪烁的频率。

    和辉光一样，这部分代码也包含注释掉的GUI部分，用于动态调整。

  4. 🎥 Compositing: 使用EffectComposer将这些效果合成到最终的渲染图像中。这涉及将渲染场景传递给不同的渲染通道，并使用着色器材料将它们组合在一起。

parkElectricity.js 电力监测的功能,水力监测也同理

  1. 🚀 loaderParkElectricity: 此函数使摄像机飞到特定位置，然后创建电力监控。
  2. 💡 createParkElectricity: 此函数遍历模型中的对象，并检查是否有对象与电表有关。如果有，它将检查电量是否超过460度。如果是，则会发送通知警告。此外，它还可以放大电表模型，并初始化与电表相关的射线投射。
  3. 🧨 destroyParkElectricity: 此函数用于销毁电力监控。它会清除所选对象，隐藏工具提示，并将模型材质重置为默认状态，然后销毁射线投射。

数据的处理

放在了assets文件夹的mock.js中.

存储了在房间模型里每个具体业务中的子模型的名称,样式,图片,数据

Blender建模指南 🏗️

在Blender中为网页场景进行建模时，需要特别注意模型的命名和一些细节，以确保与前端开发的良好配合。以下是一些规范和注意事项：

1. 命名规范 📛

模型的命名是区分楼栋，楼层，以及监测设备的关键。正确的命名不仅有助于组织，还是模型与前端开发配合中至关重要的环节。

楼栋 🏢

  • 楼栋的命名没有特殊限制。
  • 每栋楼都需要包含一个名为楼顶的子模型。网页场景将通过这个楼顶子模型来识别一个楼栋。
  • 楼栋的名称将被用作网页上的楼层管理模块的标签名称。

楼层 🏬

  • 楼层的名称需要以F结尾，例如：“1F”, “2F”。网页场景将通过这个后缀来识别楼层。

监测设备 📡

  • 监测设备的命名在具体业务中可能变化，因此需要与前端开发团队进行沟通。
  • 前端开发人员需要在mock.js文件中更新监测设备模型的样式，并在以park为前缀的文件中通过监测设备的名称遍历所有模型，然后选择要监测的模型。

2. 建模注意事项 🔍

修改器的应用 ✅

  • 如果在修改器中使用了类似于阵列的功能，请记得点击“应用”按钮。这样设置才会在网页上生效。如果没有应用，效果只会在Blender内显示。

优化复杂模型 🛠️

  • 如果引入了网络上的复杂模型资源，建议在修改器中添加简化，以减轻网页渲染的压力。
  • 可以删除一些不必要的父模型，只保留具有代表性外观和形状的模型。

整理关于功能实现的详细过程，面向过程编程

待续。。。