A-FRAME初體驗

時間 2019-12-05

標籤 frame 體驗简体版

原文原文鏈接

引言

簡單介紹A-FRAME，A-FRAME自創一套類HTML的標籤讓開發者能夠像寫頁面同樣輕鬆構建本身的WebVR場景應用，其底層是基於強大的WebGL，支持跨平臺，看官網的介紹，A-FRAME提供了基礎的集合形狀、3D建模、相機、動畫、光影等等功能，而這些用戶均可以直接經過相似HTML標籤快速使用並構建本身的WebVR場景。javascript

標籤

<a-scene>

<a-scene>是全局的根對象整個3D應用的場景，全部實體都應該存在這個場景中,<a-scene>處理了three.js以及WebVR一些如下事情html

建立畫布、渲染器以及渲染循環java
默認的照相機和光影效果web
建立WebVR Polyfill，VREffect瀏覽器
調用WebVR API設置VR UI交互動畫

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a-scene</title>
    <script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
    <a-scene>
    </a-scene>
</body>
</html>

<a-box>

<a-box>是一個方形幾何圖形，下面直接在<a-scene>直接添加一個方形實體（長、寬、高分別都是1，顏色是紅色）spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a-scene</title>
    <script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
    <a-scene>
        <a-box color="red" width="1" height="1" depth="1"></a-box>
    </a-scene>
</body>
</html>

在瀏覽器預覽的時候，咱們並無直接看到添加的box，經過<ctrl>+<Shift>+i進入webvr-inspector查看整個場景的各個元素，紅色方形並無在初始化時候的視野範圍內（黃色線標識的是三維視野邊界）code

此時還看到camera的位置是在零點(0、0、0）的上方，只要調整camera的位置或者是調整正方形的位置，就能夠初始化的時候顯示正方形，設置<a-box>的position能夠把方形移動到可視範圍內，此外rotation能夠設置方形的旋轉角度htm

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>a-scene</title>
    <script type="text/javascript" src="./lib/aframe.js"></script>
</head>
<body>
    <a-scene>
        <a-box position="0 2.24 -4.22" color="red" rotation="0 45 45" width="1" height="1" depth="1"></a-box>
    </a-scene>
</body>
</html>

相關文章

相關標籤/搜索

全棧初體驗

C++11下的初體驗

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<