接触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. Python - while语句和if语句 的 用法 及 代码
  2. python不同层级模块的导入和文件的读写
  3. 使用Jquery获取thymeleaf中checkbox的值
  4. RegisterUserFunc为测试对象添加新方法或重写已有方法
  5. A - Promotions
  6. HTML中用弹性布局设置位置,HTML的flex弹性布局
  7. VS2013在Release情况下使用vector有时候会崩溃的一个可能原因
  8. ad19 导出step 没有pcb_PCB设计导出Gerber基本操作及注意事项(三)
  9. 你还精通MySQL,竟然连bin log、redo log都不知道!
  10. 无可用源 没有为任何调用堆栈加载任何符号_面试官问我JVM类加载,我笑了
  11. windows下OpenGL开发前准备
  12. GD32F103与STM32F103的区别 2021.6.2
  13. 安装AdventureWorks2008R2
  14. ThinkPHP自动匹配CP端移动端模板
  15. 002-Mac怎么给Photoshop添加字体
  16. 记录极致cms百度编辑器修改上传图片大小限制
  17. OpenCV4.3 Java 编程入门:Core 组件中的数据结构与方法
  18. ROS学习笔记7:gazebo搭建机器人学习
  19. python输入复数_如何在Python中作为用户输入获取复数?
  20. 正则表达式在IE7浏览器出现校验结果不正确

热门文章

  1. MySQL高可用架构MHA
  2. 设计一个圆形的类即Circle类。
  3. php能做指纹信息的,指纹在生活中的用途有哪些
  4. fifa18怎么改服务器位置,fifa18 球员职业生涯怎么改位置 | 手游网游页游攻略大全...
  5. ArrayList和LinkedList常用方法演示与解析
  6. 智能修改文案-智能写作平台
  7. vba 邮件body html,Excel VBA中的Outlook电子邮件和签名 - .Body vs .HTMLbody
  8. osg 基本几何图元
  9. 阿里云物联网平台使用图文教程
  10. LIO-SAM mapOptmization