[发明专利]一种基于WebGL虚拟现实自动旋转展示的方法

权利要求书

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添加到场景中；

创建function render函数，在其中调用webGLRender(camera,scene)渲染场景；

调用requestAnimationFrame函数将render函数传入，做到每一次浏览器的渲染，必定调用render函数；

将包含代码的页面与素材部署到服务器；

打开浏览器访问网页地址，浏览场景展示系统。

4.根据权利要求1所述一种基于WebGL虚拟现实自动旋转展示的方法，其特征在于：构建多个全景场景切换包括如下步骤：

调用THREE.Mesh THREE.MeshBasicMaterial THREE.PlaneGeometry构建一个点击按钮；

将按钮放置在全景球的某个合适位置，如走道上，门口；

调用THREE.Raycaster生成一条射线，对webGLRender.domElement监听click事件，记入鼠标点击位置，在鼠标位置生成一条射线，射线在发射过程中如果碰到按钮，会将第一个碰到的按钮返回，通过检测是否返回按钮可以判断按钮被点击了；

重复调用生成全景场景全景球的方法，传入第二张全景图，生成全景球2号；

在按钮上设置监听当按钮被点击的时候，切换两张全景图的material的透明度，图片1显示图片2消失，图片2显示图片1消失，营造一种叠画的效果。