清凉世界

一、Web3D相关技术 Web3D以浏览器作为展示终端，内容部署在服务端。能够给用户以虚拟现实的交互体验，从不同角度观察对象（物体或场景）。目前常见的实现方式有以下： 1.1 三维建模与实时渲染 这种方式先用三维建模工具构建三维模型和场景，然后将其转为适合前端浏览器浏览的格式。在浏览器端，利用内置的webGL或通过专用插件（例如Unity）加载三维模型，响应用户的交互指令（切换...

两种技术路线本节介绍展品360展示的两种技术路线，对比其特点。一、定义即用途 本文所讲的360展示是指用于产品或商品展示的Web浏览方式，它不是以下技术： 360实景：例如谷歌街景，这种技术是观察点在固定点旋转，将拍摄的全景图实现Web互动。360展示则是观察点固定不动，观察对象绕自身轴线旋转的过程。360展示可用于虚拟博物馆的网上藏品展示，也可用于电商对自己产品的直观介绍...

展品影像的采集及加工本节对展品影像的采集及加工做个简单介绍。影像采集影像拍摄和采集的原理图如下： 主要硬件组成包括：步进电机驱动的转台、单反相机、用于控制单反相机快门与转台联动的PC，同时接收从单反相机获得的初始影像文件。将拍摄对象的观察角度360度均分，转动转台每个角度拍摄一帧。从而获得观察对象的不同角度的若干帧（帧数越多，交互回放的转动越平滑，但所需要的文件存储容量...

用OpenseaDragon实现无级缩放上节提及金字塔切片的多种格式，本节我们将用其中的一种格式：deep-zoom格式+OpenseaDragon实现高分辨率栅格图像的无级缩放。由于相关知识点的文章已经叙述得较充分了，因此本节的叙述方式主要是在它们之间客串，以期用最简洁的文字使读者获得一个完整的印象。Deep-ZoomDeep-Zoom是微软发展的一种大影像互联网浏览格式，官...

改造OpenSeadragon用于360展示本节主要介绍改造OpenSeadragon，使其适用于360度展示。过去的一年，我曾经对360展示的插件进行选型，商用的插件，我认为目前最成熟的是：http://www.ajax-zoom.com/examples/，我用它做了一个项目实施，虽然遇到一些官网例程之外的麻烦，总的来说，只要官网例子已经有的，依葫芦画瓢就好。官网的例子已经...

将缓存进行到底通过简单的改动，可以在加载不同的帧时，保持对切片的缓存。即令上文中的这句始终有效： var imageRecord = tiledImage._tileCache.getImageRecord(tile.url);  但仅看这个函数的实参我们就可以想到，这个缓存是针对不同url的切片的，而对于不同帧(page)，是有一个更高层次的tiledImage实例与之...

实现快照与回放在360度浏览的过程中，允许用户对特定帧的局部进行快照，将快照增加到快照集合。之后在快照集合点击小图，可迅速回放该快照。两种布局 快照集合有两种布局效果，采用垂直布局的效果如下图：   采用水平布局的最终效果如下图：   快照集合插件选用了JQuery lightSlider , 它使用 MIT LicenselightSlider 的...

实现热区编辑 在画面中定义热区，以显示图文信息或者增加链接，是图形展示常见而且实用的功能点。本章节通过引入OpenSeadragonSelection插件，JQuery ballon插件，利用OpenSeadragon的事件机制实现热区编辑。最终效果截图如下： 目标功能 点击热区编辑按钮切换到热区编辑状态，再点击该按钮退出编辑状态点击图形区可创建新的热区，或者点击...