HTML5实现3D校园地图思路

接触HTML5有一段时间了，从刚开始就想做一个3D的校园地图，在网上查找了很多资料，发掘到了three.js这个3D引擎(可以在github上下载到)，尝试了开发者给的一些demo，发现渲染效果很不错，值得学习，但是目前这个框架不是十分成熟，还在开发阶段，希望开发者能带给我们更多的惊喜。

接下来想说说3D校园地图模型的事情，我觉得与用directX或者openGL开发唯一不同的应该是渲染环境不同，其他基本差不多吧(个人理解)，主要应该分为一下几个步骤:

(1) 数据采集：获取校园的相关建筑数据以及地理环境信息；

(2) 平面图制作：从获取的相关数据中提取有用信息，建立校园二维平面图；

(3) 三维模型建立：建立校园场景中的建筑模型、场景小品模型、天空环境模型和地形模型等；

(4) 三维引擎构建：使用程序来实现模型导入、三维场景的漫游、导航功能。

其中平面图形用AutoCAD制作，3D模型由3D MAX制作，three.js这个框架有提供将3D MAX模型转化成json格式的js文件的脚本(可以在3D MAX中运行这个脚本，导出)，从而可以用three.js来加载模型，渲染在Canvas中。但是目前我发现一个问题，在3D MAX中，你给自己创建的模型贴图处理后，导出成JS文件，three.js却无法加载贴图信息，所以必须得用three.js提供的api重新给模型贴图，没有GUI界面，感觉挺麻烦(3D MAX中贴图十分方便),不知道这个问题能不能得到解决。

突然发现任重而道远呀，好多问题需要解决学习，主要还有各种考试，慢慢的开始，慢慢的结束，持之以恒~

HTML5实现3D校园地图思路相关推荐

WebGIS入门--如何做一个简单的校园地图服务网站
目录 OpenLayer库的配置在HTML中调用在JavaScript文件中调用 OpenLayer基础操作显示地图(天地图API) 百度地图API与天地图API 坐标系转换之百度地图坐标系转 ...
AR 3D Map地图技术
AR 3D Map地图技术工业AR的创业相对于消费级AR的创业难很多,这里有一个市场的天然门槛和壁垒,对工业场景不理解,就做不出符合工业场景的AR产品. 人才壁垒工业AR创业对创始人和联合创始人的 ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...
html5 2d,3d游戏引擎
html5 2d,3d游戏引擎 http://biz.turbulenz.com/developers posted on 2014-10-12 21:58 雨亭阅读(...) 评论(...) 编辑 ...
凯立德3d实景地图_360全景地图、3D全景地图、三维实景地图哪个好？
360全景地图.3D全景地图.三维实景地图哪个好?对于小迪来说,它们都统称为全景地图. 其实,360全景地图对于很多人来说其实并不算陌生,现在很多导航应用都上线了360全景地图功能.无论是国外的谷歌, ...
echart 三维可视化地图_揭秘720°三维全景3D实景地图制作技术
近两年来三维全景3D实景地图在三维虚拟现实领域中占有相当大的地位.目前的三维720°线上三维实景展示基本都是通过商迪3D三维全景建模与3d全景地图技术制作.例如:VR游戏.智慧城市规划项目.智慧房地产 ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
vue 小地图放大缩小_实景3D卫星地图
3D地图依据高程数据等对地表进行渲染,实现地表的起伏,模拟出真实的三维场景,让你有如身临其境般的感觉. (注:Bigemap 3D地图是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载 ...

HTML5实现3D校园地图思路

HTML5实现3D校园地图思路相关推荐

最新文章

热门文章