Search code examples
htmlaframegltf

gltf file not showing in Aframe


I have two files, an glTF and OBJ file. I'm using Glitch to develop and I uploaded both of them to my assets folder.

When I read my marker, only the OBJ file is displayed.

<!DOCTYPE html>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs="debugUIEnabled: false;" vr-mode-ui="enabled: false" light="defaultLightsEnabled: true">
        <a-assets>
            <a-asset-item id="tree-gltf" src="https://cdn.glitch.com.....gltf"></a-asset-item>
            <a-asset-item id="db-mtl" src="https://cdn.glitch.com.....mtl"></a-asset-item>
            <a-asset-item id="db-obj" src="https://cdn.glitch.com....obj"></a-asset-item>
        </a-assets>
        <a-marker preset="kanji">
            <a-gltf-model src="#tree-gltf"></a-gltf-model>
            <a-obj-model src="#db-obj" mtl="#db-mtl" position="0 1.8 0"
                animation="property: rotation; to: 0 360 0; loop: true; dur: 6000"></a-obj-model>
        </a-marker>
        <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

I don't get any errors in my console. Is just not showing up.


Solution

  • If you open up the .gltf file - you will find the .bin and textures are referenced with relative file paths.

    The glitch "assets" folder is not a real directory - the files within have different paths, that possibly are nowhere near each other.

    Try:

    1. Converting your model to .glb which just contains all resources and dependancies
    2. Throwing the model on a github repository, where paths are relative
    3. Editing the .gltf file by replacing the .bin, and texture paths with glitch asset links.