创建场景
准备工作
1. html中引入A-Frame库,可以本地加载,也可以使用CDN的方式
2. body中添加场景
3. 设置天空颜色
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。
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。