VR

2016年4月25日星期一

建置基本場景

Adding a Box

<a-scene>
  <a-box color="#6173F4" width="4" height="10" depth="2"></a-box>
</a-scene>

Transforming the Box

Positive X-axis as “right”
Positive Y-axis as “up”
Positive Z-axis as going out of the screen towards us

<a-scene>
  <a-box color="#6173F4" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"></a-box>
</a-scene>

Applying a Texture to the Box

<a-scene>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="texture.png"></a-box>
</a-scene>

由於放置 textture.png 在網路平台上須有pro的權限(須繳年費)，故將程式下載至本機，但由於本機無法執行web 功能，故須將目錄與圖檔放在同一目錄，再放至google雲端空間，開啟可以瀏覽的權限，並用以下的網址組合來瀏覽

http://googledrive.com/host/目錄的ID/index.html

用asset management system 改寫上述程式，並直接在google 雲端硬上編輯，可以增加雲端硬碟工具HTMLeditey，在index.html上直接編輯並自動儲存

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>

  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture"></a-box>
</a-scene>

Animating the Box

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <a-animation attribute="rotation" repeat="indefinite" to="0 360 0"></a-animation>
  </a-box>
</a-scene>

Interacting with the Box

//按一下開始旋轉

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
  </a-box>
  <a-camera position="0 1.8 0">
  <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

//眼精看到後box變大，離開後回復

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <!-- The box will change scale when it emits the mouseenter event. -->
    <a-event name="mouseenter" scale="4 1 6"></a-event>
    <a-event name="mouseleave" scale="2 0.5 3"></a-event>
  </a-box>
  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

Adding a Background to the Scene

<a-scene>
  <a-assets>
    <img id="texture" src="texture.png">
  </a-assets>
  <a-box color="#FFF" width="4" height="10" depth="2"
         position="-10 2 -5" rotation="0 0 45" scale="2 0.5 3"
         src="#texture">
    <!-- Animation will only play when the box is clicked. -->
    <a-animation attribute="rotation" begin="click" repeat="indefinite" to="0 360 0"></a-animation>
    <a-event name="mouseenter" scale="4 1 6"></a-event>
  </a-box>
  <!-- New lights. -->
  <a-sky color="#73F7DD"></a-sky>
  <a-camera position="0 1.8 0">
    <a-cursor color="#2E3A87">
  </a-camera>
</a-scene>

預覽上述成果

WEB VR 單機編輯

WEB VR 單機編輯

1>下載AFRAME樣版，A-Frame boilerplate，點選 ZIP即可下載

2>開啟ZIP目錄的index.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.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>

2016年4月24日星期日

WEB VR 使用教學

1>下載firefox，開始firefox

2>安裝 Mozilla WebVR Plus

3>前往線上html 編輯器 Codepen，註冊成功，新增pen

4>在html頁籤，輸入afrmae code

<a-scene>
<a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
<a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

5>在 Settings，Stuff for <head> 貼上 AFRAME 之 javascript source

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

6>可以立即看到畫面
A-Frame Codepen

7>修改屬性

Try changing the color of the cube (e.g., color="#748B9C" for a rainy day blue).
Try changing the size of the sphere (e.g., radius="0.25" to make it a little baby sphere).
Try changing the position of the cylinder (e.g., position="1 1 1" to raise the roof)