CODEWITHSUNDEEP
three.jsstlgltf
wr0ngway
wr0ngway

Reputation: 198

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

I'm trying to use three.js to convert existing stls to gltf for use with the Android scene viewer (model-viewer component). However, the gltf I export fails to work with https://arvr.google.com/scene-viewer-preview with the error message "The glTF contains a vertex color, which is not supported by the Scene Viewer specification." It also fails when I load on an android phone using the model-viewer component, when I hit the AR button.

If I export a simple cube BoxBufferGeometry as gltf, that works in scene-viewer. However if I export a BoxGeometry (not Buffered) that also gives the vertex color error.

How do I tell three.js to not include vertex colors in the exported gltf?

The below code is what I'm using - the exportGLTF function is copied from the three.js examples. The stl file is just somthing simple I created from 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);

Upvotes: 1

Views: 786

Answers (1)

brianpeiris
brianpeiris

Reputation: 10795

If you don't care about the vertex colors, you can just delete that attribute from the BufferGeometry that STLLoader produces. I found that Scene Viewer also doesn't like that the geometry is non-indexed. You can work around that with the mergeVertices function in BufferGeometryUtils.

Here's a working example: 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);
  }
);

Upvotes: 2

Related Questions