【webVR翻譯】使用A-frame零基礎一小時製做冬日雪人特效

時間 2019-11-08

標籤 webVR翻譯使用 frame 零基礎一小時製做冬日雪人特效简体版

原文原文鏈接

原文：An A-Frame tutorial for WebVR beginners
做者：Mary
譯者：大田html

什麼是A-frame？

A-frame是一款基於WebGL庫three.js構建的WebVR框架，Web開發人員使用它能夠很方便地建立虛擬現實場景。儘管three.js在建立WebGL的場景方面已經夠用了，但A-frame經過引入實體-組件-系統模式的JavaScript庫，比起three.js能更進一步簡化VR開發。git

A-frame最大的優點在於它的擴展性很好。若是你想構建一個簡單的VR場景，既能夠經過HTML代碼構造，也能夠經過編寫自定義組件和系統來構造，因此A-frame易於使用，不須要會JavaScript，只要會寫HTML就行。在本教程中，咱們將學習如何構建一個冬天的場景和一個雪人，整個過程只涉及A-frame基本圖形組件，不須要使用任何自定義的JavaScript代碼。github

得到A-frame基礎模板

在開始以前，咱們須要先獲取A-frame基礎場景模板，該模板包含一個最基本的場景項目，咱們基於它構造冬天場景。如今從git上獲取該模板代碼，並用Node將它啓動。web

$ git clone https://github.com/aframevr/aframe-boilerplate.git
$ cd aframe-boilerplate && rm -rf .git && npm install
$ npm start

在瀏覽器中訪問127.0.0.1:3000，你能夠看到一些形狀和平面，如今咱們將基於如今這個VR場景打造冬日雪人。npm

若是你不想使用Node（若是不使用Node，將錯過不少炫酷的熱加載哦）開發，能夠在Html中加入如下連接，引入JavaScript文件。編程

<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>

如今index.html看起來應該是這樣的：segmentfault

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! - A-Frame</title>
    <meta name="description" content="Hello, World! - A-Frame">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

移除不須要的形狀

製做雪人不須要使用盒子，柱面和平現，如今咱們將其移除。瀏覽器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, World! - A-Frame</title>
    <meta name="description" content="Hello, World! - A-Frame">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

如今只有一個球漂浮在空間的中央。接下來咱們須要調整雪球的位置，大小和球面材料等屬性，但首先來快速瞭解一下A-frame中的座標系統。微信

座標

要直接解釋A-frame的座標系統是什麼有點難。在我看來，它是等同於Blender（一款3D動畫製做軟件，和3DMax相似）中的定位系統，在這個系統中有寬度，深度和高度三個概念，分別對應X軸、Y軸和Z軸。寬度對應X軸，深度對應Y軸，高度對應Z軸。框架

在A-frame中，相機的默認座標爲（0，0，0），相對於該座標，X軸上負值就至關於畫面的左邊，正值就是右邊；對於Z軸，負值是在畫面的前面，正值是後面；對於Y軸，正值是上方，負值是下方。

例如，立方體位於（1，-1，1），即等至關於位於畫面中心的右側一個象素，水平線下方一個象素，畫面日後一個象素的位置。

構建雪人

<a-sphere position="0 0 -15" radius="2" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>

如今咱們從新設置了球體，將它放在咱們與中心點之間，距離中心點15象素的位置。（記住，在Z軸上，負值就是靠近咱們，正值是遠離咱們。）如今的球體半徑爲2個象素，它將是雪人的底座，比以前的要大。

這裏將color屬性換成了material屬性，這麼作是爲了給球體添加上陰影效果。shader屬性定義了球體表面材質貼圖的類型，它的默認值就爲standard，不用設置也行，但這裏爲了保證代碼清晰，仍舊將其寫出來。

雪的顏色顯然得是白色的，您能夠指定color屬性爲white或十六進制顏色代碼。metalness（金屬質感）和roughness（粗糙質感）兩個屬性默認值爲0.5，由於雪人不是金屬，因此沒有金屬質感，這裏設置metalness（金屬質感）等於0；再者，雪人的表面是雪組成的，理應很粗糙，因此設置roughness（粗糙質感）等於1。

爲了完成雪人的身體，咱們再複製兩個球體，並調整球體位置和大小。

<a-sphere position="0 0 -15" radius="2" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
<a-sphere position="0 2 -15" radius="1.7" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
<a-sphere position="0 4 -15" radius="1.3" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>

製做雪人的面部

如今您的代碼看起來應該是這樣的（我把頁面的標題和內容改爲了「雪人」）：

<！DOCTYPE HTML>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Snowman</title>
    <meta name="description" content="Snowman">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</script>
  </head>
  <body>
    <a-scene>
      <a-sphere position="0 0 -15" radius="2" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
      <a-sphere position="0 2 -15" radius="1.7" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
      <a-sphere position="0 4 -15" radius="1.3" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

咱們要增長兩個球體來當眼睛，在雪人身體的三個球體代碼後面添加如下代碼。

<a-sphere position="-0.4 4.3 -13.9" radius="0.2" material="shader: standard; color: #000; metalness: 0; roughness: 1"></a-sphere>
<a-sphere position="0.4 4.3 -13.9" radius="0.2" material="shader: standard; color: #000; metalness: 0; roughness: 1"></a-sphere>

球體是用來作眼睛的，這裏將它的半徑設置爲0.2象素，設爲黑色，放置在雪人的面部區域，這樣眼晴就作好了。如今雪人還須要一個胡蘿蔔鼻子：

<a-cone position="0 4 -13.2" rotation="90 0 0" radius-bottom="0.2" radius-top="0" material="shader: standard; color: #ce6548; metalness: 0"></a-cone>

鼻子是圓錐體，可是基礎形狀裏沒有圓錐，這裏咱們用一個小妙招用圓柱體來作：設置圓柱體一端半徑爲0.2個象素做爲圓錐體的底部，另外一端半徑爲0象素，做爲圓錐的頂端，設成橙色，放在眼睛的下方，這樣鼻子就作好了。可是如今鼻子的朝向不太對，最後，咱們將它的X軸旋轉90度，這樣胡蘿蔔鼻子就能正對着咱們。

如今在你的瀏覽器訪問127.0.0.1:3000查看VR場景，就能看到剛纔完成的雪人了，只不過如今它看起來仍是漂浮在一片空白中。

添加天空球

天空球就是能營造出天空場景效果的球體。

接下來咱們要添加天空球，不過先別急，咱們先導入一個等距離長方圓柱投影圖像資源，將其添加爲背景，如今在body標籤的下方添加如下代碼：

<a-assets>
    <img id="snowy" src="snowy.jpg">
</a-assets>

以上代碼所作的是提早將資源預加載到場景中。像這樣把全部的靜態資源都在a-asset標籤中聲明好是很好的編程習慣，雖然也能夠在聲明實體對象時直接加載資源，但預加載使代碼組織更清晰，因此最好是預加載。

在添加新的天空球以前，先移除的舊的天空球代碼：

<a-sky color="#ECECEC"></a-sky>

如今咱們來添加新的天空球，這一次再也不使用a-sky標籤，而是使用a-entity標籤，它的效果和a-sphere標籤同樣。如今將如下代碼添加到雪人的身體和麪部下方：

<a-entity geometry="primitive: sphere; radius: 50"
    material="shader: flat; src: #snowy"
    rotation="0 40 0"
    position="0 0 0"
    scale="1 1 -1">
</a-entity>

如你所見，咱們使用的不是sphere標籤，而是a-entity標籤，因此須要設置geometry屬性。這裏將a-entity中的primitive屬性設置爲sphere，半徑爲50像素。

天空球的貼圖材質設置爲平面，這樣它就不是立體圖形，這樣在有光照時，能避免天空中出現反射光照的效果，更天然。圖像源文件設置爲剛纔預加載的圖片資源ID（ID以#爲前綴）。出於美學方面的考慮，如今設置scale爲（1，1，-1），這麼作能讓天空球在Y軸稍微旋轉一下，這樣圖像的文字就能顯示在天空球內部，咱們就能看到了。

設置primitive爲sky也能夠添加天空球，使用這種寫能夠不用設置對背景圖片的縮放，比使用sphere更簡單。使用這種寫法時，天空球的半徑默認爲5000像素，若是你不須要天空球大到這種程序，注意進行適當調整。

要有光！

A-frame場景中默認就設置有光源：

<!-- Default lighting injected by A-Frame. -->
<a-entity light="type: ambient; color: #BBB"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.6" position="-0.5 1 1"></a-entity>

這裏咱們但願陰影呈現出藍色色調，而光應該都從背景中太陽的方向照射過來，因此我設置環境光偏藍色調，從新調整光源的位置，增長光照的強度。

<a-entity light="type: ambient; color: #405e94"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.8" position="5 5 10"></a-entity>

添加地面

當用VR眼鏡查看畫面時，雪人看起來仍是漂浮在半空中。雖然這不是最優雅的解決方案，但我用下面的配置來建立了一組平面效果做爲地面，來解決這個問題：

<a-plane
    material="shader: flat; src: #snowy; repeat: 1 0.48"
    position="0 -1 0"
    rotation="-90 0 0"
    width="200"
    height="100">
</a-plane>

該平面使用了背景圖片，可是隻顯示下半部分。如今雪人看來起就像是坐在地上了，雖然畫面中能看出一些縫隙，不夠完美，但大致上來講仍是不錯的。

最終代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Snowman</title>
    <meta name="description" content="Snowman">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-assets>
        <img id="snowy" src="snowy.jpg">
    </a-assets>
    <a-scene>
      <a-sphere position="0 0 -15" radius="2" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
      <a-sphere position="0 2 -15" radius="1.7" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
      <a-sphere position="0 4 -15" radius="1.3" material="shader: standard; color: #fff; metalness: 0; roughness: 1"></a-sphere>
      <a-sphere position="-0.4 4.3 -13.9" radius="0.2" material="shader: standard; color: #000; metalness: 0; roughness: 1"></a-sphere>
      <a-sphere position="0.4 4.3 -13.9" radius="0.2" material="shader: standard; color: #000; metalness: 0; roughness: 1"></a-sphere>
      <a-cone position="0 4 -13.2" rotation="90 0 0" radius-bottom="0.2" radius-top="0" material="shader: standard; color: #ce6548; metalness: 0"></a-cone>
      <a-plane
        material="shader: flat; src: #snowy; repeat: 1 0.48"
        position="0 -1 0"
        rotation="-90 0 0"
        width="200"
        height="100">
      </a-plane>
      <a-entity geometry="primitive: sphere; radius: 50"
          material="shader: flat; src: #snowy"
          rotation="0 40 0"
          position="0 0 0"
          scale="1 1 -1">
      </a-entity>
      <a-entity light="type: ambient; color: #405e94"></a-entity>
      <a-entity light="type: directional; color: #FFF; intensity: 0.8" position="5 5 10"></a-entity>
    </a-scene>
  </body>
</html>

在個人最終做品裏還使用了一個名爲aframe-particle-system-component的自定義組件，在本教程中就不作說明了，你能夠訪問如下連接查看效果。