一、      简介

基于Web端的三维模型展示,这里仅介绍Three.js和Potree。

Three.js 是一款基于WebGL的运行在浏览器中的 3D 开源引擎,用它创建各种三维场景。它类似于Meshlab开源中的VCGLib库,后者是基于OpenGL进行封装的3D开源库,本质是相同的。所以,基于three.js会比较灵活,模型显示不失真。但对初学者来说,学习难度较大。另外,它没有对模型网格存取与显示做什么优化,在模型文件较大时,在浏览器打开时会等待较长时间。

Potree是一种基于WebGL的点云数据可视化解决方案,包含点云数据转化,以及进行可视化的源码。该解决方案的主要优势在于对点云数据进行了多尺度的管理,在数据传输和可视化上都做了优化。它是一套开源的系统,基于Three.js,由奥地利维也纳理工大学的Harvest4D项目贡献。

实际应用中,业务三维模型往往比较大(100M以上),考虑到网络带宽等诸多原素,为了在Web端能快速的展示与操作三维模型。如果选择Three.js,工作量会比较大;选择Potree会相对比较省事,因为它已经在文件分离下载与快速渲染方面已行了很多优化。Potree的主要缺点是基于点云格式显示,存在部分失真情况。所以,下面主要将针对Potree进行重点说明,Three.js内容请大家参考下面网址。

二、      软件环境

2.1   Potree

https://github.com/potree/potree

2.2   PotreeConverter

https://github.com/potree/PotreeConverter

2.3   Potree学习

https://github.com/potree/potree/blob/master/docs/getting_started.md

2.4   Three.js

https://github.com/mrdoob/three.js/

2.5   Three.js学习

https://threejs.org/examples/

三、      要点

3.1   转换

Potree在Web上展示的点云文件,支持binary,las和laz三种数据格式。所以,对其它的三维模型文件格式(例如:ply),需通过PotreeConverter工具进行转换。

如图一所示,经过命令行形式转换后,会生成下面内容:

  • 会生成多个.bin数据文件,每一个大小均在100K左右。这样,Web加载时可以逐漸下载显示,而不是全部下载完后才显示。
  • 整体资源打包,并生成一个静态html展示主页,方便浏览。

图一

3.2   IO支持

Potree Converter支持格式:

  • 输入格式:las、laz、 binary、ply、xyz和ptx;
  • 输出格式:binary、las和laz。

3.3   速度

采用了特殊的点云文件压缩与分割处理,以及逐漸渲染方式,速度还是明显很快的。经本人测试:Potree官网提供的多个demo显示,最长时间为20秒显示完毕,一般性的都是10秒内显示完毕。假设如果是在国内网存取,理论上速度应该更快些。

3.4   浏览器支持

对目前主流的IE、Chrome和FireFox都支持,本人已在Chromev 57.0.2970.0和MicrosoftEdgeHTML 14.14393测试通过。

3.5   操作支持

支持鼠标左键旋转、滚轮缩放、右键平移。另外,还提供强大的属性操作界面,例如:角测量、高度测量、距离测量、面积测量、体积测量、多视角观察等等。除了直接对模型进行编辑修改外,基本上其它功能都有。

3.6   中文支持

如图二所示属性操作界面,目前页面是可以支持中文,但引用的i18next库好象不支持中文,导致中文测试时显示为乱码。

图二

四、      Web展示效果

经过在本地搭建web服务器后,进行测试(例如:http://localhost/potree/test.html)。下面是一些Potree在Web上显示效果与Meshlab模型显示的对比,实际上也相当于基于点的模型(点云)文件和原始三维模型(例如:ply)进行比较。

备注:采用potree converter进行转换时,如果调整某些参数,理论上生成的点云文件应该会更清晰一些。

图三

五、      基于Potree的解决方案

思路:在存放三维模型文件的服务器,存在一个后台运行的程序:定时读取新的三维模型文件、调用PotreeConverter控制台程序自动转换模型文件到Potree支持的目录、关闭PotreeConverter控制台程序、将生成Potree目录信息拼接成http网址(例如:http://localhost/potree/test.html,其中localhost将被真实的域名或IP取代),最后更新到关联数据库中。此后台程序将包装成Service API的形式(例如:RESTful方式)以供调用。当服务层每上传一个模型文件成功后,调用该后台Service API接口来获到生成的网址,将该网址随原客户端信息一起更新到数据库中。这种由服务层直接拉的方式,可避免定时转换问题、动态监测模型文件、以及远程更新数据库的问题。

例如:

PotreeConverter控制台转换命令:

PotreeConverterD:\MeshLab_Model\20150602112021.ply –o C:\xampp\htdocs\potree –generate-page testCabinet

以下是我as格式的转换命令

.\PotreeConverter.exe E:\OriginData\qinghai\las -o  E:\OriginData\qinghai\las --generate-page web --output-format LAS --material INTENSITY

转换后效果如下

拼接而成的网址:

http://localhost/potree/testCabinet.html      (本地测试用)

图四

六、      总结

经过一系列的测试、比较与分析,potree在速度方面已经基本达到要求。显示质量方面略有不足,主要原因是它是基于点云模型作为基础来显示,所以本身模型质量就比不上原始三维模型。不过,整体上看显示效果还是差不多的,作为在浏览器上能快速观看地目的,可以满足此需求。

Potree学习总结的更多相关文章

  1. 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天:关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

随机推荐

  1. 如何高效的写出markdown笔记

    重置用户名和密码 安利一个小工具donet-cnblog可以同步图片到cnblog中,同时生成对应的Markdown笔记.写博客的时候我们可以本地写,用这个工具同步到cnblog上能够大大节省我们的时 ...

  2. 8、Web Service-IDEA-jaxws规范下的 spring整合CXF

    前提:开发和之前eclipse的开发有很大的不同! 1.服务端的实现 1.新建项目 此时创建的是web项目 2.此时创建的项目是不完整的需要开发人员手动补充完整 3.对文件夹的设置(满满的软件使用方法 ...

  3. Kali-linux破解操作系统用户密码

    当忘记操作系统的密码或者攻击某台主机时,需要知道该系统中某个用户的用户名和密码.本节将分别介绍破解Windows和Linux用户密码. 8.6.1 破解Windows用户密码 Windows系统的用户 ...

  4. linux 下 chkconfig安装与使用详解

    chkconfig 安装 开始的时候因为Raspbian的原因,系统是不自带chkconfig这个命令的, root@raspberrypi:~# chkconfig-bash: chkconfig: ...

  5. H5上传图片,并且显示进度条

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. ios下元素溢出设置 overflow:auto; 不能滑动解决办法

    ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:tou ...

  7. 404 Note Found 队 Alpha8

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  8. Python 学习笔记(十五)Python类拓展(二)方法

    方法 绑定方法和非绑定方法 绑定方法和非绑定方法在创建时没有任何区别,同一方法,既可以为绑定方法,也可以为非绑定方法,一切不同都只在调用时的手法上有所区别. 绑定方法即该方法绑定类的一个实例上,必须将 ...

  9. 关于keil不同容量和不同引脚大小的编译以及下载出错问题

    如果遇到这个问题一般可能有四个原因(以STM32F103C8T6为例) 1.芯片型号没有选对 2.startup文件可能没有选对,startup文件常用的分为3种,startup_stm32f10x_ ...

  10. iOS之Custom UIViewController Transition

    本文学习下自定义ViewController的切换,从无交互的到交互式切换. (本文已同步到我的小站:icocoa,欢迎访问.) iOS7中定义了3个协议: UIViewControllerTrans ...