最後に、マーカーを紙に印刷する必要があります。私たちが使用するマーカーはこれです：
コード
awe.js
geo_ar - コンパスポイントの設定されたオブジェクトを配置できます。
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>これらすべてのファイルが正常にロードされたら、適切な名前のsuccess（）awe.js関数を実行します。要素の表示を開始する準備ができたときに常に実行される最初の関数は、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）内に配置されます。これらは、オブジェクトを内部に配置できる座標を介してマークされたシーン内の特定のポイントです。 awe.js内だけでなく、要素自体もPoisを移動できます。特定の紙マーカーが見られる場所に配置される単一のPOIを作成します。 POIを作成するには、awe.pois.add（）のawe.js関数を使用します。
「マーカー」の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>プロジェクションとして追加できるオブジェクトにはかなりの数のオプションがあるため、詳細に説明します。注意してください - ここでは、ポジショニングと回転のためのすべての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の球体測定は{shape： 'Sphere'、radius：10}として表現されます。現在入手可能なawe.jsの最新の3.jsを使用している人に注意すべきことの1つは、Boxgeometryがまだキューブジオメトリを使用しています。したがって、ボックスを作成するには、フォーマット{shape： 'cube'、x：20、y：30、z：5}を使用します（名前にもかかわらず、「キューブ」である必要はありません）。
位置 - POIに関連してアイテムのx、y、z軸を調整できます。私はそれらをx座標とz座標を介してワームホールの中心から少し戻って動きますが、正直に言うと、-5があなたを悩ませた場合、それらについても0に残っているでしょう。 y軸で45度回転して、ワームホールの上にある素敵な角度で向いているようにしました。
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>投影が定義された後、ARパズルのかなり重要な部分であるマーカー検出イベントを定義します。これを、wee.events.add（）。
awe.jsイベントは1つしかないので、ここには1つのイベントだけがあります。イベントは、何でも呼び出すことができるIDで定義されています。 「ar_tracking_marker」と呼びました。適用可能なデバイスの種類を定義します。これは、これまでのすべてのawe.jsの例でも同じように思われます。そのため、PCとAndroidが1に設定されているように、
<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>その後、登録（）およびunregister（）関数があり、マーカーを監視しているイベントリスナーを追加および削除します。
<span>ready: function() {
</span> awe<span>.util.require([
</span> <span>{
</span> <span>capabilities: ['gum','webgl'],</span>マーカーを見つけることへの応答の中で、私たちは物理的な紙マーカーで「マーカー」と呼んだPOIをその場に移動し、それを見やすくしたいと考えています。 event.detail ['64 ']を使用して物理マーカーに合わせるように変換します。
また、「ワームホール」投影を目に見えるように設定します。<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>
マーカーが表示されないが、メニューが開いている場合は、開いたままにしますが、ワームホールを隠すように設定します。これの主な理由は、いくつかの光の変化があれば、マーカーが判読できなくなる可能性があることです。私たちは、戻る方法なしで特定の色の光に自分自身を閉じ込めたくありません！
<span>success: function() {
</span> <span>window.awe.setup_scene();</span>マーカーがなく、メニューが開いていない場合、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>設定する実際の機能の最後のビットは、クリックイベントです。これらはすべて、object_clickedイベント内にあります。
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内でクリックされた投影のIDが含まれています。スイッチステートメントを使用して、クリックに反応する方法を決定します。ワームホールをクリックして、仮想メニューを開いて閉じます。仮想メニューボタンをクリックすると、明るい色がトリガーされます。各ボタンが同じ応答コードを実行するため、スイッチステートメントを使用します。
<span>window.addEventListener('load', function() {
</span> <span>var menu_open = false;
</span>
<span>// Our code continues here
</span> <span>});</span>Wormholeクリックイベントをクリックして、menu_openが真かfalsであるかどうかに応じてメニューを開きます。偽の場合は、awe.js awe.projections.update（）関数を使用して、y軸の各ボタンアップを1秒以上アニメーション化します。それはそれをワームホールから上に動かします。各投影の動きの唯一の違いは、各オブジェクトがy軸上でどれだけ移動するかです。
それ以外の場合は、メニューが開いている場合、ワームホールの下で最初の位置に戻り、視界から隠されています。<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>このすべての後、awe.jsが非互換性などのためにロードされない場合、エラーメッセージを表示するためにロードされる代替スクリプトがあります。
<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>アクションのデモ
awe<span>.pois.add({id: 'marker', position: {x: 0, y: 0, z: 10000}, visible: false});</span>メニュー項目のいずれかをクリックすると…
lifxライトの色を変更するはずです！
それは、awe.jsを使用してブラウザで拡張現実を始めるためにあなたが知っておくべきすべてのものです。最近のテクノロジーの世界で多くの開発が行っているように、それは多くの可能性を秘めています！ AWE.JSチームは常にプラグインに取り組んでおり、近日公開予定の新しい、さらに完全に機能するバージョンが必要です！また、Google Cardboardで使用するために3.JSの立体効果を設定し、AWE.JSのいくつかの機能と組み合わせてARヘッドセットエクスペリエンスを構築することも可能です。私はそれが1つの記事にとって少しかもしれないと思ったので、その記事に関する将来の記事に注目してください！
このコードを使用してARマジックを試したり、さらに進めたりする場合は、コメントにメモを残すか、Twitter（@ThatPatrickGuy）で私と連絡を取ります。
awe.jsを使用したブラウザの拡張現実に関するよくある質問awe.jsで問題が発生している場合は、助けを求めることができるいくつかのリソースがあります。 awe.jsの公式Githubリポジトリには、ライブラリのすべての側面をカバーする包括的なドキュメントが含まれています。 GitHubの問題トラッカーをチェックして、他の誰かが同じ問題に遭遇したかどうかを確認することもできます。そこに解決策が見つからない場合は、Stack Overflowまたは他のオンライン開発者コミュニティでヘルプを求めてみてください。オープンソースプロジェクト。これは、ライセンスの条件に準拠している限り、コードを自由に使用、変更、および配布できることを意味します。 awe.jsのソースコードはGithubで入手できます。そのため、バグレポートを提出したり、新機能を提案したり、独自のコードを送信したりすることで、プロジェクトに貢献することもできます。 .js？
awe.jsプロジェクトに貢献する方法はたくさんあります。開発者の場合は、バグレポートを送信したり、新機能を提案したり、コードを書いたりすることで貢献できます。開発者でない場合でも、ドキュメントを作成したり、チュートリアルを作成したり、awe.jsについての言葉を広めるのを手伝っても貢献できます。どんな貢献も大歓迎であり、awe.jsをすべての人にとってより良いツールにするのに役立ちます。
以上がawe.jsを使用したブラウザの拡張現実の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
