实现Web虚拟现实的最轻松方案—A-Frame框架

问题

随着vr的热度那么web虚拟现实是否可行
  • 1. 实现Web虚拟现实的最轻松方案 A-Frame

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 Demotitle>
    <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://www.devdiner.com/demos/aframedemo/
图片素材:https://flic.kr/p/bCMJ4X

小结.本文转自 51cto.com

转载于:https://www.cnblogs.com/lemonphp/p/5395834.html

你可能感兴趣的:(实现Web虚拟现实的最轻松方案—A-Frame框架)