awe.js在瀏覽器中增強現實-js教程-PHP中文網

awe.js在瀏覽器中增強現實

鑰匙要點

增強現實（AR），該庫利用設備的攝像頭和三個。
對於演示，您需要Google Chrome用於移動，一個IFTTT帳戶和印刷AR標記。該演示還可以在Chrome和Opera等一些桌面瀏覽器上使用。
演示涉及一個3D控制板，該板出現在物理標記上，並且可以與諸如IFTTT之類的外部服務進行交互以更改設置，例如淺色。
awe.js需要設置瀏覽器中的設備類型，相機位置和燈光設置等各種參數，並且它使用感興趣的點（POI）和投影來管理AR元素。現在，Chrome現在要求訪問相機的網頁https，需要進行調整，例如使用HTTPS隧道進行本地測試。 >
增強現實是一個整潔的概念。我們欣賞周圍的世界，並用圖像，文字，聲音和視頻補充它。科技公司開始使用Meta眼鏡，Microsoft Hololens和Magic Leap等設備來探索AR的可能性。這些非常令人興奮的AR耳機還沒有準備好釋放消費者，因此可能要有一對，也許還有一對。但是，還有另一種方法是介紹世界來使用它們可能更容易訪問的東西來增強現實 - 移動瀏覽器。
>我以前曾在我的文章中使用JavaScript和Trix.js在我的文章中使用Google Cardboard和Trix.js將VR帶到Web的文章中，並使用JavaScript和Google Cardboard過濾現實。在本文中，我將展示如何使用名為awe.js的JavaScript庫在移動網絡上創建增強現實體驗。我們將創建一個3D控制板，該板在紙張標記的頂部打開。我們可以將其連接到幾乎可以通過JavaScript HTTP請求啟用的任何操作，因此我將其設置為使用IFTTT。

對於此演示，您目前需要Google Chrome才能進行移動。它也可能在Firefox上用於移動設備，但是當我在HTC One M9上嘗試時，我發現點擊事件並沒有觸發我。它還可以在一些桌面瀏覽器（Chrome和Opera在我的Mac上運作良好），但絕對與帶有觸摸事件的智能手機的體驗絕對不太相同。不過，它可能在平板電腦上整潔。

>您還需要一個IFTTT帳戶以及如何使用觸發HTTP請求的規則來設置製造商渠道的知識。如果您是IFTTT的新手，我們以前介紹了使用IFTTT將LIFX燈泡連接到IoT的文章中的基礎知識。對於那些新的製造商頻道的人，我們還介紹了將IoT和node.js連接到IFTTT。最後，您需要將標記打印到一張紙上。我們要使用的標記是這個：

代碼

如果您想直接進入代碼並嘗試一下，則可以在GitHub上使用。

。

awe.js

awe.js是一個JavaScript庫，使用三個。 JS，您的設備的相機和一些非常智能的技術來在瀏覽器中創建增強現實。您可以在awe.js github存儲庫上下載圖書館和一些示例。它提供了四種不同種類的AR體驗，每種體驗都有自己的榜樣：>

geo_ar - 允許您將對象放置在Set Compass Point。

grift_ar - 與Oculus Rift兼容。

leap_ar - 與Leap Motion Controller集成。
> Marker_AR - 允許您創建一種位於增強現實標記的體驗。這是我們將在此演示中與之合作的。

>所有內容都始於我們窗口上的加載事件。我們包括的第一件事是一個變量，可以跟踪我們的AR控制面板（我稱之為“簡稱此處的菜單”）是開放的。最初，它是關閉的。

然後，我們開始使用awe.js庫。我們所做的一切都是在window.awe.init（）函數中定義的。我們從我們的AR場景的一些全局設置開始。

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

登入後複製

device_type - 所有示例將其設置為awe.auto_detect_device_type，請求它自動檢測設備。到目前為止，我還沒有看到需要更改。
>設置 - 我們實際上可能想在此處更改現場。其中包括：
- container_id - 我們的整個體驗將在內部生成的元素ID。
- >
- > default_lights - 我們可以為我們的場景設置一個不同的三個燈的數組，給出了每個ID，並定義了它的光線及其顏色的類型。我們的演示只有一個白色三。有多種選擇可用於光的類型，它們對應於不同類型的三種燈光 - '區域'，“定向”，“半球”，“點”和“斑點”。

在awe.js的特定功能中定義的文件- lib/awe-standard dipendencies.js，lib/awe-sandard.js和lib/awe-standard-standard-window_resized.js eres.js每個都很常見，定義敬畏和處理窗口大小的標準零件。我們的演示使用標記，這需要下面列出的其他兩個文件。

<span>window.awe.init({
</span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span>    <span>settings: {
</span>      <span>container_id: 'container',
</span>      <span>fps: 30,
</span>      <span>default_camera_position: { x:0, y:0, z:0 },
</span>      <span>default_lights: [{
</span>        <span>id: 'point_light',
</span>        <span>type: 'point',
</span>        <span>color: 0xFFFFFF
</span>      <span>}]
</span>    <span>},</span>

登入後複製

>成功加載了所有這些文件後，我們將運行恰當命名的Success（）awe.js函數。準備開始顯示元素時，您將始終運行的第一個功能設置awe.js場景。

<span>ready: function() {
</span>    awe<span>.util.require([
</span>      <span>{
</span>        <span>capabilities: ['gum','webgl'],</span>

登入後複製

>我給了它一個“標記”的ID，但是只要您在代碼中對此POI的其他參考中保持一致，就可以稱其為您想要的任何東西。我們將其初始位置設置為（0,0,10000），它將其定位到遠處，直到我們準備好使用它為止。我們還將其設置為看不見的，直到發現標記。

<span>window.addEventListener('load', function() {
</span>    <span>var menu_open = false;
</span>    
    <span>// Our code continues here
</span>  <span>});</span>

登入後複製

我們添加到pois中的

元素被稱為awe.js中的“預測”。我們添加到場景中的第一個投影我稱為“蟲洞”，因為這是一個平坦的黑色廣場，我們的菜單項將神奇地出現。就像POI的ID一樣，只要您將其與代碼中的其他參考保持一致，您就可以將其命名。我們使用函數awe.project.add（）。

<span>window.awe.init({
</span>    <span>device_type: awe.AUTO_DETECT_DEVICE_TYPE,
</span>    <span>settings: {
</span>      <span>container_id: 'container',
</span>      <span>fps: 30,
</span>      <span>default_camera_position: { x:0, y:0, z:0 },
</span>      <span>default_lights: [{
</span>        <span>id: 'point_light',
</span>        <span>type: 'point',
</span>        <span>color: 0xFFFFFF
</span>      <span>}]
</span>    <span>},</span>

登入後複製

>我們可以添加作為預測的對像有很多選擇，因此我將更詳細地解釋它們。請注意 - 在此處進行定位和旋轉的所有X，Y和Z值都與其POI有關。該POI在其ID上定義為{poi_id：'marker'}。

>位置 - 您可以根據其POI調整項目的X，Y和Z軸。
旋轉 - 您可以通過其X，Y和Z軸旋轉與其POI相關的X，Y和Z軸。我在其X軸上旋轉90度的蟲洞90度，以使其平坦地坐在桌子上，並用Z軸坐在45度上，因為我認為它看起來更自然（它始終與標記始終與標記完全保持一致，因此擁有它在對角線上會變得不那麼明顯）。
材料 - 這定義了投影的三個材料。我一直堅持使用“ phong”（三分之二的meshphongmaterial），但是看起來“蘭伯特”，“著色器”，“ sprite”和“ sprite_canvas”也有可能作為選項可用。我們還可以在十六進制中定義其顏色。
>紋理 - 演示中不使用它，但我想將其包括在本文中以進行完整。要定義紋理，您可以包括紋理：{路徑：'yourtexturefilename.png'}。
在演示中，我在場景中添加了七個不同的盒子/立方體，每個盒子高30像素，並在y軸上放置31像素，以便最初被蟲洞隱藏。它們的寬度都略有不同，使它們看起來有點像燈泡。
>我通過X和Z坐標將它們從蟲洞的中心移動一點，但老實說，如果您的漏洞-5蟲子，那可能還不錯。我在y軸上旋轉了45度，因此它在蟲洞的頂部以一個好角度的角度。
window.addEventListener('load', function() { var menu_open = false; // Our code continues here });
登入後複製
登入後複製
登入後複製
登入後複製
>其中每個都有一個'ar_button_ {number}'的ID，其中數字是從底部到頂部的菜單按鈕的索引。我們將在對IFTTT的http調用中使用此ID，因此保持這些一致和準確很重要！
>
定義了預測後，我們定義了AR拼圖的一個相當重要的部分 - 我們的標記檢測事件。我們將其添加為一個陣列傳遞到函數awe.events.add（）。
>
window.awe.init({ device_type: awe.AUTO_DETECT_DEVICE_TYPE, settings: { container_id: 'container', fps: 30, default_camera_position: { x:0, y:0, z:0 }, default_lights: [{ id: 'point_light', type: 'point', color: 0xFFFFFF }] },
登入後複製
登入後複製
登入後複製
登入後複製
>我們只有一個awe.js事件，因此這裡只有一個事件。該事件的定義是我們可以稱呼任何東西的ID。我稱其為“ ar_tracking_marker”。我們定義適用的設備類型。到目前為止，在所有敬畏的示例中，這似乎是相同的，所以我將其與PC和Android設置為1一樣。

然後，我們有register（）和unregister（）函數添加和刪除正在關注標記的事件偵聽器。
```
ready: function() {
 awe.util.require([
 {
 capabilities: ['gum','webgl'],
```
登入後複製
登入後複製
登入後複製
然後，我們定義事件處理程序，該事件處理程序將在我們發現標記後運行。我們尋找“ 64”標記，只有在找到響應時才能運行。
>
```
files: [ 
 ['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
 'lib/awe-standard-window_resized.js',
 'lib/awe-standard-object_clicked.js',
 'lib/awe-jsartoolkit-dependencies.js',
 'lib/awe.marker_ar.js'
 ],
```
登入後複製
登入後複製
在我們對找到標記的回應中，我們希望將我們稱為“標記”的POI使用我們的物理紙標記物，使其可見。我們使用event.detail ['64']將其轉換為與物理標記保持一致。 transform。
>
```
success: function() {
 window.awe.setup_scene();
```
登入後複製
登入後複製
我們還將“蟲洞”投影設置為可見。
>
```
awe.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});
```
登入後複製
登入後複製
如果我們看不到標記，但我們的菜單開放，我們將其設置為保持打開狀態，但請隱藏蟲洞。這樣做的主要理由是，隨著一些光的變化，標記可能難以辨認。我們不想將自己陷入特定的顏色燈光，無法轉彎！
>
```
awe.projections.add({ 
 id: 'wormhole',
 geometry: {shape: 'plane', height: 400, width: 400},
 position: {x: 0, y: 0, z: 0},
 rotation: {x: 90, z: 45},
 material: {
 type: 'phong',
 color: 0x000000
 }
 }, {poi_id: 'marker'});
```
登入後複製
如果沒有標記，並且我們的菜單沒有打開，那麼整個POI都隱藏了等待我們查看。
```
awe.projections.add({
 id: 'ar_button_one',
 geometry: {shape: 'cube', x: 60, y: 30, z: 5},
 rotation: {y: 45},
 position: {x: -5, y: -31, z: -5},
 material: {
 type: 'phong',
 color: 0xFF0000
 }
 }, {poi_id: 'marker'});
```
登入後複製
我們通過告訴awe.js更新場景來結束。
>
我們要設置的實際功能的最後位置是我們的點擊事件。所有這些都在object_clicked事件中。
```
awe.events.add([
 // Our events here
 ]);
```
登入後複製
我們的點擊事件包含在e.detail.proctiond_id中單擊的投影的ID。我們使用開關語句確定如何對單擊反應。單擊蟲洞打開並關閉虛擬菜單，而“虛擬菜單”按鈕上的單擊將觸發我們的淺色。我們使用開關語句，因為每個按鈕都會運行相同的響應代碼。
```
id: 'ar_tracking_marker',
 device_types: {
 pc: 1,
 android: 1
 },
```
登入後複製
>
window.addEventListener('load', function() { var menu_open = false; // Our code continues here });
登入後複製
登入後複製
登入後複製
登入後複製
>我們的蟲洞單擊事件打開並根據菜單_OPEN是TRUE還是FALSE關閉菜單。如果是錯誤的，那麼我們使用awe.js awe.project.update（）函數來在一秒鐘內將每個按鈕上的每個按鈕動畫。這將其從蟲洞中移出。每個投影的移動之間的唯一區別是每個對像在y軸上移動多少。
window.awe.init({ device_type: awe.AUTO_DETECT_DEVICE_TYPE, settings: { container_id: 'container', fps: 30, default_camera_position: { x:0, y:0, z:0 }, default_lights: [{ id: 'point_light', type: 'point', color: 0xFFFFFF }] },
登入後複製
登入後複製
登入後複製
登入後複製
否則，如果菜單打開，我們將它們全部移至蟲洞下的初始位置，並從視圖中隱藏。
```
ready: function() {
 awe.util.require([
 {
 capabilities: ['gum','webgl'],
```
登入後複製
登入後複製
登入後複製
在我們的if else語句之後，我們將菜單_open切換到與之相反的相反，因此我們跟踪它的到底位置。

在我們的按鈕單擊事件中，我們向IFTTT提出HTTP請求，其中包括我們的按鈕ID作為事件名稱，以及訪問IFTTT服務的鍵。我們並沒有真正使用返回的數據，而是將其記錄到控制台進行調試目的，但實際上，實際結果來自IFTTT對HTTP呼叫的反應。
>
```
files: [ 
 ['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
 'lib/awe-standard-window_resized.js',
 'lib/awe-standard-object_clicked.js',
 'lib/awe-jsartoolkit-dependencies.js',
 'lib/awe.marker_ar.js'
 ],
```
登入後複製
登入後複製
在所有這些之後

是https time
```
success: function() {
 window.awe.setup_scene();
```
登入後複製
登入後複製
截至2015年底 - 我正在回到本文中，以添加新的相當重要的信息 - Chrome現在要求使用攝像頭的網頁通過HTTPS提供。因此，在嘗試運行此操作之前，您需要找到一種通過HTTPS運行服務的方法。到目前為止，我用於測試的一種方法是Ngrok，它可以為您的Localhost提供HTTPS隧道。我們有一個指南，可以從這裡的任何地方訪問Localhost，這可以幫助您入門。
演示的演示
```
awe.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});
```
登入後複製
登入後複製
如果我們在Google Chrome上運行此代碼，以將其指向我們的標記，則應出現蟲洞。

如果我們單擊蟲洞，我們的菜單按鈕應將其動畫成正確的斑點。

如果我們單擊其中一個菜單項……

它應該更改我們的lifx燈的顏色！

結論

>這就是您使用awe.js中瀏覽器中增強現實開始的一切所需的一切。它具有很大的潛力，如今技術界的許多發展都在做！ Awe.js團隊一直在插入插件，很快就會有一個更新甚至更完整的版本！也可以在Google紙板中設置三個。 JS立體效果，並將其與Awe.js的某些功能相結合以構建AR耳機體驗。我認為一篇文章可能有點多，所以請留意將來的文章！
>
>如果您使用此代碼嘗試一些AR魔術或進一步進行，請在評論中留下便條或在Twitter上與我聯繫（@thatpatrickguy），我很想檢查一下！
>
經常詢問有關awe.js
的瀏覽器中有關增強現實的問題
awe.js在功能和性能方面與ar.js有何不同？

awe.js和ar.js都是在瀏覽器中創建增強現實體驗的強大工具。但是，它們在幾種方面有所不同。 awe.js是一個更全面的框架，為創造身臨其境的AR體驗提供了廣泛的功能。它支持多種跟踪方法，包括GPS，Compass和陀螺儀跟踪，並且還支持3D模型。另一方面，AR.JS更專注於基於標記的跟踪，並以其高性能和效率而聞名。它也更容易用於初學者，但是它可能不會提供與awe.js.

>的靈活性相同的靈活性，我可以使用awe.js開發AR Web應用程序嗎？您可以使用awe.js開發AR Web應用程序。 awe.js是一個JavaScript庫，可讓您直接在瀏覽器中創建AR體驗，而無需任何其他插件或下載。這使其成為開發基於Web的AR應用程序的絕佳選擇。您可以使用它來創建廣泛的AR體驗，從簡單的2D覆蓋到復雜的3D場景。

>我如何從awe.js？
開始，以敬畏開始。 JS，您首先需要從官方的GitHub存儲庫下載庫。完成此操作後，您可以通過編寫JavaScript代碼開始創建AR場景。 awe.js提供了一系列API和功能，您可以使用這些功能來控制AR體驗，包括用於創建對象，控制相機和處理用戶輸入的功能。
>可以使用awe.js？

awe.js構建應用程序的一些示例，是一種多功能工具，可用於創建各種AR應用程序。例如，您可以使用它來創建AR導遊應用程序，用戶可以在其中將手機指向不同的地標以獲取有關它們的信息。您也可以使用它來創建AR遊戲，用戶可以在現實世界中與虛擬對象進行交互。其他可能的應用程序包括AR購物應用程序，AR教育應用程序等。可能的。但是，由於它使用了WebGL和WeBRTC等高級Web技術，因此它可能無法在不支持這些技術的較舊瀏覽器上使用。為了獲得最佳效果，建議使用awe.js與Chrome，Firefox或Safari（例如Chrome，Firefox或Safari）等現代，最新的瀏覽器。
我可以與其他JavaScript庫或框架一起使用awe.js？ >>我如何與awe.js進行問題排除問題？
>如果您在awe.js方面遇到麻煩，則有幾種資源可以尋求幫助。 awe.js的官方GitHub存儲庫包括一份涵蓋圖書館各個方面的綜合文檔。您還可以在Github上查看問題跟踪器，以查看其他人是否遇到了同樣的問題。如果您在那裡找不到解決方案，則可以嘗試在堆棧溢出或其他在線開發人員社區上尋求幫助。
> awe.js是開源的嗎？一個開源項目。這意味著只要您遵守許可條款，就可以自由使用，修改和分發代碼。 awe.js的源代碼可在GitHub上找到，因此您也可以通過提交錯誤報告，建議新功能甚至提交您自己的代碼來為項目做出貢獻。
>
>
。如果您需要awe.js的幫助，則可以在項目的GitHub頁面或其他在線開發人員社區上尋求幫助。在線上還有許多可用的教程和指南可以幫助您開始敬畏。
>我如何為awe.js項目做出貢獻？如果您是開發人員，則可以通過提交錯誤報告，建議新功能或編寫代碼來做出貢獻。如果您不是開發人員，那麼您仍然可以通過編寫文檔，創建教程或幫助宣傳有關awe.js的信息來做出貢獻。任何貢獻都非常感謝，並有助於使awe.js成為每個人的更好工具。
>