深度解读如何在H5中完美融入VR技术
VR技术，应该是当下最人们的技术了，各大硬件厂商接连推出VR硬件，也对VR未来进行畅想，仿佛VR已经真的融入到我们身边了。
然而，VR设备也是五花八门，有牛人“纸制”，也有“大厂”生产，我们从技术角度来举例说明下VR，3D全景技术怎么用H5来武装自己的营销。 先百度百科下，VR是什么？
曰：综合利用计算机图形系统和各种现实及控制等接口设备，在计算机上生成的、可交互的三维环境中提供沉浸感觉的技术。其中，计算机生成的、可交互的三维环境称为虚拟环境（即Virtual Environment，简称VE）。虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统。它利用计算机生成一种模拟环境，利用多源信息融合的交互式三维动态视景和实体行为的系统仿真使用户沉浸到该环境中。 ——《百度百科》节选
概念已清，怎么实现”可交互的三维环境“，下面型科就以一个案例来全面剖析3D全景技术在H5上的运用。
这个案例是郑凯带你去baby的化妆间,跑男兴风作浪很多年，这个契机，这个环境，不知道怎么就有了这个案例。就是这么任（wu）性（zhi）的介绍。这个案例，前一半场是一个视频，引入环境，表示郑凯带着你去的。当然，这个前导视频也是可以做成全景的，后面我们别的案例在做介绍，它是后半部分。一个3D全景的化妆间
大概是这个样子的，我们可以左右，上下滑动来查看这个化妆间的位置，查看不同的角度，我们看到的内容也是不一样的，还有一个好玩的地方，他和《跑男》一样有一个找线索的游戏过程，在这一个3D的全景里面，你就像真的走到了这个房间一样，可谓360°无死角啊！可以翻看查找你要的线索。图中闪亮的钻石点就是提供的线索，有兴趣的可以玩玩。给大家体验一个最新的VR视觉视频类H5，通过第一视角的方式遨游美年达神码乐园，给用户极强的视觉感→这里可以体验
接下来我们拆解下着个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技术相关推荐
- h5 vr效果_全景展示h5，深度解读如何在H5中完美融入VR技术
全景展示技术,应该是当下最人们的技术了,各大硬件厂商接连推出VR硬件,也对VR未来进行畅想,仿佛VR全景展示已经真的融入到我们身边了. 然而,全景展示设备也是五花八门,有牛人"纸制" ...
- 如何在H5中完美融入VR技术？道可云VR全景教程！
VR技术,应该是当下最人们的技术了,各大硬件厂商接连推出VR硬件,也对VR未来进行畅想,仿佛VR已经真的融入到我们身边了. 然而,VR设备也是五花八门,有牛人"纸制",也有&quo ...
- 深度分析如何在Hadoop中控制Map的数量
深度分析如何在Hadoop中控制Map的数量 guibin.beijing@gmail.com 很多文档中描述,Mapper的数量在默认情况下不可直接控制干预,因为Mapper的数量由输入的大小和个数 ...
- 机器学习之网格搜索技术，如何在Auto-sklearn中应用网格搜索技术
文章目录 一,机器学习中的网格搜索技术是怎么回事 二,通俗解释 三,在一般情况下使用网格搜索技术 四,GridSearchCV网格搜索技术的原理 五,如何在Auto-sklearn中使用网格搜索技术 ...
- H5中的页面存储技术
H5中的页面存储技术 1 会话跟踪技术 2 localStorage与sessionStorage 2.1 概述 2.2 localStorage的优势与局限: 2.3 使用方法 1 会话跟踪技术 h ...
- 博文推荐｜深度解析如何在 Pulsar 中实现隔离
本文作者为 StreamNative 工程师李鹏辉.刘昱. 关于 Apache Pulsar Apache Pulsar 是 Apache 软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息. ...
- LaxTex上的算法表格如何在word中完美的表示出来-Aurora Equation
哇真的是好久没写博客了我也算是个 鸽子老手了 鸽鸽鸽........ 因为临近毕业了嘛 对最惨的一届研三狗(虽然每年的研三狗找工作都不容易)要写大论文和修改文章所以 学习了如何在word上将Latex ...
- 深度学习————如何在Python中求解函数的解析表达式
1 致谢 感谢杨老师的教导! 2 在Python中求解函数的解析表达式 首先写出函数的表达式,然后使用SymPy函数库求解函数偏导数的解析表达式(符号微分),然后再使用SymPy库将求得的符号微分转换 ...
- 厂家深度解读：采用凯夫拉中底的劳保鞋优点有哪些？
劳保鞋一般适用的工作环境是较为艰苦的,它能有效的保护人们的足部在有危险工作环境下免受于伤害.我们都知道劳保鞋的种类有你很多,防穿刺劳保鞋算是劳保鞋的常规防护作用了.相同功能它的防护材料也是有所不同的, ...
最新文章
- Android的Adapter用法总结
- 训练模型前数据是不是这样处理会更好
- 对函数指针与typedef的理解:typedef void (*sighandler_t)(int)
- 配置windows驱动开发环境
- python 什么是上下文管理器（ContextManager）？
- 华为android o适配名单,Android 12首批适配名单公布：没有华为、荣耀
- RTSP、RTMP、HTTP协议区别
- 【项目管理】虚拟团队
- C语言 最大公约数和最小公倍数计算
- leetcode - 56. 合并区间
- 计算机考试时间2021安徽,安徽省2021年高考录取结果查询正式开通！查询方式权威公布...
- 以太坊 ERC-20 ERC-721 ERC-1155区别对比
- 地狱把妹王汉化补丁 附使用教程|Helltaker汉化补丁
- 安装linux取消硬盘密码设置,linux下硬盘加密方法
- 挂马方式研究、挂马检测技术研究
- js判断上传文件为图片格式、excel格式
- 即时通讯im源码软件uniapp（基于开源在线交友聊天系统源码框架）
- 【MySQL】MVCC多版本并发控制（重点：MVCC实现原理之ReadView）
- $monitor用法
- 型B2C电子商务网站组织架构分析