A-Frame簡明教程之創(chuàng)建場景

本文為A-Frame簡明教程系列文章的第二篇，大家可以到專題里了解更多。

A-Frame創(chuàng)建場景

在A-Frame中，場景是全局根對象，是存放所有實體的容器，場景通過<a-scene>元素來表示。


接下來，我們來通過一個案例來逐步了解下A-Frame的場景創(chuàng)建。

1.準備工作

準備工作可以分為兩個部分：

  • 導(dǎo)入A-Frame庫
  • 創(chuàng)建好a-scene標簽
    為了更好地顯示實體，我們同時添加了個a-sky,并且給它一個顏色。如下面代碼所示。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>A-Frame創(chuàng)建場景</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>

此時，剛剛添加的盒子沒有在屏幕中顯示，我們可以通過設(shè)置位置position讓之顯現(xiàn)。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--
        添加一個盒子
            position屬性設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
    -->
    <a-box position="0 0 -5"></a-box>
    
    <!--為了更好地顯示實體，我們添加個藍色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

此時，屏幕中顯示的盒子是白色的，我們可以通過設(shè)置color屬性賦予盒子顏色。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--
        添加一個盒子
            position屬性設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性賦予顏色
    -->
    <a-box position="0 0 -5" color="red"></a-box>
    
    <!--為了更好地顯示實體，我們添加個藍色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

也可以利用src屬性設(shè)置盒子的紋理，可以使用圖片、視頻或canvas紋理。這時，記得把color屬性去掉喲，以避免出現(xiàn)混合效果。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--
        添加一個盒子
            position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把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. 使用資源管理

如果這個紋理會在其他形狀中用到，我們最好采用素材復(fù)用方式，在a-assets中定義資源，然后再調(diào)用。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--定義資源-->
    <a-assets>
        <img id="imgTexture" src="https://i.imgur.com/mYmmbrp.jpg" alt="" />
    </a-assets>
    <!--
        添加一個盒子
            position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把color屬性去掉）
    -->
    <a-box position="0 0 -5" src="#imgTexture"></a-box>
    
    <!--為了更好地顯示實體，我們添加個藍色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

當然，我們也可以使用其他資源做紋理,例如視頻或canvas等，如下代碼所示。
這里需要注意的是，如果我們在video標簽中使用了自動播放屬性，視頻加載會阻塞網(wǎng)頁加載。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--定義資源-->
    <a-assets>
        <img id="imgTexture" src="http://i.imgur.com/mYmmbrp.jpg" alt="" />
        <video id="videoTexture" src="http://thenewcode.com/assets/videos/polina.mp4" loop="loop">
    </a-assets>
    <!--
        添加一個盒子
            position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把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="http://i.imgur.com/mYmmbrp.jpg" alt="" />
        <video id="videoTexture" src="http://thenewcode.com/assets/videos/polina.mp4" loop="loop">
        <canvas id="canvasTexture"></canvas>
    </a-assets>
    <!--
        添加一個盒子
            position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把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標簽添加動畫，并利用它的諸多屬性設(shè)置動畫方式，下面代碼設(shè)置循環(huán)播放動畫。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--
        添加一個盒子
            position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把color屬性去掉）
            rotate屬性    設(shè)置旋轉(zhuǎn)
    -->
    <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>

也可以設(shè)置事件交互，設(shè)置a-animation標簽的begin方式為click實現(xiàn)單機開始動畫。需要注意的是，需要添加個相機從而選中激活物體。

<!--
    a-scene是全局根對象，是存放所有實體的容器
-->
<a-scene>
    <!--
        添加一個盒子
            position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把color屬性去掉）
            rotate屬性    設(shè)置旋轉(zhuǎn)
    -->
    <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
        <!--
            設(shè)置動畫
                begin   設(shè)置動畫開始方式
        -->
        <a-animation
             attribute="rotation"
             dur="1000"
             fill="forwards"
             to="0 405 405"
             begin="click">     
        </a-animation>
    </a-box>

    <!--為了更好地顯示實體，我們添加個藍色的天空-->
    <a-sky color="#ddf"></a-sky>
    
    <!--添加相機，便于設(shè)置交互方式-->
    <a-camera>
        <a-cursor></a-cursor>
    </a-camera>
</a-scene>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>A-Frame創(chuàng)建場景</title>
        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    </head>
    <body>
        <!--
            a-scene是全局根對象，是存放所有實體的容器
        -->
        <a-scene>
            <!--
                添加一個盒子
                    position屬性  設(shè)置位置，三個數(shù)字分別對應(yīng)x,y,z三個方向
                    color屬性 賦予顏色
                    src屬性       設(shè)置紋理、貼圖（記得把color屬性去掉）
                    rotate屬性    設(shè)置旋轉(zhuǎn)
            -->
            <a-box position="0 0 -10" color="red" rotation="0 45 45" scale="2 2 1">
                <!--
                    設(shè)置動畫
                        begin   設(shè)置動畫開始方式
                -->
                <a-animation attribute="rotation" dur="1000" fill="forwards" to="0 405 405" begin="click">
                </a-animation>
            </a-box>

            <!--為了更好地顯示實體，我們添加個藍色的天空-->
            <a-sky color="#ddf"></a-sky>

            <!--添加相機，便于設(shè)置交互方式-->
            <a-camera>
                <a-cursor></a-cursor>
            </a-camera>
        </a-scene>
    </body>
</html>

待續(xù)

接下來，我們將研究利用JS的方式動態(tài)添加實體，敬請期待！

聲明

愛前端，樂分享。FedFun希望與您共同進步。
歡迎任何形式的轉(zhuǎn)載，煩請注明裝載，保留本段文字。
獨立博客http://whqet.github.io
極客頭條http://geek.csdn.net/user/publishlist/whqet
CSDN博客http://blog.csdn.net/whqet/
我的簡書http://www.itdecent.cn/u/c11d4318b3c7

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容