A-Frame简单例子——hello world

司徒云

2023-12-01

首先，推荐一个学习A-Frame的网站 https://aframe.io/
下面，先看一个简单的例子：

源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! • A-Frame</title>
    <meta name="description" content="Hello, World! • A-Frame">
    <script src="../../../dist/aframe-master.js"></script>
  </head>
  <body>
    <a-scene>

      <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#ECECEC"></a-sky>
      <a-entity position="0 0 3.8">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>

代码来源：https://github.com/aframevr/aframe/blob/v0.5.0/examples/boilerplate/hello-world/index.html

接下来,分析代码:

`<!DOCTYPE html>`

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
HTML5中只有一种声明：<!DOCTYPE html>

`<html> </html>`

<html> </html>是HTML标签，该元素可以告知浏览器自身是一个HTML文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

`<head> </head>`

<head> </head>是HTML标签，该标签用于定义文档的头部，是所有头部元素的容器。
<head> 与 </head> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

`<body> </body>`

<body> </body>是HTML标签，该元素定义文档的主体。
<body> 与 </body> 元素包含了文档的所有内容（比如文本、超链接、图像、表格和列表等等）。

`<meta>`

<meta>是HTML标签，该元素提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
<meta charset="utf-8">定义了文档的字符编码格式是utf-8编码；
<meta name="description" content="Hello, World! • A-Frame">定义了对页面的描述；
更多的属性：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 定义针对搜索引擎的关键词；
<meta name="revised" content="David, 2008/8/8/"> 定义了页面的最新版本；
<meta http-equiv="refresh" content="5"> 每5秒刷新一次页面。

`<title> </title>`

<title> </title>是HTML标签，该元素可以定义文档的标题。
<title> 与 </title> 标签位于文档头部，是<head>标签唯一要求包含的东西。

`<script> </script>`

<script> </script>是HTML标签，用于定义客户端脚本，比如JavaScript。
script元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件。
<html> 与 </html> 标签可以在文档的头部，也可以在文档的主题部分。

`<a-scene> </a-scene>`

<a-scene> </a-scene>是A-Frame的元素，该元素代表了一个场景。
<a-scene> 可以给我们提供three.js和WebVR的所有样本引用：

设置画布(canvas)，渲染器(renderer)，渲染循环(render loop)
默认的相机和灯光
设置webvr-polyfill，VREffect
在VR中增加UI，即WebVR API

`<a-sphere> </a-sphere>`

<a-sphere> sphere创建一个球形的或者多面体的形状。它封装了一个实体，规定几何元素的几何组件设置为sphere。查看更多

position 所有实体都具备的位置组件，表示将实体放在3D空间的某个位置。查看更多
radius <a-sphere> 实体的属性，表示sphere的半径，组件映射是geometry.radius。
color <a-sphere> 实体的属性，表示sphere的基本漫射颜色，组件映射是material.color。

`<a-box> </a-box>`

<a-box> box创建例如盒子、立方体或者墙壁之类的形状。查看更多

position 、color同上；
rotation 所有实体都具备的旋转组件，定义了一个实体的方向。查看更多
width <a-box> 实体的属性，如果定义一个视频的纹理，表示视频的宽度（像素为单位），组件映射是material.width。
height <a-box> 实体的属性，如果定义一个视频的纹理，表示视频的高度（像素为单位），组件映射是material.height。
depth <a-box> 实体的属性，box实体在Z轴的深度（单位m），组件映射是geometry.depth。

`<a-cylinder> </a-cylinder>`

<a-cylinder> cylinder经常用来创建管子和弯曲表面。查看更多

`<a-plane> </a-plane>`

<a-plane> plane使用几何组件的类型创建平坦表面。查看更多

`<a-sky> </a-sky>`

<a-sky> 是为一个场景增加一个背景颜色或者360°的图片。sky是一个有颜色或者纹理映射在内部的球体。查看更多

`<a-entity> </a-entity>`

A-Frame代表着由<a-entity> 元素定义的实体。查看更多

`<a-camera> </a-camera>`

<a-camera> 确定了用户看到什么。我们可以通过修改camera实体的position和rotation来改变视口。查看更多