Three.js: Applying anisotropic filtering on gltf model's texture

Created on 19 Nov 2017  路  3Comments  路  Source: mrdoob/three.js

I'm loading my gltf models into ar.js as the following. The models are binary gltf files with baked in textures. But seems like it's not applying any anisotropic filtering to the model. I also tried separate textures exported with collada2gltf, but then the model doesn't appeared (I think the texture is missing in this case):

const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
const loader = new THREE.GLTFLoader();
loader.load(
    // resource URL
    `${url}/model.glb`,
    // called when the resource is loaded
    (data) => {
        const gltf = data;
        const object = gltf.scene;
        object.anisotropy = maxAnisotropy;
        arWorldRoot.add(object);
    },
    // called when loading is in progresses
    (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
    },
    // called when loading has errors
    (error) => {
        console.log(`An error happened: ${error}`);
    },
);
Help (please use the forum)

Most helpful comment

Oops, my fault. If the material of a mesh does not have a diffuse map, map is null.

const scene = gltf.scene;

scene.traverse( ( object ) => {

   if ( object.isMesh === true && object.material.map !== null ) {

      object.material.map.anisotropy = maxAnisotropy;

   }

} );

All 3 comments

anisotropy is a property of Texture not Object3D. Try something like this:

const scene = gltf.scene;

scene.traverse( ( object ) => {

   if ( object.isMesh === true ) {

      object.material.map.anisotropy = maxAnisotropy;

   }

} );

Note: If object.material is an array of materials, the code needs a little enhancement.

Thank You for your help! It works:

const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
const loader = new THREE.GLTFLoader();
loader.load(
    // resource URL
    `${url}/model.glb`,
    // called when the resource is loaded
    (data) => {
        const gltf = data;
        const model = gltf.scene || gltf.scenes[0];
        model.traverse((object) => {
            const obj = object;
            if (obj.isMesh === true) {
            //if (obj instanceof THREE.Mesh) {
                obj.material.map.anisotropy = maxAnisotropy;
            }
            const scale = 1;
            obj.scale.set(scale, scale, scale);
            obj.rotation.y = 90 * (Math.PI / 180);
            arWorldRoot.add(obj);
        });
    },
    // called when loading is in progresses
    (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% loaded`);
    },
    // called when loading has errors
    (error) => {
        console.log(`An error happened: ${error}`);
    },
);

Some model dropping An error happened: TypeError: obj.material.map is null errors into the console, some not. Probably this is connected to If object.material is an array of materials, the code needs a little enhancement.?

Oops, my fault. If the material of a mesh does not have a diffuse map, map is null.

const scene = gltf.scene;

scene.traverse( ( object ) => {

   if ( object.isMesh === true && object.material.map !== null ) {

      object.material.map.anisotropy = maxAnisotropy;

   }

} );
Was this page helpful?
0 / 5 - 0 ratings