创建场景

准备工作

1. html中引入A-Frame库,可以本地加载,也可以使用CDN的方式
2. body中添加场景
3. 设置天空颜色

执行

创建场景

场景中添加实体

在场景中添加实体,我们用`a-box`来试一下。
为了显示在舞台中,我们设置了`position`属性。
大家可以改下position属性,然后执行下看看效果。

执行

创建场景

设置颜色

我们可以给盒子添加颜色,大家可以修改颜色试试看哟!

执行

创建场景

设置纹理

我们也可以为盒子设置纹理,选用一个图片作为纹理贴图在盒子上。
注意纹理和颜色一般二选一。

执行

创建场景

使用资源预设

对于一些经常重复使用的资源,需要资源复用,利用`a-assets`实现资源预设管理。

执行

创建场景

应用变换

我们可以对盒子应用位置、旋转、缩放等变换,这些变换都需要分别设置x、y、z方向。

执行

使用动画

添加动画

在实体标签中使用`a-animation`标签添加动画

执行

使用动画

设置动画循环方式

repeat属性设置动画循环方式
设置数字指定次数或设置关键字`indefinite`无限播放
默认值为0

执行

使用动画

设置动画时间

dur属性设置动画持续时间,毫秒为单位,默认值为1000。

执行

使用动画

设置动画方向

direction属性设置动画方向,normal, reverse, alternate, alternateReverse四选一。默认值为normal。

执行

使用动画

设置动画时间之外的状态

fill属性设置动画时间之外的状态,none, forwards, backwards, both四选一。默认值为forwards。

执行

使用动画

控制动画

delay 动画延迟时间或动画开始事件
begin 动画开始事件
edn 动画结束事件

执行

使用动画

应用多个动画

使用多个`a-animation`定制多个动画

执行

基本形状

使用盒子-形状属性

`a-box`是最基本最常用的形状。
width、height、depth分别代表x,y,z方向的长度。
segments-width、segments-height、segements-depth分别代表x,y,z方向的分节数,默认值为1。
大家可以利用前面所学的变换、动画等知识,体验效果。

执行

基本形状

使用盒子-材质属性-线框

wireframe属性,设置是否显示为线框,默认值为false。
wireframe-linewidth属性,设置线框线宽度, 默认值为2。

执行

基本形状

使用盒子-材质属性-纹理

color属性,设置盒子颜色。默认为白色。
src属性,设置盒子纹理,默认为none。
metalness属性,设置盒子的金属光泽,默认为0。

执行

基本形状

使用盒子-材质属性-纹理

repeat属性,设置盒子纹理平铺方式,可以分别设置x、y方向,默认值为1 1。
roughness属性,设置盒子纹理的粗糙程度,默认值为0.5。
别忘了改变数值,试试效果哟。

执行

基本形状

使用球体

`a-sphere`是最常用的形状,可以用来表示球体或多面体。
radius属性,代表球的大小,默认值为1。

执行

基本形状

使用多面体

segments-width 经度上的切片数,默认值为36。
segments-height 维度上的切片数,默认值为18。

执行

基本形状

球体切割-经度

phi-start 球体经度上开始度数,默认值为0。
phi-length 球体经度上跨越度数,默认值为360。

执行

基本形状

球体切割-纬度

theta-start 球体纬度上开始度数,默认值为0。
theta-length 球体纬度上跨越度数,默认值为180。

执行

基本形状

使用圆柱

`a-cylinder`可以实现圆柱、棱柱等。
radius属性,半径,默认值为1。
height属性,高度,默认值为1。
segments-radial属性,可以实现棱柱效果,默认值为36。

执行

基本形状

使用圆柱-pacman

theta-start 球体纬度上开始度数,默认值为0。
theta-length 球体纬度上跨越度数,默认值为360。

执行

基本形状

使用圆台

`a-cone`可以实现圆台、圆锥、棱锥等效果。
radius-top属性,上圆半径,默认值为0.8。
radius-bottom属性,下圆半径,默认值为1。
height属性,高度,默认值为1。
segments-radial属性,可以实现棱柱效果,默认值为36。

执行

基本形状

使用圆环

`a-ring`可以实现圆台、圆锥、棱锥等效果。
radius-inner属性,内圆半径,默认值为0.8。
radius-outer属性,下圆半径,默认值为1.2。
height属性,高度,默认值为1。
segments-phi属性,可以实现棱柱效果,默认值为10。
segments-theta属性,默认值为32。

执行

基本形状

使用四面体、八面体、十二面体、二十面体

`a-tetrahedron` 四面体
`a-octahedron` 八面体
`a-dodecahedron` 十二面体
`a-icosahedron` 二十面体
radius属性,半径,默认值为1。

执行