一种基于WebGL虚拟现实自动旋转展示的方法技术

本发明专利技术公开一种基于WebGL虚拟现实自动旋转展示的方法，利用WebGL技术并结合虚拟现实的全景照片或全景视频，以第一视角方式完全还原拍摄现场的真实画面，让使用者有身临其境的感觉。同时，提供了在虚拟场景内通过点击热点走动的功能，可以通过多个地点浏览整个场景的构造，让用户对场景了然于胸。另外，由于采用了自动旋转技术，用户在第一次使用全景播放器时可以更便捷地观看整张图片的全貌，以防用户误认为所看到的只是屏幕的固定部分而忽略了全景图片或视频的全景特性，是一种很好的创新方案，很有市场推广前景。

【技术实现步骤摘要】
一种基于WebGL虚拟现实自动旋转展示的方法
本专利技术涉及场景展示系统中图形展示
，特别是涉及一种基于WebGL虚拟现实自动旋转展示的方法。
技术介绍
WebGL是一种在任何可兼容的网页浏览器中渲染3D图形的JavaScriptAPI，无需加装插件。通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL是基于OpenGLES提供的3D图像API。可以利用JavaScript实现自动内存管理，WebGL使用GLSL作为着色器。虚拟现实(VirtualReality，简称VR)是利用计算机技术模拟产生三维的虚拟世界，让使用者及时、没有限制地感知虚拟空间内的事物。虚拟现实技术利用视觉、听觉、触觉、嗅觉等对人体进行全方位欺骗，达到让使用者“身临其境”的效果。近几年来，虚拟现实技术蓬勃发展，各大厂商也纷纷进入虚拟现实领域大展拳脚，该领域的投资并购不胜枚举。如图1所示，现在市面上的场景展示系统大多是基于正常照片的滚动式的照片橱窗浏览系统，图片底部是一个可以左右滑动的照片选择器，用户可以点击最左边或最右边的按钮移动照片选择器中的照片，点选其中的某张照片可以改变选择器上方的展示大图。现有的场景展示系统只能通过从某个固定角度拍摄的照片观看场景，具有较大的观察死角，无法客观了解场景的全貌，容易造成网上看到的与实地看到的场景有较大差距，实用性能不佳，存在着不足，不能满足社会高速发展的需求。综上所述，针对现有技术的缺陷，特别需要一种基于WebGL虚拟现实自动旋转展示的方法，以解决现有技术的不足。
技术实现思路
针对原有的场景展示系统存在盲区，导致无法客观了解场景全貌，本专利技术提出一种基于WebGL虚拟现实自动旋转展示的方法，设计新颖，还原拍摄现场的真实画面，让使用者有身临其境的感觉，感观性能优，已解决现有技术的缺陷。为了实现上述目的，本专利技术的技术方案如下：一种基于WebGL虚拟现实自动旋转展示的方法，包括如下步骤：步骤S1:通过拍摄设备到现场获取全景照片或视频；步骤S2：利用WebGL中的three.js将拍摄到的全景照片构成3D场景的基础构建，采用开源的3D引擎库提升开发的效率；步骤S3:构建多个全景场景切换，即进入房间后的走动效果；步骤S4:构建全景场景的自动旋转；自动旋转的实现方式包含有电脑端、移动端；步骤S5:实现虚拟现实分屏观看；步骤S6:分屏模式下实现点击效果。进一步，本专利技术获取展示素材的全景照片或视频的方式为：1)、直接拍摄全景照片或视频；2)、采用单反加鱼眼的模式拍摄多张照片，使用全景照片拼接软件拼合成一张全景图；3)、通过多个运动相机同时拍摄多个角度的视频，再使用拼接软件拼合成一个全景视频。进一步，本专利技术构建基础3D场景的步骤为：调用THREE.Scene构建3D场景；调用THREE.WebGLRender生成渲染器；调用THREE.PerspectiveCamera创建透视摄像机；调用THREE.TextureLoader将全景图片或者全景视频传入生成图片texture；调用THREE.MeshBasicMaterial再将刚刚生成的texture作为map的参数传入生成全景材质；调用THREE.SphereGeometry创建球形的顶点模型；调用THREE.Mesh将球形定点模型与全景材质作为参数传入生成一个带材质的球形网格模型；将camera与mesh归零处理,并将mesh的scale.z设置为-1，将camera与mesh添加到场景中；创建functionrender函数，在其中调用WebGLRender(camera,scene)渲染场景；调用requestAnimationFrame函数将render函数传入，做到每一次浏览器的渲染，必定调用render函数；将包含代码的页面与素材部署到服务器；打开浏览器访问网页地址，浏览场景展示系统。进一步，本专利技术构建多个全景场景切换包括如下步骤：调用THREE.MeshTHREE.MeshBasicMaterialTHREE.PlaneGeometry构建一个点击按钮；将按钮放置在全景球的某个合适位置，如走道上，门口；调用THREE.Raycaster生成一条射线，对webGLRender.domElement监听click事件，记入鼠标点击位置，在鼠标位置生成一条射线，射线在发射过程中如果碰到按钮，会将第一个碰到的按钮返回，通过检测是否返回按钮可以判断按钮被点击了；重复调用生成全景场景全景球的方法，传入第二张全景图，生成全景球2号；在按钮上设置监听当按钮被点击的时候，切换两张全景图的material的透明度，图片1显示图片2消失，图片2显示图片1消失，营造一种叠画的效果。进一步，本专利技术构建自动旋转为电脑端，电脑端在用户长时间静止不动即没有修改全景场景视角的情况下，自动触发电脑自动旋转机制，自动旋转全景图以营造一种用户自然环顾的效果；构建自动旋转电脑端的步骤为：全局调用一次setInterva，每隔1000ms触发事件以检测Camera的视角是否发生变化；如果本次调用与上次调用的rotation参数值相同，则记录Camera此次未动；累计连续3次Camera未动就触发自动选择条件；编写autoRotation函数，设置偏移量Math.PI*0.01，在每次的render过程中调用autoRotation函数，给camera的rotation.y参数添加偏移量；再次监测render.domElement函数的mousedown事件，当mousedown事件触发时停止调用autoRotation。进一步，本专利技术构建自动旋转为移动端，移动端包含有手机端或者平板端，利用移动设备自带的陀螺仪传感器，通过旋转手机调整场景视角；构建自动旋转移动端的步骤为：在window中监听orientation事件，获取陀螺仪的alpha,beta,gamma参数；在每次render过程中将获取的alpha,beta,gamma参数赋值给camera.rotation可以实现camera的自动旋转。进一步，所述实现虚拟现实分屏观看的步骤为：调用THREE.PerspectiveCamera创建两个cameraLeft，cameraRight；根据Anaglyph3D和Parallaxbarrier理论修正cameraLeft和cameraRight投影矩阵；在render时将普通camera上的matrixWorld拷贝到cameraLeft与cameraRight以确保三个相机同步；重写render函数，调用WebGLRender对象，传入cameraLeft和scene两个参数，渲染到画布的左半边，然后调用webGLRender对象，传入cameraRight和scene两个参数，渲染到画布的右半边，形成双目的效果。进一步，分屏模式下实现点击效果的步骤为：重新修改之前的射线代码，添加检测设备的方法；如果检测设备是电脑，则保持代码不变；如果检测设备是手机，则将射线的发射点由mouse的点击位置修改为camera的注视点，模拟从视野正中心点击的动作；与电脑相同，当射线接触到按钮时判定按钮被点击。本专利技术的有益效果是：虚拟现实特性能产生身临其境的体验效果，可本文档来自技高网...

【技术保护点】
1.一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：包括如下步骤：步骤S1:通过拍摄设备到现场获取全景照片或视频；步骤S2：利用WebGL中的three.js将拍摄到的全景照片构成3D场景的基础构建，采用3D引擎库提升开发的效率；步骤S3:构建多个全景场景切换，即进入房间后的走动效果；步骤S4:构建全景场景的自动旋转；自动旋转的实现方式包含有电脑端、移动端；步骤S5:实现虚拟现实分屏观看；步骤S6:分屏模式下实现点击效果。

【技术特征摘要】
1.一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：包括如下步骤：步骤S1:通过拍摄设备到现场获取全景照片或视频；步骤S2：利用WebGL中的three.js将拍摄到的全景照片构成3D场景的基础构建，采用3D引擎库提升开发的效率；步骤S3:构建多个全景场景切换，即进入房间后的走动效果；步骤S4:构建全景场景的自动旋转；自动旋转的实现方式包含有电脑端、移动端；步骤S5:实现虚拟现实分屏观看；步骤S6:分屏模式下实现点击效果。2.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：获取展示素材的全景照片或视频的方式为：1)、直接拍摄全景照片或视频；2)、采用单反加鱼眼的模式拍摄多张照片，使用全景照片拼接软件拼合成一张全景图；3)、通过多个运动相机同时拍摄多个角度的视频，再使用拼接软件拼合成一个全景视频。3.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建基础3D场景的步骤为：调用THREE.Scene构建3D场景；调用THREE.WebGLRender生成渲染器；调用THREE.PerspectiveCamera创建透视摄像机；调用THREE.TextureLoader将全景图片或者全景视频传入生成图片texture；调用THREE.MeshBasicMaterial再将刚刚生成的texture作为map的参数传入生成全景材质；调用THREE.SphereGeometry创建球形的顶点模型；调用THREE.Mesh将球形定点模型与全景材质作为参数传入生成一个带材质的球形网格模型；将camera与mesh归零处理,并将mesh的scale.z设置为-1，将camera与mesh添加到场景中；创建functionrender函数，在其中调用webGLRender(camera,scene)渲染场景；调用requestAnimationFrame函数将render函数传入，做到每一次浏览器的渲染，必定调用render函数；将包含代码的页面与素材部署到服务器；打开浏览器访问网页地址，浏览场景展示系统。4.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建多个全景场景切换包括如下步骤：调用THREE.MeshTHREE.MeshBasicMaterialTHREE.PlaneGeometry构建一个点击按钮；将按钮放置在全景球的某个合适位置，如走道上，门口；调用THREE.Raycaster生成一条射线，对webGLRender.domElement监听click事件，记入鼠标点击位置，在鼠标位置生成一条射线，射线在发射过程中如果碰到按钮，会将第一个碰到的按钮返回，通过检测是否返回按钮可以判断按钮被点击了；重复调用生成全景场景全景球的方法，传入第二张全景图，生成全景球2号；在按钮上设置监听当按钮被点击...

【专利技术属性】
技术研发人员：施泽焱，
申请(专利权)人：实野信息科技上海有限公司，
类型：发明
国别省市：上海,31