基于threejs的3D室内导航项目

已于 2022-02-17 16:35:40 修改
阅读量3k 收藏 10
点赞数 3
文章标签： 3d three.js javascript 前端
于 2022-02-16 22:26:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49435789/article/details/122972884
版权

好久没写博客啦，因为公司最近太忙了，甚至连过年在家都在加班，大论文项目也好久没动了。慌呀马上要中期了。

咳咳嗯，进入正题，最近几个月来都在忙同一个项目-------基于threejs的室内导航项目。

这个项目主要有两部分构成：1.地图编辑器 2.客户端

可以实现地图的绘制以及导航路径规划，并且实现了地图坐标与经纬度的映射。

这个项目从头到尾是我自己一个人在独立开发，虽然还有很多缺陷和交互不完善的地方，但是基本实现了需求，后续结合公司的硬件可以实现实时导航，还是蛮有成就感的。

地图编辑器主要界面（开发阶段，没有产品和UI，自己随便整的菜单按钮，有点丑）

新建楼层

上传图片格式的建筑图纸作为底图，后续在底图上头绘制相关建筑

绘制轮廓中 

 确定绘制轮廓

绘制过程就不一个一个演示了

 

 

我好爱吃草莓
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
Threejs开发3D地图实践总结
01-27
前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。如果一个顶点被多个三角形共享，共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2;所以如果不做任何处理，直接将3维物体的点传递给BufferGeometry，那么由于法向量被合成，经过片元着色器插值后，就会得到这个黑不溜秋的效果
基于three+vue3.0的室内寻路轨迹导航路线
05-06
这是基于three最新版^0.140.0在vue3.0上开发的室内三维寻路轨迹生成导航路线后可导航，前端使用Dijkstra算法，根据设定的障碍物生成寻路轨迹。项目下载后输入命令: cnpm install 后npm run serve即可访问。
汇总：五个开源的Three.js项目
最新发布
VR观察 ——专注AR/XR//MR/VR技术研究与应用探索！
03-30 2188
汇总：五个开源的Three.js项目。Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。其应用场景广泛，包括网页游戏、数据可视化、虚拟现实（VR）、增强现实（AR）、艺术展示和教育工具等，几乎覆盖了所有需要在网页中展示3D内容的领域。
基于Threejs/Webgl三维实时数据&车辆路径导航功能 项目实战一
11-15
针对webgl的库threejs框架项目功能实战讲解实时数据功能：对生产设备设施、传感器、开关控制的实时数据和运行状态查看，在三维场景中实时数据和状态，根据报警级别显示不同设备颜色。车辆路径导航：工厂车辆位置坐标做定位监控，根据车辆定位坐标在三维场景中可以展现车辆实时位置分布、车辆行驶运行状态；同时也可以仿真模拟车辆运行轨迹。threejs 98版本开发环境（IDE） WebStorm 2019.2 版本
three.js的室内地图展示
05-21
基于three.js的室内地图展示demo 最终的效果参见博客：https://blog.csdn.net/u014529917/article/details/82836871
three.js 三维室内地图导航实例
热门推荐
凡事有果必有因
09-03 1万+
总用three.js做一些零散好玩的效果，却也没怎么把他们整合到一起，最近因一位网友需要，把室内地图导航走通了一下。 这里主要在前端使用了有名的Dijkstra算法，关于此算法这里不再赘述，这里描述一下从路径数据准备到最佳路径输出的整个过程。 在线体验地址 1.节点数据准备 节点是路径生成的基础，我们需要在建筑的基础上，拾取出场景中所有路径节点的坐标，作为基础数据并保存。 节点数据示...
js室内地图开发_用 Three.js 作画笔，他用一周的时间开发了 3D H5 交互新闻地图 | 开发者故事...
weixin_34276402的博客
12-30 533
Three.js + H5 Story Map | Developer Story上周末，开发者黄俐分享过 Mapbox GL JS 可视化的内容后，有很多朋友在询问：动态的地图 3D 数据可视化，比如结合 Three.js，应该如何来做，有什么案例可以分享呢？那就一定不要错过这篇开发者故事。故事的主角 Whales 来自广州，最近计录科技（Whales 所在的公司）和广东经视南方财经报道发布了一...
室内地图开源代码
08-14
室内地图开源代码，支持安卓和javascript。目前最流行的室内地图开发平台
AR室内导航-Three.js
qq_39503511的博客
10-31 9224
AR室内导航-Three.js概述初始化室内地图创建楼层控件导航使用Three.js 生成AR模块原理初始化Three 概述 这一次的AR室内导航是使用蜂鸟云地图加上three.js做的，具备室内楼层切换，2D/3D模型切换，指北针控件，AR开启/关闭。模拟室内导航的功能，先来看看视频效果 AR室内导航 初始化室内地图 初始化蜂鸟云室内地图很简单，使用的也是蜂鸟云自带的地图数据 vue文
webgl(threejs)实现室内漫游-导航功能-应用于移动端
05-12
webgl(threejs)实现室内漫游-导航功能-应用于...基于threejs来实现的webgl项目，能应用于手机app、小程序等。 后期结合室内蓝牙定位技术，来实现实时的室内导航。 具体的项目实现方式，解决的难点在文章里有写到。 ...
使用three.js实现室内路径规划demo
05-21
使用three.js基于已有的路径和节点数据 使用d算法实现室内地图点选路径规划 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/100424812
实现室内地图导航功能
04-02
该源码实现了支持室内地图导航功能源码，该功能很容易地实现室内地图导航功能，不但可以在室内地图图片上实现地图导航功能，而且还有许多需要完善的地方。 目前的功能包括： 1. 可以放大缩小地图； 2. 地图上任一点加tag标签； 3. 任意两点之间用A＊算法画路线。 持续更新中。
three.js搭建室内场景教程
12-11
公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。 1.创建地板 地板是一个类似盒子，有顶部有底部有侧面，但是不一定是规则的盒子，因此我放弃了常用的BoxGeometry的方式，改用顶点+面的形式创建任意多边形地板，已知多边形底部坐标，底部坐标加上高度得到顶部坐标，通过Earcut可以计算出底部和顶部的三角面，侧面的三角面可以直接
ThreeMap：使用THREE.JS构建的高质量，完全可定制的矢量地图库，可轻松创建令人惊叹的可视化效果
01-28
ThreeMap Dev 0.0.1 :globe_showing_Americas: :globe_showing_Europe-Africa: :globe_showing_Asia-Australia: ！>高度在进行中-仍有很多工作要做。 不要在生产中使用它！ 如果你愿意帮忙 :growing_heart: -结帐贡献指南。 高质量的图书馆 :bright_button: 使用THREE.JS构建的完全可自定义的矢量地图，可创造令人惊叹 :smiling_face_with_sunglasses: 轻松可视化。 安装 赶紧跑： npm install three-map 或者使用rawgit的 例
基于threejs的3d学校示例
10-11
基于threejs的3d学校示例
基于Threejs 3D场景编辑器代码.zip
09-23
基于threejs完成的三维场景编辑器，提供三维资源库，三维场景模型材质替换，环境参数设置，三维场景管理等功能
使用three.js搭建室内场景
05-21
使用three.js搭建室内场景 不使用模型倒入，完全使用three.js接口搭建场景 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/82801737
js室内地图开发_微信小程序室内地图导航开发-微信小程序JS加载esmap地图
weixin_42515181的博客
12-23 1092
一、在微信小程序里显示室内三维地图 需要满足的两个条件调用ESMap室内地图需要用到小程序web-view组件，想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件：1. 小程序是企业主体，微信 web-view 组件不对个人类型的小程序开放。2. 您需要有一个自己的域名，在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦，不能随便找一个公开链接)...
基于threejs的开源项目
12-15
基于Three.js的开源项目有很多，以下列举几个常见的： 1. A-Frame：A-Frame是基于Three.js开发的用于构建虚拟现实（VR）和增强现实（AR）应用的开源框架。它提供了一系列简单而强大的组件和实用工具，使开发者能够轻松创建交互性的3D场景。 2. Clara.io：Clara.io是基于Three.js和其他技术的在线三维建模和渲染工具。它提供了一个易于使用的界面，用户可以在浏览器中创建复杂的3D模型，并进行编辑、渲染和分享。 3. Tinkercad：Tinkercad是一款基于Three.js开发的在线3D建模工具，旨在帮助初学者和儿童学习3D建模和打印。它提供了简单直观的界面和预设的形状库，使用户能够轻松创建自己的3D设计。 4. Vizor：Vizor是基于Three.js开发的在线虚拟现实和增强现实创作平台。它提供了一个可视化的编辑器，让用户能够通过拖放组件和脚本来创建交互性的VR和AR体验，而无需编写代码。 这些基于Three.js的开源项目为开发者和用户提供了丰富的工具和资源，使其能够轻松创建和交互3D场景和模型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我好爱吃草莓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值