实战threeJS数字孪生开源

threeJs的数字孪生。

社区里threeJs的基本教程很多,但是实战比较少。于是花了一些时间,根据自己在公司做的一些业务。自己写了个demo。没有ui设计,模型也是网上爬的,所以界面有点丑。。。

关于threeJs基本使用,例如,场景的渲染、相机的生成、光线的设置,社区里已经有很多了,在这里我就不介绍了。

开源地址:github.com/lhpCode/thr...

项目结构

为了使用方便,以及后续维护方便,我将three进行了封装,共分为五个模块光线模块、模型模块、着色器、标签、three场景初始化

模块1、场景初始化

场景初始化做的功能是生成3d场景、背景设置,提供将模型添加到场景方法,以及鼠标点击事件和动画播放

模块2、模型

模型模块的功能是加载gltf模型,模型巡逻动画、获取模型内动画并注册

模块3、着色器

着色器是跟着古柳大佬学的,看了他的文章跟着学,这个蓝色光圈就是着色器写的.大佬文章写的很好,教程很详细,有兴趣的可以看看他的文章

其他模块

还有标签模块、光线我就不介绍了,就是将threeJS的方法进行了一个封装,

项目

介绍完项目结构、接下来看看该项目有哪些功能吧

1.路线巡逻、循环轨迹展示

路线巡逻就是根据传递过来的坐标数组,将模型根据这些坐标进行位移.这里的Patrol类就是模型模块里写的巡航,

2.第一人称视角

点击第一人称视角可以查看当前巡逻员所看视角,这里使用的方法是将摄像头绑定人员。巡逻员在移动的时候会调用传递的回调函数,根据这个回调函数将摄像头位置进行绑定。这样就可以得到第一人称视角了

3.设备定位,视角切换

设备定位和视角切换就是将摄像头移动到指定位置,这里我是使用tween.js,原本是打算使用自己写的Patrol类来调用摄像头的,结果发现运动不是很流畅。就改用tween.js,果然运动流畅多了

4.区域检测、区域告警

区域检测使用的方法是射线法,将点延长一条线与区域的各顶点进行判断,然后每移动一次就进行一次检测。进入区域进行一次告警、离开区域就取消告警

相关推荐
Irene19912 小时前
ElementPlus 与成熟后台框架对比:vue-element-plus-admin、vue-pure-admin等
前端·ui·框架·vue3
尘中客6 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_6 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中7 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
2501_916007477 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
前端大波7 小时前
Sentry 每日错误巡检自动化:设计思路与上手实战
前端·自动化·sentry
ZC跨境爬虫8 小时前
使用Claude Code开发校园交友平台前端UI全记录(含架构、坑点、登录逻辑及算法)
前端·ui·架构
慧一居士8 小时前
Vue项目中,何时使用布局、子组件嵌套、插槽 对应的使用场景,和完整的使用示例
前端·vue.js
Можно8 小时前
uni.request 和 axios 的区别?前端请求库全面对比
前端·uni-app
M ? A9 小时前
解决 VuReact 中 ESLint 规则冲突的完整指南
前端·react.js·前端框架