如何导出适用于 Android 场景查看器的 gltf？

Question

我正在尝试使用 three.js 将现有的 stls 转换为 gltf，以便与 Android 场景查看器（模型查看器组件）一起使用。但是，我导出的 gltf 无法与 https://arvr.google.com/scene-viewer-preview 一起使用，并显示错误消息 "The glTF contains a vertex color, which is not supported by the Scene Viewer specification." 当我使用模型查看器组件加载 android phone 时，它也会失败，当我按下了 AR 按钮。

如果我将一个简单的立方体 BoxBufferGeometry 导出为 gltf，它可以在场景查看器中使用。但是，如果我导出也会给出顶点颜色错误的 BoxGeometry（未缓冲）。

如何告诉 three.js 在导出的 gltf 中不包含顶点颜色？

下面的代码是我正在使用的 - exportGLTF 函数是从 three.js 示例中复制的。 stl 文件只是我从 Fusion 360 创建的一些简单的东西。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var loader = new THREE.STLLoader();
loader.load( 'table.stl', function ( geometry ) {
    var material = new THREE.MeshStandardMaterial();
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    exportGLTF(mesh);
}, undefined, function ( error ) {

    console.error( error );

} );

var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshStandardMaterial();
cube = new THREE.Mesh( geometry, material );
cube.position.set( 0, 0, 0 );
cube.name = "Cube";
scene.add( cube );
exportGLTF(cube);

Answer 1

如果您不关心顶点颜色，您可以从 STLLoader 生成的 BufferGeometry 中删除该属性。我发现 Scene Viewer 也不喜欢几何体是非索引的。您可以使用 BufferGeometryUtils 中的 mergeVertices 函数来解决这个问题。

这是一个工作示例：https://glitch.com/edit/#!/chartreuse-steed

var loader = new THREE.STLLoader();
loader.load(
  stlUrl,
  function(geometry) {
    // Delete vertex colors, since Scene Viewer doesn't support them.
    geometry.deleteAttribute("color");

    // Apparently Scene Viewer also doesn't support non-indexed geometry,
    // so we do this mergeVertices operation just to get an indexed geometry
    geometry = THREE.BufferGeometryUtils.mergeVertices(geometry);

    var material = new THREE.MeshStandardMaterial();
    material.vertexColors = THREE.VertexColors;

    var mesh = new THREE.Mesh(geometry, material);

    scene.add(mesh);

    exportGLTF(mesh);
  },
  undefined,
  function(error) {
    console.error(error);
  }
);

如何导出适用于 Android 场景查看器的 gltf？

How do I export a gltf that works with Andorid scene-viewer?

stl

three.js

gltf