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 le modèle sur votre propre site. Il ne prenait pas en charge la réalité augmentée. Autrement dit, vous ne pouviez pas afficher l'image source du composant sur le flux de la caméra d'un appareil.
Pour ce faire, nous avons ajouté la compatibilité avec Magic Leap et Quick Look sur iOS. Nous annonçons maintenant la prise en charge de la RA sur Android avec l'ajout de l'attribut ar. Cet attribut est basé sur une nouvelle fonctionnalité ARCore appelée Scene Viewer,
d'une application externe permettant d'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, un composant Web ne nécessite aucune connaissance particulière pour être utilisé. Il se comporte comme un élément HTML standard, avec une balise unique, ainsi que des propriétés et des méthodes. Après l'avoir installée 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 mon article précédent. Remarquez la chose que j'ai mise en évidence à la toute fin. C'est le nouvel attribut.
Installer la nouvelle version
Si vous utilisez déjà <model-viewer>, vous importez probablement le composant à l'aide des balises <script> exactement comme indiqué dans la documentation.
Nous améliorons constamment la fonctionnalité. Si vous souhaitez tester de nouvelles fonctionnalités avant de les mettre à niveau et de les déployer délibérément, installez une version spécifique de <model-viewer>. Pour ce faire, ajoutez le numéro de version aux URL des fichiers, comme indiqué ci-dessous. Consultez ensuite la page des versions pour vous tenir informé.
<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 dites-nous ce que vous en pensez.
Problèmes et commentaires sont les bienvenues sur GitHub.