如何在H5中完美融入VR技术？道可云VR全景教程！

VR技术，应该是当下最人们的技术了，各大硬件厂商接连推出VR硬件，也对VR未来进行畅想，仿佛VR已经真的融入到我们身边了。

然而，VR设备也是五花八门，有牛人“纸制”，也有“大厂”生产，我们从技术角度来举例说明下VR，3D全景技术怎么用H5来武装自己的营销。先百度百科下，VR是什么？

曰：综合利用计算机图形系统和各种现实及控制等接口设备，在计算机上生成的、可交互的三维环境中提供沉浸感觉的技术。其中，计算机生成的、可交互的三维环境称为虚拟环境（即Virtual Environment，简称VE）。虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统。它利用计算机生成一种模拟环境，利用多源信息融合的交互式三维动态视景和实体行为的系统仿真使用户沉浸到该环境中。 ——《百度百科》节选

概念已清，怎么实现”可交互的三维环境“，下面型科就以一个案例来全面剖析3D全景技术在H5上的运用。

　　这个案例是郑凯带你去baby的化妆间,跑男兴风作浪很多年，这个契机，这个环境，不知道怎么就有了这个案例。就是这么任（wu）性（zhi）的介绍。这个案例，前一半场是一个视频，引入环境，表示郑凯带着你去的。当然，这个前导视频也是可以做成全景的，后面我们别的案例在做介绍，它是后半部分。一个3D全景的化妆间

　　大概是这个样子的，我们可以左右，上下滑动来查看这个化妆间的位置，查看不同的角度，我们看到的内容也是不一样的，还有一个好玩的地方，他和《跑男》一样有一个找线索的游戏过程，在这一个3D的全景里面，你就像真的走到了这个房间一样，可谓360°无死角啊！可以翻看查找你要的线索。图中闪亮的钻石点就是提供的线索，有兴趣的可以玩玩。

接下来我们拆解下着个3D全景图是什么，来，大家看过来
　　

看到了吧，这就是一个全景的照片，我们可以用提供全景拍摄的设备拍摄出来。制作全景图的工具网上也右提供的，有的收费有的免费，百度上一搜“全景图制作工具”出来一堆。（就是这样任（wu）性（zhi）的提示）其实，除了提供一张全景图以外，还可以提供一组6张样图，一个正方体的6个面的图片。例如:
　　

显示效果大概是这样的！
　　

不过，这个要求拍摄的角度都是正面的。立方体全景图有6个面，我们需要定义每个面贴图的背景图片，3D位置，旋转角度（默认的6个面都是朝着我们的，我们需要定义朝坐标轴的各个方向做90度的旋转，才可以搭建成一个立方体）
　　

接下面我们就用3D引擎技术来实现一个3D场景。 Three.js源自Github的一个开源项目，想要利用Three.js制作一个物体渲染到网页中去，需要构建这3个组建：场景（scene）、相机（camera）和渲染器（renderer）。

一.场景（scene）

即是画布，是所有物体object的容器。在最开始的时候对场景实例化，将之后构建的物体都添加到场景中即可。
　　

二.相机（camera）

用户是通过相机Camare来查看在scene下的3d场景，在three.js里包含了正交投影照相机（Orthographic Camera）和透视投影照相机（PerspectiveCamera）2种，从模拟人眼看物体的方式来选，透视投影照相机更适合。如下图所示，fov是相机视角的夹角，aspect等于相机画幅比例，near和far分别是照相机到视景体最近、最远的距离，均为正值，且far应大于near。
　　

三.渲染器（render）

渲染器是用来设定渲染的结果会在页面的什么元素上面呈现，以及按什么规则来渲染。

　　完成以上三部过后，就建立一个3D显示的模型了。
　　

这样模型建立好以后，我们就该把我们要表现的素材加入到场景中去了。以全景图为例，我们通过建立图片纹理用作整个背景。这样我们只是才把素材加入到场景中去，要想真的显示出来，还需要经过渲染。
　　

渲染

这里我们用的是Threejs的实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面animate中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让animate()再执行一次，就形成了我们通常所说的渲染循环了。
　　

这样，我们就完成了一个3D全景展示了，在浏览器中打开就是刚上面，我们截图样子了。

刚才我们只是建立了一个3D的化妆间的背景图，案例中的背景图上还是有其他元素的哦，并且元素是分布在3D全景里面的，只有你滑到了相应的位置才能看到，才能操作。接下来，我们就来看看，怎么在3D全景中加入元素。
　　

下面我们来绑定事件我们找到这个Dom，来为它绑定”Click“事件。
　　

然后我们在运行，就和按钮一个样啦，可以在3D全景中，寻找你刚布置的点，并且能响应到你注册的事件。

如何在H5中完美融入VR技术？道可云VR全景教程！相关推荐

h5 vr效果_全景展示h5，深度解读如何在H5中完美融入VR技术
全景展示技术,应该是当下最人们的技术了,各大硬件厂商接连推出VR硬件,也对VR未来进行畅想,仿佛VR全景展示已经真的融入到我们身边了. 然而,全景展示设备也是五花八门,有牛人"纸制" ...
深度解读如何在H5中完美融入VR技术
VR技术,应该是当下最人们的技术了,各大硬件厂商接连推出VR硬件,也对VR未来进行畅想,仿佛VR已经真的融入到我们身边了. 然而,VR设备也是五花八门,有牛人"纸制",也有&quo ...
机器学习之网格搜索技术，如何在Auto-sklearn中应用网格搜索技术
文章目录一,机器学习中的网格搜索技术是怎么回事二,通俗解释三,在一般情况下使用网格搜索技术四,GridSearchCV网格搜索技术的原理五,如何在Auto-sklearn中使用网格搜索技术 ...
H5中的页面存储技术
H5中的页面存储技术 1 会话跟踪技术 2 localStorage与sessionStorage 2.1 概述 2.2 localStorage的优势与局限: 2.3 使用方法 1 会话跟踪技术 h ...
国在产vr视频区_九台vr技术安全体验馆VR行走平台资讯
九台vr技术安全体验馆VR行走平台资讯 VR的真正的含义是现实,即计算机工程师通过对建筑工地现场的录视频.拍照片,然后在计算机上通过专业的3D建模软件大程度上还原建筑工地的真实施工现场,然后通过高端的 ...
医疗行业与vr技术的融合，vr医疗的优势有哪些？
如今的行业的发展可以说成日异月新,互联网技术的发展更是一马平川.互联网的改变了人们的生活方式,使生活更加便利.让一些变得人性化,互联网最突出的意义是改变了传统产业模式,使得所有传统行业向互联网时代进发 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
计算机动画 vr技术应用,浅谈VR技术在动画专业教学中的运用
摘要:VR技术是网络计算机技术快速发展背景下衍生的新技术,其以计算机为载体,能够对复杂数据进行高效的交互和可视化操作,当前,VR技术逐渐向教育领域延伸,作为一种新的教学技术具有非常广阔的前景.本文以V ...
vr技术好不好？vr技术的应用场景有哪些？华锐互动
vr也叫做虚拟现实技术,通过科技手段模拟一个虚拟场景,高度还原真实世界.vr技术是目前较为盛行的新型技术,在许多行业领域中都可以看到它的影子,比如虚拟游戏,虚拟图书馆,汽车展览等等. 1.地产行业通 ...

如何在H5中完美融入VR技术？道可云VR全景教程！

如何在H5中完美融入VR技术？道可云VR全景教程！相关推荐

最新文章

热门文章