En février, nous avons lancé le composant Web <model-viewer>,
qui vous permet d'ajouter de manière déclarative un modèle 3D à une page Web, tout en hébergeant
sur votre propre site. Il n'était pas compatible avec la réalité augmentée. Cela
vous n'avez pas pu afficher l'image source du composant par-dessus l'image
le flux de la caméra.
Pour ce faire, nous avons depuis ajouté la prise en charge de Magic Leap et de la fonctionnalité Aperçu rapide sur iOS. Maintenant
nous annonçons la prise en charge de la RA sur Android avec l'ajout du ar
. Cet attribut repose sur une nouvelle fonctionnalité ARCore appelée Scene Viewer.
une application externe pour afficher des modèles 3D. Pour en savoir plus sur Scene Viewer,
consultez Afficher des modèles 3D en RA à partir d'un navigateur Android.
Voyons comment utiliser la réalité augmentée avec <model-viewer>.
L'attribut
Comme vous vous en souvenez peut-être, un composant Web ne nécessite aucune connaissance particulière. Il
se comporte comme un élément HTML standard, avec une balise unique ainsi que des propriétés
et méthodes. Après
en l'installant avec une balise <script>,
utilisez-le comme n'importe quel autre élément HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Cela ressemble beaucoup à ce que j'avais dans l'article précédent. Notez le truc que j'ai mis en évidence à la fin. Il s'agit du nouvel attribut.
Installation de la nouvelle version
Si vous utilisez déjà <model-viewer>, vous importez probablement le composant
utilisant exactement les balises <script>
comme indiqué dans la documentation.
Nous y apportons constamment des améliorations. Si vous souhaitez tester de nouvelles fonctionnalités avant
une mise à niveau et un déploiement délibérément,
sur <model-viewer>. Pour ce faire, ajoutez le numéro de version aux URL des fichiers, comme indiqué
ci-dessous. Ensuite, regardez
page des versions
pour obtenir des mises à jour.
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
Conclusion
Essayez la nouvelle version de <model-viewer> et donnez-nous votre avis.
Les problèmes et commentaires sont
bienvenue sur GitHub.