VR虚拟现实网页+H5Builder实现手机VR效果（可生成apk，ios）

如今的H5页面不仅可以在网页端显示，也可以移植到手机app端；用H5Builder和手机进行USB调试模式可以在手机上调试程序；同时也可以通过H5Builder将程序打包成apk安装包或ios安装包。

首先先准备以下东西：

1.H5Builder编辑器：H5Builder链接： http://www.dcloud.io/

2.安卓或苹果手机一部（需要打开USB开发者调试模式）

3.电脑一部

准备完东西后可以开始了：

文件----新建-----移动App （空模板就可以了）

新建完之后：

这里VR网页采用A-Frame框架：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>360° Image</title><meta name="description" content="360° Image - A-Frame"><script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script></head><body><a-scene><a-sky src="img/puydesancy.jpg" rotation="0 -130 0"></a-sky><a-text font="kelsonsans" value="Puy de Sancy, France" width="10" position="-2.5 0.25 -1.5"rotation="0 15 0"></a-text></a-scene></body>
</html>

在img目录下我放了一张全景图片，https://pan.baidu.com/s/1kkeQxUV4P0PCCrLVKfRtXQ

注意必须要用全景图片才行

使用VR网页必须要引入a-frame的js，然后进行<a - >标签进行使用，

<a-scene>标签代表含义：作为一个场景容器，里面可以放text，entity，sky，assert等等元素

可参考： https://aframe.io/docs/0.8.0/core/scene.html#sidebar

<a-sky>标签代表含义：可以将背景颜色或者360度全景照片添加到场景中，天空是一个大的球体，里面有颜色或纹理。

可参考 https://aframe.io/docs/0.8.0/primitives/a-sky.html#sidebar

<a-text>标签代表含义：作为一个文本容器可设置字体相关属性

可参考 https://aframe.io/docs/0.8.0/primitives/a-text.html#sidebar

接下来网页运行效果：

用USB接口连接到手机后，在HBuilder中点击真机运行, 展示效果：

连接成功后可以看到后台开始运行：

手机开始运行：

打包成apk（点击发行 ----云打包-打原生安装包）

这里使用DCloud公用证书，Google开发者证书，在打包之前也可双击manifest.json添加需要的权限

打包完成后，云端会进行审核，审核通过就可以下载apk了，通过发行--查看云打包状态

点击VR眼镜按钮，就可以看到：

再使用VR设备可以进行观看

VR虚拟现实网页+H5Builder实现手机VR效果（可生成apk，ios）相关推荐

谁有vr片源_聊一聊VR虚拟现实（八）：VR视频的清晰度
相信很多看过VR视频的朋友,有时候都会有这个困惑:怎么看视频内容这么不清晰.是机器的问题?还是内容源的问题? 有一些初入视频拍摄行业的朋友,也会问到:你们这个VR眼镜是4K屏,我应该输出多少尺寸的VR ...
vr虚拟现实视频是什么？vr视频软件哪个比较好
随着技术的不断发展,vr虚拟现实视频也是频频出现在人们面前,快手.哔哩哔哩等平台也纷纷打通了vr全景视频的上传发布.这使得更多的朋友能够看到这一视频形式,这其中很多第一次看到这种vr视频的朋友难免会有 ...
2018VR排行手机VR眼镜哪个好？VR眼镜多少钱，哪个VR眼镜性价比高？评测推荐
摘要:虚拟现实(VR)头戴设备目前已成为市面一类比较火热的产品,它有哪些分类呢?一般可分为头戴类.非头戴类和手套类.怎样选购vr眼镜?不妨先来看看目前比较火的vr眼镜产品评测. 手机vr眼镜哪个好,v ...
VR虚拟现实技术类毕业论文文献都有哪些？
本文是为大家整理的VR虚拟现实技术主题相关的10篇毕业论文文献,包括5篇期刊论文和5篇学位论文,为VR虚拟现实技术选题相关人员撰写毕业论文提供参考. 1.[期刊论文]基于虚拟现实技术(VR)的动画交互 ...
vr实时三维计算机图形技术的原理,vr虚拟现实技术原理有什么
vr虚拟现实技术原理有什么 vr眼镜是怎么来实现虚拟现实的是很多人觉得不可思议的事情,这个技术原理其实跟vr的核心技术是有关系的,只有了解了核心技术才能了解vr技术原理是什么,下面就是jy135网为大 ...
北京vr虚拟现实,工地安全教育VR体验,虚拟仿真vr实验教学,vr虚拟仿真交互系统
北京vr虚拟现实,工地安全教育VR体验,虚拟仿真vr实验教学,vr虚拟仿真交互系统.随着学院的规模扩大.实验室的增多.设备仪器增多.虚拟仿真资源增多及中应用型人才培养办学目标确定,实验教学任务日益加重 ...
青岛vr虚拟现实,工地安全教育VR体验,虚拟仿真vr实验教学,vr虚拟仿真交互系统
青岛vr虚拟现实,工地安全教育VR体验,三维虚拟仿真实验教学,vr虚拟仿真交互系统.VR技术是运用计算机模拟视觉.听觉.触觉等多种感官体验的虚拟施工环境场景,VR场景具有3个特征,即沉浸性.交互性.想 ...
深圳vr虚拟现实,工地安全教育VR体验,虚拟仿真vr实验教学,3d虚拟仿真交互系统
深圳vr虚拟现实,工地安全教育VR体验,虚拟仿真vr实验教学,3d虚拟仿真交互系统.虚拟现实技术是仿真技术的一个重要方向,是仿真技术与计算机图形学人机接口技术多媒体技术传感技术网络技术等多种技术的集合 ...
厦门vr虚拟现实,工地安全教育VR体验,院校vr虚拟仿真实训系统,3d虚拟仿真交互系统开发
厦门vr虚拟现实,工地安全教育VR体验,院校vr虚拟仿真实训系统,3d虚拟仿真交互系统开发.什么是虚拟现实技术呢?简单地说,就是人们利用计算机生成一个逼真的三维虚拟环境,通过自然技能使用传感设备与之相 ...

VR虚拟现实网页+H5Builder实现手机VR效果（可生成apk，ios）

VR虚拟现实网页+H5Builder实现手机VR效果（可生成apk，ios）相关推荐

最新文章

热门文章