接触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校园地图思路相关推荐

  1. WebGIS入门--如何做一个简单的校园地图服务网站

    目录 OpenLayer库的配置 在HTML中调用 在JavaScript文件中调用 OpenLayer基础操作 显示地图(天地图API) 百度地图API与天地图API 坐标系转换之百度地图 坐标系转 ...

  2. AR 3D Map地图技术

    AR 3D Map地图技术 工业AR的创业相对于消费级AR的创业难很多,这里有一个市场的天然门槛和壁垒,对工业场景不理解,就做不出符合工业场景的AR产品. 人才壁垒 工业AR创业对创始人和联合创始人的 ...

  3. 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用

    今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...

  4. 7款外观迷人的HTML5/CSS3 3D特效按钮特效

    下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家. 1.CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮,比如 ...

  5. html5 2d,3d游戏引擎

    html5 2d,3d游戏引擎 http://biz.turbulenz.com/developers posted on 2014-10-12 21:58 雨亭 阅读(...) 评论(...) 编辑 ...

  6. 凯立德3d实景地图_360全景地图、3D全景地图、三维实景地图哪个好?

    360全景地图.3D全景地图.三维实景地图哪个好?对于小迪来说,它们都统称为全景地图. 其实,360全景地图对于很多人来说其实并不算陌生,现在很多导航应用都上线了360全景地图功能.无论是国外的谷歌, ...

  7. echart 三维可视化地图_揭秘720°三维全景3D实景地图制作技术

    近两年来三维全景3D实景地图在三维虚拟现实领域中占有相当大的地位.目前的三维720°线上三维实景展示基本都是通过商迪3D三维全景建模与3d全景地图技术制作.例如:VR游戏.智慧城市规划项目.智慧房地产 ...

  8. html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码

    情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示 下载资源: 16 次 下 ...

  9. vue 小地图放大缩小_实景3D卫星地图

    3D地图依据高程数据等对地表进行渲染,实现地表的起伏,模拟出真实的三维场景,让你有如身临其境般的感觉. (注:Bigemap 3D地图是一个三维地图浏览功能,是基于高程数据进行的实时渲染,无法进行下载 ...

最新文章

  1. 极客新闻——18、领导和下属之间到底是什么样的关系?
  2. 爆炸销毁动画组件Explosions
  3. 数据中心基础设施管理的演进
  4. java jmi的基本思想_jmi: JMI 是 JNI 的 C++11/14封装,目的是为了简化JNI使用
  5. 在php100 防恶意注册这个需要怎么填,WordPress防止恶意注册代码
  6. http协议与php关系,PHP中的HTTP协议
  7. MySQL存储过程编程
  8. elasticsearch java_java Elasticsearch详细介绍及使用实例分析
  9. 电脑手机wifi互传文件_安卓手机文件互传
  10. 一文详解Serverless架构模式
  11. 界面优美的linux,Ubuntu 11.04新版发布 诠释精美用户界面
  12. 互联网晚报 | 1月25日 星期二 | 知乎首次举办上星晚会;微信视频号上线首个付费直播间;淘宝天猫“春节不打烊”活动正式上线...
  13. Java自动化测试框架-08 - TestNG之并行性和超时篇 (详细教程)
  14. Windows多线程应用程序的编译和链接
  15. NewSQL登堂入室 数据库厂商掘金行业大数据
  16. 海思HI3559和海思HI3559A的区别以及Hi3559c开发板
  17. 写论文word生成目录
  18. 吉林大学操作系统上机(实验二:处理机调度——实时调度算法EDF和RMS)
  19. iPhone 苹果手机尺寸大全
  20. java版Spring Cloud+短视频带货 b2b2c多商户分布式微服务

热门文章

  1. 无向有权图的建立(邻接链表法) 广度优先搜索 深度优先搜素
  2. java arthas使用
  3. [人脸算法]技术方向综述
  4. 智安网络丨网络架构,是数据中心的“神经脉络”
  5. Revit插件中的“喷淋对齐”“链接CAD”功能操作
  6. pb 如何导出csv_打开CSV格式文件?英雄请留步
  7. 教你解决主板过热导致的频繁死机
  8. 永不放弃--一个藏羚人的感人故事
  9. python中多行注释可以嵌套单行注释吗_Python单行注释与多行注释
  10. 深入理解MOT评价指标