首页 >web前端 >js教程 >awe.js在浏览器中增强现实

awe.js在浏览器中增强现实

尊渡假赌尊渡假赌尊渡假赌原创: 2025-02-19 12:07:08745浏览

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成为每个人的更好工具。
>

以上是awe.js在浏览器中增强现实的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Creating a Book Club App With AngularJS, Stripe and Stamplay下一篇：Composition in Aurelia.io: Creating a Report Builder

查看更多

awe.js在浏览器中增强现实

钥匙要点

如果您想直接进入代码并尝试一下，则可以在GitHub上使用。

awe.js是一个JavaScript库，使用三个。JS，您的设备的相机和一些非常智能的技术来在浏览器中创建增强现实。您可以在awe.js github存储库上下载图书馆和一些示例。它提供了四种不同种类的AR体验，每种体验都有自己的榜样：>

如果我们在Google Chrome上运行此代码，以将其指向我们的标记，则应出现虫洞。

结论

经常询问有关awe.js

awe.js在功能和性能方面与ar.js有何不同？

>可以使用awe.js？

相关文章