Réalité augmentée dans le navigateur avec Awe.js

Les plats clés

• La réalité augmentée (AR) peut être implémentée dans des navigateurs mobiles à l'aide de la bibliothèque awe.js, qui exploite l'appareil photo de l'appareil et trois.js pour créer des expériences AR.
• La bibliothèque AWE.JS prend en charge plusieurs expériences AR, y compris la RA basée sur la géo, l'intégration avec Oculus Rift, le contrôleur de mouvement LEAP et l'AR basés sur des marqueurs, qui est utilisé dans la démo.
• Pour la démo, vous avez besoin de Google Chrome pour mobile, d'un compte IFTTT et d'un marqueur AR imprimé. La démo fonctionne également sur certains navigateurs de bureau comme Chrome et Opera.
• La démo implique une carte de contrôle 3D qui apparaît sur un marqueur physique et peut interagir avec des services externes comme IFTTT pour modifier les paramètres tels que les couleurs claires.
• awe.js nécessite de configurer divers paramètres comme le type d'appareil, la position de la caméra et les paramètres légers dans le navigateur, et il utilise des points d'intérêt (POI) et des projections pour gérer les éléments AR.
• Chrome oblige désormais HTTPS pour les pages Web accédant à la caméra, nécessitant des ajustements comme l'utilisation de tunnels HTTPS pour les tests locaux.

La réalité augmentée est un concept soigné. Nous prenons une vue du monde qui nous entoure et la complétons avec des images, du texte, du son et de la vidéo. Les entreprises technologiques commencent à explorer les possibilités de la RA avec des appareils tels que les méta-lunettes, Microsoft Hololens et Magic Leap. Ces casques AR très excitants ne sont pas encore tout à fait prêts pour la libération des consommateurs, donc il peut s'agir d'un peu de temps avant que chaque ménage n'ait une paire. Cependant, il existe un autre moyen d'introduire le monde pour augmenter la réalité en utilisant quelque chose auquel ils peuvent avoir un accès plus facile - le navigateur mobile.

J'ai déjà couvert d'autres types de création et de manipulation de réalité en utilisant JavaScript et Three.js ici à SitePoint dans mes articles sur la rédaction de VR sur le Web avec Google Cardboard et Three.js et le filtrage de la réalité avec JavaScript et Google Cardboard. Dans cet article, je vais montrer comment vous pouvez utiliser une bibliothèque JavaScript appelée awe.js pour créer une expérience de réalité augmentée sur le Web mobile. Nous allons créer une carte de contrôle 3D qui s'ouvre sur un marqueur papier. Nous pouvons le connecter pour faire à peu près tout ce qui peut être activé via une demande HTTP JavaScript, donc je l'ai configuré pour modifier la couleur de mon LIFX Lightbulb en utilisant Ifttt.

ce dont vous aurez besoin

Pour cette démo, vous aurez actuellement besoin de Google Chrome pour mobile. Cela peut potentiellement fonctionner également sur Firefox pour mobile, mais j'ai trouvé que les événements de clic ne m'ont pas déclenché lorsque je l'ai essayé sur mon HTC One M9. Il fonctionne également sur certains navigateurs de bureau (Chrome et Opera ont très bien fonctionné sur mon Mac), mais ce n'est certainement pas la même expérience qu'un smartphone avec des événements tactiles. Cela pourrait être soigné sur une tablette.

Vous aurez également besoin d'un compte IFTTT et d'une connaissance de la façon de configurer le canal du créateur avec des règles qui déclenchent sur les demandes HTTP. Si vous êtes nouveau dans IFTTT, nous avons précédemment passé les bases de l'article sur la connexion des ampoules LIFX à l'IoT à l'aide de l'IFTTT. Pour ceux qui sont nouveaux sur le canal Maker, nous l'avons également couvert en connectant l'IoT et Node.js à Ifttt.

Enfin, vous devrez imprimer un marqueur sur un morceau de papier. Le marqueur que nous utiliserons est celui-ci:

le code

Si vous préférez entrer directement dans le code et l'essayer, tout est disponible sur github.

awe.js

awe.js est une bibliothèque JavaScript qui utilise trois.js, la caméra de votre appareil et quelques techniques assez intelligentes pour créer la réalité augmentée dans le navigateur. Vous pouvez télécharger la bibliothèque et quelques échantillons sur le repo GitHub awe.js. Il offre quatre types différentes d'expériences AR, chacune avec son propre exemple dans le repo:

• GEO_AR - vous permet de placer des objets aux points de boussole définis.
• Grift_ar - Compatible avec un Oculus Rift.
• leap_ar - s'intègre au contrôleur de mouvement Leap.
• marker_ar - vous permet de créer une expérience qui est positionnée sur les marqueurs de réalité augmentés. C'est celui avec lequel nous travaillerons dans cette démo.

Notre code de démonstration de réalité augmentée

Notre code de démonstration est supérieur à 300 lignes, mais une grande partie est un code répété pour des objets similaires. Je recommande de télécharger le code de démonstration à partir du dépôt GitHub de la démo et de suivre les explications fournies ici. Une fois que vous avez une idée de la façon dont tout cela fonctionne, essayez de bricoler et de construire quelque chose de votre propre.

Tout commence dans l'événement de chargement de notre fenêtre. La toute première chose que nous incluons est une variable pour suivre si notre panneau de configuration AR (je l'ai appelé un «menu» pour faire court ici) est ouvert ou non. Initialement, il est fermé.

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

Ensuite, nous commençons à utiliser la bibliothèque awe.js. Tout ce que nous faisons est défini dans la fonction Window.awe.init (). Nous commençons par des paramètres globaux pour notre scène AR.

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

• Device_Type - Tous les exemples le définissent sur awe.auto_detect_device_type qui le demande pour détecter automatiquement l'appareil. Jusqu'à présent, je n'ai pas vu le besoin de changer cela.
• Paramètres - Paramètres que nous pouvons réellement changer en direct ici. Ceux-ci incluent:
  • Container_id - L'ID de l'élément Notre expérience sera générée à l'intérieur.
  • FPS - nos cadres souhaités par seconde (facultatif).
  • default_camera_position - La position par défaut de la caméra dont nous consulterons notre scène (nous le commençons à (0,0,0)).
  • default_lights - Nous pouvons configurer un tableau de différentes lumières de trois.js pour notre scène, donnant à chacun un identifiant, définissant le type de lumière qu'il est et sa couleur. Notre démo n'a qu'un seul point de pointage blanc. Il existe une gamme d'options disponibles pour le type de lumière, qui correspondent à différents types de trois lumières.

Une fois nos paramètres en place, nous définissons ensuite quoi faire lorsque Awe.js a initialisé. Tout est enveloppé dans une fonction awe.util.require () qui définit les capacités du navigateur dont il a besoin avant de charger des fichiers JavaScript supplémentaires dont nous aurons besoin. Veillez à définir uniquement les capacités du navigateur dont vous avez besoin pour la démo, car vous pouvez inutilement empêcher votre application AR de travailler dans certains navigateurs si vous les définissez à tort en utilisant des capacités répertoriées dans certains de leurs autres exemples Github. Par exemple, afin d'avoir des éléments positionnés en fonction des points de boussole, vous avez besoin d'accéder à la capacité «gyro». Cela ne fonctionnera pas sur la plupart des navigateurs de bureau. Nous n'en avons pas besoin dans cette démo, nous l'excluons donc.

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

Les fichiers définis tirent des fonctionnalités spécifiques pour awe.js - lib / awe-standard-déprences.js, lib / awe-standard.js et lib / awe-standard-window_resized.js chacun sont assez communs, définissant Les morceaux standard pour les awe.js et le redimensionnement des fenêtres de manipulation. Notre démo utilise des marqueurs, qui nécessite les deux autres fichiers énumérés ci-dessous.

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

Une fois que tous ces fichiers ont réussi à charger avec succès, nous exécutons la fonction Success () Awe.js bien nommée. La première fonction que vous exécuterez toujours lorsque vous êtes prêt à commencer à afficher des éléments met en place la scène 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>

Tous les éléments de Awe.js sont positionnés dans les «points d'intérêt» (POI). Ce sont des points spécifiques de la scène marqués via des coordonnées dont les objets peuvent être positionnés à l'intérieur. Vous pouvez déplacer des pois dans Awe.js ainsi que des éléments eux-mêmes. Nous créons un seul POI qui sera placé partout où un marqueur de papier spécifique est vu. Pour créer un POI, nous utilisons la fonction awe.js de awe.pois.add ().

Je lui ai donné un identifiant de «marqueur», mais vous pouvez l'appeler tout ce que vous souhaitez, tant que vous êtes cohérent dans d'autres références à ce POI dans le code. Nous avons réglé sa position initiale pour être (0,0,10000), ce qui le positionne un peu au loin jusqu'à ce que nous soyons prêts à l'utiliser. Nous l'avons également défini pour être invisible jusqu'à ce que nous repérions le marqueur.

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

Les éléments que nous ajoutons dans nos POI sont appelés «projections» dans Awe.js. La première projection que nous ajoutons dans notre scène que j'ai appelée «trou de ver», car il s'agit d'un carré noir plat où nos éléments de menu apparaîtront comme par magie. Tout comme l'ID du POI, vous pouvez nommer le vôtre absolument n'importe quoi, tant que vous le gardez cohérent avec d'autres références à celui-ci dans votre code. Nous l'ajoutons dans notre POI en utilisant la fonction awe.projewjews.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>

Il existe plusieurs options pour les objets que nous pouvons ajouter en tant que projections, donc je les expliquerai plus en détail. Prenez note - toutes les valeurs X, Y et Z ici pour le positionnement et la rotation sont par rapport à son POI. Ce POI est défini à la fin par son identifiant comme {poi_id: 'marqueur'}.

• Géométrie - Cela fait référence aux options de géométrie trois.js de la projection. Les options requises pour chaque type de géométrie correspondent à celles fournies dans awe.js. Par exemple, la sphèleométrie en trois.js serait représentée comme {forme: «sphère», rayon: 10} dans awe.js. Une chose à noter pour ceux qui utilisent les trois derniers.js, dans la version actuellement disponible de awe.js, la boxgeometry utilise toujours CubegeoMétrie. Donc, pour créer des boîtes, nous utilisons le format {Shape: 'Cube', X: 20, Y: 30, Z: 5} (malgré le nom, il n'a pas besoin d'être un «cube»).
• Position - Vous pouvez ajuster l'axe x, y et z de l'élément par rapport à son POI.
• Rotation - Vous pouvez faire pivoter l'élément par son axe x, y et z par rapport à son POI. Je tourne le trou de ver à 90 degrés sur son axe x afin qu'il se trouve à plat sur la table et à 45 degrés par son axe z comme je pensais que cela avait l'air plus naturel (il ne s'aligne pas exactement avec le marqueur à tout moment, donc avoir Il en diagonale rend cela moins évident).
• Matériel - Cela définit le matériel trois.js de la projection. Je suis resté à utiliser «Phong» (MeshphongMaterial dans Three.js), mais il semble que «Lambert», «Shader», «Sprite» et «Sprite_Canvas» soient également potentiellement disponibles en tant qu'options. Nous pouvons également définir sa couleur en hexadécimal.
• Texture - Ce n'est pas utilisé dans la démo mais je voulais l'inclure dans cet article pour l'exhaustivité. Pour définir une texture, vous pouvez inclure la texture: {Path: 'YourTextureFileName.png'}.

Dans la démo, j'ajoute sept boîtes / cubes différentes à la scène, chacun mesure 30 pixels de haut et placé 31 pixels plus bas sur l'axe y afin qu'il soit à l'origine caché par le trou de ver. Ils sont tous des largeurs légèrement différentes pour les faire ressembler un peu à une ampoule.

Je les retire un peu du centre du trou de ver via leurs coordonnées X et Z, mais pour être honnête, cela aurait probablement l'air bien restant à 0 pour ceux-ci si -5 vous bogue. Je l'ai fait tourner à 45 degrés sur l'axe y afin qu'il fasse face à un bel angle au-dessus du trou de ver.

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

Chacun d'eux a un ID de 'ar_button_ {numéro}' où le nombre est l'index du bouton de menu du bas en haut. Nous utiliserons cet ID dans nos appels HTTP à IFTTT, donc garder ces cohérents et précis est important!

Une fois nos projections définies, nous définissons une pièce assez importante de notre puzzle AR - notre événement de détection de marqueur. Nous l'ajoutons comme un tableau transmis à la fonction awe.events.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>

Nous n'avons qu'un seul événement Awe.js, donc il n'y a qu'un seul événement ici. L'événement est défini avec une pièce d'identité que nous pourrions appeler quoi que ce soit. Je l'ai appelé 'ar_tracking_marker'. Nous définissons les types d'appareils auxquels il est applicable. Cela semble être le même dans tous les exemples Awe.js jusqu'à présent dans leur dépôt, donc je l'ai laissé tel quel avec PC et Android set sur 1.

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

Ensuite, nous avons des fonctions Register () et Unregister () pour ajouter et supprimer l'écouteur d'événements qui regarde le marqueur.

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

Nous définissons ensuite le gestionnaire d'événements qui fonctionnera une fois que nous aurons repéré un marqueur. Nous recherchons le marqueur «64» et exécutons une réponse lorsque nous le trouvons.

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

Dans notre réponse à la recherche d'un marqueur, nous voulons déplacer notre POI que nous avons appelé «marqueur» sur place avec notre marqueur en papier physique et le rendre visible. Nous le transformons en alignant le marqueur physique en utilisant event.detail ['64 ']. Transform.

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

Nous avons également défini notre projection de «trou de ver» à visible.

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>

Si nous ne voyons pas le marqueur mais que notre menu est ouvert, nous le définirons pour rester ouvert mais masquer le trou de ver. Le principal raisonnement en est qu'avec certains changements de lumière, le marqueur peut devenir illisible. Nous ne voulons pas nous piéger dans une lumière de couleur spécifique sans aucun moyen de revenir en arrière!

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>

S'il n'y a pas de marqueur et que notre menu n'est pas ouvert, alors tout le POI est caché en attendant que nous le visuons.

awe<span>.events.add([
</span>    <span>// Our events here
</span>  <span>]);</span>

Nous terminons en disant à awe.js de mettre à jour la scène.

<span>id: 'ar_tracking_marker',
</span>  <span>device_types: {
</span>    <span>pc: 1,
</span>    <span>android: 1
</span>  <span>},</span>

La dernière fonctionnalité réelle que nous allons configurer est nos événements de clic. Tous ces éléments se trouvent dans l'événement Object_Clicked.

<span>register: function(handler) {
</span>    <span>window.addEventListener('ar_tracking_marker', handler, false);
</span>  <span>},
</span>  <span>unregister: function(handler) {
</span>    <span>window.removeEventListener('ar_tracking_marker', handler, false);
</span>  <span>},</span>

Notre événement de clic contient l'ID de la projection qui a été cliquée dans e.detail.projection_id. Nous utilisons une instruction Switch pour déterminer comment réagir au clic. Cliquez sur le trou de ver ouvert et fermez le menu virtuel, tandis que les clics sur les boutons du menu virtuel déclenchent nos couleurs claires. Nous utilisons une instruction Switch car chacun des boutons exécutera le même code de réponse.

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

Notre trou de ver Cliquez sur les événements ouverts et fermez le menu selon que MENU_OPEN est vrai ou faux. S'il est faux, nous utilisons la fonction awe.js awe.projections.update () pour animer chaque bouton sur l'axe y sur une seconde. Cela le retire du trou de ver. La seule différence entre le mouvement de chaque projection est de savoir combien chaque objet se déplace sur l'axe 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>

Sinon, si le menu est ouvert, nous les remettons tous à leur position initiale sous le trou de ver et caché à la vue.

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

Après notre instruction If Else, nous basons Menu_Open à l'opposé de ce qu'il était, donc nous suivons où il se trouve.

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

Dans notre événement de clic de bouton, nous faisons une demande HTTP à IFTTT qui inclut l'identifiant de notre bouton comme nom d'événement et notre clé pour accéder au service IFTTT. Nous n'utilisons pas vraiment les données qui reviennent, nous la connectons à la console à des fins de débogage, mais sinon, les résultats réels proviennent de l'IFTTT réagissant à l'appel HTTP.

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

Après tout cela, si Awe.js ne se charge pas à cause des incompatibilités et ainsi de suite, nous avons un script alternatif qui se charge pour afficher un message d'erreur.

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

c'est le temps https

Mise à jour fin 2015 - Je reviens dans cet article pour ajouter un nouveau peu d'informations assez importantes - Chrome nécessite désormais que les pages Web utilisant l'appareil photo soient servies sur HTTPS. Donc, avant d'essayer d'exécuter cela, vous devrez trouver un moyen d'exécuter votre service via HTTPS. Une méthode que j'ai utilisée jusqu'à présent pour les tests est Ngrok, qui peut fournir un tunnel HTTPS à votre Host local. Nous avons un guide pour accéder à LocalHost de n'importe où ici à SitePoint, ce qui peut vous aider à démarrer.

La démo en action

Si nous exécutons ce code sur Google Chrome pour le mobile et le poinçant sur notre marqueur, un trou de ver doit apparaître.

Si nous cliquons sur le trou de ver, nos boutons de menu devraient s'animmer dans leurs endroits corrects.

Si nous cliquons l'un des éléments de menu…

Il devrait changer la couleur de notre lumière Lifx!

Conclusion

C'est tout ce que vous devez savoir pour commencer avec la réalité augmentée dans le navigateur en utilisant awe.js. Il a beaucoup de potentiel, comme de nombreux développements dans le monde de la technologie le font ces jours-ci! L'équipe Awe.js travaille constamment sur le plugin et il devrait y avoir une version plus récente et encore plus complète à venir! Il pourrait également être possible de configurer un effet stéréoscopique trois.js pour une utilisation dans Google Cardboard et de le combiner avec certaines fonctionnalités de Awe.js pour créer des expériences de casque AR. Je pensais que cela pourrait être un peu trop pour un article, alors gardez un œil sur un futur article à ce sujet!

Si vous expérimentez de la magie AR en utilisant ce code ou faites-le encore plus loin, laissez une note dans les commentaires ou contactez-moi sur Twitter (@thatpatrickguy), je serais ravi de le vérifier!

Les questions fréquemment posées sur la réalité augmentée dans le navigateur avec awe.js

En quoi Awe.js diffère-t-il des ar.js en termes de fonctionnalité et de performance?

awe.js et ar.js sont tous deux des outils puissants pour créer des expériences de réalité augmentée dans le navigateur. Cependant, ils diffèrent de plusieurs manières. Awe.js est un cadre plus complet qui offre un large éventail de fonctionnalités pour créer des expériences AR immersives. Il prend en charge plusieurs méthodes de suivi, y compris le GPS, la boussole et le suivi gyroscopique, et il prend également en charge les modèles 3D. D'un autre côté, AR.JS est davantage axé sur le suivi basé sur des marqueurs et est connu pour ses performances élevées et son efficacité. Il est également plus facile à utiliser pour les débutants, mais il peut ne pas offrir le même niveau de flexibilité que Awe.js.

Vous pouvez utiliser awe.js pour développer une application Web AR. Awe.js est une bibliothèque JavaScript qui vous permet de créer des expériences AR directement dans le navigateur, sans avoir besoin de plugins ou de téléchargements supplémentaires. Cela en fait un excellent choix pour développer des applications AR sur le Web. Vous pouvez l'utiliser pour créer un large éventail d'expériences AR, des superpositions 2D simples aux scènes 3D complexes.

Comment puis-je commencer avec awe.js?

pour commencer avec la crainte. JS, vous devrez d'abord télécharger la bibliothèque à partir du référentiel officiel de GitHub. Une fois que vous avez fait cela, vous pouvez commencer à créer vos scènes AR en écrivant du code JavaScript. Awe.js fournit une gamme d'API et de fonctions que vous pouvez utiliser pour contrôler l'expérience AR, y compris les fonctions pour créer des objets, contrôler l'appareil photo et gérer l'entrée des utilisateurs.

Quels sont les exemples d'applications qui peuvent être construites à l'aide d'Awe.js?

awe.js est un outil polyvalent qui peut être utilisé pour créer une large gamme d'applications AR. Par exemple, vous pouvez l'utiliser pour créer une application AR Tour Guide, où les utilisateurs peuvent pointer leur téléphone sur différents points de repère pour obtenir des informations à leur sujet. Vous pouvez également l'utiliser pour créer un jeu AR, où les utilisateurs peuvent interagir avec des objets virtuels dans le monde réel. D'autres applications possibles incluent les applications d'achat AR, les applications d'éducation AR, et bien plus encore.

est compatible Awe.js avec tous les navigateurs?

awe.js est conçu pour être compatible avec autant de navigateurs que de navigateurs que de navigateurs que de navigateurs que de navigateurs que de navigateurs possible. Cependant, comme il utilise des technologies Web avancées comme WebGL et WeBrTC, il peut ne pas fonctionner sur des navigateurs plus âgés qui ne prennent pas en charge ces technologies. Pour les meilleurs résultats, il est recommandé d'utiliser Awe.js avec un navigateur moderne et à jour comme Chrome, Firefox ou Safari.

Puis-je utiliser Awe.js avec d'autres bibliothèques ou frameworks JavaScript?

Oui, vous pouvez utiliser awe.js aux côtés d'autres bibliothèques ou frameworks JavaScript. Awe.js est conçu pour être flexible et modulaire, vous pouvez donc facilement l'intégrer dans vos projets JavaScript existants. Cependant, gardez à l'esprit que certaines fonctionnalités de Awe.js peuvent ne pas être compatibles avec certaines bibliothèques ou frameworks, donc c'est toujours une bonne idée de tester soigneusement votre code.

Comment puis-je résoudre les problèmes avec awe.js?

Si vous avez des problèmes avec Awe.js, il existe plusieurs ressources pour vous vous tourner pour obtenir de l'aide. Le référentiel officiel de GitHub pour Awe.js comprend une documentation complète qui couvre tous les aspects de la bibliothèque. Vous pouvez également consulter le tracker du problème sur GitHub pour voir si quelqu'un d'autre a rencontré le même problème. Si vous ne trouvez pas de solution là-bas, vous pouvez essayer de demander de l'aide sur le débordement de pile ou d'autres communautés de développeurs en ligne.

est awe.js open source?

Oui, awe.js est un projet open source. Cela signifie que vous pouvez utiliser librement, modifier et distribuer le code, tant que vous vous conformez aux termes de la licence. Le code source pour awe.js est disponible sur github, vous pouvez donc également contribuer au projet en soumettant des rapports de bogues, en suggérant de nouvelles fonctionnalités ou même en soumettant votre propre code.

Quel type de support est disponible pour Awe .js?

En tant que projet open source, awe.js est principalement pris en charge par sa communauté d'utilisateurs et de développeurs. Si vous avez besoin d'aide avec AWE.js, vous pouvez demander de l'aide sur la page GitHub du projet ou sur d'autres communautés de développeurs en ligne. Il existe également de nombreux tutoriels et guides disponibles en ligne qui peuvent vous aider à démarrer avec Awe.js.

Comment puis-je contribuer au projet AWE.js?

Il existe de nombreuses façons de contribuer au projet AWE.JS. Si vous êtes un développeur, vous pouvez contribuer en soumettant des rapports de bogues, en suggérant de nouvelles fonctionnalités ou en écrivant du code. Si vous n'êtes pas développeur, vous pouvez toujours contribuer en écrivant de la documentation, en créant des tutoriels ou en aidant à faire passer le mot sur Awe.js. Toutes les contributions sont grandement appréciées et aident à faire de la crainte.js un meilleur outil pour tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!