キーテイクアウト

• 拡張現(xiàn)実（AR）は、AWE.JSライブラリを使用してモバイルブラウザに実裝できます。これは、ARエクスペリエンスを作成するためにデバイスのカメラと3.JSを活用します。
awe.jsライブラリは、GeoベースのAR、Oculus Riftとの統(tǒng)合、Leap Motion Controller、およびマーカーベースのARを含む複數(shù)のARエクスペリエンスをサポートしています。
• デモには、モバイル用のGoogle Chrome、IFTTTアカウント、および印刷されたARマーカーが必要です。デモは、ChromeやOperaなどのいくつかのデスクトップブラウザでも動(dòng)作します。
デモには、物理??マーカーに表示される3Dコントロールボードが含まれ、IFTTTなどの外部サービスと対話して、明るい色などの設(shè)定を変更できます。
• awe.jsでは、ブラウザのデバイスタイプ、カメラの位置、ライト設(shè)定などのさまざまなパラメーターを設(shè)定する必要があり、興味のあるポイント（POI）とプロジェクションを使用してAR要素を管理します。
Chromeは、カメラにアクセスするWebページにHTTPSを義務(wù)付けており、ローカルテストにHTTPSトンネルを使用するなどの調(diào)整が必要です。
拡張現(xiàn)実はきちんとした概念です。私たちは私たちの周りの世界を見て、畫像、テキスト、サウンド、ビデオで補(bǔ)完します。ハイテク企業(yè)は、メタグラス、Microsoft Hololens、Magic LeapなどのデバイスでARの可能性を探求し始めています。これらの非常にエキサイティングなARヘッドセットは、まだ消費(fèi)者のリリースの準(zhǔn)備ができていないため、すべての世帯がペアを持つまでには少し前になるかもしれません。ただし、モバイルブラウザーなど、アクセスしやすいものを使用して、世界を拡張現(xiàn)実に紹介する別の方法があります。
• 私は以前、Google CardboardとThree.jsを使用してVRをWebに持ち込み、JavaScriptとGoogle Cardboardで現(xiàn)実をフィルタリングすることについて、私の記事のSitePointで、JavaScriptとThree.jsを使用して、他の種類の現(xiàn)実の作成と操作を取り上げました。この記事では、awe.jsというJavaScriptライブラリを使用して、モバイルWebで拡張現(xiàn)実體験を作成する方法を示します。紙マーカーの上に開く3Dコントロールボードを作成します。 JavaScript HTTPリクエストを介して有効にできるほとんどすべてのことを行うことができるので、IFTTTを使用してLIFXライトバルブの色を変更するように設(shè)定します。
必要なもの
• このデモでは、現(xiàn)在、モバイル用のGoogle Chromeが必要になります。潛在的にモバイルのFirefoxで動(dòng)作する可能性がありますが、HTC One M9で試したときにクリックイベントがトリガーされなかったことがわかりました。また、一部のデスクトップブラウザー（ChromeとOperaがMACで非常にうまく機(jī)能しました）で動(dòng)作しますが、タッチイベントを備えたスマートフォンとはまったく同じではありません。タブレットではきちんとしている可能性がありますまた、httpリクエストをトリガーするルールを使用して、IFTTTアカウントとメーカーチャネルをセットアップする方法の知識(shí)も必要です。 IFTTTを初めて使用する場(chǎng)合は、以前にIFTTTを使用してLIFX電球をIoTに接続するという記事の基本を調(diào)べました。 Makerチャンネルに新しい人のために、IoTとnode.jsをIFTTTに接続する際にも説明しました。

  最後に、マーカーを紙に印刷する必要があります。私たちが使用するマーカーはこれです：

  コード

  コードにまっすぐに入って試してみたい場(chǎng)合は、すべてgithubで利用できます。

  awe.js

  awe.jsは、3つのjs、お使いのデバイスのカメラ、いくつかのかなりスマートなテクニックを使用して、ブラウザで拡張現(xiàn)実を作成するJavaScriptライブラリです。 awe.js githubリポジトリにライブラリといくつかのサンプルをダウンロードできます。それは4つの異なる種類のARエクスペリエンスを提供し、それぞれがリポジトリに獨(dú)自の例を持っています：

  geo_ar - コンパスポイントの設(shè)定されたオブジェクトを配置できます。
  • Grift_ar - Oculus Riftと互換性があります
  Leap_ar - Leap Motion Controllerと統(tǒng)合します
  • marker_ar - 拡張現(xiàn)実マーカーに位置するエクスペリエンスを作成できます。これは私たちがこのデモで協(xié)力するものです。
  • 拡張現(xiàn)実デモコード
  • デモコードの長(zhǎng)さは300行を超えていますが、その多くは同様のオブジェクトのコードを繰り返します。デモのGitHubリポジトリからデモコードをダウンロードし、ここで説明されている説明とともにフォローすることをお?jiǎng)幛幛筏蓼?。すべてがどのように機(jī)能するかについてのアイデアが得られたら、いじくり回して自分のものを構(gòu)築してみてください。
  すべてがウィンドウのロードイベント內(nèi)で開始されます。最初に含めることは、ARコントロールパネル（ここでは「略して」と呼んだ）がオープンかどうかを追跡する変數(shù)です。最初は閉じられています。
  次に、awe.jsライブラリの使用を開始します。私たちが行うすべては、window.awe.init（）関數(shù)內(nèi)で定義されます。 ARシーンのグローバルな設(shè)定から始めます。

  <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に設(shè)定します。これは、デバイスを自動(dòng)的に検出するように要求します。これまでのところ、これを変更する必要はありません。
  設(shè)定 - 設(shè)定実際にここでライブを変更したい場(chǎng)合があります。これらには以下が含まれます：
  • container_id - 要素のID私たちの経験全體が內(nèi)部で生成されます。
    fps - 1秒あたりの希望のフレーム（オプション）。
    default_camera_position - シーンを表示するデフォルトのカメラの位置（（0,0,0）で開始しています）。
    • default_lights - シーンに異なる3.jsライトの配列を設(shè)定し、それぞれがIDを與え、その種類の光とその色を定義できます。私たちのデモには、白い3.jsポイントライトが1つしかありません。さまざまなタイプの3つのライトに対応する光の種類には、さまざまなオプションがあります。
    設(shè)定が整ったら、awe.jsが初期化されたときに何をすべきかを定義します。すべてがwee.util.require（）関數(shù)に包まれています。これは、必要な追加のJavaScriptファイルをロードする前に必要なブラウザ機(jī)能を定義します。デモに必要なブラウザ機(jī)能のみを定義するように注意してください。他のGitHubの例にリストされている機(jī)能を使用してこれらを誤って定義する場(chǎng)合、ARアプリが一部のブラウザで動(dòng)作することを不必要に防ぐことができるためです。たとえば、コンパスポイントに基づいて要素を配置するには、「ジャイロ」機(jī)能にアクセスする必要があります。ほとんどのデスクトップブラウザーでは機(jī)能しません。このデモではそれを必要としないので、除外します。
  定義されているファイルは、awe.js - lib/awe-standand-dependencies.js、lib/awe-standard.js、lib/awe-standard-window_resized.jsの特定の機(jī)能をプルします。 awe.jsの標(biāo)準(zhǔn)的なビットとピースとウィンドウのハンドリングのサイズ変更。デモはマーカーを使用しています。これには、以下にリストされている他の2つのファイルが必要です。
  これらすべてのファイルが正常にロードされたら、適切な名前のsuccess（）awe.js関數(shù)を?qū)g行します。要素の表示を開始する準(zhǔn)備ができたときに常に実行される最初の関數(shù)は、awe.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>

  awe.jsのすべての要素は、「関心のあるポイント」（POI）內(nèi)に配置されます。これらは、オブジェクトを內(nèi)部に配置できる座標(biāo)を介してマークされたシーン內(nèi)の特定のポイントです。 awe.js內(nèi)だけでなく、要素自體もPoisを移動(dòng)できます。特定の紙マーカーが見られる場(chǎng)所に配置される?yún)g一のPOIを作成します。 POIを作成するには、awe.pois.add（）のawe.js関數(shù)を使用します。

  「マーカー」のIDを與えましたが、コード內(nèi)のこのPOIへの他の參照全體で一貫している限り、あなたはそれをあなたが望むものを何でも呼ぶことができます。初期位置を（0,0,10000）に設(shè)定し、使用する準(zhǔn)備ができるまで少し離れたところに配置します。また、マーカーを見つけるまで目に見えないように設(shè)定します。

  ポイに追加する

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

  要素は、awe.js內(nèi)の「投影」と呼ばれます。私たちが「ワームホール」と呼んだシーンに追加する最初のプロジェクションは、これはメニュー項(xiàng)目が魔法のように表示される平らな黒い正方形です。 POIのIDと同じように、コード內(nèi)の他の參照と一致している限り、あなたは絶対に何でも名前を付けることができます。 function awe.projections.add（）を使用してPOIに追加します。
  プロジェクションとして追加できるオブジェクトにはかなりの數(shù)のオプションがあるため、詳細(xì)に説明します。注意してください - ここでは、ポジショニングと回転のためのすべてのx、y、z値がそのpoiに関連しています。そのpoiは、そのIDによって{poi_id： 'marker'}。

  <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>

  ジオメトリ - これは、投影の3.jsジオメトリオプションを指します。各タイプのジオメトリに必要なオプションは、awe.jsで提供されるジオメトリと一致します。たとえば、Three.jsの球體測(cè)定は{shape： 'Sphere'、radius：10}として表現(xiàn)されます?，F(xiàn)在入手可能なawe.jsの最新の3.jsを使用している人に注意すべきことの1つは、Boxgeometryがまだキューブジオメトリを使用しています。したがって、ボックスを作成するには、フォーマット{shape： 'cube'、x：20、y：30、z：5}を使用します（名前にもかかわらず、「キューブ」である必要はありません）。

  位置 - POIに関連してアイテムのx、y、z軸を調(diào)整できます。
  • 回転 - POIに関連して、x、y、z軸でアイテムを回転させることができます。 X軸でワームホールを90度回転させて、テーブルの上に平らになり、Z軸によって45度が自然に見えると思ったので、マーカーとは完全に並んでいないので、対角線上でこれはそれほど明白ではありません。
  • マテリアル - これにより、投影の3.jsマテリアルが定義されます。 「Phong」（Three.jsのMeshphongMaterial）を使用することに固執(zhí)しましたが、「Lambert」、「Shader」、「Sprite」、「Sprite_Canvas」もオプションとして利用できるように見えます。また、その色を16進(jìn)數(shù)で定義することもできます
  テクスチャ - これはデモでは使用されていませんが、この記事には完全性のために含めたいと思いました。テクスチャを定義するには、テクスチャを含めることができます：{path： 'yourtexturefilename.png'}。
  デモでは、シーンに7つの異なるボックス/キューブを追加します。それぞれが高さ30ピクセルで、Y軸の上に31ピクセル下に配置されているため、元々ワームホールによって隠されています。それらはすべて少し異なる幅です。

  私はそれらをx座標(biāo)とz座標(biāo)を介してワームホールの中心から少し戻って動(dòng)きますが、正直に言うと、-5があなたを悩ませた場(chǎng)合、それらについても0に殘っているでしょう。 y軸で45度回転して、ワームホールの上にある素?cái)长式嵌趣窍颏い皮い毪瑜Δ摔筏蓼筏俊?

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

  これらのそれぞれには、「ar_button_ {number}」のIDがあり、數(shù)字はメニューボタンのインデックスです。 IFTTTへのHTTP呼び出しでこのIDを使用するので、これらを一貫して正確に保つことが重要です！
  投影が定義された後、ARパズルのかなり重要な部分であるマーカー検出イベントを定義します。これを、wee.events.add（）。
  awe.jsイベントは1つしかないので、ここには1つのイベントだけがあります。イベントは、何でも呼び出すことができるIDで定義されています。 「ar_tracking_marker」と呼びました。適用可能なデバイスの種類を定義します。これは、これまでのすべてのawe.jsの例でも同じように思われます。そのため、PCとAndroidが1に設(shè)定されているように、

  <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>

  に設(shè)定されているように殘しました。
  その後、登録（）およびunregister（）関數(shù)があり、マーカーを監(jiān)視しているイベントリスナーを追加および削除します。

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

  次に、マーカーを見つけたら実行するイベントハンドラーを定義します。 「64」マーカーに注目し、見つけたときにのみ応答を?qū)g行します。

  マーカーを見つけることへの応答の中で、私たちは物理的な紙マーカーで「マーカー」と呼んだPOIをその場(chǎng)に移動(dòng)し、それを見やすくしたいと考えています。 event.detail ['64 ']を使用して物理マーカーに合わせるように変換します。

  また、「ワームホール」投影を目に見えるように設(shè)定します。

  <span>files: [ 
  </span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
  </span>    <span>'lib/awe-standard-window_resized.js',
  </span>    <span>'lib/awe-standard-object_clicked.js',
  </span>    <span>'lib/awe-jsartoolkit-dependencies.js',
  </span>    <span>'lib/awe.marker_ar.js'
  </span>  <span>],</span>

  マーカーが表示されないが、メニューが開いている場(chǎng)合は、開いたままにしますが、ワームホールを隠すように設(shè)定します。これの主な理由は、いくつかの光の変化があれば、マーカーが判読できなくなる可能性があることです。私たちは、戻る方法なしで特定の色の光に自分自身を閉じ込めたくありません！

  <span>success: function() {
  </span>    <span>window.awe.setup_scene();</span>

  マーカーがなく、メニューが開いていない場(chǎng)合、POI全體が隠れているのを待っています。

  awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>

  awe.jsにシーンを更新するように言って終了します。

  awe<span>.projections.add({ 
  </span>    <span>id: 'wormhole',
  </span>    <span>geometry: {shape: 'plane', height: 400, width: 400},
  </span>    <span>position: {x: 0, y: 0, z: 0},
  </span>    <span>rotation: {x: 90, z: 45},
  </span>    <span>material: {
  </span>      <span>type: 'phong',
  </span>      <span>color: 0x000000
  </span>    <span>}
  </span>  <span>}, {poi_id: 'marker'});</span>

  設(shè)定する実際の機(jī)能の最後のビットは、クリックイベントです。これらはすべて、object_clickedイベント內(nèi)にあります。

  awe<span>.projections.add({
  </span>    <span>id: 'ar_button_one',
  </span>    <span>geometry: {shape: 'cube', x: 60, y: 30, z: 5},
  </span>    <span>rotation: {y: 45},
  </span>    <span>position: {x: -5, y: -31, z: -5},
  </span>    <span>material: {
  </span>      <span>type: 'phong',
  </span>      <span>color: 0xFF0000
  </span>    <span>}
  </span>  <span>}, {poi_id: 'marker'});</span>

  クリックイベントには、e.detail.projection_id內(nèi)でクリックされた投影のIDが含まれています。スイッチステートメントを使用して、クリックに反応する方法を決定します。ワームホールをクリックして、仮想メニューを開いて閉じます。仮想メニューボタンをクリックすると、明るい色がトリガーされます。各ボタンが同じ応答コードを?qū)g行するため、スイッチステートメントを使用します。

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

  Wormholeクリックイベントをクリックして、menu_openが真かfalsであるかどうかに応じてメニューを開きます。偽の場(chǎng)合は、awe.js awe.projections.update（）関數(shù)を使用して、y軸の各ボタンアップを1秒以上アニメーション化します。それはそれをワームホールから上に動(dòng)かします。各投影の動(dòng)きの唯一の違いは、各オブジェクトがy軸上でどれだけ移動(dòng)するかです。

  それ以外の場(chǎng)合は、メニューが開いている場(chǎng)合、ワームホールの下で最初の位置に戻り、視界から隠されています。

  <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>

  else他のステートメントの後、私たちはそれが何であるかの反対にmenu_openを切り替えるので、私たちはそれがどこにいるのかを追跡します。

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

  ボタンクリックイベント內(nèi)で、イベント名としてボタンのIDとIFTTTサービスにアクセスするキーを含むIFTTTへのHTTPリクエストを行います。戻ってくるデータは実際には使用していません。デバッグの目的でコンソールにログインしますが、実際の結(jié)果は、HTTPコールに反応するIFTTTからの結(jié)果が発生します。
  このすべての後、awe.jsが非互換性などのためにロードされない場(chǎng)合、エラーメッセージを表示するためにロードされる代替スクリプトがあります。

  <span>files: [ 
  </span>    <span>['lib/awe-standard-dependencies.js', 'lib/awe-standard.js'],
  </span>    <span>'lib/awe-standard-window_resized.js',
  </span>    <span>'lib/awe-standard-object_clicked.js',
  </span>    <span>'lib/awe-jsartoolkit-dependencies.js',
  </span>    <span>'lib/awe.marker_ar.js'
  </span>  <span>],</span>

  それはhttps time

  です

  <span>success: function() {
  </span>    <span>window.awe.setup_scene();</span>

  2015年後半の更新 - この記事に戻って、かなり重要な情報(bào)の新しいビットを追加します。Chromeでは、カメラを使用したWebページがHTTPSで提供されることが必要です。したがって、これを?qū)g行しようとする前に、HTTPSを介してサービスを?qū)g行する方法を見つける必要があります。これまでにテストに使用した方法の1つは、Ngrokです。これは、LocalHostにHTTPSトンネルを提供できます。 SitePointのどこからでもローカルホストにアクセスするガイドがあります。

  アクションのデモ

  awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>

  このコードをGoogle Chromeでモバイル用に実行し、マーカーに向けると、ワームホールが表示されるはずです。
  ワームホールをクリックすると、メニューボタンは正しいスポットにアニメーション化する必要があります。
  メニュー項(xiàng)目のいずれかをクリックすると…

  lifxライトの色を変更するはずです！

  

  結(jié)論

  それは、awe.jsを使用してブラウザで拡張現(xiàn)実を始めるためにあなたが知っておくべきすべてのものです。最近のテクノロジーの世界で多くの開発が行っているように、それは多くの可能性を秘めています！ AWE.JSチームは常にプラグインに取り組んでおり、近日公開予定の新しい、さらに完全に機(jī)能するバージョンが必要です！また、Google Cardboardで使用するために3.JSの立體効果を設(shè)定し、AWE.JSのいくつかの機(jī)能と組み合わせてARヘッドセットエクスペリエンスを構(gòu)築することも可能です。私はそれが1つの記事にとって少しかもしれないと思ったので、その記事に関する將來の記事に注目してください！

  このコードを使用してARマジックを試したり、さらに進(jìn)めたりする場(chǎng)合は、コメントにメモを殘すか、Twitter（@ThatPatrickGuy）で私と連絡(luò)を取ります。

  awe.jsを使用したブラウザの拡張現(xiàn)実に関するよくある質(zhì)問
  awe.jsは機(jī)能とパフォーマンスの點(diǎn)でar.jsとどのように異なりますか？
  awe.jsとar.jsはどちらもブラウザで拡張現(xiàn)実體験を作成するための強(qiáng)力なツールです。ただし、いくつかの點(diǎn)で異なります。 AWE.JSは、沒入型ARエクスペリエンスを作成するための幅広い機(jī)能を提供する、より包括的なフレームワークです。 GPS、コンパス、ジャイロスコープトラッキングなど、複數(shù)の追跡方法をサポートし、3Dモデルもサポートしています。一方、AR.JSはマーカーベースの追跡により焦點(diǎn)を合わせており、その高性能と効率で知られています。また、初心者には使いやすいですが、awe.jsと同じレベルの柔軟性を提供しない場(chǎng)合があります。 awe.jsを使用して、AR Webアプリを開発できます。 awe.jsは、追加のプラグインやダウンロードを必要とせずに、ブラウザでARエクスペリエンスを直接作成できるJavaScriptライブラリです。これにより、WebベースのARアプリケーションの開発に最適です。これを使用して、単純な2Dオーバーレイから複雑な3Dシーンまで、幅広いARエクスペリエンスを作成できます。 JS、まず公式のGithubリポジトリからライブラリをダウンロードする必要があります。それを完了したら、JavaScriptコードを書くことでARシーンの作成を開始できます。 awe.jsは、オブジェクトの作成、カメラの制御、ユーザー入力の処理など、ARエクスペリエンスを制御するために使用できるさまざまなAPIと機(jī)能を提供します。

  オープンソースプロジェクトとして、awe.jsは主にユーザーと開発者のコ??ミュニティによってサポートされています。 awe.jsのサポートが必要な場(chǎng)合は、プロジェクトのgithubページまたは他のオンライン開発者コミュニティでサポートを求めることができます。また、awe.jsを始めるのに役立つオンラインで利用可能な多くのチュートリアルやガイドもあります。

  awe.jsプロジェクトに貢獻(xiàn)するにはどうすればよいですか？

  awe.jsプロジェクトに貢獻(xiàn)する方法はたくさんあります。開発者の場(chǎng)合は、バグレポートを送信したり、新機(jī)能を提案したり、コードを書いたりすることで貢獻(xiàn)できます。開発者でない場(chǎng)合でも、ドキュメントを作成したり、チュートリアルを作成したり、awe.jsについての言葉を広めるのを手伝っても貢獻(xiàn)できます。どんな貢獻(xiàn)も大歓迎であり、awe.jsをすべての人にとってより良いツールにするのに役立ちます。

以上がawe.jsを使用したブラウザの拡張現(xiàn)実の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。