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

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

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

在A-Frame中，場(chǎng)景是全局根對(duì)象，是存放所有實(shí)體的容器，場(chǎng)景通過<a-scene>元素來表示。


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

1.準(zhǔn)備工作

準(zhǔn)備工作可以分為兩個(gè)部分：

  • 導(dǎo)入A-Frame庫(kù)
  • 創(chuàng)建好a-scene標(biāo)簽
    為了更好地顯示實(shí)體，我們同時(shí)添加了個(gè)a-sky,并且給它一個(gè)顏色。如下面代碼所示。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>A-Frame創(chuàng)建場(chǎng)景</title>
        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    </head>
    <body>
        <!--
            a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
        -->
        <a-scene>
            
            <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
            <a-sky color="#ddf"></a-sky>
        </a-scene>
    </body>
</html>

2. 添加實(shí)體

接下來，我們來添加實(shí)體，利用a-box標(biāo)簽來添加一個(gè)盒子，類似的標(biāo)簽還有球體<a-sphere>、平臺(tái)<a-plane>、圓柱<a-cylinder>等。

<!--
    a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
-->
<a-scene>
    <!--添加一個(gè)盒子-->
    <a-box></a-box>
    
    <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

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

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

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

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

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

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

3. 使用資源管理

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

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

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

<!--
    a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
-->
<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>
    <!--
        添加一個(gè)盒子
            position屬性  設(shè)置位置，三個(gè)數(shù)字分別對(duì)應(yīng)x,y,z三個(gè)方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把color屬性去掉）
    -->
    <a-box position="0 0 -10" src="#videoTexture" scale="4 4 1"></a-box>

    <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
    <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)的方式注冊(cè)組件，在組件里進(jìn)行canvas的繪圖。

<!--
    a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
-->
<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>
    <!--
        添加一個(gè)盒子
            position屬性  設(shè)置位置，三個(gè)數(shù)字分別對(duì)應(yīng)x,y,z三個(gè)方向
            color屬性 賦予顏色
            src屬性       設(shè)置紋理、貼圖（記得把color屬性去掉）
    -->
    <a-box position="0 0 -10" src="#canvasTexture" scale="4 4 1" draw-canvas="canvasTexture"></a-box>

    <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
    <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. 添加動(dòng)畫

利用a-animation標(biāo)簽添加動(dòng)畫，并利用它的諸多屬性設(shè)置動(dòng)畫方式，下面代碼設(shè)置循環(huán)播放動(dòng)畫。

<!--
    a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
-->
<a-scene>
    <!--
        添加一個(gè)盒子
            position屬性  設(shè)置位置，三個(gè)數(shù)字分別對(duì)應(yīng)x,y,z三個(gè)方向
            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>

    <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
    <a-sky color="#ddf"></a-sky>
</a-scene>

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

<!--
    a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
-->
<a-scene>
    <!--
        添加一個(gè)盒子
            position屬性  設(shè)置位置，三個(gè)數(shù)字分別對(duì)應(yīng)x,y,z三個(gè)方向
            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è)置動(dòng)畫
                begin   設(shè)置動(dòng)畫開始方式
        -->
        <a-animation
             attribute="rotation"
             dur="1000"
             fill="forwards"
             to="0 405 405"
             begin="click">     
        </a-animation>
    </a-box>

    <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
    <a-sky color="#ddf"></a-sky>
    
    <!--添加相機(jī)，便于設(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)建場(chǎng)景</title>
        <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
    </head>
    <body>
        <!--
            a-scene是全局根對(duì)象，是存放所有實(shí)體的容器
        -->
        <a-scene>
            <!--
                添加一個(gè)盒子
                    position屬性  設(shè)置位置，三個(gè)數(shù)字分別對(duì)應(yīng)x,y,z三個(gè)方向
                    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è)置動(dòng)畫
                        begin   設(shè)置動(dòng)畫開始方式
                -->
                <a-animation attribute="rotation" dur="1000" fill="forwards" to="0 405 405" begin="click">
                </a-animation>
            </a-box>

            <!--為了更好地顯示實(shí)體，我們添加個(gè)藍(lán)色的天空-->
            <a-sky color="#ddf"></a-sky>

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

待續(xù)

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

聲明

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

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

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

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