记一次three.js 布局3D室内简易地图

完整DEMO有需要可以下载，three.js json配置地图DEMO

随着html5 canvas的流行，酷炫的web端效果层出不穷，搭载基于webgl 的three.js的图形库可以做出基于web的3D效果。最近应对客户需求，2D平面地图已经不太满足客户的口味，3D的效果更让人接受，先看一下成果图。

对应室内地图CAD图纸进行3D立体效果拉伸，再加上一些实景模型的搭配，使得整体效果更好。

地图地板墙体的依据cad 尺寸制定的json数据协议：

 {title: '',x: 480,y: 80,z: 0,width: 2,height: 866,color: "#30B2BB",textcolor: "black",bordercolor: "rgba(76, 181, 216, 0.85)",bspMesh: [// 小房子的墙{type: 'union',geometryType: 'box', color: '#fff',x: 0,y: 80,z: 82,width: 38,height: 2,positionY: 0,}]
}

3D坐标轴对应2D多了一个高度，这里高度设置为Y轴，2D.Y=>3D.Z 2D.X=>3D.X 。3D场景新增的几何体都是模型的中心在原点，而2D的原点是从屏幕左上角开始（0,0），所以这里需要一个转换，首先确认地图的最大长宽尺寸，然后通过计算得到2D坐标转换3D时基于地图的位置设置其position，

data.x = data.width / 2 - MapXLength / 2 + data.x;

data.z = data.height / 2 - MapZLength / 2 + data.z;

常规的地面墙面，以及柱子，墙面门通过，ThreeBSP库进行模型的组合，打孔，完成。

地图区域的说明通过DIV+css来完成，实时计算3D坐标系固定位置对于2D屏幕的位置来实现引导性的连接：

function worldPointToScreen(point) {let vec2 = point.project(camera);let halfWidth = window.innerWidth / 2;let halfHeight = window.innerHeight / 2;return {x: vec2.x * halfWidth + halfWidth,y: -vec2.y * halfHeight + halfHeight};
}

转换公式如上。

地图操作控制器是OrbitControls。

记一次three.js 布局3D室内简易地图相关推荐

js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
three.js实现3D室内全景看房
首先我们先搭建一个项目,我选择使用vite来进行项目的搭建,执行命令如下: yarn create vite 项目名称这样一个基本的项目就搭建成功了,目录如下所示然后,下载一下three.js工具 ...
html5 3d室内房间布局图片展示js特效
下载地址 html5 3d室内房间布局图片展示特效 dd:
three.js实现3d球体树状结构布局——添加入场、出场、点击放大等动画
目录系列文章前言新增功能添加背景灯光旋转动画数据入场.出场动画点击放大实现效果实现源码相关资源系列文章 three.js实现3d球体树状结构布局--树状结构的实现前言本文建议 ...
【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图...
原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...
智慧医院建设新趋势-院内导航系统-医院3D室内导航系统
随着时代经济的发展,人们的医疗需求也在上升,而现在的各大医院建筑面积动辄几万平方米,复杂的布局以及难以连续的指示标志却对就医的患者十分不友好,相信不少的小伙伴也有类似的经历.所以医疗服务的健全就变得十 ...
Three.js - 走进3D的奇妙世界
摘要:本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<thr ...
政务中心3D室内导航系统
政务中心3D室内导航系统一.系统背景办事者不清楚所需资料及办理窗口和路线,前往咨询台或随机询问工作人员,政务中心咨询台咨询量巨大政务中心面积越来越大,办事窗口众多.楼层布局复杂,办事人员寻路困难 ...
3D室内导航系统技术方案
今天和大家分享一下3D室内导航系统针对医院的解决方案,近期也在整理微信端的室内定位导航的资料,后续后空也会分享给大家,如果有兴趣的朋友可以加我QQ1563056788交流一.系统简介医院便民服务互 ...
3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体原生 JS 实现 3D 立方体 ...

记一次three.js 布局3D室内简易地图

记一次three.js 布局3D室内简易地图相关推荐

最新文章

热门文章