问题

随着vr的热度那么web虚拟现实是否可行

A-Frame是一款开源的可通过定制HTML元素构建WebVR方案的框架。有了这个框架，Web程序员无需学习一门全新的语言或者类似于Unity和Unreal这样的三维引擎就可以在Web开发中加入虚拟现实支持。作为一个入门教程，本文将引导你一步步实现构建一个加入Web虚拟现实支持的Web页面的全过程。

1. 实现Web虚拟现实的最轻松方案 A-Frame

注意A-Frame（https://aframe.io/）是一个开源框架

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>
注意如果显示不了图片,可能需要在本地服务器运行,例如php的运行环境

图片素材:https://flic.kr/p/bCMJ4X

小结.本文转自51cto.com

实现Web虚拟现实的最轻松方案—A-Frame框架的更多相关文章

  1. RDIFramework.NET ━ Web中打印的各种方案参考-欢迎补充

    RDIFramework.NET ━ Web中打印的各种方案参考-欢迎补充 做Web开发的同志应该都深有体会,在web程序中打印不再象应用程序中那样便于控制了,web程序天生的一些特性造成了这个缺点, ...

  2. 【转】使用Web墨卡托辅助球体切片方案的地图公共属性

    原文链接:https://doc.arcgis.com/en/data-appliance/6.1/reference/common-attributes.htm 使用Web墨卡托辅助球体切片方案的地 ...

  3. 【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 ...

  4. WebDNN：Web浏览器上最快的DNN执行框架

    WebDNN:Web浏览器上最快的DNN执行框架 为什么需要WebDNN? 深层神经网络(DNN)在许多应用中受到越来越多的关注. 然而,它需要大量的计算资源,并且有许多巨大的过程来设置基于执行环境的 ...

  5. 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

    web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...

  6. 基于HTML5的Web跨设备超声波通信方案

    前言:Chirp在iPhone上掀起了有声传输文件的序幕,我们再也不需要彩信.蓝牙配对.IM来传送数据.它通过“叽叽喳喳”的小鸟叫声来分享数据,简单有趣,而且可以快速的实现一对多的分享. 此外支付宝曾 ...

  7. WEB打印的几种方案

    -------------------------------------------一  基于Web的打印方案比较分析-------------------------------- 基于web的套 ...

  8. 小型 Web 页项目打包优化方案

    背景   目前团队中新的 Web 项目基本都采用了 Vue 或 React ,加上 RN,这些都属于比较重量级的框架,然而对于小型 Web 页面,又显得过大.早期的一些项目则使用了较原始的 HTML ...

  9. 使用ZooKeeper协调多台Web Server的定时任务处理(方案2)

    承接上个博文, 这次是方案2的实现, 本方案的特点:1. 该方案能很好地从几台服务器中选出一个Master机器, 不仅仅可以用于定时任务场景, 还可以用在其他场景下. 2. 该方案能实现Master节 ...

随机推荐

  1. 关于vs2013error C4996: 'strcmpi': The POSIX name for this item is deprecated.的错误解决办法！

    1.出现如下错误(如图1) 2.解决办法(如图2)在头文件处添加#pragma warning(disable: 4996)

  2. fiddler使用之坑

    今天一上午都在搞fiddler,之前可以抓到浏览器的请求,今天突然不行了,弄得我花一上午时间去设置浏览器代理的事情,遇到各种各样的问题,现将解决办法记录如下: 1.原来fiddler安装在E盘中,安装 ...

  3. 使用Keil软件编写汇编源程序应注意事项

    1)一定要使用微软的txt文本编辑器,否则键入逗号时编译通不过.应该是这个样(＇),不该是这个样(,). 2) 用数字做标号时,前面一定要加一个英文字母,否则编译通不过. 3) 有时编译通过的.asm ...

  4. Qt编程之对QGraphicsItem点击右键弹出菜单

    就是对这个contextMenuEvent 事件重新实现,在这个事件函数中创建菜单,大概就是这样. void MyItem::contextMenuEvent(QGraphicsSceneContex ...

  5. MySQL常用Json函数

    官方文档:JSON Functions Name Description JSON_APPEND() Append data to JSON document JSON_ARRAY() Create ...

  6. Android Animations简介

    一 .Animations简介 Animations提供了一系列的动画效果,这些效果可以应用于绝大多数的控件: 二.Animations的分类 第一类:TweenedAnimations,该类Anim ...

  7. 黑马程序员_Java_多线程

    8.多线程 8.1.多线程概述 进程:是一个正在执行中的程序.每一个进程执行都有一个执行顺序.该顺序是一个执行路径,或者叫一个控制单元. 线程(例:FlashGet):就是进程中一个独立的控制单元.线 ...

  8. sicily 1099 Packing Passengers

    /****  题意:  求x,y 满足 x*pa+y*pb=n 同时使得 p = x*ca+y*cb的值最小,若有多种可能,则选择最大x值的组合**  分析:  x*pa+y*pb=n 可以用 线性同 ...

  9. xm学习笔记

    1关于静态网页的制作 html主要负责页面的结构+css页面的美观+js与用户的交互. 2html 有标签体的标签: <p></p>  <span></spa ...

  10. Linux下的文件查找类命令（转载）

    如何快速有效的定位文件系统内所需要查找的文件呢?Linux为我们提供了一些文件查找类的命令,我们需要掌握以下几个命令: http://blog.csdn.net/sailor201211/articl ...