javascriptthree.jsaframe

A-Frame / THREE.js, Simplify modifier on gltf[glb] models


One of the examples in three simplify modifier found here https://github.com/mrdoob/three.js/blob/dev/examples/js/modifiers/SimplifyModifier.js

I understand it takes in a geometry, and simplifies it.

is there a way to do this with a gltf model?


Solution

  • Yes — refer to the simplifier example for full code, but the gist is that you can use SimplifyModifier as usual, except that you need to traverse the model in case it contains multiple meshes:

    const loader = new THREE.GLTFLoader();
    loader.load( 'foo.glb', function ( gltf ) {
    
      const model = gltf.scene;
      const modifer = new THREE.SimplifyModifier();
    
      model.traverse( function ( o ) {
      
        if ( o.isMesh ) {
    
          const numVertices = o.geometry.attributes.position.count;
          o.geometry = modifer.modify( o.geometry, Math.floor( numVertices * 0.9375 ) );
    
        }
    
      } );
    
      scene.add( model );
    
    }, undefined, function ( e ) {
    
          console.error( e );
    
    } );