AR JS Afficher un fichier gtlf

a marqué ce sujet comme résolu.

Bonjour, :)

j’essaye d’afficher un chat à partir d’un marker grâce à AR.js. J’ai aussi suivi le tutoriel suivant : http://www.makery.info/2017/10/17/integrer-la-realite-augmentee-sur-le-web-en-dix-lignes-de-code/

J’ai gardé le même nom que dans le tuto pour le fichier 3D du chat c’est à dire makery.gltf accessible ici.

Voilà le code :

<!DOCTYPE html>
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
    <a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - example for a-frame
    <br/>
    Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
    <a-scene embedded arjs='sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
        <!-- handle unknown marker -->
        <!-- <a-marker type='unknown'>
            <a-box depth="1" height="1" width="1" position='0 0.5 0' material='opacity: 0.5; side:double; color:blue;'></a-box>
        </a-marker> -->

        <!-- handle hiro marker -->
        <a-marker preset='hiro'>
            <a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:red;'>
                <a-torus-knot radius='0.26' radius-tubular='0.05'>
                    <a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
                </a-torus-knot>
            </a-box>
        </a-marker>

        <!-- handle matrix marker -->
        <a-marker type='barcode' value='5'>
            <a-box position='0 0.5 0' material='opacity: 0.5; side: double;color:pink;'>
                <a-torus-knot radius='0.26' radius-tubular='0.05'>
                    <a-animation attribute="rotation" to="360 0 0" dur="5000" easing='linear' repeat="indefinite"></a-animation>
                </a-torus-knot>
            </a-box>
        </a-marker>
        
        <!-- Partie consacrée au contenu -->
        <a-assets>
        <!-- id="nom de votre fichier" src="l'adresse url de votre fichier" -->
            <a-asset-item id="makery" src="makery.gltf"></a-asset-item>
        </a-assets>
        
        <!-- handle kanji marker -->
        <a-marker preset='kanji'>
            <!-- les valeurs de scale permettent d'ajuster la taille d'affichage du fichier, gltf-model="#nom de votre fichier" -->
        <a-entity scale="200 200 200" gltf-model="#makery"></a-entity>
        </a-marker>
        
        <!-- add a simple camera -->
        <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

Ce code fonctionne avec le fichier 3d du tutoriel, en revanche cela ne fonctionne pas avec le fichier 3D du chat.

J’ai obtenu ce fichier sous le format .obj : https://www.tinkercad.com/things/jqCgiw6MNyg-cat puis je l’ai converti grâce à ce site : https://blackthread.io/gltf-converter/

Pensez-vous que le problème d’affichage vient de là ? si oui connaissez-vous de meilleurs convertisseurs ?

Merci d’avance pour vos réponses ^^Et si je n’ai pas été clair n’hésitez pas à me le dire :)

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte