GLB/GLTF model exported with GLTFExporter will not display correctly in Google AR but shows no errors in other viewers

Questions
1

I’m using three.js to generate a 3D model and export it as GLB or GLTF using THREE.GLTFExporter. Goal is to make it viewable on our site using google AR.

https://kaboomlaser.com/pages/ar-test (link to files)

The model looks perfectly fine when I view it in https://sandbox.babylonjs.com/ or other GLTF/glb viewers.

See here: https://gltf-viewer.donmccurdy.com/#model=https://cdn.shopify.com/s/files/1/0290/5459/9273/files/test.glb

but when I open it in Googles AR scene previewer https://vr.google.com/scene-viewer-preview , it ends up empty. Other models I tried did show up in scene previewer, but with the meshes all spiky and weird.

Below the code I used to reproduce the issue with a simple model. (This outputs the models in the link above).

What am I missing?

    var x = 0, y = 0;
        var heartShape = new THREE.Shape();
        heartShape.moveTo(x + 5, y + 5);
        heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
        heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
        heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
        heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
        heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
        heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);

        var geometry = new THREE.ExtrudeBufferGeometry(heartShape, {
            depth: 4, bevelEnabled: false,
            bevelThickness: 0.4,
            bevelSize: 0.4,
            steps: 2,
            BevelSegments: 2,
            curveSegments: 10
        });

        var material = new THREE.MeshLambertMaterial({ color: 0xa00A0A });
        var mesh = new THREE.Mesh(geometry, material);

        var scene = new THREE.Scene();
        scene.add(mesh);

        const options = {
            binary: true,
            forceIndices: true
        };

        var exporter = new GLTFExporter();

        exporter.parse(scene, function (data) {
            if (options.binary) {
                savetoFile(data, 'test.glb', 'model/gltf-binary');
            }
            else {
                savetoFile(JSON.stringify(data), 'test.gltf', 'text/plain');
            }
        },
        options);
2

/cc

3

If the model works in other viewers and passes the official glTF validator (https://github.khronos.org/glTF-Validator/) then I think you will need to report this as a bug in the Google AR viewer.

1 Like