A-Frame简明教程之创建场景

本文为A-Frame简明教程系列文章的第二篇，大家可以到专题里了解更多。

A-Frame创建场景

在A-Frame中，场景是全局根对象，是存放所有实体的容器，场景通过<a-scene>元素来表示。


接下来，我们来通过一个案例来逐步了解下A-Frame的场景创建。

1.准备工作

准备工作可以分为两个部分：

  • 导入A-Frame库
  • 创建好a-scene标签
    为了更好地显示实体，我们同时添加了个a-sky,并且给它一个颜色。如下面代码所示。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>A-Frame创建场景</title>
        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    </head>
    <body>
        <!--
            a-scene是全局根对象，是存放所有实体的容器
        -->
        <a-scene>
            
            <!--为了更好地显示实体，我们添加个蓝色的天空-->
            <a-sky color="#ddf"></a-sky>
        </a-scene>
    </body>
</html>

2. 添加实体

接下来，我们来添加实体，利用a-box标签来添加一个盒子，类似的标签还有球体<a-sphere>、平台<a-plane>、圆柱<a-cylinder>等。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--添加一个盒子-->
    <a-box></a-box>
    
    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

此时，刚刚添加的盒子没有在屏幕中显示，我们可以通过设置位置position让之显现。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--
        添加一个盒子
            position属性设置位置，三个数字分别对应x,y,z三个方向
    -->
    <a-box position="0 0 -5"></a-box>
    
    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

此时，屏幕中显示的盒子是白色的，我们可以通过设置color属性赋予盒子颜色。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--
        添加一个盒子
            position属性设置位置，三个数字分别对应x,y,z三个方向
            color属性赋予颜色
    -->
    <a-box position="0 0 -5" color="red"></a-box>
    
    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

也可以利用src属性设置盒子的纹理，可以使用图片、视频或canvas纹理。这时，记得把color属性去掉哟，以避免出现混合效果。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--
        添加一个盒子
            position属性  设置位置，三个数字分别对应x,y,z三个方向
            color属性 赋予颜色
            src属性       设置纹理、贴图（记得把color属性去掉）
    -->
    <a-box position="0 0 -5" src="https://i.imgur.com/mYmmbrp.jpg"></a-box>
    
    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

3. 使用资源管理

如果这个纹理会在其他形状中用到，我们最好采用素材复用方式，在a-assets中定义资源，然后再调用。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--定义资源-->
    <a-assets>
        <img id="imgTexture" src="https://i.imgur.com/mYmmbrp.jpg" alt="" />
    </a-assets>
    <!--
        添加一个盒子
            position属性  设置位置，三个数字分别对应x,y,z三个方向
            color属性 赋予颜色
            src属性       设置纹理、贴图（记得把color属性去掉）
    -->
    <a-box position="0 0 -5" src="#imgTexture"></a-box>
    
    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

当然，我们也可以使用其他资源做纹理,例如视频或canvas等，如下代码所示。
这里需要注意的是，如果我们在video标签中使用了自动播放属性，视频加载会阻塞网页加载。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--定义资源-->
    <a-assets>
        <img id="imgTexture" src="//i.imgur.com/mYmmbrp.jpg" alt="" />
        <video id="videoTexture" src="//thenewcode.com/assets/videos/polina.mp4" loop="loop">
    </a-assets>
    <!--
        添加一个盒子
            position属性  设置位置，三个数字分别对应x,y,z三个方向
            color属性 赋予颜色
            src属性       设置纹理、贴图（记得把color属性去掉）
    -->
    <a-box position="0 0 -10" src="#videoTexture" scale="4 4 1"></a-box>

    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>
<script type="text/javascript">
    var videoEl = document.querySelector('#videoTexture');
    videoEl.play();
</script>

也可以使用canvas绘制纹理，如下代码所示。
我们利用AFRAME.registerComponent (name, definition)的方式注册组件，在组件里进行canvas的绘图。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--定义资源-->
    <a-assets>
        <img id="imgTexture" src="//i.imgur.com/mYmmbrp.jpg" alt="" />
        <video id="videoTexture" src="//thenewcode.com/assets/videos/polina.mp4" loop="loop">
        <canvas id="canvasTexture"></canvas>
    </a-assets>
    <!--
        添加一个盒子
            position属性  设置位置，三个数字分别对应x,y,z三个方向
            color属性 赋予颜色
            src属性       设置纹理、贴图（记得把color属性去掉）
    -->
    <a-box position="0 0 -10" src="#canvasTexture" scale="4 4 1" draw-canvas="canvasTexture"></a-box>

    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>
<script type="text/javascript">
    /*
     canvas纹理代码
        
     */
      AFRAME.registerComponent('draw-canvas', {
        schema: {default: ''},
        init: function () {
          this.canvas = document.getElementById(this.data);
          this.ctx = this.canvas.getContext('2d');
          // 绘图操作
          this.ctx.fillStyle="#222266";
          this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height);
        }
      });
</script>

4. 添加动画

利用a-animation标签添加动画，并利用它的诸多属性设置动画方式，下面代码设置循环播放动画。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--
        添加一个盒子
            position属性  设置位置，三个数字分别对应x,y,z三个方向
            color属性 赋予颜色
            src属性       设置纹理、贴图（记得把color属性去掉）
            rotate属性    设置旋转
    -->
    <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
        <a-animation
             attribute="rotation"
             dur="10000"
             fill="forwards"
             to="0 360 360"
             repeat="indefinite">     
        </a-animation>
    </a-box>

    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

也可以设置事件交互，设置a-animation标签的begin方式为click实现单机开始动画。需要注意的是，需要添加个相机从而选中激活物体。

<!--
    a-scene是全局根对象，是存放所有实体的容器
-->
<a-scene>
    <!--
        添加一个盒子
            position属性  设置位置，三个数字分别对应x,y,z三个方向
            color属性 赋予颜色
            src属性       设置纹理、贴图（记得把color属性去掉）
            rotate属性    设置旋转
    -->
    <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
        <!--
            设置动画
                begin   设置动画开始方式
        -->
        <a-animation
             attribute="rotation"
             dur="1000"
             fill="forwards"
             to="0 405 405"
             begin="click">     
        </a-animation>
    </a-box>

    <!--为了更好地显示实体，我们添加个蓝色的天空-->
    <a-sky color="#ddf"></a-sky>
    
    <!--添加相机，便于设置交互方式-->
    <a-camera>
        <a-cursor></a-cursor>
    </a-camera>
</a-scene>

最后所有代码集成如下，大家也可以参考codepen上的案例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>A-Frame创建场景</title>
        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    </head>
    <body>
        <!--
            a-scene是全局根对象，是存放所有实体的容器
        -->
        <a-scene>
            <!--
                添加一个盒子
                    position属性  设置位置，三个数字分别对应x,y,z三个方向
                    color属性 赋予颜色
                    src属性       设置纹理、贴图（记得把color属性去掉）
                    rotate属性    设置旋转
            -->
            <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
                <!--
                    设置动画
                        begin   设置动画开始方式
                -->
                <a-animation attribute="rotation" dur="1000" fill="forwards" to="0 405 405" begin="click">
                </a-animation>
            </a-box>

            <!--为了更好地显示实体，我们添加个蓝色的天空-->
            <a-sky color="#ddf"></a-sky>

            <!--添加相机，便于设置交互方式-->
            <a-camera>
                <a-cursor></a-cursor>
            </a-camera>
        </a-scene>
    </body>
</html>

待续

接下来，我们将研究利用JS的方式动态添加实体，敬请期待！

声明

爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客http://whqet.github.io
极客头条http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的简书https://www.jianshu.com/u/c11d4318b3c7

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容