web VR框架 a-frame入门及生成360度全景页面的demo

官网首页地址：https://aframe.io/
以往我们实现全景图片可以使用three.js,但是three.js渲染效果较差，且图片需要提前剪切成6张，使用体验比较差，深入学习需要一定的时间。
所以我向大家推荐使用a-frame，这个框架可以无脑使用，学习成本极低，实际效果还不错（全景图片不能放大缩小，适合没有这个需求的用户）

注意点：

1.使用可以这样直接引进来（下图为适用浏览器）

< script src = “ https://aframe.io/releases/0.9.2/aframe.min.js” >

和所有web应用一样，A-Frame也依赖于Web服务器才能正常工作。当你使用离线开发时，为保证资源文件能被正确加载和访问，您需要搭建并启动一个本地Web服务器，比如Apache、Tomcat、Nginx，这里建议使用Nginx。

2.代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>360&deg; Image</title><meta name="description" content="360&deg; Image - A-Frame"><script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script></head><body><a-scene><a-sky src="../image/VR1.jpg" rotation="0 -130 0"></a-sky></a-scene></body>
</html>

图片需要高清且两端可以合起来的,这样比较逼真
浏览器端效果图:

实际图:

3.全景图里也可以加字，效果是这样：

但目前这个只支持英文，所以我在实际应用中删除了
如果想用的话代码如下：

    <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5"rotation="0 15 0"></a-text>

此外aframe还可以干很多厉害的事情，比如动态VR，几何体组合VR之类的，等待大家的发现和挖掘！

web VR框架 a-frame入门及生成360度全景页面的demo相关推荐

iOS开发，利用PanoramaGL生成360度全景预览图，附选择本地全景图片并生成全景预览...
前言初做全景项目,涉及到了360度全景展示(也可以是720度的旋转),查找了很多资料,很多都是用PanoramaGL这个库实现的,本人也踩了一下坑,下面我简单的总结一下. 初识PanoramaGL ...
A-Frame WEB VR框架初体验
aFrame是一个Web VR框架,底层是基于threejs的,刚好项目也用到了threejs,就用aFrame试了下效果.在网页上看起来,aFrame就是把threejs的的实现包装成一个实体标签. ...
360度全景看车制作，vr全景制作方法
如今360度全景看车相信大家一定都或多或少的接触过,这种技术能够使我们通过手机等设备随时随地对车辆进行查看.对此相信很多人也非常疑惑,这种360度全景看车是怎么制作的呢?今天就来给大家介绍一下vr全景 ...
如何制作360度vr全景?制作360度全景效果图有哪些技巧?
360度VR全景图相信对摄影感兴趣的小伙伴一定不陌生,360度全景效果图不仅可以清楚真实的表现出场景,而且还具有很高的商用价值,360VR全景也成为了目前最受欢迎的新型展示方式,那么如何制作360度v ...
V360推出首款移动端VR视频编辑软件，用手机就可编辑360度全景视频
通过该软件,小白仅用一部智能手机就可以轻松完成360度全景视频编辑. 如果要制作一款小视频,你或许都用不着电脑,一部智能手机就能完成.现在,这种便捷的方式也延续到VR视频制作了.最近,V360推出了首 ...
Ktor: Kotlin Web后端框架快速开始入门
Ktor: Kotlin Web后端框架 Web backend framework for Kotlin 快速开始入门 Ktor 简介 Ktor 是一个用于在 Kotlin 中快速创建 web 应用 ...
基于vlc的unity3d vr视频播放器开发，360度全景视频
最早开始是有全景图片,比较早的应用场景在照片拍摄,地图展示上.数据采集需要一台全景摄像机,放到汽车的顶部.开动汽车,慢速驾驶,就可以采集周边建筑的全景图片.数据的成本相对3d建模会低很多.广泛用在gi ...
【Unity VR开发窍门】如何在Unity中以VR视角捕捉游戏360度全景
[背景] 经常看到有VR游戏中玩家可以在虚拟场景中拍照的功能,所以打算做一篇系列帖子,主要介绍三个功能,第一个功能是如何在Unity VR项目中从玩家视角捕捉游戏全景,第二个功能是如何将这个捕捉到的全 ...
360度全景VR摄像机初探
本文结合OpenGLES的知识,在IOS平台上对于VR全景视屏的制作原理做了初步的探索. 源码地址:点这里