实现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节 ...
随机推荐
- php 字符编码转换函数 iconv mb_convert_encoding比较
在使用PHP处理字符串时,我们经常会碰到字符编码转换的问题,你碰到过iconv转换失败吗? 发现问题时,网上搜了搜,才发现iconv原来有bug ,碰到一些生僻字就会无法转换,当然了配置第二个参数时, ...
- AndroidStudio push代码到github
步骤 1 studio的git配置: 安装好git后启动Androidstudio,打开如下路径File->Settings->Version Control(展开)->git 在P ...
- iOS中设置导航栏标题的字体颜色和大小
iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参考下. 在平时开发项目的时候,难免会遇到修改导航栏字体大小和颜色的需求,一般使用自定义视图的方法,其实还存在一种方法. 方法一:(自定义视图的 ...
- Lintcode--006（交叉字符串）
Given three strings: s1, s2, s3, determine whether s3 is formed by the interleaving of s1 and s2. Ex ...
- activiti 5.17 流程图中文乱码问题
1. 流程图中任务中的中文乱码显示问题. 解决方法:设置processEngineConfiguration中的两个字体属性,例如: <bean id="processEngine ...
- 勾选checkbox之后，button按钮可用
js:function chkClick() { if (document.getElementById("chkBox").checked == true) { ...
- Cmake，链接一个外部（也可能是第三方，也可能是自己编译的）库
相当于设置VS工程里面的: 然后,为了链接成可执行文件,链接器就会到指定的目录寻找相应的库了. 以下时Demo: cmake_minimum_required(VERSION 2.8) #set(CM ...
- Linux企业级项目实践之网络爬虫（5）——处理配置文件
配置文件在Linux下使用得非常普遍,但是Linux下没有统一个配置文件标准. 我们把配置文件的规则制定如下: 1.把"#"视作注释开始 2.所有的配置项都都是以键值对的形式出现 ...
- 解决Jenkins上git出现Timeout的问题
Jenkins上现有的git插件并没有配置超时的选项,因此在clone项目时如果网络差会出现“ERROR: Timeout after 10 minutes”,导致无法继续构建. 网上找到一个解决方法 ...
- Thinkphp 3.2 中词分词 加权搜索
原文地址:http://www.cnblogs.com/kekukele/p/4544349.html 前段时间,利用业余时间做了一个磁力搜索的网站Btdog,其中使用到了简单的中文分词与加权搜索,在 ...