前言
本破大专生也即将毕业啦。写了一个毕设。是基于three.js和Vue构建的一个前端智慧园区场景。也开源出来请大家指导一下。
演示效果
- 演示网站地址：threejs.newhao2021.top/
- GitHub地址：github.com/varrff/nCom...
项目介绍
🌳🌇🏢
功能特点
✨ 动态场景展示: 通过three.js创建逼真的3D场景，展示智慧园区的监测设备
快速开始
-
安装依赖：
npm install -
启动开发服务器：
arduinonpm run serve
每个功能和文件的详细解读 📑🔍
ZThree.js - 初始化和通用函数 🌌🔧
- 🚀
initThree(): 初始化Three.js场景，包括创建场景、相机、渲染器等，并将渲染器的DOM元素添加到指定的HTML元素中。 - 📍
initHelper(): 添加坐标轴辅助对象，有助于定位和调试。 - 🎮
initOrbitControls(): 初始化轨道控制器，允许通过鼠标和触摸来控制相机的旋转、缩放和平移。 - 💡
initLight(): 初始化灯光，设置环境光和平行光的位置和投影。 - 📦
loaderModel(option): 加载gltf或glb格式的模型文件。 - 🔄
iterateLoad(objFileList, onProgress, onAllLoad): 批量加载模型文件，并支持加载过程中和完成后的回调函数。 - 🎯
initRaycaster(callback, models = this.scene.children, eventName = "click"): 初始化射线投射器，用于检测鼠标点击或触摸事件与场景中的模型的交互。 - 🛑
destroyRaycaster(eventName): 停止射线投射功能，移除事件监听器。 - 🔫
fireRaycaster(pointer, models): 发射射线并检测与模型的交互，返回交互结果。 - 🌍
getModelWorldPosition(model): 获取模型的世界坐标。 - 🕊️
flyTo(option): 控制相机以动画效果飞往指定位置和视角。 - 🚶
modelMove(option, obj): 控制模型以动画效果移动到指定位置。 - 🎥
render(callback): 渲染循环，每帧执行回调函数进行渲染。
loaderModel.js - 模型加载和管理函数 🔄🗄️
- 🚀
loaderModel(app): 异步函数，加载模型并将其添加到场景中。 - ❌
destroyControlsGroupText(app, className): 移除指定类名的HTML元素的点击事件监听器。 - ⚙️
setModelDefaultMaterial(app): 恢复所有模型的默认材质。 - 🧹
destroyControlsGroup(app, className): 移除控制组中的模型。
cssRender.js - 生成场景标签函数 🏷️
ps : 在本项目中,该方法并没有直接使用,而是通过在HomeView.vue中实例化后挂载到了instance方法中.
- 🌟
T.init: 这个初始化函数准备CSS渲染器。它创建一个新的cssRender实例，设置大小，并将其附加到应用程序元素上。 - ➕
T.add: 这个函数用于向场景添加CSS对象。它接受一个参数，该参数可以是一个对象或对象数组，并将其添加到3D场景中。 - 🗑️
T.removeAll: 此函数用于从场景中删除所有CSS对象。它遍历父对象的子对象，并从场景和配置中删除所有CSS对象。
material.js - 管理材质
如果要修改材质就直接在这里修改,其他方法使用材质时是直接引用这里暴露的材质,方便管理
floorManage.js -管理楼层和房间的显示与操作
楼层管理中每栋楼的标签是通过查找到"楼顶"这个子模型,并在它的上方生成标签标签,而标签名是这个子模型的父模型名字,每层楼的标签也是要通过"F"关键词来查找的
-
🚁
loaderFloorManage: 此函数将摄像机飞到特定位置，然后创建楼层文本标签。 -
🏷️
createFloorText: 此函数在3D模型的楼层上创建文本标签。用户可以点击标签，然后摄像机将飞向该楼层，并显示楼层的详细信息。 -
📝
createRoomText: 此函数在3D模型的房间中创建文本标签。当用户点击房间标签时，将触发一个事件，显示房间的详细信息。 -
🎬
setModelLayer: 此函数控制楼层模型的动画移动。根据所选的楼层，模型会以动画的形式移动到合适的位置，并显示所选楼层的房间标签。
reprocessing.js -实现一些视觉效果，包括辉光、抗锯齿和边缘高亮。(很消耗性能,慎开)
-
🎨 Color Management: 关闭颜色管理。
-
🌟 Bloom Effect (辉光效果) : 为场景添加一个辉光效果。这通过使用
UnrealBloomPass来实现。辉光效果使亮部分看起来更亮，类似于光晕。bloomThreshold: 用于确定哪些像素将被认为是辉光的一部分。bloomStrength: 控制辉光的明亮程度。bloomRadius: 辉光效果的半径。
该代码还包含一些GUI代码的注释，这些代码可以允许用户动态调整辉光效果的参数，但这已经被注释掉。需要时再开启
-
📐 Edge Highlighting (边缘高亮) : 通过使用
OutlinePass，为场景中的对象添加边缘高亮效果。可以调整边缘的强度，辉光，厚度以及脉冲周期（可能是闪烁）。edgeStrength: 控制边缘线的粗细。edgeGlow: 控制发光的强度。edgeThickness: 控制光晕的粗细。pulsePeriod: 控制闪烁的频率。
和辉光一样，这部分代码也包含注释掉的GUI部分，用于动态调整。
-
🎥 Compositing : 使用
EffectComposer将这些效果合成到最终的渲染图像中。这涉及将渲染场景传递给不同的渲染通道，并使用着色器材料将它们组合在一起。
parkElectricity.js 电力监测的功能,水力监测也同理
- 🚀
loaderParkElectricity: 此函数使摄像机飞到特定位置，然后创建电力监控。 - 💡
createParkElectricity: 此函数遍历模型中的对象，并检查是否有对象与电表有关。如果有，它将检查电量是否超过460度。如果是，则会发送通知警告。此外，它还可以放大电表模型，并初始化与电表相关的射线投射。 - 🧨
destroyParkElectricity: 此函数用于销毁电力监控。它会清除所选对象，隐藏工具提示，并将模型材质重置为默认状态，然后销毁射线投射。
数据的处理
放在了assets文件夹的mock.js中.
存储了在房间模型里每个具体业务中的子模型的名称,样式,图片,数据
Blender建模指南 🏗️
在Blender中为网页场景进行建模时，需要特别注意模型的命名和一些细节，以确保与前端开发的良好配合。以下是一些规范和注意事项：
1. 命名规范 📛
模型的命名是区分楼栋，楼层，以及监测设备的关键。正确的命名不仅有助于组织，还是模型与前端开发配合中至关重要的环节。
楼栋 🏢
- 楼栋的命名没有特殊限制。
- 每栋楼都需要包含一个名为楼顶的子模型。网页场景将通过这个楼顶子模型来识别一个楼栋。
- 楼栋的名称将被用作网页上的楼层管理模块的标签名称。
楼层 🏬
- 楼层的名称需要以F结尾，例如："1F", "2F"。网页场景将通过这个后缀来识别楼层。
监测设备 📡
- 监测设备的命名在具体业务中可能变化，因此需要与前端开发团队进行沟通。
- 前端开发人员需要在
mock.js文件中更新监测设备模型的样式，并在以park为前缀的文件中通过监测设备的名称遍历所有模型，然后选择要监测的模型。
2. 建模注意事项 🔍
修改器的应用 ✅
- 如果在修改器中使用了类似于阵列的功能，请记得点击"应用"按钮。这样设置才会在网页上生效。如果没有应用，效果只会在Blender内显示。
优化复杂模型 🛠️
- 如果引入了网络上的复杂模型资源，建议在修改器中添加简化，以减轻网页渲染的压力。
- 可以删除一些不必要的父模型，只保留具有代表性外观和形状的模型。