three.js - GLB/GLTF 模型在 Google AR 中无法正确显示，但在其他查看器中未显示错误

问题描述

我正在使用three.js 生成3D 模型并使用THREE.GLTFExporter 将其导出为GLB 或GLTF。目标是使用 google AR 使其在我们的网站上可见。

https://kaboomlaser.com/pages/ar-test （文件链接）

当我在https://sandbox.babylonjs.com/ 或其他 GLTF/glb 查看器中查看该模型时，它看起来非常好。

见这里：https ://gltf-viewer.donmccurdy.com/#model=https://cdn.shopify.com/s/files/1/0290/5459/9273/files/test.glb

但是当我在谷歌的 AR 场景预览器https://vr.google.com/scene-viewer-preview中打开它时，它最终是空的。我尝试过的其他模型确实出现在场景预览器中，但网格都是尖刺而奇怪的。

在我用来用简单模型重现问题的代码下方。（这会输出上面链接中的模型）。

我错过了什么？

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);

标签： three.jsarcore

three.js - GLB/GLTF 模型在 Google AR 中无法正确显示，但在其他查看器中未显示错误

问题描述

解决方案

推荐阅读