实现Web虚拟现实的最轻松方案—A-Frame框架
问题
随着vr的热度那么web虚拟现实是否可行
A-Frame是一款开源的可通过定制HTML元素构建WebVR方案的框架。有了这个框架，Web程序员无需学习一门全新的语言或者类似于Unity和Unreal这样的三维引擎就可以在Web开发中加入虚拟现实支持。作为一个入门教程，本文将引导你一步步实现构建一个加入Web虚拟现实支持的Web页面的全过程。
1. 实现Web虚拟现实的最轻松方案 A-Frame
A-Frame框架的入门级教程页面（https://aframe.io/docs/guide/getting-started.html)
忽略以上介绍,简单粗暴 直接下载...找到并打开inex.html
A-Frame样板（https://github.com/aframevr/aframe-boilerplate/archive/master.zip)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Street Demo</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="darktexture" src="blacktexture.png">
</a-assets>
<a-box color="#B76705" depth="2" height="2" width="4" position="0 0 -1.25"></a-box>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-40 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="-10 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="20 0 -8"></a-cylinder>
<a-cylinder color="#1E130E" height="40" radius="0.5" position="50 0 -7"></a-cylinder>
<a-sphere src="#darktexture" radius="2" position="0 15 20"></a-sphere>
<a-sky src="res.jpg"></a-sky>
</a-scene>
</body>
</html>
图片素材:https://flic.kr/p/bCMJ4X
小结.本文转自51cto.com
实现Web虚拟现实的最轻松方案—A-Frame框架的更多相关文章
- RDIFramework.NET ━ Web中打印的各种方案参考-欢迎补充
RDIFramework.NET ━ Web中打印的各种方案参考-欢迎补充 做Web开发的同志应该都深有体会,在web程序中打印不再象应用程序中那样便于控制了,web程序天生的一些特性造成了这个缺点, ...
- 【转】使用Web墨卡托辅助球体切片方案的地图公共属性
原文链接:https://doc.arcgis.com/en/data-appliance/6.1/reference/common-attributes.htm 使用Web墨卡托辅助球体切片方案的地 ...
- 【ASP.NET Web API教程】2.3 与实体框架一起使用Web API
原文:[ASP.NET Web API教程]2.3 与实体框架一起使用Web API 2.3 Using Web API with Entity Framework 2.3 与实体框架一起使用Web ...
- WebDNN：Web浏览器上最快的DNN执行框架
WebDNN:Web浏览器上最快的DNN执行框架 为什么需要WebDNN? 深层神经网络(DNN)在许多应用中受到越来越多的关注. 然而,它需要大量的计算资源,并且有许多巨大的过程来设置基于执行环境的 ...
- 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取
web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...
- 基于HTML5的Web跨设备超声波通信方案
前言:Chirp在iPhone上掀起了有声传输文件的序幕,我们再也不需要彩信.蓝牙配对.IM来传送数据.它通过“叽叽喳喳”的小鸟叫声来分享数据,简单有趣,而且可以快速的实现一对多的分享. 此外支付宝曾 ...
- WEB打印的几种方案
-------------------------------------------一 基于Web的打印方案比较分析-------------------------------- 基于web的套 ...
- 小型 Web 页项目打包优化方案
背景 目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...
- 使用ZooKeeper协调多台Web Server的定时任务处理(方案2)
承接上个博文, 这次是方案2的实现, 本方案的特点:1. 该方案能很好地从几台服务器中选出一个Master机器, 不仅仅可以用于定时任务场景, 还可以用在其他场景下. 2. 该方案能实现Master节 ...
随机推荐
- fontresize 移动端的手机字体 大小设置
这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...
- 创建一个自己的动态HTML-备
-.获取元素 改变属性 通过id来获取HTML元素 通过标签名找到HTML元素 通过类名来找到HTML元素 举个
- CentOS7配置Nodejs环境安装记录
今天购买了阿里云服务器,系统选的是CentOS7,下面记录下在它上面安装Nodejs环境的过程,本次操作是直接连接的阿里云服务器的管理终端. 1.由于是纯净的环境,先通过以下命令安装nodejs编译及 ...
- 游览器对js加载的次序
直接看例子 <body> <script> console.log("first"); var script = document.createElemen ...
- Javascript 原型注意事项
function abc() {} abc.prototype.xx = { name: "keatkeat" } var x = new abc(); x.xx.name = & ...
- keil Ax51中条件编译指令IF与$IF的区别
keil A51中条件编译指令IF与$IF的区别:1.IF和$IF是不等价的,不要混淆了;2.带前缀$的条件编译$IF用法:(汇编器指示命令Assembler Directive)只能用来测试由$SE ...
- 10g中注意谓词过滤的位置
在10g中当主查询的谓词信息,被错误的放入子查询中,会导致子查询无法展开 explain plan for UPDATE DWF.F_PTY_INDIV O SET END_DT = TO_DATE( ...
- Linux企业级项目实践之网络爬虫（19）——epoll接口
由于要实现爬虫程序的快速抓取,显然如果采用阻塞型的I/O方式,那么系统可能很长时间都处在等待内核响应的状态中,这样爬虫程序将大大地降低效率.然而,如果采用非阻塞I/O,那么就要一直调用应用进程,反复对 ...
- mysql 存储过程：提供查询语句并返回查询执行影响的行数
mysql 存储过程:提供查询语句并返回查询执行影响的行数DELIMITER $$ DROP PROCEDURE IF EXISTS `p_get_select_row_number`$$ CREAT ...
- Wikioi 1080一维树状数组
半个月时间最终把那些杂七杂八的学完了,尽管学完也,也仅仅是有了个模板,自己手敲还是不太行.所以如今開始要疯狂刷题了! ! .!!! 这题裸的树状数组.曾经写那道<敌兵布阵>的时候写过,所以 ...