Question

我正在尝试使用three.js将现有的stls转换为gltf，以便与Android场景查看器（模型查看器组件）一起使用。但是，我导出的gltf无法与https://arvr.google.com/scene-viewer-preview一起使用，并显示错误消息“ glTF包含顶点颜色，Scene Viewer规范不支持该颜色。”当我按下AR按钮时，当我使用Model-viewer组件在Android手机上加载时，也会失败。

如果我将简单的多维数据集BoxBufferGeometry导出为gltf，则可在场景查看器中使用。但是，如果我导出一个BoxGeometry（非缓冲），它也会给出顶点颜色错误。

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

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

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

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

1 个答案: