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 l'hébergant sur votre propre site. Il ne prenait pas en charge la réalité augmentée. Autrement dit, vous ne pouvez pas afficher l'image source du composant au-dessus du flux de la caméra d'un appareil.
Pour ce faire, nous avons depuis ajouté la compatibilité avec Magic Leap et Aperçu sur iOS. Nous annonçons maintenant la prise en charge de la RA sur Android grâce à l'ajout de l'attribut ar. Cet attribut repose sur une nouvelle fonctionnalité ARCore appelée Scene Viewer, 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 passer en réalité augmentée avec <model-viewer>.
L'attribut
Comme vous vous en souvenez peut-être, l’utilisation d’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 des méthodes. Après l'avoir installé avec une balise <script>, utilisez-la comme tout autre élément HTML.
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
Cela est très semblable à celui de l'article précédent. Remarquez la chose que j'ai soulignée à la toute fin. Il s'agit du 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 apportons constamment des améliorations. Si vous souhaitez tester de nouvelles fonctionnalités avant de procéder à une mise à niveau et à un déploiement délibérément, installez une version spécifique de <model-viewer>. Pour ce faire, ajoutez le numéro de version aux URL de fichier comme indiqué ci-dessous. Consultez ensuite la page des versions pour connaître les 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 dites-nous ce que vous en pensez.
Les problèmes et les commentaires sont bienvenues sur GitHub.